Commit 21c39275 authored by Jeff Avallone's avatar Jeff Avallone

Stubbing out parsing and starting on rendering flow

parent 3378c68a
......@@ -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 } =&gt; { expr }</Text>
</SVG>
{ render(parsed, { onReflow: this.provideSVGData }) }
</div>;
}
}
......
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
};
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
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment