Merge branch 'dev'

Author: geoffp

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,90 @@
+{
+  "env": {
+    "node": true,
+    "builtin": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "globals": {},
+  "rules": {
+    "block-scoped-var": 0,
+    "camelcase": 0,
+    "comma-spacing": [1, {"before": false, "after": true}],
+    "consistent-return": 2,
+    "curly": [2, "all"],
+    "dot-notation": [1, { "allowKeywords": true }],
+    "eqeqeq": [2, "allow-null"],
+    "global-strict": [0, "never"],
+    "guard-for-in": 2,
+    "indent": [1, 2, {"SwitchCase": 1, "VariableDeclarator": 1}],
+    "lines-around-comment": [1, {
+      "beforeBlockComment": true,
+      "beforeLineComment": true,
+      "allowBlockStart": true,
+      "allowObjectStart": true,
+      "allowArrayStart": true
+    }],
+    "key-spacing": 0,
+    "keyword-spacing": 1,
+    "new-cap": 0,
+    "no-alert": 2,
+    "no-bitwise": 2,
+    "no-caller": 2,
+    "no-cond-assign": [2, "except-parens"],
+    "no-debugger": 2,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-empty": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 1,
+    "no-iterator": 2,
+    "no-loop-func": 2,
+    "no-mixed-requires": 0,
+    "no-multi-str": 2,
+    "no-multi-spaces": 1,
+    "no-native-reassign": 2,
+    "no-new": 2,
+    "no-param-reassign": 1,
+    "no-proto": 2,
+    "no-redeclare": 0,
+    "no-script-url": 2,
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-undef": 2,
+    "no-underscore-dangle": 0,
+    "no-unreachable": 1,
+    "no-unused-vars": 1,
+    "no-use-before-define": 1,
+    "no-useless-call": 2,
+    "no-useless-concat": 2,
+    "no-with": 2,
+    "quotes": [0, "single"],
+    "radix": 2,
+    "semi": [0, "never"],
+    "strict": 0,
+    "space-before-blocks": 1,
+    "space-before-function-paren": [1, {
+      "anonymous": "always",
+      "named": "never"
+    }],
+    "space-in-parens": [1, "never"],
+    "space-infix-ops": 1,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "inside"]
+  }
+}

README.md

@@ -1,4 +1,23 @@
-# The React engine for Patternlab/Node
+# patternengine-node-react
+The (**very preliminary almost not-working-at-all**) React engine for Patternlab/Node
 
 ## Status
