Core: Decouple Mocking Logic from Core into Builders

code/addons/vitest/src/vitest-plugin/index.ts

@@ -24,7 +24,7 @@ import { oneWayHash } from 'storybook/internal/telemetry';
 import type { Presets } from 'storybook/internal/types';
 
 import { match } from 'micromatch';
-import { dirname, join, normalize, relative, resolve, sep } from 'pathe';
+import { join, normalize, relative, resolve, sep } from 'pathe';
 import picocolors from 'picocolors';
 import sirv from 'sirv';
 import { dedent } from 'ts-dedent';

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

@@ -7,6 +7,11 @@ const config: BuildEntries = {
         exportEntries: ['.'],
         entryPoint: './src/index.ts',
       },
+      {
+        exportEntries: ['./preset'],
+        entryPoint: './src/preset.ts',
+        dts: false,
+      },
     ],
   },
   extraOutputs: {

code/builders/builder-vite/package.json

@@ -33,14 +33,16 @@
       "default": "./dist/index.js"
     },
     "./input/iframe.html": "./input/iframe.html",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./preset": "./dist/preset.js"
   },
   "files": [
     "dist/**/*",
     "input/**/*",
     "README.md",
     "*.js",
     "*.d.ts",
+    "preset.js",
     "!src/**/*"
   ],
   "scripts": {
@@ -49,6 +51,7 @@
   },
   "dependencies": {
     "@storybook/csf-plugin": "workspace:*",
+    "@vitest/mocker": "3.2.4",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/builders/builder-vite/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js';

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

@@ -63,3 +63,5 @@ export const start: ViteBuilder['start'] = async ({
 export const build: ViteBuilder['build'] = async ({ options }) => {
   return viteBuild(options as Options);
 };
+
+export const corePresets = [import.meta.resolve('@storybook/builder-vite/preset')];

code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/plugin.ts → code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts

@@ -2,12 +2,12 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+import { resolvePackageDir } from 'storybook/internal/common';
+
 import { exactRegex } from '@rolldown/pluginutils';
 import { dedent } from 'ts-dedent';
 import type { ResolvedConfig, ViteDevServer } from 'vite';
 
-import { resolvePackageDir } from '../../../../shared/utils/module';
-
 const entryPath = '/vite-inject-mocker-entry.js';
 
 const entryCode = dedent`

code/core/src/core-server/presets/vitePlugins/vite-mock/plugin.ts → code/builders/builder-vite/src/plugins/vite-mock/plugin.ts

@@ -1,18 +1,19 @@
 import { readFileSync } from 'node:fs';
 
+import {
+  babelParser,
+  extractMockCalls,
+  getAutomockCode,
+  getRealPath,
+  rewriteSbMockImportCalls,
+} from 'storybook/internal/mocking-utils';
 import { logger } from 'storybook/internal/node-logger';
 import type { CoreConfig } from 'storybook/internal/types';
 
+import { findMockRedirect } from '@vitest/mocker/redirect';
 import { normalize } from 'pathe';
 import type { Plugin, ResolvedConfig } from 'vite';
 
-import { getAutomockCode } from '../../../mocking-utils/automock';
-import {
-  babelParser,
-  extractMockCalls,
-  rewriteSbMockImportCalls,
-} from '../../../mocking-utils/extract';
-import { getRealPath } from '../../../mocking-utils/resolve';
 import { type MockCall, getCleanId, invalidateAllRelatedModules } from './utils';
 
 export interface MockPluginOptions {
@@ -55,7 +56,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
       },
 
       buildStart() {
-        mockCalls = extractMockCalls(options, babelParser, viteConfig.root);
+        mockCalls = extractMockCalls(options, babelParser, viteConfig.root, findMockRedirect);
       },
 
       configureServer(server) {
@@ -64,7 +65,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
             // Store the old mocks before updating
             const oldMockCalls = mockCalls;
             // Re-extract mocks to get the latest list
-            mockCalls = extractMockCalls(options, babelParser, viteConfig.root);
+            mockCalls = extractMockCalls(options, babelParser, viteConfig.root, findMockRedirect);
 
             // Invalidate the preview file
             const previewMod = server.moduleGraph.getModuleById(options.previewConfigPath);

code/core/src/core-server/presets/vitePlugins/vite-mock/utils.ts → code/builders/builder-vite/src/plugins/vite-mock/utils.ts

@@ -1,4 +1,3 @@
-import { realpathSync } from 'fs';
 import type { ViteDevServer } from 'vite';
 
 /**

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

@@ -0,0 +1,34 @@
+import { findConfigFile } from 'storybook/internal/common';
+import type { Options } from 'storybook/internal/types';
+
+import type { UserConfig } from 'vite';
+
+import { viteInjectMockerRuntime } from './plugins/vite-inject-mocker/plugin';
+import { viteMockPlugin } from './plugins/vite-mock/plugin';
+
+// This preset defines currently mocking plugins for Vite
+// It is defined as a viteFinal preset so that @storybook/addon-vitest can use it as well and that it doesn't have to be duplicated in addon-vitest.
+// The main vite configuration is defined in `./vite-config.ts`.
+export async function viteFinal(existing: UserConfig, options: Options) {
+  const previewConfigPath = findConfigFile('preview', options.configDir);
+
+  // If there's no preview file, there's nothing to mock.
+  if (!previewConfigPath) {
+    return existing;
+  }
+
+  const coreOptions = await options.presets.apply('core');
+
+  return {
+    ...existing,
+    plugins: [
+      ...(existing.plugins ?? []),
+      ...(previewConfigPath
+        ? [
+            viteInjectMockerRuntime({ previewConfigPath }),
+            viteMockPlugin({ previewConfigPath, coreOptions, configDir: options.configDir }),
+          ]
+        : []),
+    ],
+  };
+}

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

@@ -59,6 +59,8 @@ export async function commonConfig(
   const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
     (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
 
+  // This is the main Vite config that is used by Storybook.
+  // Some shared vite plugins are defined in the `./preset.ts` file so that it can be shared between the @storybook/builder-vite and @storybook/addon-vitest package.
   const sbConfig: InlineConfig = {
     configFile: false,
     cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),

code/builders/builder-webpack5/build-config.ts

@@ -22,6 +22,16 @@ const config: BuildEntries = {
         entryPoint: './src/loaders/export-order-loader.ts',
         dts: false,
       },
+      {
+        exportEntries: ['./loaders/storybook-mock-transform-loader'],
+        entryPoint: './src/loaders/storybook-mock-transform-loader.ts',
+        dts: false,
+      },
+      {
+        exportEntries: ['./loaders/webpack-automock-loader'],
+        entryPoint: './src/loaders/webpack-automock-loader.ts',
+        dts: false,
+      },
     ],
   },
   extraOutputs: {

code/builders/builder-webpack5/package.json

@@ -32,6 +32,8 @@
       "default": "./dist/index.js"
     },
     "./loaders/export-order-loader": "./dist/loaders/export-order-loader.js",
+    "./loaders/storybook-mock-transform-loader": "./dist/loaders/storybook-mock-transform-loader.js",
+    "./loaders/webpack-automock-loader": "./dist/loaders/webpack-automock-loader.js",
     "./package.json": "./package.json",
     "./presets/custom-webpack-preset": "./dist/presets/custom-webpack-preset.js",
     "./presets/preview-preset": "./dist/presets/preview-preset.js",
@@ -54,6 +56,7 @@
   },
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
+    "@vitest/mocker": "3.2.4",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "cjs-module-lexer": "^1.2.3",
     "css-loader": "^7.1.2",

code/core/src/core-server/presets/webpack/loaders/storybook-mock-transform-loader.ts → code/builders/builder-webpack5/src/loaders/storybook-mock-transform-loader.ts

@@ -1,9 +1,8 @@
+import { rewriteSbMockImportCalls } from 'storybook/internal/mocking-utils';
 import { logger } from 'storybook/internal/node-logger';
 
 import type { LoaderDefinition } from 'webpack';
 
-import { rewriteSbMockImportCalls } from '../../../mocking-utils/extract';
-
 /**
  * A Webpack loader that normalize sb.mock(import(...)) calls to sb.mock(...)
  *

code/core/src/core-server/presets/webpack/loaders/webpack-automock-loader.ts → code/builders/builder-webpack5/src/loaders/webpack-automock-loader.ts

@@ -1,7 +1,6 @@
-import type { LoaderContext } from 'webpack';
+import { babelParser, getAutomockCode } from 'storybook/internal/mocking-utils';
 
-import { getAutomockCode } from '../../../mocking-utils/automock';
-import { babelParser } from '../../../mocking-utils/extract';
+import type { LoaderContext } from 'webpack';
 
 /** Defines the options that can be passed to the webpack-automock-loader. */
 interface AutomockLoaderOptions {

code/core/src/core-server/presets/webpack/plugins/webpack-inject-mocker-runtime-plugin.ts → code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts

@@ -1,13 +1,10 @@
-import { join } from 'node:path';
+import { getMockerRuntime } from 'storybook/internal/mocking-utils';
 
-import { buildSync } from 'esbuild';
 // HtmlWebpackPlugin is a standard part of Storybook's Webpack setup.
 // We can assume it's available as a dependency.
 import type HtmlWebpackPlugin from 'html-webpack-plugin';
 import type { Compiler } from 'webpack';
 
-import { resolvePackageDir } from '../../../../shared/utils/module';
-
 const PLUGIN_NAME = 'WebpackInjectMockerRuntimePlugin';
 
 /**
@@ -55,26 +52,7 @@ export class WebpackInjectMockerRuntimePlugin {
         PLUGIN_NAME,
         (data, cb) => {
           try {
-            // The runtime template is the same for both dev and build in the final implementation,
-            // as all mocking logic is handled at build time or by the dev server's transform.
-            const runtimeTemplatePath = join(
-              resolvePackageDir('storybook'),
-              'assets',
-              'server',
-              'mocker-runtime.template.js'
-            );
-            // Use esbuild to bundle the runtime script and its dependencies (`@vitest/mocker`, etc.)
-            // into a single, self-contained string of code.
-            const bundleResult = buildSync({
-              entryPoints: [runtimeTemplatePath],
-              bundle: true,
-              write: false, // Return the result in memory instead of writing to disk
-              format: 'esm',
-              target: 'es2020',
-              external: ['msw/browser', 'msw/core/http'],
-            });
-
-            const runtimeScriptContent = bundleResult.outputFiles[0].text;
+            const runtimeScriptContent = getMockerRuntime();
             const runtimeAssetName = 'mocker-runtime-injected.js';
 
             // Use the documented `emitAsset` method to add the pre-bundled runtime script

code/core/src/core-server/presets/webpack/plugins/webpack-mock-plugin.ts → code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts

@@ -1,17 +1,16 @@
-import { createRequire } from 'node:module';
 import { dirname, isAbsolute } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import type { Compiler } from 'webpack';
-
-import { babelParser, extractMockCalls } from '../../../mocking-utils/extract';
 import {
+  babelParser,
+  extractMockCalls,
   getIsExternal,
   resolveExternalModule,
   resolveWithExtensions,
-} from '../../../mocking-utils/resolve';
+} from 'storybook/internal/mocking-utils';
 
-const require = createRequire(import.meta.url);
+import { findMockRedirect } from '@vitest/mocker/redirect';
+import type { Compiler } from 'webpack';
 
 // --- Type Definitions ---
 
@@ -131,7 +130,8 @@ export class WebpackMockPlugin {
     const mocks = extractMockCalls(
       { previewConfigPath, configDir: dirname(previewConfigPath) },
       babelParser,
-      compiler.context
+      compiler.context,
+      findMockRedirect
     );
 
     // 2. Resolve each mock call to its absolute path and replacement resource.
@@ -148,7 +148,7 @@ export class WebpackMockPlugin {
         } else {
           // No `__mocks__` file found. Use our custom loader to automock the module.
           const loaderPath = fileURLToPath(
-            import.meta.resolve('storybook/webpack/loaders/webpack-automock-loader')
+            import.meta.resolve('@storybook/builder-webpack5/loaders/webpack-automock-loader')
           );
           replacementResource = `${loaderPath}?spy=${mock.spy}!${absolutePath}`;
         }

code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts

@@ -1,3 +1,6 @@
+import { fileURLToPath } from 'node:url';
+
+import { findConfigFile } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import type { Options, PresetProperty } from 'storybook/internal/types';
 
@@ -6,6 +9,8 @@ import { loadCustomWebpackConfig } from '@storybook/core-webpack';
 import webpackModule from 'webpack';
 import type { Configuration } from 'webpack';
 
+import { WebpackInjectMockerRuntimePlugin } from '../plugins/webpack-inject-mocker-runtime-plugin';
+import { WebpackMockPlugin } from '../plugins/webpack-mock-plugin';
 import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
 
 export const swc: PresetProperty<'swc'> = (config: Record<string, any>): Record<string, any> => {
@@ -26,6 +31,38 @@ export const swc: PresetProperty<'swc'> = (config: Record<string, any>): Record<
   };
 };
 
+export async function webpackFinal(config: Configuration, options: Options) {
+  const previewConfigPath = findConfigFile('preview', options.configDir);
+
+  // If there's no preview file, there's nothing to mock.
+  if (!previewConfigPath) {
+    return config;
+  }
+
+  config.plugins = config.plugins || [];
+
+  // 1. Add the loader to normalize sb.mock(import(...)) calls.
+  config.module!.rules!.push({
+    test: /preview\.(t|j)sx?$/,
+    use: [
+      {
+        loader: fileURLToPath(
+          import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader')
+        ),
+      },
+    ],
+  });
+
+  // 2. Add the plugin to handle module replacement based on sb.mock() calls.
+  // This plugin scans the preview file and sets up rules to swap modules.
+  config.plugins.push(new WebpackMockPlugin({ previewConfigPath }));
+
+  // 3. Add the plugin to inject the mocker runtime script into the HTML.
+  // This ensures the `sb` object is available before any other code runs.
+  config.plugins.push(new WebpackInjectMockerRuntimePlugin());
+  return config;
+}
+
 export async function webpack(config: Configuration, options: Options) {
   const { configDir, configType, presets } = options;
 

code/core/build-config.ts

@@ -77,14 +77,8 @@ const config: BuildEntries = {
         exportEntries: ['./internal/cli'],
       },
       {
-        entryPoint: './src/core-server/presets/webpack/loaders/webpack-automock-loader.ts',
-        exportEntries: ['./webpack/loaders/webpack-automock-loader'],
-        dts: false,
-      },
-      {
-        entryPoint: './src/core-server/presets/webpack/loaders/storybook-mock-transform-loader.ts',
-        exportEntries: ['./webpack/loaders/storybook-mock-transform-loader'],
-        dts: false,
+        exportEntries: ['./internal/mocking-utils'],
+        entryPoint: './src/mocking-utils/index.ts',
       },
     ],
     browser: [