@storybook/cli 6.5.0-alpha.52 → 6.5.0-alpha.55

package/dist/esm/initiate.js

@@ -83,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)(),
     linkable: !!options.linkable,
     commonJs: options.commonJs
   };
@@ -115,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:
         {
@@ -134,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';"]);
@@ -145,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.`);

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;

package/dist/esm/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.52",
-  "@storybook/addon-actions": "6.5.0-alpha.52",
-  "@storybook/addon-backgrounds": "6.5.0-alpha.52",
-  "@storybook/addon-controls": "6.5.0-alpha.52",
-  "@storybook/addon-docs": "6.5.0-alpha.52",
-  "@storybook/addon-essentials": "6.5.0-alpha.52",
-  "@storybook/addon-interactions": "6.5.0-alpha.52",
-  "@storybook/addon-jest": "6.5.0-alpha.52",
-  "@storybook/addon-links": "6.5.0-alpha.52",
-  "@storybook/addon-measure": "6.5.0-alpha.52",
-  "@storybook/addon-outline": "6.5.0-alpha.52",
-  "@storybook/addon-storyshots": "6.5.0-alpha.52",
-  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.52",
-  "@storybook/addon-storysource": "6.5.0-alpha.52",
-  "@storybook/addon-toolbars": "6.5.0-alpha.52",
-  "@storybook/addon-viewport": "6.5.0-alpha.52",
-  "@storybook/addons": "6.5.0-alpha.52",
-  "@storybook/angular": "6.5.0-alpha.52",
-  "@storybook/api": "6.5.0-alpha.52",
-  "@storybook/builder-webpack4": "6.5.0-alpha.52",
-  "@storybook/builder-webpack5": "6.5.0-alpha.52",
-  "@storybook/channel-postmessage": "6.5.0-alpha.52",
-  "@storybook/channel-websocket": "6.5.0-alpha.52",
-  "@storybook/channels": "6.5.0-alpha.52",
-  "@storybook/cli": "6.5.0-alpha.52",
-  "@storybook/client-api": "6.5.0-alpha.52",
-  "@storybook/client-logger": "6.5.0-alpha.52",
-  "@storybook/codemod": "6.5.0-alpha.52",
-  "@storybook/components": "6.5.0-alpha.52",
-  "@storybook/core": "6.5.0-alpha.52",
-  "@storybook/core-client": "6.5.0-alpha.52",
-  "@storybook/core-common": "6.5.0-alpha.52",
-  "@storybook/core-events": "6.5.0-alpha.52",
-  "@storybook/core-server": "6.5.0-alpha.52",
-  "@storybook/csf-tools": "6.5.0-alpha.52",
-  "@storybook/docs-tools": "6.5.0-alpha.52",
-  "@storybook/ember": "6.5.0-alpha.52",
-  "@storybook/html": "6.5.0-alpha.52",
-  "@storybook/instrumenter": "6.5.0-alpha.52",
-  "@storybook/manager-webpack4": "6.5.0-alpha.52",
-  "@storybook/manager-webpack5": "6.5.0-alpha.52",
-  "@storybook/node-logger": "6.5.0-alpha.52",
-  "@storybook/postinstall": "6.5.0-alpha.52",
-  "@storybook/preact": "6.5.0-alpha.52",
-  "@storybook/preview-web": "6.5.0-alpha.52",
-  "@storybook/react": "6.5.0-alpha.52",
-  "@storybook/router": "6.5.0-alpha.52",
-  "@storybook/server": "6.5.0-alpha.52",
-  "@storybook/source-loader": "6.5.0-alpha.52",
-  "@storybook/store": "6.5.0-alpha.52",
-  "@storybook/svelte": "6.5.0-alpha.52",
-  "@storybook/theming": "6.5.0-alpha.52",
-  "@storybook/ui": "6.5.0-alpha.52",
-  "@storybook/vue": "6.5.0-alpha.52",
-  "@storybook/vue3": "6.5.0-alpha.52",
-  "@storybook/web-components": "6.5.0-alpha.52"
+  "@storybook/addon-a11y": "6.5.0-alpha.55",
+  "@storybook/addon-actions": "6.5.0-alpha.55",
+  "@storybook/addon-backgrounds": "6.5.0-alpha.55",
+  "@storybook/addon-controls": "6.5.0-alpha.55",
+  "@storybook/addon-docs": "6.5.0-alpha.55",
+  "@storybook/addon-essentials": "6.5.0-alpha.55",
+  "@storybook/addon-interactions": "6.5.0-alpha.55",
+  "@storybook/addon-jest": "6.5.0-alpha.55",
+  "@storybook/addon-links": "6.5.0-alpha.55",
+  "@storybook/addon-measure": "6.5.0-alpha.55",
+  "@storybook/addon-outline": "6.5.0-alpha.55",
+  "@storybook/addon-storyshots": "6.5.0-alpha.55",
+  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.55",
+  "@storybook/addon-storysource": "6.5.0-alpha.55",
+  "@storybook/addon-toolbars": "6.5.0-alpha.55",
+  "@storybook/addon-viewport": "6.5.0-alpha.55",
+  "@storybook/addons": "6.5.0-alpha.55",
+  "@storybook/angular": "6.5.0-alpha.55",
+  "@storybook/api": "6.5.0-alpha.55",
+  "@storybook/builder-webpack4": "6.5.0-alpha.55",
+  "@storybook/builder-webpack5": "6.5.0-alpha.55",
+  "@storybook/channel-postmessage": "6.5.0-alpha.55",
+  "@storybook/channel-websocket": "6.5.0-alpha.55",
+  "@storybook/channels": "6.5.0-alpha.55",
+  "@storybook/cli": "6.5.0-alpha.55",
+  "@storybook/client-api": "6.5.0-alpha.55",
+  "@storybook/client-logger": "6.5.0-alpha.55",
+  "@storybook/codemod": "6.5.0-alpha.55",
+  "@storybook/components": "6.5.0-alpha.55",
+  "@storybook/core": "6.5.0-alpha.55",
+  "@storybook/core-client": "6.5.0-alpha.55",
+  "@storybook/core-common": "6.5.0-alpha.55",
+  "@storybook/core-events": "6.5.0-alpha.55",
+  "@storybook/core-server": "6.5.0-alpha.55",
+  "@storybook/csf-tools": "6.5.0-alpha.55",
+  "@storybook/docs-tools": "6.5.0-alpha.55",
+  "@storybook/ember": "6.5.0-alpha.55",
+  "@storybook/html": "6.5.0-alpha.55",
+  "@storybook/instrumenter": "6.5.0-alpha.55",
+  "@storybook/manager-webpack4": "6.5.0-alpha.55",
+  "@storybook/manager-webpack5": "6.5.0-alpha.55",
+  "@storybook/node-logger": "6.5.0-alpha.55",
+  "@storybook/postinstall": "6.5.0-alpha.55",
+  "@storybook/preact": "6.5.0-alpha.55",
+  "@storybook/preview-web": "6.5.0-alpha.55",
+  "@storybook/react": "6.5.0-alpha.55",
+  "@storybook/router": "6.5.0-alpha.55",
+  "@storybook/server": "6.5.0-alpha.55",
+  "@storybook/source-loader": "6.5.0-alpha.55",
+  "@storybook/store": "6.5.0-alpha.55",
+  "@storybook/svelte": "6.5.0-alpha.55",
+  "@storybook/theming": "6.5.0-alpha.55",
+  "@storybook/ui": "6.5.0-alpha.55",
+  "@storybook/vue": "6.5.0-alpha.55",
+  "@storybook/vue3": "6.5.0-alpha.55",
+  "@storybook/web-components": "6.5.0-alpha.55"
 };
 exports.default = _default;

package/dist/modern/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/modern/automigrate/fixes/builder-vite.js

@@ -51,7 +51,6 @@ const builderVite = {
     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;
     }
 

package/dist/modern/detect.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.detect = detect;
+exports.detectBuilder = detectBuilder;
 exports.detectFrameworkPreset = detectFrameworkPreset;
 exports.detectLanguage = detectLanguage;
 exports.isStorybookInstalled = isStorybookInstalled;
@@ -12,6 +13,8 @@ var _path = _interopRequireDefault(require("path"));
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _findUp = _interopRequireDefault(require("find-up"));
+
 var _project_types = require("./project_types");
 
 var _helpers = require("./helpers");
@@ -20,6 +23,8 @@ var _jsPackageManager = require("./js-package-manager");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
+
 const hasDependency = (packageJson, name, matcher) => {
   var _packageJson$dependen, _packageJson$devDepen;
 
@@ -96,6 +101,25 @@ function detectFrameworkPreset(packageJson = {}) {
   });
   return result ? result.preset : _project_types.ProjectType.UNDETECTED;
 }
+/**
+ * Attempts to detect which builder to use, by searching for a vite config file.  If one is found, the vite builder
+ * will be used, otherwise, webpack4 is the default.
+ *
+ * @returns CoreBuilder
+ */
+
+
+function detectBuilder() {
+  const viteConfig = _findUp.default.sync(viteConfigFiles);
+
+  if (viteConfig) {
+    (0, _helpers.paddedLog)('Detected vite project, setting builder to @storybook/builder-vite');
+    return _project_types.CoreBuilder.Vite;
+  } // Fallback to webpack4
+
+
+  return _project_types.CoreBuilder.Webpack4;
+}
 
 function isStorybookInstalled(dependencies, force) {
   if (!dependencies) {

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

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

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

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

package/dist/modern/generators/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,11 +92,20 @@ async function baseGenerator(packageManager, npmOptions, {
   const frameworkPackage = `@storybook/${framework}`;
   const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
+  const coreBuilders = [_project_types.CoreBuilder.Webpack4, _project_types.CoreBuilder.Webpack5, _project_types.CoreBuilder.Vite];
+  const expandedBuilder = coreBuilders.includes(builder) ? `@storybook/builder-${builder}` : builder;
   const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
     core: {
-      builder
+      builder: expandedBuilder
     }
-  }, extraMain) : extraMain;
+  }, extraMain) : extraMain; // Default vite builder to storyStoreV7
+
+  if (expandedBuilder === '@storybook/builder-vite') {
+    mainOptions.features = Object.assign({}, mainOptions.features, {
+      storyStoreV7: true
+    });
+  }
+
   (0, _configure.configure)(framework, Object.assign({
     framework: frameworkPackage,
     addons: [...addons, ...stripVersions(extraAddons)],
@@ -101,6 +115,18 @@ async function baseGenerator(packageManager, npmOptions, {
 
   if (addComponents) {
     (0, _helpers.copyComponents)(framework, language);
+  } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
+
+
+  if (expandedBuilder === '@storybook/builder-vite') {
+    const previewHead = (0, _tsDedent.default)`
+      <script>
+        window.global = window;
+      </script>
+    `;
+    await _fsExtra.default.writeFile(`.storybook/preview-head.html`, previewHead, {
+      encoding: 'utf8'
+    });
   }
 
   const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];

package/dist/modern/initiate.js

@@ -83,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)(),
     linkable: !!options.linkable,
     commonJs: options.commonJs
   };
@@ -115,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:
         {
@@ -134,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';"]);
@@ -145,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.`);

package/dist/modern/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;