CLI: Add builder option

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

lib/cli/src/generators/baseGenerator.ts

@@ -1,12 +1,13 @@
 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';
 
 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);
   }

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 = () => {

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',