From f76f0ca6a50129771338af1a83b243d5b7bef843 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Thu, 31 Mar 2022 01:37:15 +0800
Subject: [PATCH 1/2] CLI: Add vite to core builders

---
 lib/cli/src/generators/baseGenerator.ts          | 8 +++++++-
 lib/cli/src/project_types.ts                     | 1 +
 lib/core-server/src/utils/get-manager-builder.ts | 7 +++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index 926af379e361..bc3e5c9882f5 100644
--- a/lib/cli/src/generators/baseGenerator.ts
+++ b/lib/cli/src/generators/baseGenerator.ts
@@ -51,6 +51,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 +123,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,
         }
diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts
index 71175d1005e3..b55a176da801 100644
--- 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
index fbd40246313a..8dff920aa859 100644
--- a/lib/core-server/src/utils/get-manager-builder.ts
+++ b/lib/core-server/src/utils/get-manager-builder.ts
@@ -14,10 +14,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;

From cc6fa208987a5a12efa028e7b1bcbde399516444 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Thu, 31 Mar 2022 01:38:10 +0800
Subject: [PATCH 2/2] CLI: Add temporary preview-head workaround for vite
 builder

---
 lib/cli/src/generators/baseGenerator.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index bc3e5c9882f5..63ced930679d 100644
--- 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';
@@ -147,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());