@storybook/cli 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/modern/initiate.js

@@ -7,16 +7,20 @@ 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"));
 
 var _prompts = _interopRequireDefault(require("prompts"));
 
-var _detect = require("./detect");
+var _telemetry = require("@storybook/telemetry");
 
 var _project_types = require("./project_types");
 
+var _detect = require("./detect");
+
 var _helpers = require("./helpers");
 
 var _ANGULAR = _interopRequireDefault(require("./generators/ANGULAR"));
@@ -71,9 +75,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const logger = console;
 
-const installStorybook = (projectType, options) => {
-  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(options.useNpm);
-
+const installStorybook = (projectType, packageManager, options) => {
   const npmOptions = {
     installAsDevDependencies: true,
     skipInstall: options.skipInstall
@@ -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.`);
@@ -211,7 +213,7 @@ const installStorybook = (projectType, options) => {
         (0, _helpers.paddedLog)('You can specify a project type explicitly via `sb init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install'); // Add a new line for the clear visibility.
 
         logger.log();
-        return projectTypeInquirer(options);
+        return projectTypeInquirer(options, packageManager);
     }
   };
 
@@ -221,7 +223,7 @@ const installStorybook = (projectType, options) => {
   });
 };
 
-const projectTypeInquirer = async options => {
+const projectTypeInquirer = async (options, packageManager) => {
   const manualAnswer = options.yes ? true : await (0, _prompts.default)([{
     type: 'confirm',
     name: 'manual',
@@ -238,15 +240,22 @@ const projectTypeInquirer = async options => {
         value: type.toUpperCase()
       }))
     }]);
