generate custom files

poetic · Jul 27, 2016 · 7de9a34 · 7de9a34
1 parent ddb3726
commit 7de9a34
Show file tree

Hide file tree

Showing 29 changed files with 301 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -32,12 +32,14 @@ For example, you can add a `data-component-name` attribute to let
 reacterminator know that it is a react component:
 ```
 // file: example.html
-<div data-component-name="Unicorn"></div>
+<body>
+  <div data-component-name="Unicorn"></div>
+</body>
 ```
 
 Then let reacterminator do the chores:
 ```
-$ reacterminator -i example.html
+$ reacterminator convert example.html
 ```
 
 A file named 'Unicorn.jsx' will be generated at './components/Unicorn.jsx'
@@ -66,28 +68,34 @@ for a comprehensive example of what reacterminator is capable of.
 npm i -g reacterminator
 ```
 
+You can use `reacterminator` or `rt` for short.
+
 ```
-Usage: reacterminator [options]
+  Usage: reacterminator [options] [command]
+
+
+  Commands:
+
+    convert|c <path>   convert html files into react component files.
+    generate|g <path>  generate custom files.
+    help [cmd]         display help for [cmd]
 
-Convert annotated htmls to react component files
+  Convert html files to react components
 
-Options:
+  Options:
 
-  -h, --help                       output usage information
-  -i, --input-path <inputPath>     (REQUIRED) specify input path, it can be a file or a folder
-  -p, --output-path [./component]  specify output path
-  -r, --recursive                  find files in the input folder recursivly
-  -f, --file-to-component          create one component for each file, replace body with div tag
-  -R, --redux                      add redux support in the generator
+    -h, --help     output usage information
+    -V, --version  output the version number
 
-Examples:
+  Examples:
 
-  $ reacterminator -i design.html
-  $ reacterminator -i design/
+    $ reacterminator c design.html
+    $ reacterminator c design/
+    $ reacterminator g components/MyCustom
 
-Notes:
+  Notes:
 
