Stubbing out parsing and starting on rendering flow

This commit is contained in:
Jeff Avallone 2019-01-26 16:36:43 -05:00
parent 3378c68aed
commit 21c392752e
6 changed files with 83 additions and 21 deletions

View File

@ -21,9 +21,9 @@ exports[`App removing rendered expression 1`] = `
>
<LoadNamespace(FormActions) />
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
<Render
onRender={[Function]}
parsed="PARSED(test expression)"
/>
</Fragment>
`;
@ -138,9 +138,9 @@ exports[`App rendering an expression 3`] = `
>
<LoadNamespace(FormActions) />
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
<Render
onRender={[Function]}
parsed="PARSED(test expression)"
/>
</Fragment>
`;
@ -166,9 +166,9 @@ exports[`App rendering image details 1`] = `
>
<LoadNamespace(FormActions) />
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
<Render
onRender={[Function]}
parsed="PARSED(test expression)"
/>
</Fragment>
`;
@ -200,9 +200,9 @@ exports[`App rendering image details 2`] = `
}
/>
</LoadNamespace(Form)>
<RenderJS
expr="test expression"
<Render
onRender={[Function]}
parsed="PARSED(test expression)"
/>
</Fragment>
`;

View File

@ -68,16 +68,19 @@ class App extends React.PureComponent {
});
try {
const Component = await import(
const syntaxModule = await import(
/* webpackChunkName: "render-[index]" */
`syntax/${ syntax }`
);
const parsed = syntaxModule.parse(expr);
this.setState({
loading: false,
render: {
syntax,
Component: Component.default
parsed,
Component: syntaxModule.Render
}
});
}
@ -116,6 +119,7 @@ class App extends React.PureComponent {
imageDetails,
render: {
syntax: renderSyntax,
parsed,
Component
}
} = this.state;
@ -133,7 +137,7 @@ class App extends React.PureComponent {
};
const renderProps = {
onRender: this.handleSvg,
expr
parsed
};
const doRender = renderSyntax === syntax;

View File

@ -4,6 +4,11 @@ import { shallow } from 'enzyme';
import { mockT } from 'i18n';
import { App } from 'components/App';
jest.mock('syntax/js', () => ({
parse: expr => `PARSED(${ expr })`,
Render: () => ''
}));
const syntaxList = [
{ id: 'testJS', label: 'Testing JS' },
{ id: 'other', label: 'Other' }

View File

@ -6,9 +6,29 @@ import Text from 'rendering/Text';
import style from './style.module.css';
const nodeTypes = {
SVG,
Text
};
const render = (data, extraProps) => {
if (typeof data === 'string') {
return data;
}
const { type, props } = data;
const children = (data.children || []).map(
(data, key) => render(data, { key }));
return React.createElement(
nodeTypes[type] || type,
{ ...extraProps, ...props },
children.length === 1 ? children[0] : children);
};
class Render extends React.PureComponent {
static propTypes = {
expr: PropTypes.string,
parsed: PropTypes.object.isRequired,
onRender: PropTypes.func.isRequired
}
@ -28,13 +48,10 @@ class Render extends React.PureComponent {
}
render() {
const { expr } = this.props;
const { parsed } = this.props;
// Demo rendering for now
return <div className={ style.render } ref={ this.svgContainer }>
<SVG onReflow={ this.provideSVGData }>
<Text>{ this.constructor.name } =&gt; { expr }</Text>
</SVG>
{ render(parsed, { onReflow: this.provideSVGData }) }
</div>;
}
}

View File

@ -1,5 +1,23 @@
import Render from 'components/Render';
class RenderJS extends Render {}
const parse = expr => {
return {
type: 'SVG',
children: [
{
type: 'Text',
props: {
quoted: true
},
children: [
`JS => ${ expr }`
]
}
]
};
};
export default RenderJS;
export {
parse,
Render
};

View File

@ -1,5 +1,23 @@
import Render from 'components/Render';
class RenderPCRE extends Render {}
const parse = expr => {
return {
type: 'SVG',
children: [
{
type: 'Text',
props: {
quoted: true
},
children: [
`PCRE => ${ expr }`
]
}
]
};
};
export default RenderPCRE;
export {
parse,
Render
};