@storybook/cli 6.5.9 → 7.0.0-alpha.10

package/dist/esm/generate.js

@@ -14,6 +14,8 @@ var _leven = _interopRequireDefault(require("leven"));
 
 var _readPkgUp = require("read-pkg-up");
 
+var _nodeLogger = require("@storybook/node-logger");
+
 var _initiate = require("./initiate");
 
 var _add = require("./add");
@@ -32,19 +34,25 @@ var _automigrate = require("./automigrate");
 
 var _babelConfig = require("./babel-config");
 
+var _dev = require("./dev");
+
+var _build = require("./build");
+
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pkg = (0, _readPkgUp.sync)({
   cwd: __dirname
 }).packageJson;
-const logger = console;
+const consoleLogger = console;
 
 _commander.default.option('--disable-telemetry', 'disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
 process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false');
 
 _commander.default.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
 
-_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
+_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
 
 _commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
 
@@ -53,7 +61,7 @@ _commander.default.command('babelrc').description('generate the default storyboo
 _commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => (0, _upgrade.upgrade)(options));
 
 _commander.default.command('info').description('Prints debugging information about the local environment').action(() => {
-  logger.log(_chalk.default.bold('\nEnvironment Info:'));
+  consoleLogger.log(_chalk.default.bold('\nEnvironment Info:'));
 
   _envinfo.default.run({
     System: ['OS', 'CPU'],
@@ -61,7 +69,7 @@ _commander.default.command('info').description('Prints debugging information abo
     Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
     npmPackages: '@storybook/*',
     npmGlobalPackages: '@storybook/*'
-  }).then(logger.log);
+  }).then(consoleLogger.log);
 });
 
 _commander.default.command('migrate [migration]').description('Run a Storybook codemod migration on your source files').option('-l --list', 'List available migrations').option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-n --dry-run', 'Dry run: verify the migration exists and show the files to which it will be applied').option('-r --rename <from-to>', 'Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"').action((migration, {
@@ -79,35 +87,40 @@ _commander.default.command('migrate [migration]').description('Run a Storybook c
     list,
     rename,
     parser,
-    logger
+    logger: consoleLogger
   }).catch(err => {
-    logger.error(err);
+    _nodeLogger.logger.error(err);
+
     process.exit(1);
   });
 });
 
 _commander.default.command('extract [location] [output]').description('extract stories.json from a built version').action((location = 'storybook-static', output = _path.default.join(location, 'stories.json')) => (0, _extract.extract)(location, output).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
-_commander.default.command('repro [outputDirectory]').description('Create a reproduction from a set of possible templates').option('-f --framework <framework>', 'Filter on given framework').option('-t --template <template>', 'Use the given template').option('-l --list', 'List available templates').option('-g --generator <generator>', 'Use custom generator command').option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one").option('--e2e', 'Used in e2e context').action((outputDirectory, {
-  framework,
+_commander.default.command('repro [outputDirectory]').description('Create a reproduction from a set of possible templates').option('-f --renderer <renderer>', 'Filter on given renderer').option('-t --template <template>', 'Use the given template').option('-l --list', 'List available templates').option('-g --generator <generator>', 'Use custom generator command').option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one").option('--local', "use storybook's local packages instead of yarn's registry").option('--e2e', 'Used in e2e context').action((outputDirectory, {
+  renderer,
   template,
   list,
   e2e,
   generator,
-  pnp
+  pnp,
+  local
 }) => (0, _repro.repro)({
   outputDirectory,
-  framework,
+  renderer,
   template,
   list,
   e2e,
+  local,
   generator,
   pnp
 }).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
@@ -117,26 +130,69 @@ _commander.default.command('link <repo-url-or-directory>').description('Pull dow
   target,
   local
 }).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
 _commander.default.command('automigrate [fixId]').description('Check storybook for known problems or migrations and apply fixes').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for fixes, do not actually run them').action((fixId, options) => (0, _automigrate.automigrate)(Object.assign({
   fixId
 }, options)).catch(e => {
-  logger.error(e);
+  _nodeLogger.logger.error(e);
+
   process.exit(1);
 }));
 
