Holy cow. It's ugly, but we've got server-side rendering and client-side

rendering on top of it. I'm probably doing it all wrong, but this is progress.

Author: geoffp

lib/engine_react.js

@@ -44,20 +44,48 @@ var engine_react = {
     try {
       /* eslint-disable no-eval */
       const componentString = pattern.template || pattern.extendedTemplate;
-      const transformedComponent = Babel.transform(componentString, {
-        presets: [
-          require('babel-preset-react')
-        ],
-        plugins: [
-          require('babel-plugin-transform-es2015-modules-commonjs')
-        ]
+      const nodeComponent = Babel.transform(componentString, {
+        presets: [ require('babel-preset-react') ],
+        plugins: [ require('babel-plugin-transform-es2015-modules-commonjs') ]
       });
-      const Component = React.createFactory(
-        eval(transformedComponent.code)
-      );
+      const runtimeComponent = Babel.transform(componentString, {
+        presets: [ require('babel-preset-react') ],
+        plugins: [ require('babel-plugin-transform-es2015-modules-umd') ]
+      });
+      const Component = React.createFactory(eval(nodeComponent.code));
+      const output = ReactDOMServer.renderToStaticMarkup(Component(data));
+
+      return `<div id="reactContainer">
+
+<!-- pattern HTML -->
+${output}
+
+</div>
+
+
 
-      return ReactDOMServer.renderToStaticMarkup(Component(data));
-    } catch (e) {
+
+<!-- pattern JSON (React props) -->
+<script id="patternJSON" type="application/json">
+${JSON.stringify(data)}
+</script>
+
+<!-- dependencies -->
+<script>
+var react = React;
+</script>
+
+<!-- runtime React output -->
+<script>
+${runtimeComponent.code};
+
+<!-- runtime rendering -->
+var component = unknown.default;
+var patternJSON = document.getElementById('patternJSON').textContent;
+ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), document.getElementById('reactContainer'));
+</script>`;
+    }
+    catch (e) {
 	    console.log("Error rendering React pattern.", e);
 	    return "";
     }

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "babel-core": "^6.17.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
     "babel-preset-react": "^6.16.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"