@storybook/cli 6.5.0-alpha.50 → 6.5.0-alpha.53

package/dist/cjs/add.js

@@ -77,14 +77,14 @@ const installAddon = (packageManager, addonName, isOfficialAddon) => {
 
 const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
   const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
+  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/manager`));
 
   if (alreadyRegistered) {
     return addonsFile;
   }
 
   const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, ...addonsFile.slice(latestImportIndex + 1)];
+  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1)];
 };
 
 exports.addStorybookAddonToFile = addStorybookAddonToFile;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.builderVite = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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
+ */
+const builderVite = {
+  id: 'builder-vite',
+
+  async check({
+    packageManager
+  }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+    const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
+
+    if (builderName !== 'storybook-builder-vite') {
+      logger.info(`Not using community vite builder, skipping`);
+      return null;
+    }
+
+    return {
+      builder,
+      main,
+      packageJson
+    };
+  },
+
+  prompt({
+    builder
+  }) {
+    const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
+
+    return (0, _tsDedent.default)`
+      We've detected you're using the community vite builder: ${builderFormatted}
+      
+      'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
+
+      We can upgrade your project to use the new builder automatically.
+      
+      More info: ${_chalk.default.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'];
+      (0, _jsPackageManager.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 (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.builderVite = builderVite;

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

@@ -18,6 +18,8 @@ var _mainjsFramework = require("./mainjsFramework");
 
 var _eslintPlugin = require("./eslint-plugin");
 
+var _builderVite = require("./builder-vite");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -31,5 +33,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
 exports.fixes = fixes;

package/dist/cjs/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/cjs/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/cjs/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");
@@ -44,6 +46,9 @@ const builderDependencies = builder => {
     case _project_types.CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
 
+    case _project_types.CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
+
     default:
       return [builder];
   }
@@ -87,9 +92,11 @@ 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;
   (0, _configure.configure)(framework, Object.assign({
@@ -101,6 +108,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/cjs/project_types.js

@@ -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/cjs/repro-generators/configs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.webpack_react = exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.svelte = exports.sfcVue = exports.react_typescript = exports.react_in_yarn_workspace = exports.react = exports.preact = exports.html = exports.cra_typescript = exports.cra = exports.angular130 = exports.angular13 = exports.angular12 = exports.angular11 = exports.angular10 = exports.angular = void 0;
+exports.webpack_react = exports.web_components_typescript = exports.web_components_lit2 = exports.web_components = exports.vue3 = exports.vue = exports.svelte = exports.sfcVue = exports.react_typescript = 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
@@ -89,6 +89,17 @@ const angular13 = Object.assign({}, baseAngular, {
   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
 

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

@@ -17,6 +17,8 @@ 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 }; }
@@ -60,6 +62,20 @@ 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,
@@ -212,6 +228,11 @@ const createAndInit = async (cwd, _ref, {
   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/cjs/versions.js

@@ -6,61 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  "@storybook/addon-a11y": "6.5.0-alpha.50",
-  "@storybook/addon-actions": "6.5.0-alpha.50",
-  "@storybook/addon-backgrounds": "6.5.0-alpha.50",
-  "@storybook/addon-controls": "6.5.0-alpha.50",
-  "@storybook/addon-docs": "6.5.0-alpha.50",
-  "@storybook/addon-essentials": "6.5.0-alpha.50",
-  "@storybook/addon-interactions": "6.5.0-alpha.50",
-  "@storybook/addon-jest": "6.5.0-alpha.50",
-  "@storybook/addon-links": "6.5.0-alpha.50",
-  "@storybook/addon-measure": "6.5.0-alpha.50",
-  "@storybook/addon-outline": "6.5.0-alpha.50",
-  "@storybook/addon-storyshots": "6.5.0-alpha.50",
-  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.50",
-  "@storybook/addon-storysource": "6.5.0-alpha.50",
-  "@storybook/addon-toolbars": "6.5.0-alpha.50",
-  "@storybook/addon-viewport": "6.5.0-alpha.50",
-  "@storybook/addons": "6.5.0-alpha.50",
-  "@storybook/angular": "6.5.0-alpha.50",
-  "@storybook/api": "6.5.0-alpha.50",
-  "@storybook/builder-webpack4": "6.5.0-alpha.50",
-  "@storybook/builder-webpack5": "6.5.0-alpha.50",
-  "@storybook/channel-postmessage": "6.5.0-alpha.50",
-  "@storybook/channel-websocket": "6.5.0-alpha.50",
-  "@storybook/channels": "6.5.0-alpha.50",
-  "@storybook/cli": "6.5.0-alpha.50",
-  "@storybook/client-api": "6.5.0-alpha.50",
-  "@storybook/client-logger": "6.5.0-alpha.50",
-  "@storybook/codemod": "6.5.0-alpha.50",
-  "@storybook/components": "6.5.0-alpha.50",
-  "@storybook/core": "6.5.0-alpha.50",
-  "@storybook/core-client": "6.5.0-alpha.50",
-  "@storybook/core-common": "6.5.0-alpha.50",
-  "@storybook/core-events": "6.5.0-alpha.50",
-  "@storybook/core-server": "6.5.0-alpha.50",
-  "@storybook/csf-tools": "6.5.0-alpha.50",
-  "@storybook/docs-tools": "6.5.0-alpha.50",
-  "@storybook/ember": "6.5.0-alpha.50",
-  "@storybook/html": "6.5.0-alpha.50",
-  "@storybook/instrumenter": "6.5.0-alpha.50",
-  "@storybook/manager-webpack4": "6.5.0-alpha.50",
-  "@storybook/manager-webpack5": "6.5.0-alpha.50",
-  "@storybook/node-logger": "6.5.0-alpha.50",
-  "@storybook/postinstall": "6.5.0-alpha.50",
-  "@storybook/preact": "6.5.0-alpha.50",
-  "@storybook/preview-web": "6.5.0-alpha.50",
-  "@storybook/react": "6.5.0-alpha.50",
-  "@storybook/router": "6.5.0-alpha.50",
-  "@storybook/server": "6.5.0-alpha.50",
-  "@storybook/source-loader": "6.5.0-alpha.50",
-  "@storybook/store": "6.5.0-alpha.50",
-  "@storybook/svelte": "6.5.0-alpha.50",
-  "@storybook/theming": "6.5.0-alpha.50",
-  "@storybook/ui": "6.5.0-alpha.50",
-  "@storybook/vue": "6.5.0-alpha.50",
-  "@storybook/vue3": "6.5.0-alpha.50",
-  "@storybook/web-components": "6.5.0-alpha.50"
+  "@storybook/addon-a11y": "6.5.0-alpha.53",
+  "@storybook/addon-actions": "6.5.0-alpha.53",
+  "@storybook/addon-backgrounds": "6.5.0-alpha.53",
+  "@storybook/addon-controls": "6.5.0-alpha.53",
+  "@storybook/addon-docs": "6.5.0-alpha.53",
+  "@storybook/addon-essentials": "6.5.0-alpha.53",
+  "@storybook/addon-interactions": "6.5.0-alpha.53",
+  "@storybook/addon-jest": "6.5.0-alpha.53",
+  "@storybook/addon-links": "6.5.0-alpha.53",
+  "@storybook/addon-measure": "6.5.0-alpha.53",
+  "@storybook/addon-outline": "6.5.0-alpha.53",
+  "@storybook/addon-storyshots": "6.5.0-alpha.53",
+  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.53",
+  "@storybook/addon-storysource": "6.5.0-alpha.53",
+  "@storybook/addon-toolbars": "6.5.0-alpha.53",
+  "@storybook/addon-viewport": "6.5.0-alpha.53",
+  "@storybook/addons": "6.5.0-alpha.53",
+  "@storybook/angular": "6.5.0-alpha.53",
+  "@storybook/api": "6.5.0-alpha.53",
+  "@storybook/builder-webpack4": "6.5.0-alpha.53",
+  "@storybook/builder-webpack5": "6.5.0-alpha.53",
+  "@storybook/channel-postmessage": "6.5.0-alpha.53",
+  "@storybook/channel-websocket": "6.5.0-alpha.53",
+  "@storybook/channels": "6.5.0-alpha.53",
+  "@storybook/cli": "6.5.0-alpha.53",
+  "@storybook/client-api": "6.5.0-alpha.53",
+  "@storybook/client-logger": "6.5.0-alpha.53",
+  "@storybook/codemod": "6.5.0-alpha.53",
+  "@storybook/components": "6.5.0-alpha.53",
+  "@storybook/core": "6.5.0-alpha.53",
+  "@storybook/core-client": "6.5.0-alpha.53",
+  "@storybook/core-common": "6.5.0-alpha.53",
+  "@storybook/core-events": "6.5.0-alpha.53",
+  "@storybook/core-server": "6.5.0-alpha.53",
+  "@storybook/csf-tools": "6.5.0-alpha.53",
+  "@storybook/docs-tools": "6.5.0-alpha.53",
+  "@storybook/ember": "6.5.0-alpha.53",
+  "@storybook/html": "6.5.0-alpha.53",
+  "@storybook/instrumenter": "6.5.0-alpha.53",
+  "@storybook/manager-webpack4": "6.5.0-alpha.53",
+  "@storybook/manager-webpack5": "6.5.0-alpha.53",
+  "@storybook/node-logger": "6.5.0-alpha.53",
+  "@storybook/postinstall": "6.5.0-alpha.53",
+  "@storybook/preact": "6.5.0-alpha.53",
+  "@storybook/preview-web": "6.5.0-alpha.53",
+  "@storybook/react": "6.5.0-alpha.53",
+  "@storybook/router": "6.5.0-alpha.53",
+  "@storybook/server": "6.5.0-alpha.53",
+  "@storybook/source-loader": "6.5.0-alpha.53",
+  "@storybook/store": "6.5.0-alpha.53",
+  "@storybook/svelte": "6.5.0-alpha.53",
+  "@storybook/theming": "6.5.0-alpha.53",
+  "@storybook/ui": "6.5.0-alpha.53",
+  "@storybook/vue": "6.5.0-alpha.53",
+  "@storybook/vue3": "6.5.0-alpha.53",
+  "@storybook/web-components": "6.5.0-alpha.53"
 };
 exports.default = _default;

package/dist/esm/add.js

@@ -77,14 +77,14 @@ const installAddon = (packageManager, addonName, isOfficialAddon) => {
 
 const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
   const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
+  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/manager`));
 
   if (alreadyRegistered) {
     return addonsFile;
   }
 
   const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, ...addonsFile.slice(latestImportIndex + 1)];
+  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1)];
 };
 
 exports.addStorybookAddonToFile = addStorybookAddonToFile;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.builderVite = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+var _jsPackageManager = require("../../js-package-manager");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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
+ */
+const builderVite = {
+  id: 'builder-vite',
+
+  async check({
+    packageManager
+  }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config');
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const builder = main.getFieldValue(['core', 'builder']);
+    const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
+
+    if (builderName !== 'storybook-builder-vite') {
+      logger.info(`Not using community vite builder, skipping`);
+      return null;
+    }
+
+    return {
+      builder,
+      main,
+      packageJson
+    };
+  },
+
+  prompt({
+    builder
+  }) {
+    const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
+
+    return (0, _tsDedent.default)`
+      We've detected you're using the community vite builder: ${builderFormatted}
+      
+      'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
+
+      We can upgrade your project to use the new builder automatically.
+      
+      More info: ${_chalk.default.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'];
+      (0, _jsPackageManager.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 (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.builderVite = builderVite;

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

@@ -18,6 +18,8 @@ var _mainjsFramework = require("./mainjsFramework");
 
 var _eslintPlugin = require("./eslint-plugin");
 
+var _builderVite = require("./builder-vite");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -31,5 +33,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
 exports.fixes = fixes;

package/dist/esm/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/esm/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/esm/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");
@@ -44,6 +46,9 @@ const builderDependencies = builder => {
     case _project_types.CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
 
+    case _project_types.CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
+
     default:
       return [builder];
   }
@@ -87,9 +92,11 @@ 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;
   (0, _configure.configure)(framework, Object.assign({
@@ -101,6 +108,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/esm/project_types.js

@@ -59,6 +59,7 @@ exports.CoreBuilder = CoreBuilder;
 (function (CoreBuilder) {
   CoreBuilder["Webpack4"] = "webpack4";
   CoreBuilder["Webpack5"] = "webpack5";
+  CoreBuilder["Vite"] = "vite";
 })(CoreBuilder || (exports.CoreBuilder = CoreBuilder = {}));
 
 let SupportedLanguage;