feat: enable data-component-custom, do not generate redux connections

Chun-Yang · Chun-Yang · commit fe69ea5b7368 · 2016-08-24T15:59:09.000-05:00
diff --git a/data-attributes.README.md b/data-attributes.README.md
@@ -95,20 +95,26 @@
 
   FROM:
   ```
-  <div
-    data-component-name="Login"
-    data-component-custom="true">
-  </div>
+  // data-component-custom.html
+  <html>
+  <body>
+    <div data-component-name="Login" data-component-custom="true">
+      <form>
+        <input type="text" id="user" />
+      </form>
+    </div>
+  </body>
+  </html>
   ```
 
   TO:
   ```
-  // Login.jsx
+  // DataComponentCustom.jsx
   import React from 'react';
 
-  export default class Login extends React.Component {
+  export default class DataComponentCustom extends React.Component {
     render () {
-      return null;
+      return <div><Login/></div>;
     }
   }
   ```
diff --git a/examples/test-expected/data-component-custom/generated/components/DataComponentCustom.jsx b/examples/test-expected/data-component-custom/generated/components/DataComponentCustom.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Login from './Login';
+import custom from '../../custom/index';
+
+class DataComponentCustom extends React.Component {
+  render() {
+    return (
+      <div>
+        <Login></Login>
+      </div>
+      );
+  }
+}
+;
+
+const customize = custom['components/DataComponentCustom'] || ((x) => x);
+const DataComponentCustomWithCustom = customize(DataComponentCustom, {
+  React,
+  Login
+});
+
+export default DataComponentCustomWithCustom;
diff --git a/examples/test/data-component-custom.html b/examples/test/data-component-custom.html
@@ -0,0 +1,9 @@
+<html>
+<body>
+  <div data-component-name="Login" data-component-custom="true">
+    <form>
+      <input type="text" id="user" />
+    </form>
+  </div>
+</body>
+</html>
diff --git a/lib/plugins/redux/process-each-jsx-snippet/index.js b/lib/plugins/redux/process-each-jsx-snippet/index.js
@@ -2,6 +2,7 @@ const traverse = require('babel-traverse').default;
 const processHtmlAction = require('./process-html-action');
 const processErrorExplanation = require('./process-error-explanation');
 const processValue = require('./process-value');
+const getAttr = require('../../../helpers/get-attr');
 
 function addStateAndAction(
   { nodeState, nodeAction }, state, action
@@ -23,6 +24,10 @@ module.exports = function processEachJsxSnippet({ component, components, options
 
   traverse(ast, {
     JSXElement({ node }) {
+      const isCustom = getAttr({ node, name: 'data-component-custom' });
+      if (isCustom) {
+        return true;
+      }
       addStateAndAction(processHtmlAction({ component, node }), state, action);
       addStateAndAction(processErrorExplanation({ component, node }), state, action);
       addStateAndAction(processValue({ component, node }), state, action);
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "semantic-release": "^4.3.5"
   },
   "dependencies": {
+    "babel-traverse": "git://github.com/poetic/babel-traverse.git#3272f03380b22ebf1608b0a9b89bff991c746695",
     "babel-generator": "^6.11.0",
     "babylon": "^6.8.2",
     "chalk": "^1.1.3",
diff --git a/test/integration/data-component-custom.js b/test/integration/data-component-custom.js
@@ -0,0 +1,16 @@
+/* eslint-env mocha */
+const assert = require('chai').assert;
+const reacterminator = require('../../lib/index');
+const { checkFiles } = require('../helpers');
+
+describe('data-component-custom', function () {
+  it('should create an empty custom component', function () {
+    checkFiles({
+      inputPath: './examples/test/data-component-custom.html',
+      outputDir: 'data-component-custom',
+      outputFiles: [
+        'generated/components/DataComponentCustom.jsx',
+      ]
+    });
+  });
+});
