Stubbing out parsing and starting on rendering flow
This commit is contained in:
parent
3378c68aed
commit
21c392752e
@ -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>
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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' }
|
||||
|
@ -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 } => { expr }</Text>
|
||||
</SVG>
|
||||
{ render(parsed, { onReflow: this.provideSVGData }) }
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user