Use shorthand method syntax; outsource final page rendering to Hogan;

get the umd module to resolve 'react' to 'React'; provide custom code
formatters to Pattern Lab's file writer

Author: geoffp

lib/engine_react.js

@@ -19,17 +19,28 @@
 
 "use strict";
 
+const fs = require('fs');
+const path = require('path');
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const Babel = require('babel-core');
+const Hogan = require('hogan.js');
+const beautify = require('js-beautify');
+const cheerio = require('cheerio');
+
+const outputTemplate = Hogan.compile(
+  fs.readFileSync(
+    path.join(__dirname, './outputTemplate.mustache'),
+    'utf8'
+  )
+);
 
 var engine_react = {
   engine: React,
   engineName: 'react',
   engineFileExtension: '.jsx',
 
-  // partial expansion is only necessary for React templates that have
-  // style modifiers or pattern parameters (I think)
+  // hell no
   expandPartials: false,
 
   // regexes, stored here so they're only compiled once
@@ -40,7 +51,7 @@ var engine_react = {
   findPartialRE: null,
 
   // render it
-  renderPattern: function renderPattern(pattern, data, partials) {
+  renderPattern(pattern, data, partials) {
     try {
       /* eslint-disable no-eval */
       const componentString = pattern.template || pattern.extendedTemplate;
@@ -50,40 +61,19 @@ var engine_react = {
       });
       const runtimeComponent = Babel.transform(componentString, {
         presets: [ require('babel-preset-react') ],
-        plugins: [ require('babel-plugin-transform-es2015-modules-umd') ]
+        plugins: [[require('babel-plugin-transform-es2015-modules-umd'), {
+          globals: {
+            "react": "React"
+          }
+        }]]
       });
       const Component = React.createFactory(eval(nodeComponent.code));
-      const output = ReactDOMServer.renderToStaticMarkup(Component(data));
-
-      return `<div id="reactContainer">
-
-<!-- pattern HTML -->
-${output}
-
-</div>
-
-
-
 
-<!-- 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>`;
+      return outputTemplate.render({
+        json: JSON.stringify(data),
+        htmlOutput: ReactDOMServer.renderToStaticMarkup(Component(data)),
+        runtimeCode: runtimeComponent.code
+      });
     }
     catch (e) {
 	    console.log("Error rendering React pattern.", e);
@@ -98,7 +88,7 @@ ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), documen
    * @param {object} regex A JavaScript RegExp object.
    * @returns {array|null} An array if a match is found, null if not.
    */
-  patternMatcher: function patternMatcher(pattern, regex) {
+  patternMatcher(pattern, regex) {
     var matches;
     if (typeof pattern === 'string') {
       matches = pattern.match(regex);
@@ -109,32 +99,42 @@ ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), documen
   },
 
   // find and return any {{> template-name }} within pattern
-  findPartials: function findPartials(pattern) {
+  findPartials(pattern) {
     return [];
   },
-  findPartialsWithStyleModifiers: function (pattern) {
+  findPartialsWithStyleModifiers(pattern) {
     return [];
   },
 
   // returns any patterns that match {{> value(foo:"bar") }} or {{>
   // value:mod(foo:"bar") }} within the pattern
-  findPartialsWithPatternParameters: function (pattern) {
+  findPartialsWithPatternParameters(pattern) {
     return [];
   },
-  findListItems: function (pattern) {
+  findListItems(pattern) {
     return [];
   },
 
   // given a pattern, and a partial string, tease out the "pattern key" and
   // return it.
-  findPartial_new: function (partialString) {
+  findPartial(partialString) {
     return [];
   },
 
-  // GTP: the old implementation works better. We might not need
-  // this.findPartialRE anymore if it works in all cases!
-  findPartial: function (partialString) {
+  rawTemplateCodeFormatter(unformattedString) {
+    console.log('rawTemplateCodeFormatter()');
+    return beautify(unformattedString, {e4x: true, indent_size: 2});
+  },
+
+  renderedCodeFormatter(unformattedString) {
+    console.log('renderedCodeFormatter()');
+    return unformattedString;
+  },
 
+  markupOnlyCodeFormatter(unformattedString) {
+    const $ = cheerio.load(unformattedString);
+    console.log('markupOnlyCodeFormatter()');
+    return beautify.html($('#reactContainer').html(), {indent_size: 2});
   }
 };
 

lib/outputTemplate.mustache

@@ -0,0 +1,18 @@
+<div id="reactContainer">
+  {{{htmlOutput}}}
+</div>
+
+<!-- pattern JSON (React props) -->
+<script id="patternJSON" type="application/json">
+  {{{json}}}
+</script>
+
+<!-- runtime React output -->
+<script>
+  {{{runtimeCode}}};
+
+  <!-- runtime rendering -->
+  var component = unknown.default;
+  var patternJSON = document.getElementById('patternJSON').textContent;
+  ReactDOM.render(React.createElement(component, JSON.parse(patternJSON)), document.getElementById('reactContainer'));
+</script>

package.json

@@ -5,9 +5,13 @@
   "main": "lib/engine_react.js",
   "dependencies": {
     "babel-core": "^6.17.0",
+    "babel-plugin-module-alias": "^1.6.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",
+    "cheerio": "^0.22.0",
+    "hogan": "^1.0.2",
+    "js-beautify": "^1.6.4",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"
   },