Merge pull request #17830 from storybookjs/feat/cli-add-vite-builder

CLI: Fix vite/jest issue with mocked global
storybookjs · Apr 1, 2022 · 5909592 · 5909592
1 parent e5b8c0f
commit 5909592
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
@@ -1,4 +1,5 @@
 import fse from 'fs-extra';
+import dedent from 'ts-dedent';
 import { getStorybookBabelDependencies } from '@storybook/core-common';
 import { NpmOptions } from '../NpmOptions';
 import { SupportedLanguage, SupportedFrameworks, Builder, CoreBuilder } from '../project_types';
@@ -51,6 +52,8 @@ const builderDependencies = (builder: Builder) => {
       return [];
     case CoreBuilder.Webpack5:
       return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
+    case CoreBuilder.Vite:
+      return ['@storybook/builder-vite'];
     default:
       return [builder];
   }
@@ -121,11 +124,15 @@ export async function baseGenerator(
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
+  const coreBuilders = [CoreBuilder.Webpack4, CoreBuilder.Webpack5, CoreBuilder.Vite] as string[];
+  const expandedBuilder = coreBuilders.includes(builder)
+    ? `@storybook/builder-${builder}`
+    : builder;
   const mainOptions =
     builder !== CoreBuilder.Webpack4
       ? {
           core: {
-            builder,
+            builder: expandedBuilder,
           },
           ...extraMain,
         }
@@ -141,6 +148,16 @@ export async function baseGenerator(
     copyComponents(framework, language);
   }
 
+  // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
+  if (expandedBuilder === '@storybook/builder-vite') {
+    const previewHead = dedent`
+      <script>
+        window.global = window;
+      </script>
+    `;
+    await fse.writeFile(`.storybook/preview-head.html`, previewHead, { encoding: 'utf8' });
+  }
+
   const babelDependencies = addBabel ? await getBabelDependencies(packageManager, packageJson) : [];
   if (isNewFolder) {
     babelDependencies.push(...getStorybookBabelDependencies());

diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts
@@ -81,6 +81,7 @@ export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [
 export enum CoreBuilder {
   Webpack4 = 'webpack4',
   Webpack5 = 'webpack5',
+  Vite = 'vite',
 }
 
 // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729

diff --git a/lib/core-server/src/utils/get-manager-builder.ts b/lib/core-server/src/utils/get-manager-builder.ts
@@ -13,10 +13,9 @@ export async function getManagerBuilder(configDir: Options['configDir']) {
   // - Everything else builds with `manager-webpack4`
   //
   // Unlike preview builders, manager building is not pluggable!
-  const builderPackage =
-    builderName === 'webpack5'
-      ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
-      : '@storybook/manager-webpack4';
+  const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
+    ? require.resolve('@storybook/manager-webpack5', { paths: [main] })
+    : '@storybook/manager-webpack4';
 
   const managerBuilder = await import(builderPackage);
   return managerBuilder;