-  If the input is a folder, the files ends with ignore.html will be ignored.
+    If the input is a folder, the files ends with -ignore.html will be ignored.
 ```
 
 ### NODE

diff --git a/bin/reacterminator-convert.js b/bin/reacterminator-convert.js
@@ -4,11 +4,6 @@ const program = require('commander')
 const reacterminator = require('../lib/index')
 
 const action = (path) => {
-  if (!path) {
-    console.error('ERROR: No path given!')
-    process.exit(1)
-  }
-
   reacterminator(
     {type: 'path', content: path},
     {

diff --git a/bin/reacterminator-generate.js b/bin/reacterminator-generate.js
@@ -0,0 +1,25 @@
+#! /usr/bin/env node
+
+const program = require('commander')
+const generate = require('../lib/generate/index')
+
+const action = (path) => {
+  generate(path)
+}
+
+program
+  .arguments('<path>')
+  .action(action)
+
+program.on('--help', () => {
+  console.log('<path> is the path you want to override in the generated folder.')
+  console.log('')
+  console.log('  Examples:')
+  console.log('')
+  console.log('    $ rc g reducers/my-path/my-reducer')
+  console.log('    $ rc g components/MyComponent')
+  console.log('')
+  process.exit(0)
+})
+
+program.parse(process.argv)
diff --git a/bin/reacterminator.js b/bin/reacterminator.js
@@ -18,8 +18,9 @@ program
 program.on('--help', () => {
   console.log('  Examples:')
   console.log('')
-  console.log('    $ reacterminator -i design.html')
-  console.log('    $ reacterminator -i design/')
+  console.log('    $ reacterminator c design.html')
+  console.log('    $ reacterminator c design/')
+  console.log('    $ reacterminator g components/MyCustom')
   console.log('')
   console.log('  Notes:')
   console.log('')

diff --git a/examples/test-expected/generate/custom/action-creators/unicorn/sumit-signup-form.js b/examples/test-expected/generate/custom/action-creators/unicorn/sumit-signup-form.js
@@ -0,0 +1,10 @@
+export default (base, { actionTypeConstants, store }) => (
+  (event) => {
+    const {  } = store.get();
+
+    return {
+      type: actionTypeConstants.unicorn.submitSignupForm,
+      value: event.target.value,
+    };
+  }
+);
diff --git a/examples/test-expected/generate/custom/action-type-constants/unicorn/change-email.js b/examples/test-expected/generate/custom/action-type-constants/unicorn/change-email.js
@@ -0,0 +1 @@
+export default () => 'UNICORN_CHANGE_EMAIL';
diff --git a/examples/test-expected/generate/custom/action-type-constants/unicorn/sumit-signup-form.js b/examples/test-expected/generate/custom/action-type-constants/unicorn/sumit-signup-form.js
@@ -0,0 +1 @@
+export default () => 'UNICORN_SUMIT_SIGNUP_FORM';
diff --git a/examples/test-expected/generate/custom/components/Unicorn.jsx b/examples/test-expected/generate/custom/components/Unicorn.jsx
@@ -0,0 +1,9 @@
+export default (Base) => {
+  class Unicorn extends Base {
+    compoenntWillMount() {
+
+    }
+  }
+
+  return Unicorn;
+};
diff --git a/examples/test-expected/generate/custom/index.js b/examples/test-expected/generate/custom/index.js
@@ -0,0 +1,13 @@
+import componentsUnicorn from './components/Unicorn';
+import actionTypeConstantsUnicornChangeEmail from './action-type-constants/unicorn-change-email';
+import actionTypeConstantsUnicornSumitSignupForm from './action-type-constants/unicorn/sumit-signup-form';
+import actionCreatorsUnicornSumitSignupForm from './action-creators/unicorn/sumit-signup-form';
+import reducersUnicornName from './reducers/unicorn/name';
+
+export default {
+  'components/Unicorn': componentsUnicorn,
+  'action-type-constants/unicorn-change-email': actionTypeConstantsUnicornChangeEmail,
+  'action-type-constants/unicorn/sumit-signup-form': actionTypeConstantsUnicornSumitSignupForm,
+  'action-creators/unicorn/sumit-signup-form': actionCreatorsUnicornSumitSignupForm,
+  'reducers/unicorn/name': reducersUnicornName,
+};
diff --git a/examples/test-expected/generate/custom/reducers/unicorn/name.js b/examples/test-expected/generate/custom/reducers/unicorn/name.js
@@ -0,0 +1,8 @@
+export default (base, { actionTypeConstants }) => (
+  (state, action) => {
+    switch (action.type) {
+      default:
+        return base(state, action);
+    }
+  }
+);
diff --git a/examples/test-expected/redux-integration/custom/index.js b/examples/test-expected/redux-integration/custom/index.js
@@ -0,0 +1,2 @@
+export default {
+};
diff --git a/examples/test-expected/redux-integration/generated/reducers/index.js b/examples/test-expected/redux-integration/generated/reducers/index.js
@@ -18,12 +18,12 @@ const additionalReducers = helpers.getAdditional({
 
 const reducers = Object.assign(baseReducers, additionalReducers);
 
-const reducer = (state, action) => {
-  switch (action.type) {
+const reducer = (_state, _action) => {
+  switch (_action.type) {
     case 'REDUCERS_INITIALIZE':
-      return action.value;
+      return _action.value;
     default:
-      return combineReducers(reducers)(state, action);
+      return combineReducers(reducers)(_state, _action);
   }
 }
 

diff --git a/examples/test-expected/redux-integration/generated/reducers/redux-example/index.js b/examples/test-expected/redux-integration/generated/reducers/redux-example/index.js
@@ -24,12 +24,12 @@ const additionalReducers = helpers.getAdditional({
 
 const reducers = Object.assign(baseReducers, additionalReducers);
 
-const reducer = (state, action) => {
-  switch (action.type) {
+const reducer = (_state, _action) => {
+  switch (_action.type) {
     case 'REDUX_EXAMPLE_INITIALIZE':
-      return action.value;
+      return _action.value;
     default:
-      return combineReducers(reducers)(state, action);
+      return combineReducers(reducers)(_state, _action);
   }
 }
 

diff --git a/examples/test-expected/redux-integration/generated/reducers/redux-example/is-going.js b/examples/test-expected/redux-integration/generated/reducers/redux-example/is-going.js
@@ -1,12 +1,12 @@
 import custom from '../../../custom/index';
 import actionTypeConstants from '../../action-type-constants/index';
 
-const reducer = (state = false, action) => {
-  switch (action.type) {
+const reducer = (_state = false, _action) => {
+  switch (_action.type) {
     case actionTypeConstants.reduxExample.toggleIsGoing:
-      return !state;
+      return !_state;
     default:
-      return state;
+      return _state;
   }
 }
 

diff --git a/examples/test-expected/redux-integration/generated/reducers/redux-example/name.js b/examples/test-expected/redux-integration/generated/reducers/redux-example/name.js
@@ -1,12 +1,12 @@
 import custom from '../../../custom/index';
 import actionTypeConstants from '../../action-type-constants/index';
 
-const reducer = (state = '', action) => {
-  switch (action.type) {
+const reducer = (_state = '', _action) => {
+  switch (_action.type) {
     case actionTypeConstants.reduxExample.changeName:
-      return action.value;
+      return _action.value;
     default:
-      return state;
+      return _state;
   }
 }
 

diff --git a/lib/generate/action-creators.js b/lib/generate/action-creators.js
@@ -0,0 +1,18 @@
+const path = require('path');
+const fs = require('fs');
+const shell = require('shelljs');
+
+module.exports = function actionCreators() {
+  return `\
+export default (base, { actionTypeConstants, store }) => (
+  (event) => {
+    const {  } = store.get();
+
+    return {
+      type: actionTypeConstants.unicorn.submitSignupForm,
+      value: event.target.value,
+    };
+  }
+);
+`;
+};
diff --git a/lib/generate/action-type-constants.js b/lib/generate/action-type-constants.js
@@ -0,0 +1,10 @@
+const constCase = require('../helpers/const-case');
+const path = require('path');
+const fs = require('fs');
+const shell = require('shelljs');
+
+module.exports = function actionTypeConstants({ name, route }) {
+  return `\
+export default () => '${constCase(route, name)}';
+`;
+};
diff --git a/lib/generate/components.js b/lib/generate/components.js
@@ -0,0 +1,15 @@
+const fs = require('fs');
+
+module.exports = function components({ name }) {
+  return  `\
+export default (Base) => {
+  class ${name} extends Base {
+    compoenntWillMount() {
+
+    }
+  }
+
+  return ${name};
+};
+`;
+};
diff --git a/lib/generate/index.js b/lib/generate/index.js
@@ -0,0 +1,55 @@
+const fs = require('fs');
+const path = require('path');
+const modifyCustomIndex = require('./modify-custom-index');
+const ensurePathExist = require('../helpers/ensure-path-exist');
+const generators = {
+  components: require('./components'), // eslint-disable-line global-require
+  'action-type-constants': require('./action-type-constants'), // eslint-disable-line global-require
+  'action-creators': require('./action-creators'), // eslint-disable-line global-require
+  reducers: require('./reducers'), // eslint-disable-line global-require
+};
+
+function contentForType ({ type, customFolder, name, route }) {
+  switch (type) {
+    case 'components':
+      ensurePathExist(path.resolve(customFolder, 'components'));
+      return {
+        absPath: path.resolve(customFolder, `components/${name}.jsx`),
+        content: generators[type]({ name, route }),
+      };
+    case 'action-creators':
+    case 'action-type-constants':
+    case 'reducers':
+      ensurePathExist(path.resolve(customFolder, `${type}/${route}`));
+      return {
+        absPath: path.resolve(customFolder, `${type}/${route}/${name}.js`),
+        content: generators[type]({ name, route }),
+      };
+    default:
+      throw new Error(`Type ${type} is not supported`);
+  }
+}
+
+module.exports = function generate(rawPath, projectFolder = '.') {
+  const customFolder = path.resolve(`${projectFolder}/custom`);
+  const cleanPath = rawPath.replace(/\.(jsx|js)$/, '');
+  const segments = cleanPath.split('/');
+
+  const type = segments[0];
+  const hasRoute = segments.length > 2;
+  const route = hasRoute && segments[1];
+  const name = segments[segments.length - 1];
+
+  const { absPath, content } = contentForType({ type, customFolder, name, route });
+  fs.writeFileSync(absPath, content);
+
+  modifyCustomIndex(cleanPath);
+
+  // generate an action-type-constant after we generate an action-creator
+  if (type === 'action-creators') {
+    generate(
+      rawPath.replace('action-creators', 'action-type-constants'),
+      projectFolder
+    )
+  }
+};
diff --git a/lib/generate/modify-custom-index.js b/lib/generate/modify-custom-index.js
@@ -0,0 +1,3 @@
+module.exports = function modifyCustomIndex() {
+
+};
diff --git a/lib/generate/reducers.js b/lib/generate/reducers.js
@@ -0,0 +1,16 @@
+const path = require('path');
+const fs = require('fs');
+const shell = require('shelljs');
+
+module.exports = function reducers() {
+  return `\
+export default (base, { actionTypeConstants }) => (
+  (state, action) => {
+    switch (action.type) {
+      default:
+        return base(state, action);
+    }
+  }
+);
+`;
+};
diff --git a/lib/helpers/ensure-path-exist.js b/lib/helpers/ensure-path-exist.js
@@ -1,15 +1,16 @@
 const fs = require('fs');
 const shell = require('shelljs');
 
-module.exports = function ensurePathExist(outputPath) {
-  let outputPathExists;
+function exist (outputPath) {
   try {
-    outputPathExists = fs.statSync(outputPath).isDirectory();
+    return fs.statSync(outputPath).isDirectory();
   } catch (e) {
-    outputPathExists = false;
+    return false;
   }
+}
 
-  if (!outputPathExists) {
+module.exports = function ensurePathExist(outputPath) {
+  if (!exist(outputPath)) {
     shell.mkdir('-p', outputPath);
   }
 };
diff --git a/lib/plugins/main/templates/custom/index.js b/lib/plugins/main/templates/custom/index.js
@@ -1,5 +1,2 @@
 export default {
-  'components/App': (self) => (
-    self
-  ),
 };