From 0d48366678a24179580eb6a602d1b632eb0bc628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= <clementdungler@gmail.com>
Date: Wed, 24 Feb 2021 21:14:18 +0100
Subject: [PATCH] CLI: Add builder option

---
 lib/cli/src/generate.ts                 |  1 +
 lib/cli/src/generators/baseGenerator.ts | 20 +++++++++++++++++---
 lib/cli/src/initiate.ts                 |  3 +++
 lib/cli/src/project_types.ts            |  5 +++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/lib/cli/src/generate.ts b/lib/cli/src/generate.ts
index f9f4586f6bd9..1c9f88922e03 100644
--- a/lib/cli/src/generate.ts
+++ b/lib/cli/src/generate.ts
@@ -24,6 +24,7 @@ program
   .option('-t --type <type>', 'Add Storybook for a specific project type')
   .option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format')
   .option('-y --yes', 'Answer yes to all prompts')
+  .option('-b --builder <webpack4 | webpack5>', 'Builder library')
   .action((options) => initiate(options, pkg));
 
 program
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
index afd6283ca3e7..d01b9b2b408d 100644
--- a/lib/cli/src/generators/baseGenerator.ts
+++ b/lib/cli/src/generators/baseGenerator.ts
@@ -1,5 +1,5 @@
 import { NpmOptions } from '../NpmOptions';
-import { StoryFormat, SupportedLanguage, SupportedFrameworks } from '../project_types';
+import { StoryFormat, SupportedLanguage, SupportedFrameworks, Builder } from '../project_types';
 import { getBabelDependencies, copyComponents } from '../helpers';
 import { configure } from './configure';
 import { getPackageDetails, JsPackageManager } from '../js-package-manager';
@@ -7,6 +7,7 @@ import { getPackageDetails, JsPackageManager } from '../js-package-manager';
 export type GeneratorOptions = {
   language: SupportedLanguage;
   storyFormat: StoryFormat;
+  builder: Builder;
 };
 
 export interface FrameworkOptions {
@@ -38,7 +39,7 @@ const defaultOptions: FrameworkOptions = {
 export async function baseGenerator(
   packageManager: JsPackageManager,
   npmOptions: NpmOptions,
-  { language }: GeneratorOptions,
+  { language, builder }: GeneratorOptions,
   framework: SupportedFrameworks,
   options: FrameworkOptions = defaultOptions
 ) {
@@ -64,6 +65,10 @@ export async function baseGenerator(
   const yarn2Dependencies =
     packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
 
+  const builderDependencies: Partial<Record<Builder, string>> = {
+    [Builder.Webpack5]: '@storybook/builder-webpack5',
+  };
+
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(packageJson.dependencies));
 
@@ -73,6 +78,7 @@ export async function baseGenerator(
     ...extraPackages,
     ...extraAddons,
     ...yarn2Dependencies,
+    builderDependencies[builder],
   ]
     .filter(Boolean)
     .filter(
@@ -81,7 +87,15 @@ export async function baseGenerator(
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
-  configure(framework, [...addons, ...extraAddons]);
+  const extraMain =
+    builder !== Builder.Webpack4
+      ? {
+          core: {
+            builder,
+          },
+        }
+      : undefined;
+  configure(framework, [...addons, ...extraAddons], extraMain);
   if (addComponents) {
     copyComponents(framework, language);
   }
diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index d54da71c35ee..e549c5cc82ad 100644
--- a/lib/cli/src/initiate.ts
+++ b/lib/cli/src/initiate.ts
@@ -7,6 +7,7 @@ import {
   ProjectType,
   StoryFormat,
   SupportedLanguage,
+  Builder,
 } from './project_types';
 import { commandLog, codeLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
@@ -45,6 +46,7 @@ type CommandOptions = {
   storyFormat?: StoryFormat;
   parser?: string;
   yes?: boolean;
+  builder?: Builder;
 };
 
 const installStorybook = (projectType: ProjectType, options: CommandOptions): Promise<void> => {
@@ -65,6 +67,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
   const generatorOptions = {
     storyFormat: options.storyFormat || defaultStoryFormat,
     language,
+    builder: options.builder || Builder.Webpack4,
   };
 
   const end = () => {
diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts
index 1ec761a9c315..3feff8c883f4 100644
--- a/lib/cli/src/project_types.ts
+++ b/lib/cli/src/project_types.ts
@@ -84,6 +84,11 @@ export enum StoryFormat {
   MDX = 'mdx',
 }
 
+export enum Builder {
+  Webpack4 = 'webpack4',
+  Webpack5 = 'webpack5',
+}
+
 export enum SupportedLanguage {
   JAVASCRIPT = 'javascript',
   TYPESCRIPT = 'typescript',