Refactor CLI

.circleci/config.yml

@@ -179,7 +179,7 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - dependencies-{{ checksum "package.json" }}
+            - dependencies-{{ checksum "yarn.lock" }}
             - dependencies-
       - run:
           name: "Install latest yarn version"
@@ -207,7 +207,7 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - dependencies-{{ checksum "package.json" }}
+            - dependencies-{{ checksum "yarn.lock" }}
             - dependencies-
       - run:
           name: "Install latest yarn version"
@@ -222,13 +222,9 @@ jobs:
           command: |
             yarn bootstrap --core
       - run:
-          name: "Updating fixtures"
-          command: |
-            yarn update-cli-fixtures
-      - run:
-          name: "Testing CLI"
+          name: "Testing CLI with latest CR(N)A"
           command: |
-            yarn test --cli
+            yarn test-latest-cra
   deploy:
     <<: *defaults
     steps:

lerna.json

@@ -6,7 +6,8 @@
     "publish": {
       "ignore": [
         "cra-kitchen-sink",
-        "vue-kitchen-sink"
+        "vue-kitchen-sink",
+        "lib/cli/test/run/*"
       ]
     }
   },

lib/cli/.babelrc

@@ -5,5 +5,10 @@
         "node": 4
       }
     }]
+  ],
+  "plugins": [
+    ["transform-runtime", {
+      "polyfill": false
+    }]
   ]
 }

lib/cli/bin/generate.js

@@ -6,12 +6,22 @@ import hasYarn from '../lib/has_yarn';
 import types from '../lib/project_types';
 import { commandLog, codeLog, paddedLog, installDeps } from '../lib/helpers';
 import pkg from '../package.json';
+import meteorGenerator from '../generators/METEOR';
+import reactGenerator from '../generators/REACT';
+import reactNativeGenerator from '../generators/REACT_NATIVE';
+import reactNativeScriptsGenerator from '../generators/REACT_NATIVE_SCRIPTS';
+import reactScriptsGenerator from '../generators/REACT_SCRIPTS';
+import sfcVueGenerator from '../generators/SFC_VUE';
+import updateOrganisationsGenerator from '../generators/UPDATE_PACKAGE_ORGANIZATIONS';
+import vueGenerator from '../generators/VUE';
+import webpackReactGenerator from '../generators/WEBPACK_REACT';
 
 const logger = console;
 
 program
   .version(pkg.version)
   .option('-f --force', 'Forcely add storybook')
+  .option('-s --skip-install', 'Skip installing deps')
   .option('-N --use-npm', 'Use npm to install deps')
   .option('-p --parser <babel | babylon | flow>', 'jscodeshift parser')
   .parse(process.argv);