+_commander.default.command('dev').option('-p, --port <number>', 'Port to run Storybook', str => parseInt(str, 10)).option('-h, --host <string>', 'Host to run Storybook').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--https', 'Serve Storybook over HTTPS. Note: You must provide your own certificate information.').option('--ssl-ca <ca>', 'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)', _utils.parseList).option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)').option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)').option('--smoke-test', 'Exit after successful start').option('--ci', "CI mode (skip interactive prompts, don't open browser)").option('--no-open', 'Do not open Storybook automatically in the browser').option('--loglevel <level>', 'Control level of logging during build').option('--quiet', 'Suppress verbose build output').option('--no-version-updates', 'Suppress update check', true).option('--no-release-notes', 'Suppress automatic redirects to the release notes after upgrading', true).option('--no-manager-cache', 'Do not cache the manager UI').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').action(options => {
+  _nodeLogger.logger.setLevel(_commander.default.loglevel);
+
+  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}`) + _chalk.default.reset('\n')); // The key is the field created in `program` variable for
+  // each command line argument. Value is the env variable.
+
+  (0, _utils.getEnvConfig)(_commander.default, {
+    port: 'SBCONFIG_PORT',
+    host: 'SBCONFIG_HOSTNAME',
+    staticDir: 'SBCONFIG_STATIC_DIR',
+    configDir: 'SBCONFIG_CONFIG_DIR',
+    ci: 'CI'
+  });
+
+  if (typeof _commander.default.port === 'string' && _commander.default.port.length > 0) {
+    _commander.default.port = parseInt(_commander.default.port, 10);
+  }
+
+  (0, _dev.dev)(Object.assign({}, options, {
+    packageJson: pkg
+  }));
+});
+
+_commander.default.command('build').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-o, --output-dir <dir-name>', 'Directory where to store built files').option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from').option('--quiet', 'Suppress verbose build output').option('--loglevel <level>', 'Control level of logging during build').option('--debug-webpack', 'Display final webpack configurations for debugging purposes').option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk').option('--preview-url <string>', 'Disables the default storybook preview and lets your use your own').option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url').option('--docs', 'Build a documentation-only site using addon-docs').option('--no-manager-cache', 'Do not cache the manager UI').action(options => {
+  process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+  _nodeLogger.logger.setLevel(_commander.default.loglevel);
+
+  consoleLogger.log(_chalk.default.bold(`${pkg.name} v${pkg.version}\n`)); // The key is the field created in `program` variable for
+  // each command line argument. Value is the env variable.
+
+  (0, _utils.getEnvConfig)(_commander.default, {
+    staticDir: 'SBCONFIG_STATIC_DIR',
+    outputDir: 'SBCONFIG_OUTPUT_DIR',
+    configDir: 'SBCONFIG_CONFIG_DIR'
+  });
+  (0, _build.build)(Object.assign({}, options, {
+    packageJson: pkg
+  }));
+});
+
 _commander.default.on('command:*', ([invalidCmd]) => {
-  logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
+  consoleLogger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
 
   const availableCommands = _commander.default.commands.map(cmd => cmd._name);
 
   const suggestion = availableCommands.find(cmd => (0, _leven.default)(cmd, invalidCmd) < 3);
 
   if (suggestion) {
-    logger.log(`\n Did you mean ${suggestion}?`);
+    consoleLogger.info(`\n Did you mean ${suggestion}?`);
   }
 
   process.exit(1);

package/dist/esm/generators/ANGULAR/index.js

@@ -57,7 +57,30 @@ const generator = async (packageManager, npmOptions, options) => {
     addScripts: false
   });
   (0, _helpers.copyTemplate)(__dirname);
-  editAngularAppTsConfig();
+  editAngularAppTsConfig(); // TODO: we need to add the following:
+
+  /*
+  "storybook": {
+    "builder": "@storybook/angular:start-storybook",
+    "options": {
+      "browserTarget": "angular-cli:build",
+      "port": 4400
+    }
+  },
+  "build-storybook": {
+    "builder": "@storybook/angular:build-storybook",
+    "options": {
+      "browserTarget": "angular-cli:build"
+    }
+  }
+  */
+  // to the user's angular.json file. see: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78
+  // then we want to add these scripts to package.json
+  // packageManager.addScripts({
+  //   storybook: 'ng storybook',
+  //   'build-storybook': 'ng build-storybook',
+  // });
+
   (0, _angularHelpers.editStorybookTsConfig)(_path.default.resolve('./.storybook/tsconfig.json')); // edit scripts to generate docs
 
   const tsConfigFile = await (0, _angularHelpers.getBaseTsConfigName)();

package/dist/esm/generators/REACT_NATIVE/index.js

@@ -37,7 +37,7 @@ const generator = async (packageManager, npmOptions, installServer) => {
   const webAddonsV5 = ['@storybook/addon-links@^5.3', '@storybook/addon-knobs@^5.3', '@storybook/addon-actions@^5.3'];
   const nativeAddons = ['@storybook/addon-ondevice-knobs', '@storybook/addon-ondevice-actions'];
   const packagesToResolve = [...nativeAddons, '@storybook/react-native', installServer && '@storybook/react-native-server'].filter(Boolean);
-  const resolvedPackages = await packageManager.getVersionedPackages(...packagesToResolve);
+  const resolvedPackages = await packageManager.getVersionedPackages(packagesToResolve);
   const babelDependencies = await (0, _helpers.getBabelDependencies)(packageManager, packageJson);
   const packages = [...babelDependencies, ...resolvedPackages, ...webAddonsV5, missingReactDom && reactVersion && `react-dom@${reactVersion}`].filter(Boolean);
   packageManager.addDependencies(Object.assign({}, npmOptions, {

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

@@ -22,17 +22,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const generator = async (packageManager, npmOptions, options) => {
   var _semver$coerce;
 
+  const monorepoRootPath = _path.default.join(__dirname, '..', '..', '..', '..', '..', '..');
+
   const extraMain = options.linkable ? {
     webpackFinal: `%%(config) => {
-      const path = require('path');
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
-          p.appSrcs.push(path.join(__dirname, '..', '..', '..', 'storybook'));
-        }
-      });
-      return config;
-    }
+          p.appSrcs.push('${monorepoRootPath}');
+              }
+            });
+          return config;
+          }
     %%`
   } : {};
   const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;

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

@@ -16,25 +16,21 @@ var _baseGenerator = require("../baseGenerator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const generator = async (packageManager, npmOptions, options) => {
-  let extraMain;
+  let svelteOptions;
   let commonJs = false; // svelte.config.js ?
 
   if (_fsExtra.default.existsSync('./svelte.config.js')) {
     _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.js'");
 
-    extraMain = {
-      svelteOptions: {
-        preprocess: '%%require("../svelte.config.js").preprocess%%'
-      }
+    svelteOptions = {
+      preprocess: '%%require("../svelte.config.js").preprocess%%'
     };
   } else if (_fsExtra.default.existsSync('./svelte.config.cjs')) {
     _nodeLogger.logger.info("Configuring preprocessor from 'svelte.config.cjs'");
 
     commonJs = true;
-    extraMain = {
-      svelteOptions: {
-        preprocess: '%%require("../svelte.config.cjs").preprocess%%'
-      }
+    svelteOptions = {
+      preprocess: '%%require("../svelte.config.cjs").preprocess%%'
     };
   } else {
     // svelte-preprocess dependencies ?
@@ -43,10 +39,8 @@ const generator = async (packageManager, npmOptions, options) => {
     if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) {
       _nodeLogger.logger.info("Configuring preprocessor with 'svelte-preprocess'");
 
-      extraMain = {
-        svelteOptions: {
-          preprocess: '%%require("svelte-preprocess")()%%'
-        }
+      svelteOptions = {
+        preprocess: '%%require("svelte-preprocess")()%%'
       };
     }
   }
@@ -54,7 +48,7 @@ const generator = async (packageManager, npmOptions, options) => {
   await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
     extraPackages: ['svelte', 'svelte-loader'],
     extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
-    extraMain,
+    framework: svelteOptions,
     commonJs
   });
 };

package/dist/esm/generators/baseGenerator.js

@@ -11,8 +11,6 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
-var _coreCommon = require("@storybook/core-common");
-
 var _project_types = require("../project_types");
 
 var _helpers = require("../helpers");
@@ -23,6 +21,8 @@ var _jsPackageManager = require("../js-package-manager");
 
 var _babelConfig = require("../babel-config");
 
+var _versions = _interopRequireDefault(require("../versions"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultOptions = {
@@ -34,24 +34,65 @@ const defaultOptions = {
   addBabel: true,
   addESLint: false,
   extraMain: undefined,
+  framework: undefined,
   extensions: undefined,
   commonJs: false
 };
 
-const builderDependencies = builder => {
-  switch (builder) {
-    case _project_types.CoreBuilder.Webpack4:
-      return ['@storybook/builder-webpack4', '@storybook/manager-webpack4'];
+const getBuilderDetails = builder => {
+  const map = _versions.default;
 
-    case _project_types.CoreBuilder.Webpack5:
-      return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+  if (map[builder]) {
+    return builder;
+  }
 
-    case _project_types.CoreBuilder.Vite:
-      return ['@storybook/builder-vite'];
+  const builderPackage = `@storybook/${builder}`;
 
-    default:
-      return [builder];
+  if (map[builderPackage]) {
+    return builderPackage;
   }
+
+  return builder;
+};
+
+const wrapForPnp = packageName => `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%`;
+
+const getFrameworkDetails = (renderer, builder, pnp) => {
+  const frameworkPackage = `@storybook/${renderer}-${builder}`;
+  const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage;
+  const rendererPackage = `@storybook/${renderer}`;
+  const rendererPackagePath = pnp ? wrapForPnp(rendererPackage) : rendererPackage;
+  const builderPackage = getBuilderDetails(builder);
+  const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage;
+  const isKnownFramework = !!_versions.default[frameworkPackage];
+  const isKnownRenderer = !!_versions.default[rendererPackage];
+
+  if (renderer === 'angular') {
+    return {
+      packages: [rendererPackage],
+      framework: rendererPackagePath,
+      type: 'framework'
+    };
+  }
+
+  if (isKnownFramework) {
+    return {
+      packages: [frameworkPackage],
+      framework: frameworkPackagePath,
+      type: 'framework'
+    };
+  }
+
+  if (isKnownRenderer) {
+    return {
+      packages: [rendererPackage, builderPackage],
+      builder: builderPackagePath,
+      renderer: rendererPackagePath,
+      type: 'renderer'
+    };
+  }
+
+  throw new Error(`Could not find the framework (${frameworkPackage}) or renderer (${rendererPackage}) package`);
 };
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
@@ -60,10 +101,11 @@ const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelt
 
 async function baseGenerator(packageManager, npmOptions, {
   language,
-  builder
-}, framework, options = defaultOptions) {
+  builder = _project_types.CoreBuilder.Webpack5,
+  pnp
+}, renderer, options = defaultOptions) {
   const {
-    extraAddons,
+    extraAddons: extraAddonPackages,
     extraPackages,
     staticDir,
     addScripts,
@@ -75,50 +117,61 @@ async function baseGenerator(packageManager, npmOptions, {
   } = Object.assign({}, defaultOptions, options); // added to main.js
   // make sure to update `canUsePrebuiltManager` in dev-server.js and build-manager-config/main.js when this list changes
 
-  const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
+  const addons = ['@storybook/addon-links', '@storybook/addon-essentials', ...stripVersions(extraAddonPackages)]; // added to package.json
 
-  const addonPackages = [...addons, '@storybook/addon-actions'];
+  const addonPackages = ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-actions', ...extraAddonPackages];
 
-  if (hasInteractiveStories(framework)) {
+  if (hasInteractiveStories(renderer)) {
     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 yarn2ExtraPackages = 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();
-  const installedDependencies = new Set(Object.keys(packageJson.dependencies));
-  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: expandedBuilder
-    }
-  }, extraMain) : extraMain; // Default vite builder to storyStoreV7
-
-  if (expandedBuilder === '@storybook/builder-vite') {
-    mainOptions.features = Object.assign({}, mainOptions.features, {
-      storyStoreV7: true
-    });
+  const installedDependencies = new Set(Object.keys(Object.assign({}, packageJson.dependencies, packageJson.devDependencies)));
+  const {
+    packages: frameworkPackages,
+    type,
+    // @ts-ignore
+    renderer: rendererInclude,
+    // deepscan-disable-line UNUSED_DECL
+    framework: frameworkInclude,
+    builder: builderInclude
+  } = getFrameworkDetails(renderer, builder, pnp); // TODO: We need to start supporting this at some point
+
+  if (type === 'renderer') {
+    throw new Error((0, _tsDedent.default)`
+        Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5
+
+        https://github.com/storybookjs/storybook/issues/18360
+      `);
   }
 
-  (0, _configure.configure)(framework, Object.assign({
-    framework: frameworkPackage,
-    addons: [...addons, ...stripVersions(extraAddons)],
+  const packages = ['storybook', ...frameworkPackages, ...addonPackages, ...extraPackages, ...yarn2ExtraPackages].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const versionedPackages = await packageManager.getVersionedPackages(packages);
+  await _fsExtra.default.ensureDir('./.storybook');
+  await (0, _configure.configureMain)(Object.assign({
+    framework: {
+      name: frameworkInclude,
+      options: options.framework || {}
+    },
+    addons: pnp ? addons.map(wrapForPnp) : addons,
     extensions,
     commonJs: options.commonJs
-  }, mainOptions));
+  }, extraMain, type !== 'framework' ? {
+    core: {
+      builder: builderInclude
+    }
+  } : {}));
+  await (0, _configure.configurePreview)(renderer, options.commonJs);
 
   if (addComponents) {
-    (0, _helpers.copyComponents)(framework, language);
+    (0, _helpers.copyComponents)(renderer, language);
   } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
 
 
-  if (expandedBuilder === '@storybook/builder-vite') {
+  if (frameworkPackages.includes('@storybook/builder-vite')) {
     const previewHead = (0, _tsDedent.default)`
       <script>
         window.global = window;
