refactor: transpile @storybook/cli to CJS with Babel

 - move all source code in `src` as it's, by convention in SB monorepo, the source folder for Babel
 - update `.babelrc.json` to ignore all templates files
 - add `prepare` NPM script as in all other libs
 - update `cleanup` stage of `prepare` script to avoid removing anything from `@storybook/cli/dist/generators/**/template*` folder because there are the template files that will be copied to initialize SB on users' projects

lib/cli/.babelrc.json

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": 8
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3"
+      }
+    ]
+  ],
+  "ignore": [
+    "./src/generators/**/template",
+    "./src/generators/**/template-csf",
+    "./src/generators/**/template-mdx"
+  ]
+}

lib/cli/bin/generate.js

@@ -3,10 +3,10 @@ import chalk from 'chalk';
 import envinfo from 'envinfo';
 import didYouMean from 'didyoumean';
 import pkg from '../package.json';
-import initiate from '../lib/initiate';
-import { codeLog } from '../lib/helpers';
-import add from '../lib/add';
-import { migrate } from '../lib/migrate';
+import initiate from '../dist/initiate';
+import { codeLog } from '../dist/helpers';
+import add from '../dist/add';
+import { migrate } from '../dist/migrate';
 
 const logger = console;
 
@@ -78,8 +78,11 @@ if (process.argv[1].includes('getstorybook')) {
       ' Invalid command: %s.\n See --help for a list of available commands.',
       invalidCmd
     );
-    // eslint-disable-next-line
-    const suggestion = didYouMean(invalidCmd, program.commands.map(cmd => cmd._name));
+    const suggestion = didYouMean(
+      invalidCmd,
+      // eslint-disable-next-line
+      program.commands.map(cmd => cmd._name)
+    );
     if (suggestion) {
       logger.log(`\n Did you mean ${suggestion}?`);
     }

lib/cli/package.json

@@ -24,13 +24,13 @@
   },
   "files": [
     "bin/**/*",
-    "generators/**/*",
-    "lib/**/*",
+    "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
+    "prepare": "node ../../scripts/prepare.js",
     "test": "cd test && ./run_tests.sh",
     "test-latest-cra": "cd test && ./test_latest_cra.sh"
   },

lib/cli/generators/ANGULAR/angular-helpers.js → lib/cli/src/generators/ANGULAR/angular-helpers.js

@@ -1,6 +1,6 @@
 import * as path from 'path';
 import * as fs from 'fs';