@@ -47,7 +57,9 @@ try {
 done();
 
 const end = () => {
-  installDeps(npmOptions);
+  if (!program.skipInstall) {
+    installDeps(npmOptions);
+  }
 
   logger.log('\nTo run your storybook, type:\n');
   codeLog([runStorybookCommand]);
@@ -57,125 +69,99 @@ const end = () => {
   logger.log();
 };
 
-const handleError = ex => {
-  logger.error(chalk.red(ex.stack));
-  process.exit(1);
-};
-
 const CRNA_DISCUSSION =
   'https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md';
 
-switch (projectType) {
-  case types.ALREADY_HAS_STORYBOOK:
-    logger.log();
-    paddedLog('There seems to be a storybook already available in this project.');
-    paddedLog('Apply following command to force:\n');
-    codeLog(['getstorybook -f']);
-
-    // Add a new line for the clear visibility.
-    logger.log();
-    break;
-
-  case types.UPDATE_PACKAGE_ORGANIZATIONS:
-    // eslint-disable-next-line
-    require('../generators/UPDATE_PACKAGE_ORGANIZATIONS').default(program.parser)
-      .then(() => null) // commmandLog doesn't like to see output
-      .then(commandLog('Upgrading your project to the new storybook packages.'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.REACT_SCRIPTS:
-    // eslint-disable-next-line
-    require('../generators/REACT_SCRIPTS').default
-      .then(commandLog('Adding storybook support to your "Create React App" based project'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.REACT:
-    // eslint-disable-next-line
-    require('../generators/REACT').default
-      .then(commandLog('Adding storybook support to your "React" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.REACT_NATIVE_SCRIPTS: {
-    const app = chalk.bold('"./App.js"');
-    // eslint-disable-next-line
-    require('../generators/REACT_NATIVE_SCRIPTS').default
-      .then(commandLog('Adding storybook support to your "Create React Native App" app'))
-      .then(end)
-      .then(() => {
-        logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.'));
-        logger.log(`To quickly run storybook, replace contents of ${app} with:\n`);
-        codeLog(["export default from './storybook';"]); // eslint-disable-line
-        logger.log('\nFor a more complete discussion of options, see:\n');
-        logger.log(chalk.cyan(CRNA_DISCUSSION));
-        logger.log();
-      })
-      .catch(handleError);
-    break;
+const runGenerator = () => {
+  switch (projectType) {
+    case types.ALREADY_HAS_STORYBOOK:
+      logger.log();
+      paddedLog('There seems to be a storybook already available in this project.');
+      paddedLog('Apply following command to force:\n');
+      codeLog(['getstorybook -f']);
+
+      // Add a new line for the clear visibility.
+      logger.log();
+      return Promise.resolve();
+
+    case types.UPDATE_PACKAGE_ORGANIZATIONS:
+      // eslint-disable-next-line
+      return updateOrganisationsGenerator(program.parser)
+        .then(() => null) // commmandLog doesn't like to see output
+        .then(commandLog('Upgrading your project to the new storybook packages.'))
+        .then(end);
+
+    case types.REACT_SCRIPTS:
+      return reactScriptsGenerator()
+        .then(commandLog('Adding storybook support to your "Create React App" based project'))
+        .then(end);
+
+    case types.REACT:
+      return reactGenerator()
+        .then(commandLog('Adding storybook support to your "React" app'))
+        .then(end);
+
+    case types.REACT_NATIVE_SCRIPTS: {
+      const app = chalk.bold('"./App.js"');
+      return reactNativeScriptsGenerator()
+        .then(commandLog('Adding storybook support to your "Create React Native App" app'))
+        .then(end)
+        .then(() => {
+          logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.'));
+          logger.log(`To quickly run storybook, replace contents of ${app} with:\n`);
+          codeLog(["export default from './storybook';"]); // eslint-disable-line
+          logger.log('\nFor a more complete discussion of options, see:\n');
+          logger.log(chalk.cyan(CRNA_DISCUSSION));
+          logger.log();
+        });
+    }
+
+    case types.REACT_NATIVE:
+      return reactNativeGenerator()
+        .then(commandLog('Adding storybook support to your "React Native" app'))
+        .then(end);
+
+    case types.METEOR:
+      return meteorGenerator()
+        .then(commandLog('Adding storybook support to your "Meteor" app'))
+        .then(end);
+
+    case types.WEBPACK_REACT:
+      return webpackReactGenerator()
+        .then(commandLog('Adding storybook support to your "Webpack React" app'))
+        .then(end);
+
+    case types.REACT_PROJECT:
+      return reactGenerator()
+        .then(commandLog('Adding storybook support to your "React" library'))
+        .then(end);
+
+    case types.SFC_VUE:
+      return sfcVueGenerator()
+        .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
+        .then(end);
+
+    case types.VUE:
+      return vueGenerator()
+        .then(commandLog('Adding storybook support to your "Vue" app'))
+        .then(end);
+
+    default:
+      paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
+      paddedLog(
+        "Please make sure you are running the `getstorybook` command in your project's root directory."
+      );
+      paddedLog(
+        'You can also follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
+      );
+
+      // Add a new line for the clear visibility.
+      logger.log();
+      return Promise.resolve();
   }
+};
 
-  case types.REACT_NATIVE:
-    // eslint-disable-next-line
-    require('../generators/REACT_NATIVE').default
-      .then(commandLog('Adding storybook support to your "React Native" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.METEOR:
-    // eslint-disable-next-line
-    require('../generators/METEOR').default
-      .then(commandLog('Adding storybook support to your "Meteor" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.WEBPACK_REACT:
-    // eslint-disable-next-line
-    require('../generators/WEBPACK_REACT').default
-      .then(commandLog('Adding storybook support to your "Webpack React" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.REACT_PROJECT:
-    // eslint-disable-next-line
-    require('../generators/REACT').default
-      .then(commandLog('Adding storybook support to your "React" library'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.SFC_VUE:
-    // eslint-disable-next-line
-    require('../generators/SFC_VUE').default
-      .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  case types.VUE:
-    // eslint-disable-next-line
-    require('../generators/VUE').default
-      .then(commandLog('Adding storybook support to your "Vue" app'))
-      .then(end)
-      .catch(handleError);
-    break;
-
-  default:
-    paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
-    paddedLog(
-      "Please make sure you are running the `getstorybook` command in your project's root directory."
-    );
-    paddedLog(
-      'You can also follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
-    );
-
-    // Add a new line for the clear visibility.
-    logger.log();
-}
+runGenerator().catch(ex => {
+  logger.error(`\n     ${chalk.red(ex.stack)}`);
+  process.exit(1);
+});