Merge pull request storybookjs#34080 from holvi-sebastian/next

Builder-Vite: Support configLoader via builder options

Author: valentinpalkovic

code/addons/vitest/package.json

@@ -81,6 +81,7 @@
   },
   "devDependencies": {
     "@storybook/addon-a11y": "workspace:*",
+    "@storybook/builder-vite": "workspace:*",
     "@types/istanbul-lib-report": "^3.0.3",
     "@types/micromatch": "^4.0.0",
     "@types/node": "^22.19.1",

code/addons/vitest/src/node/boot-test-runner.ts

@@ -9,6 +9,8 @@ import {
 } from 'storybook/internal/core-server';
 import type { EventInfo, Options } from 'storybook/internal/types';
 
+import type { BuilderOptions } from '@storybook/builder-vite';
+
 import { normalize } from 'pathe';
 
 import { importMetaResolve } from '../../../../core/src/shared/utils/module.ts';
@@ -49,10 +51,12 @@ const bootTestRunner = async ({
   channel,
   store,
   options,
+  configLoader,
 }: {
   channel: Channel;
   store: Store;
   options: Options;
+  configLoader?: BuilderOptions['configLoader'];
 }) => {
   let stderr: string[] = [];
   const killChild = () => {
@@ -86,6 +90,7 @@ const bootTestRunner = async ({
             VITEST_CHILD_PROCESS: 'true',
             NODE_ENV: process.env.NODE_ENV ?? 'test',
             STORYBOOK_CONFIG_DIR: normalize(options.configDir),
+            STORYBOOK_CONFIG_LOADER: configLoader,
           },
           extendEnv: true,
         },
@@ -159,19 +164,21 @@ export const runTestRunner = async ({
   initEvent,
   initArgs,
   options,
+  configLoader,
 }: {
   channel: Channel;
   store: Store;
   initEvent?: string;
   initArgs?: any[];
   options: Options;
+  configLoader?: BuilderOptions['configLoader'];
 }) => {
   if (!ready && initEvent) {
     eventQueue.push({ type: initEvent, args: initArgs });
   }
   if (!child) {
     ready = false;
-    await bootTestRunner({ channel, store, options });
+    await bootTestRunner({ channel, store, options, configLoader });
     ready = true;
   }
 };

code/addons/vitest/src/node/test-manager.ts

@@ -8,6 +8,8 @@ import type {
   TestProviderStoreById,
 } from 'storybook/internal/types';
 
+import type { BuilderOptions } from '@storybook/builder-vite';
+
 import { throttle } from 'es-toolkit/function';
 import type { Report } from 'storybook/preview-api';
 
@@ -26,6 +28,7 @@ import { VitestManager } from './vitest-manager.ts';
 
 export type TestManagerOptions = {
   storybookOptions: Options;
+  configLoader?: BuilderOptions['configLoader'];
   store: experimental_UniversalStore<StoreState, StoreEvent>;
   componentTestStatusStore: StatusStoreByTypeId;
   a11yStatusStore: StatusStoreByTypeId;
@@ -57,6 +60,8 @@ export class TestManager {
 
   public storybookOptions: Options;
 
+  public readonly configLoader?: TestManagerOptions['configLoader'];
+
   private batchedTestCaseResults: {
     storyId: string;
     testResult: TestResult;
@@ -70,6 +75,7 @@ export class TestManager {
     this.testProviderStore = options.testProviderStore;
     this.onReady = options.onReady;
     this.storybookOptions = options.storybookOptions;
+    this.configLoader = options.configLoader;
 
     this.vitestManager = new VitestManager(this);
 

code/addons/vitest/src/node/vitest-manager.ts

@@ -127,6 +127,7 @@ export class VitestManager {
     try {
       this.vitest = await createVitest('test', {
         root: vitestWorkspaceConfig ?? vitestConfigFallbackLocation,
+        configLoader: this.testManager.configLoader,
         watch: true,
         passWithNoTests: false,
         project: [projectName],

code/addons/vitest/src/node/vitest.ts

@@ -7,6 +7,8 @@ import {
   experimental_getTestProviderStore,
 } from 'storybook/internal/core-server';
 
+import type { BuilderOptions } from '@storybook/builder-vite';
+
 import {
   ADDON_ID,
   STATUS_TYPE_ID_A11Y,
@@ -48,6 +50,7 @@ new TestManager({
   storybookOptions: {
     configDir: process.env.STORYBOOK_CONFIG_DIR || '',
   } as any,
+  configLoader: process.env.STORYBOOK_CONFIG_LOADER as BuilderOptions['configLoader'],
 });
 
 const exit = (code = 0) => {

code/addons/vitest/src/preset.ts

@@ -21,6 +21,8 @@ import type {
   StoryId,
 } from 'storybook/internal/types';
 
+import type { BuilderOptions } from '@storybook/builder-vite';
+
 import { isEqual } from 'es-toolkit/predicate';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
@@ -82,6 +84,10 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
     return channel;
   }
 
+  const configLoader =
+    typeof core.builder !== 'string' &&
+    (core.builder?.options?.configLoader as BuilderOptions['configLoader']);
+
   const storyIndexGenerator =
     await options.presets.apply<Promise<StoryIndexGenerator>>('storyIndexGenerator');
 
@@ -136,6 +142,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
       initEvent: STORE_CHANNEL_EVENT_NAME,
       initArgs: [{ event, eventInfo }],
       options,
+      configLoader: configLoader || undefined,
     });
   });
   store.subscribe('TOGGLE_WATCHING', (event, eventInfo) => {
@@ -157,6 +164,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
         initEvent: STORE_CHANNEL_EVENT_NAME,
         initArgs: [{ event, eventInfo }],
         options,
+        configLoader: configLoader || undefined,
       });
     }
   });

code/builders/builder-vite/src/types.ts

@@ -21,4 +21,11 @@ export type StorybookConfigVite = {
 export type BuilderOptions = {
   /** Path to `vite.config` file, relative to `process.cwd()`. */
   viteConfigPath?: string;
+  /**
+   * How Vite loads the config file. Equivalent to Vite's `--configLoader` CLI flag and the
+   * `configLoader` option of `loadConfigFromFile`.
+   *
+   * Requires Vite 6.1.0 or higher. On older Vite versions this option is silently ignored.
+   */
+  configLoader?: 'bundle' | 'runner' | 'native';
 };

code/builders/builder-vite/src/vite-config.test.ts

@@ -49,6 +49,50 @@ describe('commonConfig', () => {
     expect(config.configFile).toBe(false);
     expect(config.plugins).toBeDefined();
   });
+
+  it('should pass configLoader option to loadConfigFromFile', async () => {
+    const optionsWithConfigLoader: Options = {
+      ...dummyOptions,
+      presets: {
+        apply: async (key: string) =>
+          ({
+            framework: { name: '' },
+            addons: [],
+            core: {
+              builder: {
+                name: '@storybook/builder-vite',
+                options: {
+                  configLoader: 'native',
+                },
+              },
+            },
+            options: {},
+          })[key],
+      } as Presets,
+    };
+
+    // Inline mock: this test asserts a specific call signature, so it needs its
+    // own one-shot return value distinct from the shared default mock.
+    loadConfigFromFileMock.mockReturnValueOnce(
+      Promise.resolve({
+        config: {},
+        path: '',
+        dependencies: [],
+      })
+    );
+
+    await commonConfig(optionsWithConfigLoader, 'development');
+
+    // Verify loadConfigFromFile was called with configLoader as the 6th argument
+    expect(loadConfigFromFileMock).toHaveBeenCalledWith(
+      expect.objectContaining({ command: 'serve' }),
+      undefined,
+      expect.any(String),
+      undefined,
+      undefined,
+      'native'
+    );
+  });
 });
 
 describe('storybookConfigPlugin', () => {

code/builders/builder-vite/src/vite-config.ts

@@ -42,15 +42,22 @@ export async function commonConfig(
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
   const { loadConfigFromFile, mergeConfig } = await import('vite');
 
-  const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
+  const { viteConfigPath, configLoader } = await getBuilderOptions<BuilderOptions>(options);
 
   const projectRoot = resolve(options.configDir, '..');
 
   // I destructure away the `build` property from the user's config object
   // I do this because I can contain config that breaks storybook, such as we had in a lit project.
   // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
   const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
-    (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
+    (await loadConfigFromFile(
+      configEnv,
+      viteConfigPath,
+      projectRoot,
+      undefined,
+      undefined,
+      configLoader
+    )) ?? {};
 
   // Storybook's Vite config is assembled from self-contained plugins.
   // The config plugin handles base settings (root, cacheDir, resolve conditions, etc.),

docs/_snippets/main-config-builder-configLoader.md

@@ -0,0 +1,141 @@
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/vue3-vite/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/web-components-vite/node';
+
+export default defineMain({
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  core: {
+    builder: {
+      name: '@storybook/builder-vite',
+      options: {
+        configLoader: 'runner',
+      },
+    },
+  },
+});
+```