@storybook/cli 7.0.0-alpha.31 → 7.0.0-alpha.34

package/dist/esm/automigrate/fixes/angular12.js

@@ -1,58 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { webpack5 } from './webpack5';
-
-/**
- * Is the user upgrading to Angular12?
- *
- * If so:
- * - Run webpack5 fix
- */
-export const angular12 = {
-  id: 'angular12',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const angularVersion = dependencies['@angular/core'] || devDependencies['@angular/core'];
-    const angularCoerced = semver.coerce(angularVersion)?.version;
-
-    if (!angularCoerced || semver.lt(angularCoerced, '12.0.0')) {
-      return null;
-    }
-
-    const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      angularVersion
-    }, builderInfo) : null;
-  },
-
-  prompt({
-    angularVersion
-  }) {
-    const angularFormatted = chalk.cyan(`Angular ${angularVersion}`);
-    return dedent`
-      We've detected you are running ${angularFormatted} which is powered by webpack5.
-      Your Storybook's main.js files specifies webpack4, which is incompatible.
-
-      In order to work with your version of Angular, we need to install Storybook's ${chalk.cyan('@storybook/builder-webpack5')}.
-
-      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular12-upgrade')}
-    `;
-  },
-
-  async run(options) {
-    return webpack5.run(Object.assign({}, options, {
-      result: Object.assign({
-        webpackVersion: null
-      }, options.result)
-    }));
-  }
-
-};

package/dist/esm/automigrate/fixes/builder-vite.js

@@ -1,103 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo } from '@storybook/core-common';
-const logger = console;
-
-/**
- * Is the user using 'storybook-builder-vite' in their project?
- *
- * If so, prompt them to upgrade to '@storybook/builder-vite'.
- *
- * - Add '@storybook/builder-vite' as dev dependency
- * - Remove 'storybook-builder-vite' dependency
- * - Add core.builder = '@storybook/builder-vite' to main.js
- */
-export const builderVite = {
-  id: 'builder-vite',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      mainConfig
-    } = getStorybookInfo(packageJson);
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config');
-      return null;
-    }
-
-    const main = await readConfig(mainConfig);
-    const builder = main.getFieldValue(['core', 'builder']);
-    const builderName = typeof builder === 'string' ? builder : builder?.name;
-
-    if (builderName !== 'storybook-builder-vite') {
-      return null;
-    }
-
-    return {
-      builder,
-      main,
-      packageJson
-    };
-  },
-
-  prompt({
-    builder
-  }) {
-    const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2));
-    return dedent`
-      We've detected you're using the community vite builder: ${builderFormatted}
-      
-      'storybook-builder-vite' is deprecated and now located at ${chalk.cyan('@storybook/builder-vite')}.
-
-      We can upgrade your project to use the new builder automatically.
-      
-      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed')}
-    `;
-  },
-
-  async run({
-    result: {
-      builder,
-      main,
-      packageJson
-    },
-    packageManager,
-    dryRun
-  }) {
-    const {
-      dependencies = {},
-      devDependencies = {}
-    } = packageJson;
-    logger.info(`Removing existing 'storybook-builder-vite' dependency`);
-
-    if (!dryRun) {
-      delete dependencies['storybook-builder-vite'];
-      delete devDependencies['storybook-builder-vite'];
-      packageManager.writePackageJson(packageJson);
-    }
-
-    logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
-
-    if (!dryRun) {
-      packageManager.addDependencies({
-        installAsDevDependencies: true
-      }, ['@storybook/builder-vite']);
-    }
-
-    logger.info(`Updating main.js to use vite builder`);
-
-    if (!dryRun) {
-      const updatedBuilder = typeof builder === 'string' ? '@storybook/builder-vite' : {
-        name: '@storybook/builder-vite',
-        options: builder.options
-      };
-      main.setFieldValue(['core', 'builder'], updatedBuilder);
-      await writeConfig(main);
-    }
-  }
-
-};

package/dist/esm/automigrate/fixes/cra5.js

