@storybook/cli 6.5.0-alpha.7 → 6.5.0-beta.1

package/dist/modern/generators/AURELIA/template-csf/.storybook/tsconfig.json

@@ -1,9 +1,20 @@
 {
   "extends": "%SET_DURING_SB_INIT%",
   "compilerOptions": {
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
   },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
-  "include": ["../src/**/*", "../projects/**/*"],
-  "files": ["./typings.d.ts"]
-}
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

package/dist/modern/generators/EMBER/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
     extraPackages: [// babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
     'babel-plugin-ember-modules-api-polyfill', // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
     'babel-plugin-htmlbars-inline-precompile'],

package/dist/modern/generators/HTML/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
 };
 
 var _default = generator;

package/dist/modern/generators/METEOR/index.js

@@ -16,7 +16,7 @@ var _baseGenerator = require("../baseGenerator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
     extraPackages: ['react', 'react-dom', '@babel/preset-env', '@babel/preset-react'],
     staticDir: 'dist'
   }); // create or update .babelrc

package/dist/modern/generators/MITHRIL/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
 };
 
 var _default = generator;

package/dist/modern/generators/PREACT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
     extraPackages: ['core-js']
   });
 };

package/dist/modern/generators/RAX/index.js

@@ -23,7 +23,7 @@ const generator = async (packageManager, npmOptions, options) => {
   packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
   packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
   (0, _jsPackageManager.writePackageJson)(packageJson);
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
     extraPackages: ['rax']
   });
 };

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/addons.js

@@ -1,3 +1,3 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/manager';
+import '@storybook/addon-links/manager';
+import '@storybook/addon-knobs/manager';

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js

@@ -1,2 +1,2 @@
-import '@storybook/addon-ondevice-actions/register';
-import '@storybook/addon-ondevice-knobs/register';
+import '@storybook/addon-ondevice-actions/manager';
+import '@storybook/addon-ondevice-knobs/manager';

package/dist/modern/generators/REACT_SCRIPTS/index.js

@@ -44,7 +44,15 @@ const generator = async (packageManager, npmOptions, options) => {
   }) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
 
   const extraPackages = ['@storybook/node-logger'];
-  if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
+
+  if (isCra5) {
+    extraPackages.push('webpack'); // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
+
+    extraPackages.push('babel-plugin-named-exports-order'); // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
+
+    extraPackages.push('prop-types');
+  } // preset v3 is compat with older versions of CRA, otherwise let version float
+
 
   const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {

package/dist/modern/generators/RIOT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
     extraPackages: ['riot-tag-loader']
   });
 };

package/dist/modern/generators/SERVER/index.js

@@ -12,7 +12,7 @@ var _baseGenerator = require("../baseGenerator");
 var _helpers = require("../../helpers");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
     extensions: ['json']
   });
   (0, _helpers.copyTemplate)(__dirname);

package/dist/modern/generators/SFC_VUE/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
 };
 
 var _default = generator;

package/dist/modern/generators/SVELTE/index.js

@@ -53,7 +53,6 @@ const generator = async (packageManager, npmOptions, options) => {
 
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
-    extraAddons: ['@storybook/addon-svelte-csf'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
     extraMain,
     commonJs

package/dist/modern/generators/VUE/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
     extraPackages: ['vue-loader@^15.7.0']
   });
 };

package/dist/modern/generators/VUE3/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
     extraPackages: ['vue-loader@^16.0.0']
   });
 };

package/dist/modern/generators/WEBPACK_REACT/index.js

