[WIP] Added AST transformation on container component #2

sthzg · Jul 18, 2016 · 022c692 · 022c692
1 parent 58aca26
commit 022c692
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/generators/container/index.js b/generators/container/index.js
@@ -7,12 +7,9 @@
 const acorn                       = require('acorn-jsx');
 const escodegen                   = require('escodegen-wallaby');
 const esformatter                 = require('esformatter');
-const esDefaultOpts               = require('esformatter/lib/preset/default.json');
 const fs                          = require('fs');
 const generators                  = require('yeoman-generator');
 const gulpfilter                  = require('gulp-filter');
-const gulpif                      = require('gulp-if');
-const jp                          = require('jsonpath');
 const lodash                      = require('lodash');
 const path                        = require('path');
 
@@ -58,6 +55,11 @@ class ContainerGenerator extends generators.Base {
       args: this.args
     });
 
+    this.composeWith('react-webpack:component', {
+      options: Object.assign({}, this.options),
+      args: [this.cmpName]
+    });
+
   }
 
   writing() {

diff --git a/generators/container/transform.js b/generators/container/transform.js
@@ -10,10 +10,19 @@ const lodash                      = require('lodash');
 const through                     = require('through2');
 
 
+/**
+ * Builds an AST Node for the component import statement.
+ * @param cmpName
+ * @returns {*}
+ */
 function buildCmpImportNode(cmpName) {
   return acorn.parse(`import ${cmpName} from './${cmpName}';`, { sourceType: 'module' }).body[0];
 }
 
+/**
+ * Change return statement in Container's render method.
+ * @param cmpName
+ */
 function buildCmpRender(cmpName) {
   return acorn.parse(`<${cmpName} />`, { plugins: { jsx: true } });
 }
@@ -59,19 +68,25 @@ module.exports = function (cntName, cmpName) {
         }
       },
       "jsx": {
-        "formatJSX": true,
+        "formatJSX": false,
         "attrsOnSameLineAsTag": false,
         "maxAttrsOnTag": 3,
-        "firstAttributeOnSameLine": true,
-        "formatJSXExpressions": true,
+        "firstAttributeOnSameLine": false,
+        "formatJSXExpressions": false,
         "JSXExpressionsSingleLine": true,
         "alignWithFirstAttribute": false,
         "spaceInJSXExpressionContainers": " ",
         "removeSpaceBeforeClosingJSX": false,
         "htmlOptions": {}
       }
     });
-    const formatted = esformatter.format('\'use strict\';\n\n' + jsFromAst, styleOpts);
+
+    const esFormatted = esformatter.format(jsFromAst, styleOpts);
+
+    // With the existing tools I haven't found a way to format <Foo/> as <Foo />. The space before the closing
+    // bracket is required for the Airbnb eslint rules to validate the file. The following replace() just adds that
+    // in manually. Hopefully this can be replaced with a slution integrated into the above tooling sometime.
+    const formatted = esFormatted.replace(/(<[\w]*)(\/>)/g, '$1 $2');
 
     file.contents = new Buffer(formatted);