Stubbing out parsing and starting on rendering flow

src/components/App/__snapshots__/test.js.snap

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

src/components/App/index.js

@@ -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;

src/components/App/test.js

@@ -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' }

src/components/Render/index.js

@@ -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 }>
+      { render(parsed, { onReflow: this.provideSVGData }) }
-        <Text>{ this.constructor.name } =&gt; { expr }</Text>
-      </SVG>
     </div>;
   }
 }

src/syntax/js.js

@@ -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
+};

src/syntax/pcre.js

@@ -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
+};