@@ -1,66 +0,0 @@
-const _excluded = ["craVersion"];
-
-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; }
-
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { webpack5 } from './webpack5';
-
-/**
- * Is the user upgrading from CRA4 to CRA5?
- *
- * If so:
- * - Run webpack5 fix
- */
-export const cra5 = {
-  id: 'cra5',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const craVersion = dependencies['react-scripts'] || devDependencies['react-scripts'];
-    const craCoerced = semver.coerce(craVersion)?.version;
-
-    if (!craCoerced || semver.lt(craCoerced, '5.0.0')) {
-      return null;
-    }
-
-    const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      craVersion
-    }, builderInfo) : null;
-  },
-
-  prompt(_ref) {
-    let {
-      craVersion
-    } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-    const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`);
-    console.log(Object.assign({}, rest));
-    return dedent`
-      We've detected you are running ${craFormatted} which is powered by webpack5.
-      Your Storybook's main.js files specifies webpack4, which is incompatible.
-
-      In order to work with your version of CRA, we need to install Storybook's ${chalk.cyan('@storybook/builder-webpack5')}.
-
-      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade')}
-    `;
-  },
-
-  async run(options) {
-    return webpack5.run(Object.assign({}, options, {
-      result: Object.assign({
-        webpackVersion: null
-      }, options.result)
-    }));
-  }
-
-};

package/dist/esm/automigrate/fixes/eslint-plugin.js

@@ -1,111 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo } from '@storybook/core-common';
-import { findEslintFile, SUPPORTED_ESLINT_EXTENSIONS } from '../helpers/getEslintInfo';
-const logger = console;
-
-/**
- * Does the user not have eslint-plugin-storybook installed?
- *
- * If so:
- * - Install it, and if possible configure it
- */
-export const eslintPlugin = {
-  id: 'eslintPlugin',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const eslintPluginStorybook = dependencies['eslint-plugin-storybook'] || devDependencies['eslint-plugin-storybook'];
-    const eslintDependency = dependencies.eslint || devDependencies.eslint;
-
-    if (eslintPluginStorybook || !eslintDependency) {
-      return null;
-    }
-
-    const {
-      mainConfig
-    } = getStorybookInfo(packageJson);
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config, skipping');
-      return null;
-    }
-
-    let eslintFile;
-    let unsupportedExtension;
-
-    try {
-      eslintFile = findEslintFile();
-    } catch (err) {
-      unsupportedExtension = err.message;
-    }
-
-    if (!eslintFile && !unsupportedExtension) {
-      logger.warn('Unable to find .eslintrc config file, skipping');
-      return null;
-    } // If in the future the eslint plugin has a framework option, using main to extract the framework field will be very useful
-
-
-    const main = await readConfig(mainConfig);
-    return {
-      eslintFile,
-      main,
-      unsupportedExtension
-    };
-  },
-
-  prompt() {
-    return dedent`
-      We've detected you are not using our eslint-plugin.
-
-      In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
-
-      More info: ${chalk.yellow('https://github.com/storybookjs/eslint-plugin-storybook#readme')}
-    `;
-  },
-
-  async run({
-    result: {
-      eslintFile,
-      unsupportedExtension
-    },
-    packageManager,
-    dryRun
-  }) {
-    const deps = [`eslint-plugin-storybook`];
-    logger.info(`✅ Adding dependencies: ${deps}`);
-    if (!dryRun) packageManager.addDependencies({
-      installAsDevDependencies: true
-    }, deps);
-
-    if (!dryRun && unsupportedExtension) {
-      throw new Error(dedent`
-          ⚠️ The plugin was successfuly installed but failed to configure.
-          
-          Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}.
-          Supported formats for automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join(', ')}.
-
-          Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.
-      `);
-    }
-
-    const eslint = await readConfig(eslintFile);
-    logger.info(`✅ Configuring eslint rules in ${eslint.fileName}`);
-
-    if (!dryRun) {
-      logger.info(`✅ Adding Storybook to extends list`);
-      const extendsConfig = eslint.getFieldValue(['extends']) || [];
-      const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
-      eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']);
-      await writeConfig(eslint);
-    }
-  }
-
-};

package/dist/esm/automigrate/fixes/index.js

@@ -1,12 +0,0 @@
-import { cra5 } from './cra5';
-import { webpack5 } from './webpack5';
-import { angular12 } from './angular12';
-import { vue3 } from './vue3';
-import { mainjsFramework } from './mainjsFramework';
-import { eslintPlugin } from './eslint-plugin';
-import { builderVite } from './builder-vite';
-import { npm7 } from './npm7';
-import { sbScripts } from './sb-scripts';
-import { newFrameworks } from './new-frameworks';
-export * from '../types';
-export const fixes = [cra5, webpack5, angular12, vue3, mainjsFramework, eslintPlugin, builderVite, npm7, sbScripts, newFrameworks];

package/dist/esm/automigrate/fixes/mainjsFramework.js

@@ -1,76 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo } from '@storybook/core-common';
-const logger = console;
-export const mainjsFramework = {
-  id: 'mainjsFramework',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson(); // FIXME: use renderer in SB7?
-
-    const {
-      mainConfig,
-      framework,
-      version: storybookVersion
-    } = getStorybookInfo(packageJson);
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config, skipping');
-      return null;
-    }
-
-    const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
-
-    if (!storybookCoerced) {
-      logger.warn(dedent`
-        ❌ Unable to determine storybook version, skipping ${chalk.cyan('mainjsFramework')} fix.
-        🤔 Are you running automigrate from your project directory?
-      `);
-      return null;
-    }
-
-    const main = await readConfig(mainConfig);
-    const currentFramework = main.getFieldValue(['framework']);
-    const features = main.getFieldValue(['features']);
-    if (currentFramework) return null;
-    return features?.breakingChangesV7 || features?.storyStoreV7 || semver.gte(storybookCoerced, '7.0.0') ? {
-      main,
-      framework: `@storybook/${framework}`
-    } : null;
-  },
-
-  prompt({
-    framework
-  }) {
-    const frameworkFormatted = chalk.cyan(`framework: '${framework}'`);
-    return dedent`
-      We've detected that your main.js configuration file does not specify the
-      'framework' field, which is a requirement in SB7.0 and above. We can add one
-      for you automatically:
-
-      ${frameworkFormatted}
-
-      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field')}
-    `;
-  },
-
-  async run({
-    result: {
-      main,
-      framework
-    },
-    dryRun
-  }) {
-    logger.info(`✅ Setting 'framework' to '${framework}' in main.js`);
-
-    if (!dryRun) {
-      main.setFieldValue(['framework'], framework);
-      await writeConfig(main);
-    }
-  }
-
-};

package/dist/esm/automigrate/fixes/new-frameworks.js

@@ -1,234 +0,0 @@
-import chalk from 'chalk';
-import dedent from 'ts-dedent';
-import semver from '@storybook/semver';
-import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo } from '@storybook/core-common';
-import { getStorybookVersionSpecifier } from '../../helpers';
-const logger = console;
-const packagesMap = {
-  '@storybook/react': {
-    webpack5: '@storybook/react-webpack5',
-    vite: '@storybook/react-vite'
-  },
-  '@storybook/preact': {
-    webpack5: '@storybook/preact-webpack5'
-  },
-  '@storybook/server': {
-    webpack5: '@storybook/server-webpack5'
-  },
-  '@storybook/angular': {
-    webpack5: '@storybook/angular'
-  },
-  '@storybook/vue': {
-    webpack5: '@storybook/vue-webpack5' // TODO: bring this back if we ever want to support vue 2 + vite. Else delete this!
-    // vite: '@storybook/vue-vite',
-
-  },
-  '@storybook/vue3': {
-    webpack5: '@storybook/vue3-webpack5',
-    vite: '@storybook/vue3-vite'
-  },
-  '@storybook/svelte': {
-    webpack5: '@storybook/svelte-webpack5',
-    // TODO: bring this back once we have the svelte-vite package
-    vite: '@storybook/svelte-vite'
-  },
-  '@storybook/web-components': {
-    webpack5: '@storybook/web-components-webpack5'
-  },
-  '@storybook/html': {
-    webpack5: '@storybook/html-webpack5'
-  }
-};
-export const getBuilder = builder => {
-  if (typeof builder === 'string') {
-    return builder.includes('vite') ? 'vite' : 'webpack5';
-  }
-
-  return builder?.name.includes('vite') ? 'vite' : 'webpack5';
-};
-export const getFrameworkOptions = (framework, main) => {
-  const frameworkOptions = main.getFieldValue([`${framework}Options`]);
-  return frameworkOptions || {};
-};
-/**
- * Does the user have separate framework and builders (e.g. @storybook/react + core.builder -> webpack5?
- *
- * If so:
- * - Remove the dependencies (@storybook/react + @storybook/builder-webpack5 + @storybook/manager-webpack5)
- * - Install the correct new package e.g. (@storybook/react-webpack5)
- * - Update the main config to use the new framework
- * -- moving core.builder into framework.options.builder
- * -- moving frameworkOptions (e.g. reactOptions) into framework.options
- */
-
-export const newFrameworks = {
-  id: 'newFrameworks',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const allDeps = Object.assign({}, packageJson.dependencies, packageJson.devDependencies); // FIXME: update to use renderer instead of framework
-
-    const {
-      mainConfig,
-      version: storybookVersion,
-      framework
-    } = getStorybookInfo(packageJson);
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config, skipping');
-      return null;
-    }
-
-    const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
-
-    if (!storybookCoerced) {
-      logger.warn(dedent`
-        ❌ Unable to determine storybook version, skipping ${chalk.cyan('newFrameworks')} fix.
-        🤔 Are you running automigrate from your project directory?
-      `);
-      return null;
-    }
-
-    if (!semver.gte(storybookCoerced, '7.0.0')) {
-      return null;
-    } // If in the future the eslint plugin has a framework option, using main to extract the framework field will be very useful
-
-
-    const main = await readConfig(mainConfig);
-    const frameworkPackage = main.getFieldValue(['framework']);
-    const builder = main.getFieldValue(['core', 'builder']);
-
-    if (!frameworkPackage) {
-      return null;
-    }
-
-    const supportedPackages = Object.keys(packagesMap);
-
-    if (!supportedPackages.includes(frameworkPackage)) {
-      return null;
-    }
-
-    const builderInfo = {
-      name: getBuilder(builder),
-      options: main.getFieldValue(['core', 'builder', 'options']) || {}
-    };
-    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name]; // not all frameworks support vite yet e.g. Svelte
-
-    if (!newFrameworkPackage) {
-      return null;
-    }
-
-    if (allDeps.vite && semver.lt(semver.coerce(allDeps.vite).version, '3.0.0')) {
-      logger.warn(dedent`
-        ❌ Detected Vite ${allDeps.vite}, which is unsupported in Storybook 7.0, so the ${chalk.cyan('newFrameworks')} fix will be skipped.
-      Please upgrade vite to 3.0.0 or higher and rerun this automigration with "npx storybook@future automigrate".
-      `);
-      return null;
-    }
-
-    const frameworkOptions = getFrameworkOptions(framework, main);
-    const dependenciesToRemove = ['@storybook/builder-webpack5', '@storybook/manager-webpack5', '@storybook/builder-webpack4', '@storybook/manager-webpack4', '@storybook/builder-vite', 'storybook-builder-vite'].filter(dep => allDeps[dep]);
-    const dependenciesToAdd = []; // some frameworks didn't change e.g. Angular, Ember
-
-    if (newFrameworkPackage !== frameworkPackage) {
-      dependenciesToRemove.push(frameworkPackage);
-      dependenciesToAdd.push(newFrameworkPackage);
-    }
-
-    return {
-      main,
-      dependenciesToAdd,
-      dependenciesToRemove,
-      frameworkPackage: newFrameworkPackage,
-      frameworkOptions,
-      builderInfo,
-      packageJson
-    };
-  },
-
-  prompt() {
-    return dedent`
-      We've detected you are using an older format of Storybook frameworks and builders.
-
-      In Storybook 7, frameworks also specify the builder to be used.
-
-      We can remove the dependencies that are no longer needed and install the new framework that already includes the builder.
-
-      To learn more about the framework field, see: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory')}
-
-      ${chalk.underline(chalk.bold(chalk.cyan('Webpack4 users')))}
-
-      Unless you're using Storybook's Vite builder, this automigration will install a Webpack5-based framework.
-      
-      If you were using Storybook's Webpack4 builder (default in 6.x, discontinued in 7.0), this could be a breaking
-      change--especially if your project has a custom webpack configuration.
-      
-      To learn more about migrating from Webpack4, see: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued')}
-    `;
-  },
-
-  async run({
-    result: {
-      dependenciesToAdd,
-      dependenciesToRemove,
-      main,
-      frameworkPackage,
-      frameworkOptions,
-      builderInfo,
-      packageJson
-    },
-    packageManager,
-    dryRun
-  }) {
-    logger.info(`✅ Removing legacy dependencies: ${dependenciesToRemove.join(', ')}`);
-
-    if (!dryRun) {
-      packageManager.removeDependencies({
-        skipInstall: dependenciesToAdd.length > 0,
-        packageJson
-      }, dependenciesToRemove);
-    }
-
-    if (dependenciesToAdd.length > 0) {
-      logger.info(`✅ Installing new dependencies: ${dependenciesToAdd.join(', ')}`);
-
-      if (!dryRun) {
-        const versionToInstall = getStorybookVersionSpecifier(packageJson);
-        const depsToAdd = dependenciesToAdd.map(dep => `${dep}@${versionToInstall}`);
-        packageManager.addDependencies({
-          installAsDevDependencies: true
-        }, depsToAdd);
-      }
-    }
-
-    if (!dryRun) {
-      logger.info(`✅ Updating framework field in main.js`);
-      const currentCore = main.getFieldValue(['core']);
-      main.setFieldValue(['framework', 'name'], frameworkPackage);
-      main.setFieldValue(['framework', 'options'], frameworkOptions);
-
-      if (currentCore?.builder) {
-        delete currentCore.builder;
-      }
-
-      if (Object.keys(builderInfo.options).length > 0) {
-        main.setFieldValue(['framework', 'options', 'builder'], builderInfo.options);
-      }
-
-      if (currentCore) {
-        if (Object.keys(currentCore).length === 0) {
-          // TODO: this should delete the field instead
-          main.setFieldValue(['core'], {});
-        } else {
-          main.setFieldValue(['core'], currentCore);
-        }
-      }
-
-      await writeConfig(main);
-    }
-  }
-
-};