@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
 var _baseGenerator = require("../baseGenerator");
 
 const generator = async (packageManager, npmOptions, options) => {
-  (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
+  await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
 };
 
 var _default = generator;

package/dist/modern/generators/baseGenerator.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.promise.js");
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
 var _coreCommon = require("@storybook/core-common");
 
 var _project_types = require("../project_types");
@@ -39,11 +41,14 @@ const defaultOptions = {
 const builderDependencies = builder => {
   switch (builder) {
     case _project_types.CoreBuilder.Webpack4:
-      return [];
+      return ['@storybook/builder-webpack4', '@storybook/manager-webpack4'];
 
     case _project_types.CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
 
+    case _project_types.CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
+
     default:
       return [builder];
   }
@@ -51,6 +56,8 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
+const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
+
 async function baseGenerator(packageManager, npmOptions, {
   language,
   builder
@@ -71,7 +78,13 @@ async function baseGenerator(packageManager, npmOptions, {
   const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
 
   const addonPackages = [...addons, '@storybook/addon-actions'];
-  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
+
+  if (hasInteractiveStories(framework)) {
+    addons.push('@storybook/addon-interactions');
+    addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
+  }
+
+  const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
   const files = await _fsExtra.default.readdir(process.cwd());
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
   const packageJson = packageManager.retrievePackageJson();
@@ -79,11 +92,20 @@ async function baseGenerator(packageManager, npmOptions, {
   const frameworkPackage = `@storybook/${framework}`;
   const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
+  const coreBuilders = [_project_types.CoreBuilder.Webpack4, _project_types.CoreBuilder.Webpack5, _project_types.CoreBuilder.Vite];
+  const expandedBuilder = coreBuilders.includes(builder) ? `@storybook/builder-${builder}` : builder;
   const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
     core: {
-      builder
+      builder: expandedBuilder
     }
-  }, extraMain) : extraMain;
+  }, extraMain) : extraMain; // Default vite builder to storyStoreV7
+
+  if (expandedBuilder === '@storybook/builder-vite') {
+    mainOptions.features = Object.assign({}, mainOptions.features, {
+      storyStoreV7: true
+    });
+  }
+
   (0, _configure.configure)(framework, Object.assign({
     framework: frameworkPackage,
     addons: [...addons, ...stripVersions(extraAddons)],
@@ -93,6 +115,18 @@ async function baseGenerator(packageManager, npmOptions, {
 
   if (addComponents) {
     (0, _helpers.copyComponents)(framework, language);
+  } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
+
+
+  if (expandedBuilder === '@storybook/builder-vite') {
+    const previewHead = (0, _tsDedent.default)`
+      <script>
+        window.global = window;
+      </script>
+    `;
+    await _fsExtra.default.writeFile(`.storybook/preview-head.html`, previewHead, {
+      encoding: 'utf8'
+    });
   }
 
   const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];

package/dist/modern/generators/configure.js

@@ -9,6 +9,8 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
+const _excluded = ["addons", "extensions", "commonJs"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -19,7 +21,7 @@ function configureMain(_ref) {
     extensions = ['js', 'jsx', 'ts', 'tsx'],
     commonJs = false
   } = _ref,
-      custom = _objectWithoutPropertiesLoose(_ref, ["addons", "extensions", "commonJs"]);
+      custom = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
   const config = Object.assign({

package/dist/modern/helpers.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBowerJson = getBowerJson;
-exports.readFileAsJson = readFileAsJson;
-exports.paddedLog = paddedLog;
-exports.getChars = getChars;
-exports.codeLog = codeLog;
-exports.getBabelDependencies = getBabelDependencies;
 exports.addToDevDependenciesIfNotPresent = addToDevDependenciesIfNotPresent;
-exports.copyTemplate = copyTemplate;
+exports.codeLog = codeLog;
+exports.commandLog = void 0;
 exports.copyComponents = copyComponents;
-exports.commandLog = exports.writeFileAsJson = void 0;
+exports.copyTemplate = copyTemplate;
+exports.getBabelDependencies = getBabelDependencies;
+exports.getBowerJson = getBowerJson;
+exports.getChars = getChars;
+exports.paddedLog = paddedLog;
+exports.readFileAsJson = readFileAsJson;
+exports.writeFileAsJson = void 0;
 
 require("core-js/modules/es.promise.js");
 

package/dist/modern/initiate.js

@@ -7,6 +7,8 @@ exports.initiate = initiate;
 
 require("core-js/modules/es.promise.js");
 
+require("core-js/modules/es.array.sort.js");
+
 var _updateNotifier = require("update-notifier");
 
 var _chalk = _interopRequireDefault(require("chalk"));
@@ -81,7 +83,7 @@ const installStorybook = (projectType, options) => {
   const language = (0, _detect.detectLanguage)();
   const generatorOptions = {
     language,
-    builder: options.builder || _project_types.CoreBuilder.Webpack4,
+    builder: options.builder || (0, _detect.detectBuilder)(packageManager),
     linkable: !!options.linkable,
     commonJs: options.commonJs
   };
@@ -113,13 +115,13 @@ const installStorybook = (projectType, options) => {
 
       case _project_types.ProjectType.UPDATE_PACKAGE_ORGANIZATIONS:
         return (0, _UPDATE_PACKAGE_ORGANIZATIONS.default)(packageManager, options.parser, npmOptions).then(() => null) // commandLog doesn't like to see output
-        .then((0, _helpers.commandLog)('Upgrading your project to the new Storybook packages.')).then(end);
+        .then((0, _helpers.commandLog)('Upgrading your project to the new Storybook packages.\n')).then(end);
 
       case _project_types.ProjectType.REACT_SCRIPTS:
         return (0, _REACT_SCRIPTS.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Create React App" based project')).then(end);
 
       case _project_types.ProjectType.REACT:
-        return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" app')).then(end);
+        return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" app\n')).then(end);
 
       case _project_types.ProjectType.REACT_NATIVE:
         {
@@ -132,7 +134,7 @@ const installStorybook = (projectType, options) => {
             initial: false
           }])).then(({
             server
-          }) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app')).then(end).then(() => {
+          }) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app\n')).then(end).then(() => {
             logger.log(_chalk.default.red('NOTE: installation is not 100% automated.'));
             logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
             (0, _helpers.codeLog)(["export {default} from './storybook';"]);
@@ -143,61 +145,61 @@ const installStorybook = (projectType, options) => {
         }
 
       case _project_types.ProjectType.METEOR:
-        return (0, _METEOR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Meteor" app')).then(end);
+        return (0, _METEOR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Meteor" app\n')).then(end);
 
       case _project_types.ProjectType.WEBPACK_REACT:
-        return (0, _WEBPACK_REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Webpack React" app')).then(end);
+        return (0, _WEBPACK_REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Webpack React" app\n')).then(end);
 
       case _project_types.ProjectType.REACT_PROJECT:
-        return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" library')).then(end);
+        return (0, _REACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "React" library\n')).then(end);
 
       case _project_types.ProjectType.SFC_VUE:
-        return (0, _SFC_VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Single File Components Vue" app')).then(end);
+        return (0, _SFC_VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Single File Components Vue" app\n')).then(end);
 
       case _project_types.ProjectType.VUE:
-        return (0, _VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue" app')).then(end);
+        return (0, _VUE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue" app\n')).then(end);
 
       case _project_types.ProjectType.VUE3:
-        return (0, _VUE2.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue 3" app')).then(end);
+        return (0, _VUE2.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Vue 3" app\n')).then(end);
 
       case _project_types.ProjectType.ANGULAR:
-        return (0, _ANGULAR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Angular" app')).then(end);
+        return (0, _ANGULAR.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Angular" app\n')).then(end);
 
       case _project_types.ProjectType.EMBER:
-        return (0, _EMBER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Ember" app')).then(end);
+        return (0, _EMBER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Ember" app\n')).then(end);
 
       case _project_types.ProjectType.MITHRIL:
-        return (0, _MITHRIL.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Mithril" app')).then(end);
+        return (0, _MITHRIL.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Mithril" app\n')).then(end);
 
       case _project_types.ProjectType.MARIONETTE:
-        return (0, _MARIONETTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marionette.js" app')).then(end);
+        return (0, _MARIONETTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marionette.js" app\n')).then(end);
 
       case _project_types.ProjectType.MARKO:
-        return (0, _MARKO.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marko" app')).then(end);
+        return (0, _MARKO.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Marko" app\n')).then(end);
 
       case _project_types.ProjectType.HTML:
-        return (0, _HTML.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "HTML" app')).then(end);
+        return (0, _HTML.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "HTML" app\n')).then(end);
 
       case _project_types.ProjectType.WEB_COMPONENTS:
-        return (0, _WEBCOMPONENTS.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "web components" app')).then(end);
+        return (0, _WEBCOMPONENTS.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "web components" app\n')).then(end);
 
       case _project_types.ProjectType.RIOT:
-        return (0, _RIOT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "riot.js" app')).then(end);
+        return (0, _RIOT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "riot.js" app\n')).then(end);
 
       case _project_types.ProjectType.PREACT:
-        return (0, _PREACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Preact" app')).then(end);
+        return (0, _PREACT.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Preact" app\n')).then(end);
 
       case _project_types.ProjectType.SVELTE:
-        return (0, _SVELTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Svelte" app')).then(end);
+        return (0, _SVELTE.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Svelte" app\n')).then(end);
 
       case _project_types.ProjectType.RAX:
-        return (0, _RAX.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Rax" app')).then(end);
+        return (0, _RAX.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Rax" app\n')).then(end);
 
       case _project_types.ProjectType.AURELIA:
-        return (0, _AURELIA.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Aurelia" app')).then(end);
+        return (0, _AURELIA.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Aurelia" app\n')).then(end);
 
       case _project_types.ProjectType.SERVER:
-        return (0, _SERVER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Server" app')).then(end);
+        return (0, _SERVER.default)(packageManager, npmOptions, generatorOptions).then((0, _helpers.commandLog)('Adding Storybook support to your "Server" app\n')).then(end);
 
       case _project_types.ProjectType.UNSUPPORTED:
         (0, _helpers.paddedLog)(`We detected a project type that we don't support yet.`);
@@ -280,11 +282,12 @@ async function initiate(options, pkg) {
   } catch (ex) {
     done(ex.message);
     process.exit(1);
+    return;
   }
 
   done();
   await installStorybook(projectType, Object.assign({}, options, isEsm ? {
     commonJs: true
   } : undefined));
-  return (0, _automigrate.automigrate)();
+  await (0, _automigrate.automigrate)();
 }

package/dist/modern/js-package-manager/JsPackageManager.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPackageDetails = getPackageDetails;
 exports.JsPackageManager = void 0;
+exports.getPackageDetails = getPackageDetails;
 
 require("core-js/modules/es.promise.js");
 
@@ -18,7 +18,7 @@ var _helpers = require("../helpers");
 
 var _PackageJsonHelper = require("./PackageJsonHelper");
 
-var _versions = _interopRequireDefault(require("../versions.json"));
+var _versions = _interopRequireDefault(require("../versions"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/modern/project_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
+exports.unsupportedTemplate = exports.supportedTemplates = exports.installableProjectTypes = exports.SupportedLanguage = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = exports.CoreBuilder = void 0;
 
 var _semver = require("@storybook/semver");
 
@@ -59,6 +59,7 @@ exports.CoreBuilder = CoreBuilder;
 (function (CoreBuilder) {
   CoreBuilder["Webpack4"] = "webpack4";
   CoreBuilder["Webpack5"] = "webpack5";
+  CoreBuilder["Vite"] = "vite";
 })(CoreBuilder || (exports.CoreBuilder = CoreBuilder = {}));
 
 let SupportedLanguage;

package/dist/modern/repro-generators/configs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular12 = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
+exports.webpack_react = exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.vite_react = exports.svelte = exports.sfcVue = exports.react_typescript = exports.react_legacy_root_api = exports.react_in_yarn_workspace = exports.react = exports.preact = exports.html = exports.cra_typescript = exports.cra = exports.angular_modern_inline_rendering = exports.angular130 = exports.angular13 = exports.angular12 = exports.angular11 = exports.angular10 = exports.angular = void 0;
 
 const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
 // and not look for a yarn workspace in parent directory
@@ -14,16 +14,16 @@ const cra = {
   framework: 'react',
   name: 'cra',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --use-npm', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}}', 'cd {{appName}}', 'echo "FAST_REFRESH=true" > .env', 'echo "SKIP_PREFLIGHT_CHECK=true" > .env'].join(' && ')
 };
 exports.cra = cra;
 const cra_typescript = {
   framework: 'react',
   name: 'cra_typescript',
   version: 'latest',
-  generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-  'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm'].join(' && ')
+  generator: [// Force npm otherwise we have a mess between Yarn 1, Yarn 2 and NPM
+  'npm_config_user_agent=npm npx -p create-react-app@{{version}} create-react-app {{appName}} --template typescript'].join(' && ')
 };
 exports.cra_typescript = cra_typescript;
 const react = {
@@ -34,6 +34,19 @@ const react = {
   additionalDeps: ['prop-types']
 };
 exports.react = react;
+const react_legacy_root_api = {
+  framework: 'react',
+  name: 'react_legacy_root_api',
+  version: 'latest',
+  generator: fromDeps('react', 'react-dom'),
+  additionalDeps: ['prop-types'],
+  mainOverrides: {
+    reactOptions: {
+      legacyRootApi: true
+    }
+  }
+};
+exports.react_legacy_root_api = react_legacy_root_api;
 const react_typescript = {
   framework: 'react',
   name: 'react_typescript',
@@ -49,6 +62,13 @@ const webpack_react = {
   generator: fromDeps('react', 'react-dom', 'webpack@webpack-4')
 };
 exports.webpack_react = webpack_react;
+const vite_react = {
+  framework: 'react',
+  name: 'vite_react',
+  version: 'latest',
+  generator: 'npx -p create-vite@{{version}} create-vite {{appName}} --template react-ts'
+};
+exports.vite_react = vite_react;
 const react_in_yarn_workspace = {
   framework: 'react',
   name: 'react_in_yarn_workspace',
@@ -62,7 +82,7 @@ const baseAngular = {
   framework: 'angular',
   name: 'angular',
   version: 'latest',
-  generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
+  generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`
 };
 const angular10 = Object.assign({}, baseAngular, {
   name: 'angular10',
@@ -79,6 +99,27 @@ const angular12 = Object.assign({}, baseAngular, {
   version: 'v12-lts'
 });
 exports.angular12 = angular12;
+const angular130 = Object.assign({}, baseAngular, {
+  name: 'angular130',
+  version: '13.0.x'
+});
+exports.angular130 = angular130;
+const angular13 = Object.assign({}, baseAngular, {
+  name: 'angular13',
+  version: '13.1.x'
+});
+exports.angular13 = angular13;
+const angular_modern_inline_rendering = Object.assign({}, baseAngular, {
+  name: 'angular_modern_inline_rendering',
+  additionalDeps: ['jest', '@storybook/test-runner'],
+  mainOverrides: {
+    features: {
+      storyStoreV7: true,
+      modernInlineRender: true
+    }
+  }
+});
+exports.angular_modern_inline_rendering = angular_modern_inline_rendering;
 const angular = baseAngular; // #endregion
 // #region  web components
 
@@ -107,7 +148,8 @@ exports.web_components_lit2 = web_components_lit2;
 const vue = {
   framework: 'vue',
   name: 'vue',
-  version: 'latest',
+  // Be careful here, the latest versions of vue cli are bootstrapping a vue 3  project
+  version: '4',
   generator: [// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
   `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`].join(' && ')
 };
@@ -141,7 +183,8 @@ const sfcVue = {
   framework: 'vue',
   name: 'sfcVue',
   version: 'latest',
-  generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4')
+  //
+  generator: fromDeps('vue@2.6', 'vue-loader@15.9', 'vue-template-compiler@2.6', 'webpack@webpack-4')
 };
 exports.sfcVue = sfcVue;
 const svelte = {