@@ -130,9 +183,9 @@ async function baseGenerator(packageManager, npmOptions, {
   }
 
   const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
+  const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
 
   if (isNewFolder) {
-    babelDependencies.push(...(0, _coreCommon.getStorybookBabelDependencies)());
     await (0, _babelConfig.generateStorybookBabelConfigInCWD)();
   }
 

package/dist/esm/generators/configure.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.configure = configure;
+exports.configureMain = configureMain;
+exports.configurePreview = configurePreview;
+
+require("core-js/modules/es.promise.js");
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
@@ -15,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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; }
 
-function configureMain(_ref) {
+async function configureMain(_ref) {
   let {
     addons,
     extensions = ['js', 'jsx', 'ts', 'tsx'],
@@ -23,17 +26,20 @@ function configureMain(_ref) {
   } = _ref,
       custom = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
+  const prefix = (await _fsExtra.default.pathExists('./src')) ? '../src' : '../stories';
   const config = Object.assign({
     stories: [`${prefix}/**/*.stories.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
     addons
   }, custom); // replace escaped values and delimiters
 
-  const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/, '').replace(/\\n/g, '\r\n')}`;
-
-  _fsExtra.default.ensureDirSync('./.storybook');
+  const stringified = `module.exports = ${JSON.stringify(config, null, 2).replace(/\\"/g, '"').replace(/['"]%%/g, '').replace(/%%['"]/g, '').replace(/\\n/g, '\r\n')}`; // main.js isn't actually JSON, but we used JSON.stringify to convert the runtime-object into code.
+  // un-stringify the value for referencing packages by string
+  // .replaceAll(/"(path\.dirname\(require\.resolve\(path\.join\('.*\))"/g, (_, a) => a)}`;
 
-  _fsExtra.default.writeFileSync(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, stringified, {
+  await _fsExtra.default.writeFile(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, (0, _tsDedent.default)`
+      const path = require('path');
+      ${stringified}
+    `, {
     encoding: 'utf8'
   });
 }
@@ -50,14 +56,14 @@ const frameworkToPreviewParts = {
   }
 };
 
-function configurePreview(framework, commonJs) {
+async function configurePreview(framework, commonJs) {
   const {
     prefix = '',
     extraParameters = ''
   } = frameworkToPreviewParts[framework] || {};
   const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; // If the framework template included a preview then we have nothing to do
 
-  if (_fsExtra.default.existsSync(previewPath)) {
+  if (await _fsExtra.default.pathExists(previewPath)) {
     return;
   }
 
@@ -73,15 +79,7 @@ function configurePreview(framework, commonJs) {
       },
       ${extraParameters}
     }`.replace('  \n', '').trim();
-
-  _fsExtra.default.writeFileSync(previewPath, preview, {
+  await _fsExtra.default.writeFile(previewPath, preview, {
     encoding: 'utf8'
   });
-}
-
-function configure(framework, mainOptions) {
-  _fsExtra.default.ensureDirSync('./.storybook');
-
-  configureMain(mainOptions);
-  configurePreview(framework, mainOptions.commonJs);
 }

package/dist/esm/helpers.js

@@ -189,51 +189,49 @@ function copyTemplate(templateRoot) {
   });
 }
 
-function copyComponents(framework, language) {
+async function copyComponents(framework, language) {
   const languageFolderMapping = {
     javascript: 'js',
     typescript: 'ts'
   };
 
-  const componentsPath = () => {
+  const componentsPath = async () => {
     const frameworkPath = `frameworks/${framework}`;
 
     const languageSpecific = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping[language]}`);
 
-    if (_fsExtra.default.existsSync(languageSpecific)) {
+    if (await _fsExtra.default.pathExists(languageSpecific)) {
       return languageSpecific;
     }
 
     const jsFallback = _path.default.resolve(__dirname, `${frameworkPath}/${languageFolderMapping.javascript}`);
 
-    if (_fsExtra.default.existsSync(jsFallback)) {
+    if (await _fsExtra.default.pathExists(jsFallback)) {
       return jsFallback;
     }
 
     const frameworkRootPath = _path.default.resolve(__dirname, frameworkPath);
 
-    if (_fsExtra.default.existsSync(frameworkRootPath)) {
+    if (await _fsExtra.default.pathExists(frameworkRootPath)) {
       return frameworkRootPath;
     }
 
     throw new Error(`Unsupported framework: ${framework}`);
   };
 
-  const targetPath = () => {
-    if (_fsExtra.default.existsSync('./src')) {
+  const targetPath = async () => {
+    if (await _fsExtra.default.pathExists('./src')) {
       return './src/stories';
     }
 
     return './stories';
   };
 
-  const destinationPath = targetPath();
-
-  _fsExtra.default.copySync(componentsPath(), destinationPath, {
+  const destinationPath = await targetPath();
+  await _fsExtra.default.copy(await componentsPath(), destinationPath, {
     overwrite: true
   });
-
-  _fsExtra.default.copySync(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
+  await _fsExtra.default.copy(_path.default.resolve(__dirname, 'frameworks/common'), destinationPath, {
     overwrite: true
   });
 }