Core: Allow builders to be set in presets

lib/core-server/src/build-dev.ts

@@ -17,8 +17,7 @@ import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
 import { updateCheck } from './utils/update-check';
 import { getServerPort, getServerChannelUrl } from './utils/server-address';
-import { getPreviewBuilder } from './utils/get-preview-builder';
-import { getManagerBuilder } from './utils/get-manager-builder';
+import { getBuilders } from './utils/get-builders';
 
 export async function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {
   const { packageJson, versionUpdates, releaseNotes } = options;
@@ -57,10 +56,17 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
   options.serverChannelUrl = getServerChannelUrl(port, options);
   /* eslint-enable no-param-reassign */
 
-  const previewBuilder = await getPreviewBuilder(options.configDir);
-  const managerBuilder = await getManagerBuilder(options.configDir);
+  console.time('loadAllPresets');
+  let presets = loadAllPresets({
+    corePresets: [],
+    overridePresets: [],
+    ...options,
+  });
+  console.timeEnd('loadAllPresets');
 
-  const presets = loadAllPresets({
+  const [previewBuilder, managerBuilder] = await getBuilders({ ...options, presets });
+  console.time('loadAllPresets2');
+  presets = loadAllPresets({
     corePresets: [
       require.resolve('./presets/common-preset'),
       ...managerBuilder.corePresets,
@@ -70,6 +76,7 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
     overridePresets: previewBuilder.overridePresets,
     ...options,
   });
+  console.timeEnd('loadAllPresets2');
 
   const features = await presets.apply<StorybookConfig['features']>('features');
   global.FEATURES = features;

lib/core-server/src/build-static.ts

@@ -23,8 +23,7 @@ import {
   copyAllStaticFiles,
   copyAllStaticFilesRelativeToMain,
 } from './utils/copy-all-static-files';
-import { getPreviewBuilder } from './utils/get-preview-builder';
-import { getManagerBuilder } from './utils/get-manager-builder';
+import { getBuilders } from './utils/get-builders';
 import { extractStoriesJson } from './utils/stories-json';
 import { extractStorybookMetadata } from './utils/metadata';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
@@ -57,10 +56,15 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
 
   await cpy(defaultFavIcon, options.outputDir);
 
-  const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
-  const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
+  let presets = loadAllPresets({
+    corePresets: [],
+    overridePresets: [],
+    ...options,
+  });
+
+  const [previewBuilder, managerBuilder] = await getBuilders({ ...options, presets });
 
-  const presets = loadAllPresets({
+  presets = loadAllPresets({
     corePresets: [
       require.resolve('./presets/common-preset'),
       ...managerBuilder.corePresets,

lib/core-server/src/dev-server.ts

@@ -20,8 +20,7 @@ import { useStorybookMetadata } from './utils/metadata';
 import { getServerChannel } from './utils/get-server-channel';
 
 import { openInBrowser } from './utils/open-in-browser';
-import { getPreviewBuilder } from './utils/get-preview-builder';
-import { getManagerBuilder } from './utils/get-manager-builder';
+import { getBuilders } from './utils/get-builders';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 
 // @ts-ignore
@@ -137,8 +136,7 @@ export async function storybookDevServer(options: Options) {
     server.listen({ port, host }, (error: Error) => (error ? reject(error) : resolve()));
   });
 
-  const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
-  const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
+  const [previewBuilder, managerBuilder] = await getBuilders(options);
 
   if (options.debugWebpack) {
     logConfig('Preview webpack config', await previewBuilder.getConfig(options));

lib/core-server/src/utils/get-builders.ts

@@ -0,0 +1,44 @@
+import type { Options, CoreConfig, Builder } from '@storybook/core-common';
+
+async function getManagerBuilder(builderName: string | undefined, configDir: string) {
+  // Builder can be any string including community builders like `storybook-builder-vite`.
+  // - For now, `webpack5` triggers `manager-webpack5`
+  // - Everything else builds with `manager-webpack4`
+  //
+  // Unlike preview builders, manager building is not pluggable!
+  const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
+    ? require.resolve('@storybook/manager-webpack5', { paths: [configDir] })
+    : '@storybook/manager-webpack4';
+
+  const managerBuilder = await import(builderPackage);
+  return managerBuilder;
+}
+
+async function getPreviewBuilder(builderName: string, configDir: string) {
+  let builderPackage: string;
+  if (builderName) {
+    builderPackage = require.resolve(
+      ['webpack4', 'webpack5'].includes(builderName)
+        ? `@storybook/builder-${builderName}`
+        : builderName,
+      { paths: [configDir] }
+    );
+  } else {
+    builderPackage = require.resolve('@storybook/builder-webpack4');
+  }
+  const previewBuilder = await import(builderPackage);
+  return previewBuilder;
+}
+
+export async function getBuilders({
+  presets,
+  configDir,
+}: Options): Promise<Builder<unknown, unknown>[]> {
+  const core = await presets.apply<CoreConfig>('core', undefined);
+  const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
+
+  return Promise.all([
+    getPreviewBuilder(builderName, configDir),
+    getManagerBuilder(builderName, configDir),
+  ]);
+}