-This engine is experimental and at present is still non-functional -- development is taking place in the `dev` branch.
+You can author standalone React components that include only the main React module, which I know isn't much yet. We're still working out how React components will resolve and load the modules they depend on, including other patterns. We believe this is tricky, but doable.
+
+## Supported features
+Kind of nothing works yet. **Very early in development.**
+
+- [ ] [Includes](http://patternlab.io/docs/pattern-including.html)
+- [ ] Lineage
+- [ ] [Hidden Patterns](http://patternlab.io/docs/pattern-hiding.html)
+- [ ] [Pseudo-Patterns](http://patternlab.io/docs/pattern-pseudo-patterns.html)
+- [ ] [Pattern States](http://patternlab.io/docs/pattern-states.html)
+- [ ] [Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
+- [ ] [Style Modifiers](http://patternlab.io/docs/pattern-stylemodifier.html)
+
+## Usage
+
+* `*.jsx` files are detected as patterns.
+* Standard pattern JSON is passed into React components as props.
+* We currently assume the React include (and others, once we figure that out) are written using es2015 module syntax.
+* The Babel transforms are currently hard-coded into the engine, but we hope to make this configurable in the future.

lib/engine_react.js

@@ -0,0 +1,149 @@
+/*
+ * react pattern engine for patternlab-node - v0.1.0 - 2016
+ *
+ * Geoffrey Pursell, Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+/*
+ * ENGINE SUPPORT LEVEL:
+ *
+ * Full + extensions. Partial calls and lineage hunting are supported. Style
+ * modifiers and pattern parameters are used to extend the core feature set of
+ * React templates.
+ *
+ */
+
+"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',
+
+  // hell no
+  expandPartials: false,
+
+  // regexes, stored here so they're only compiled once
+  findPartialsRE: null,
+  findPartialsWithStyleModifiersRE: null,
+  findPartialsWithPatternParametersRE: null,
+  findListItemsRE: null,
+  findPartialRE: null,
+
+  // render it
+  renderPattern(pattern, data, partials) {
+    try {
+      /* eslint-disable no-eval */
+      const componentString = pattern.template || pattern.extendedTemplate;
+      const nodeComponent = Babel.transform(componentString, {
+        presets: [ require('babel-preset-react') ],
+        plugins: [ require('babel-plugin-transform-es2015-modules-commonjs') ]
+      });
+      const runtimeComponent = Babel.transform(componentString, {
+        presets: [ require('babel-preset-react') ],
+        plugins: [[require('babel-plugin-transform-es2015-modules-umd'), {
+          globals: {
+            "react": "React"
+          }
+        }]]
+      });
+      const Component = React.createFactory(eval(nodeComponent.code));
+
+      return outputTemplate.render({
+        patternPartial: pattern.patternPartial,
+        json: JSON.stringify(data),
+        htmlOutput: ReactDOMServer.renderToStaticMarkup(Component(data)),
+        runtimeCode: runtimeComponent.code
+      });
+    }
+    catch (e) {
+	    console.log("Error rendering React pattern.", e);
+	    return "";
+    }
+  },
+
+  /**
+   * Find regex matches within both pattern strings and pattern objects.
+   *
+   * @param {string|object} pattern Either a string or a pattern object.
+   * @param {object} regex A JavaScript RegExp object.
+   * @returns {array|null} An array if a match is found, null if not.
+   */
+  patternMatcher(pattern, regex) {
+    var matches;
+    if (typeof pattern === 'string') {
+      matches = pattern.match(regex);
+    } else if (typeof pattern === 'object' && typeof pattern.template === 'string') {
+      matches = pattern.template.match(regex);
+    }
+    return matches;
+  },
+
+  // find and return any {{> template-name }} within pattern
+  findPartials(pattern) {
+    return [];
+  },
+  findPartialsWithStyleModifiers(pattern) {
+    return [];
+  },
+
+  // returns any patterns that match {{> value(foo:"bar") }} or {{>
+  // value:mod(foo:"bar") }} within the pattern
+  findPartialsWithPatternParameters(pattern) {
+    return [];
+  },
+  findListItems(pattern) {
+    return [];
+  },
+
+  // given a pattern, and a partial string, tease out the "pattern key" and
+  // return it.
+  findPartial(partialString) {
+    return [];
+  },
+
+  rawTemplateCodeFormatter(unformattedString) {
+    return beautify(unformattedString, {e4x: true, indent_size: 2});
+  },
+
+  renderedCodeFormatter(unformattedString) {
+    return unformattedString;
+  },
+
+  markupOnlyCodeFormatter(unformattedString, pattern) {
+    const $ = cheerio.load(unformattedString);
+    return beautify.html($('.reactPatternContainer').html(), {indent_size: 2});
+  },
+
+  /**
+   * Add custom output files to the pattern output
+   * @param {object} patternlab - the global state object
+   * @returns {(object|object[])} - an object or array of objects,
+   * each with two properties: path, and content
+   */
+  addOutputFiles(paths, patternlab) {
+    return [];
+  }
+};
+
+module.exports = engine_react;

lib/outputTemplate.mustache

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

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "patternengine-node-react",
+  "description": "The React engine for Pattern Lab / Node",
+  "version": "0.1.0",
+  "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"
+  },
+  "devDependencies": {},
+  "keywords": [
+    "Pattern Lab",
+    "Atomic Web Design",
+    "Node",
+    "Gulp",
+    "Javascript",
+    "React"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pattern-lab/patternengine-node-react.git"
+  },
+  "bugs": "https://github.com/pattern-lab/patternlab-node/issues",
+  "author": "Brian Muenzenmeyer & Geoffrey Pursell",
+  "license": "MIT",
+  "scripts": {
+    "test": "grunt travis --verbose"
+  },
+  "engines": {
+    "node": ">=4.4"
+  }
+}