-    return installStorybook(frameworkAnswer.manualFramework, options);
+    return installStorybook(frameworkAnswer.manualFramework, packageManager, options);
   }
 
   return Promise.resolve();
 };
 
 async function initiate(options, pkg) {
+  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(options.useNpm);
+
   const welcomeMessage = 'sb init - the simplest way to add a Storybook to your project.';
-  logger.log(_chalk.default.inverse(`\n ${welcomeMessage} \n`)); // Update notify code.
+  logger.log(_chalk.default.inverse(`\n ${welcomeMessage} \n`));
+
+  if (!options.disableTelemetry) {
+    (0, _telemetry.telemetry)('init');
+  } // Update notify code.
+
 
   new _updateNotifier.UpdateNotifier({
     pkg,
@@ -257,7 +266,7 @@ async function initiate(options, pkg) {
   const projectTypeProvided = options.type;
   const infoText = projectTypeProvided ? `Installing Storybook for user specified project type: ${projectTypeProvided}` : 'Detecting project type';
   const done = (0, _helpers.commandLog)(infoText);
-  const packageJson = (0, _jsPackageManager.readPackageJson)();
+  const packageJson = packageManager.retrievePackageJson();
   const isEsm = packageJson && packageJson.type === 'module';
 
   try {
@@ -280,11 +289,12 @@ async function initiate(options, pkg) {
   } catch (ex) {
     done(ex.message);
     process.exit(1);
+    return;
   }
 
   done();
-  await installStorybook(projectType, Object.assign({}, options, isEsm ? {
+  await installStorybook(projectType, packageManager, 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 }; }
 
@@ -74,13 +74,13 @@ class JsPackageManager {
 
 
   retrievePackageJson() {
-    let packageJson = (0, _PackageJsonHelper.readPackageJson)();
+    let packageJson;
 
-    if (!packageJson) {
-      // It will create a new package.json file
-      this.initPackageJson(); // read the newly created package.json file
-
-      packageJson = (0, _PackageJsonHelper.readPackageJson)() || {};
+    try {
+      packageJson = (0, _PackageJsonHelper.readPackageJson)();
+    } catch (err) {
+      this.initPackageJson();
+      packageJson = (0, _PackageJsonHelper.readPackageJson)();
     }
 
     return Object.assign({}, packageJson, {

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

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -16,7 +16,7 @@ function readPackageJson() {
   const packageJsonPath = _path.default.resolve('package.json');
 
   if (!_fs.default.existsSync(packageJsonPath)) {
-    return false;
+    throw new Error(`Could not read package.json file at ${packageJsonPath}`);
   }
 
   const jsonContent = _fs.default.readFileSync(packageJsonPath, 'utf8');

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 = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createAndInit = exports.exec = void 0;
+exports.exec = exports.createAndInit = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -15,6 +15,12 @@ var _shelljs = _interopRequireDefault(require("shelljs"));
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
+var _configs = require("./configs");
+
+var _versions = _interopRequireDefault(require("../versions"));
+
+const _excluded = ["name", "version"];
+
 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; }
@@ -36,17 +42,18 @@ const exec = async (command, options = {}, {
       silent: true
     };
 
-    _shelljs.default.exec(command, Object.assign({}, defaultOptions, options), (code, stdout, stderr) => {
+    const child = _shelljs.default.exec(command, Object.assign({}, defaultOptions, options, {
+      async: true
+    }));
+
+    child.stderr.pipe(process.stderr);
+    child.stdout.pipe(process.stdout);
+    child.on('exit', code => {
       if (code === 0) {
         resolve(undefined);
       } else {
         logger.error(_chalk.default.red(`An error occurred while executing: \`${command}\``));
-        logger.error(`Command output was:${_chalk.default.yellow(`\n${stdout}\n${stderr}`)}`);
-
-        if (errorMessage) {
-          logger.error(errorMessage);
-        }
-
+        logger.log(errorMessage);
         reject(new Error(`command exited with code: ${code}: `));
       }
     });
@@ -55,12 +62,34 @@ const exec = async (command, options = {}, {
 
 exports.exec = exec;
 
+const addPackageResolutions = async ({
+  cwd
+}) => {
+  logger.info(`🔢 Adding package resolutions:`);
+
+  const packageJsonPath = _path.default.join(cwd, 'package.json');
+
+  const packageJson = await (0, _fsExtra.readJSON)(packageJsonPath);
+  packageJson.resolutions = _versions.default;
+  await (0, _fsExtra.writeJSON)(packageJsonPath, packageJson, {
+    spaces: 2
+  });
+};
+
 const installYarn2 = async ({
   cwd,
-  pnp
+  pnp,
+  name
 }) => {
-  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`].join(' && ');
-  await exec(command, {
+  const command = [`yarn set version berry`, `yarn config set enableGlobalCache true`, `yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`]; // FIXME: Some dependencies used by CRA aren't listed in its package.json
+  // Next line is a hack to remove as soon as CRA will have added these missing deps
+  // for details see https://github.com/facebook/create-react-app/pull/11751
+
+  if ([_configs.cra.name, _configs.cra_typescript.name].includes(name)) {
+    command.push(`yarn config set packageExtensions --json '{ "babel-preset-react-app@10.0.x": { "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.16.0" } } }'`);
+  }
+
+  await exec(command.join(' && '), {
     cwd
   }, {
     startMessage: `🧶 Installing Yarn 2`,
@@ -182,7 +211,7 @@ const createAndInit = async (cwd, _ref, {
     name,
     version
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["name", "version"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const options = Object.assign({
     name,
@@ -196,11 +225,14 @@ const createAndInit = async (cwd, _ref, {
   logger.log();
   logger.info(`🏃 Starting for ${name} ${version}`);
   logger.log();
-  logger.debug(options);
-  logger.log();
   await doTask(generate, Object.assign({}, options, {
     cwd: options.creationPath
   }));
+
+  if (e2e) {
+    await doTask(addPackageResolutions, options);
+  }
+
   await doTask(installYarn2, options);
   await doTask(configureYarn2ForE2E, options, e2e);
   await doTask(addTypescript, options, !!options.typescript);

package/dist/modern/repro.js

@@ -25,9 +25,9 @@ var _scripts = require("./repro-generators/scripts");
 
 var configs = _interopRequireWildcard(require("./repro-generators/configs"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -169,6 +169,7 @@ const repro = async ({
     }));
   } catch (error) {
     logger.error('🚨 Failed to create repro');
+    throw new Error(error);
   }
 };
 

package/dist/modern/typings.d.ts

@@ -0,0 +1,3 @@
+declare module '@storybook/codemod';
+declare module 'envinfo';
+declare module '@storybook/semver';

package/dist/modern/upgrade.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.upgrade = exports.addExtraFlags = exports.checkVersionConsistency = exports.isCorePackage = exports.getStorybookVersion = void 0;
+exports.upgrade = exports.isCorePackage = exports.getStorybookVersion = exports.checkVersionConsistency = exports.addExtraFlags = void 0;
+
+require("core-js/modules/es.array.sort.js");
 
 require("core-js/modules/es.promise.js");
 
 var _crossSpawn = require("cross-spawn");
 
+var _telemetry = require("@storybook/telemetry");
+
 var _semver = _interopRequireDefault(require("@storybook/semver"));
 
 var _nodeLogger = require("@storybook/node-logger");
@@ -19,8 +23,12 @@ var _helpers = require("./helpers");
 
 var _automigrate = require("./automigrate");
 
+const _excluded = ["prerelease", "skipCheck", "useNpm", "dryRun", "yes"];
+
 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; }
+
 const versionRegex = /(@storybook\/[^@]+)@(\S+)/;
 
 const getStorybookVersion = line => {
@@ -34,7 +42,7 @@ const getStorybookVersion = line => {
 };
 
 exports.getStorybookVersion = getStorybookVersion;
-const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer'];
+const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer', '@storybook/addon-postcss', '@storybook/react-docgen-typescript-plugin', '@storybook/babel-plugin-require-context-hook', '@storybook/builder-vite', '@storybook/mdx1-csf', '@storybook/mdx2-csf', '@storybook/expect', '@storybook/jest', '@storybook/test-runner', '@storybook/testing-library'];
 
 const isCorePackage = pkg => pkg.startsWith('@storybook/') && !pkg.startsWith('@storybook/preset-') && !excludeList.includes(pkg);
 
@@ -118,16 +126,26 @@ const addExtraFlags = (extraFlags, flags, {
 
 exports.addExtraFlags = addExtraFlags;
 
-const upgrade = async ({
-  prerelease,
-  skipCheck,
-  useNpm,
-  dryRun,
-  yes
-}) => {
+const upgrade = async _ref => {
+  let {
+    prerelease,
+    skipCheck,
+    useNpm,
+    dryRun,
+    yes
+  } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(useNpm);
 
   (0, _helpers.commandLog)(`Checking for latest versions of '@storybook/*' packages`);
+
+  if (!options.disableTelemetry) {
+    (0, _telemetry.telemetry)('upgrade', {
+      prerelease
+    });
+  }
+
   let flags = [];
   if (!dryRun) flags.push('--upgrade');
   flags.push('--target');