-import { readFileAsJson, writeFileAsJson } from '../../lib/helpers';
+import { readFileAsJson, writeFileAsJson } from '../../helpers';
 
 export function getAngularAppTsConfigPath() {
   const angularJson = readFileAsJson('angular.json', true);

lib/cli/generators/ANGULAR/index.js → lib/cli/src/generators/ANGULAR/index.js

@@ -13,7 +13,7 @@ import {
   installDependencies,
   writeFileAsJson,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 async function addDependencies(npmOptions, { storyFormat }) {
   const packages = [

lib/cli/generators/EMBER/index.js → lib/cli/src/generators/EMBER/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, linksVersion, actionsVersion, addonsVersion] = await getVersions(

lib/cli/generators/HTML/index.js → lib/cli/src/generators/HTML/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = ['@storybook/html'];

lib/cli/generators/MARIONETTE/index.js → lib/cli/src/generators/MARIONETTE/index.js

@@ -1,13 +1,13 @@
 import fse from 'fs-extra';
 import path from 'path';
-import npmInit from '../../lib/npm_init';
+import npmInit from '../../npm_init';
 import {
   getVersion,
   getPackageJson,
   writePackageJson,
   getBabelDependencies,
   installDependencies,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async npmOptions => {
   const storybookVersion = await getVersion(npmOptions, '@storybook/marionette');

lib/cli/generators/MARKO/index.js → lib/cli/src/generators/MARKO/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, addonActionVersion, addonKnobsVersion] = await getVersions(

lib/cli/generators/METEOR/index.js → lib/cli/src/generators/METEOR/index.js

@@ -7,7 +7,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [

lib/cli/generators/MITHRIL/index.js → lib/cli/src/generators/MITHRIL/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(

lib/cli/generators/PREACT/index.js → lib/cli/src/generators/PREACT/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [storybookVersion, actionsVersion, linksVersion, addonsVersion] = await getVersions(

lib/cli/generators/RAX/index.js → lib/cli/src/generators/RAX/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [

lib/cli/generators/REACT/index.js → lib/cli/src/generators/REACT/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = [

lib/cli/generators/REACT_NATIVE/index.js → lib/cli/src/generators/REACT_NATIVE/index.js

@@ -8,7 +8,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, installServer, { storyFormat = 'csf' }) => {
   const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(

lib/cli/generators/REACT_SCRIPTS/index.js → lib/cli/src/generators/REACT_SCRIPTS/index.js

@@ -8,7 +8,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = [

lib/cli/generators/RIOT/index.js → lib/cli/src/generators/RIOT/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [

lib/cli/generators/RIOT/template-csf/stories/MyButton.tag → lib/cli/src/generators/RIOT/template-csf/stories/MyButton.tag

@@ -1,24 +1,24 @@
-<my-button>
-  <button class="buttonStyles" onClick="{ onClick }">
-    <yield/>
-  </button>
-
-  <style>
-    .buttonStyles {
-      border: solid 1px #eee;
-      border-radius: 3px;
-      background-color: #FFFFFF;
-      cursor: pointer;
-      font-size: 15px;
-      padding: 3px 10px;
-      margin: 10px;
-    }
-  </style>
-
-  <script>
-    onClick(e){
-      return (this.opts.callback ||
-        (() => { console.log('clicked') })).bind(this, e)
-    }
-  </script>
-</my-button>
+<my-button>
+  <button class="buttonStyles" onClick="{ onClick }">
+    <yield/>
+  </button>
+
+  <style>
+    .buttonStyles {
+      border: solid 1px #eee;
+      border-radius: 3px;
+      background-color: #FFFFFF;
+      cursor: pointer;
+      font-size: 15px;
+      padding: 3px 10px;
+      margin: 10px;
+    }
+  </style>
+
+  <script>
+    onClick(e){
+      return (this.opts.callback ||
+        (() => { console.log('clicked') })).bind(this, e)
+    }
+  </script>
+</my-button>

lib/cli/generators/SFC_VUE/index.js → lib/cli/src/generators/SFC_VUE/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = [

lib/cli/generators/SVELTE/index.js → lib/cli/src/generators/SVELTE/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const [

lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js → lib/cli/src/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js

@@ -9,7 +9,7 @@ import {
   installDependencies,
   getPackageJson,
   writePackageJson,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 async function updatePackage(devDependencies, oldName, newName, npmOptions) {
   if (devDependencies[oldName]) {

lib/cli/generators/VUE/index.js → lib/cli/src/generators/VUE/index.js

@@ -7,7 +7,7 @@ import {
   installDependencies,
   addToDevDependenciesIfNotPresent,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = [

lib/cli/generators/WEB-COMPONENTS/index.js → lib/cli/src/generators/WEB-COMPONENTS/index.js

@@ -6,7 +6,7 @@ import {
   writePackageJson,
   getBabelDependencies,
   installDependencies,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const storybookVersion = await getVersion(npmOptions, '@storybook/web-components');

lib/cli/generators/WEBPACK_REACT/index.js → lib/cli/src/generators/WEBPACK_REACT/index.js

@@ -5,7 +5,7 @@ import {
   getBabelDependencies,
   installDependencies,
   copyTemplate,
-} from '../../lib/helpers';
+} from '../../helpers';
 
 export default async (npmOptions, { storyFormat = 'csf' }) => {
   const packages = [

lib/cli/lib/helpers.js → lib/cli/src/helpers.js

@@ -72,7 +72,7 @@ export async function retrievePackageJson() {
   // npmInit will create a new package.json file
   npmInit();
 
-  // read the newly created packafe,json file
+  // read the newly created package.json file
   return getPackageJson() || {};
 }
 

lib/cli/lib/initiate.js → lib/cli/src/initiate.js

@@ -11,25 +11,25 @@ import {
   installDepsFromPackageJson,
   getPackageJson,
 } from './helpers';
-import angularGenerator from '../generators/ANGULAR';
-import emberGenerator from '../generators/EMBER';
-import meteorGenerator from '../generators/METEOR';
-import reactGenerator from '../generators/REACT';
-import reactNativeGenerator from '../generators/REACT_NATIVE';
-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';
-import mithrilGenerator from '../generators/MITHRIL';
-import marionetteGenerator from '../generators/MARIONETTE';
-import markoGenerator from '../generators/MARKO';
-import htmlGenerator from '../generators/HTML';
-import webComponentsGenerator from '../generators/WEB-COMPONENTS';
-import riotGenerator from '../generators/RIOT';
-import preactGenerator from '../generators/PREACT';
-import svelteGenerator from '../generators/SVELTE';
-import raxGenerator from '../generators/RAX';
+import angularGenerator from './generators/ANGULAR';
+import emberGenerator from './generators/EMBER';
+import meteorGenerator from './generators/METEOR';
+import reactGenerator from './generators/REACT';
+import reactNativeGenerator from './generators/REACT_NATIVE';
+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';
+import mithrilGenerator from './generators/MITHRIL';
+import marionetteGenerator from './generators/MARIONETTE';
+import markoGenerator from './generators/MARKO';
+import htmlGenerator from './generators/HTML';
+import webComponentsGenerator from './generators/WEB-COMPONENTS';
+import riotGenerator from './generators/RIOT';
+import preactGenerator from './generators/PREACT';
+import svelteGenerator from './generators/SVELTE';
+import raxGenerator from './generators/RAX';
 
 const logger = console;
 

scripts/prepare.js

@@ -34,13 +34,18 @@ function cleanup() {
   // https://github.com/babel/babel/issues/6226
   if (fs.existsSync(path.join(process.cwd(), 'dist'))) {
     const files = shell.find('dist').filter(filePath => {
+      // Do not remove folder
+      // And do not clean anything for @storybook/cli/dist/generators/**/template* because these are the template files
+      // that will be copied to init SB on users' projects
+      if (fs.lstatSync(filePath).isDirectory() || /generators\/.+\/template.*/.test(filePath)) {
+        return false;
+      }
+
       // Remove all copied TS files (but not the .d.ts)
       if (/\.tsx?$/.test(filePath) && !/\.d\.ts$/.test(filePath)) {
         return true;
       }
-      if (fs.lstatSync(filePath).isDirectory()) {
-        return false;
-      }
+
       return ignore.reduce((acc, pattern) => {
         return acc || !!filePath.match(pattern);
       }, false);