@storybook/builder-webpack5 10.1.0-alpha.12 → 10.1.0-alpha.14

package/dist/_node-chunks/{chunk-PNIJKQ6N.js → chunk-KU5MRVPI.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/_node-chunks/{chunk-NLTG2HNE.js → chunk-YGASIQTS.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/index.js

@@ -1,22 +1,22 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   getVirtualModules
-} from "./_node-chunks/chunk-NLTG2HNE.js";
+} from "./_node-chunks/chunk-YGASIQTS.js";
 import {
   __commonJS,
   __require,
   __toESM
-} from "./_node-chunks/chunk-PNIJKQ6N.js";
+} from "./_node-chunks/chunk-KU5MRVPI.js";
 
 // ../../node_modules/pretty-hrtime/index.js
 var require_pretty_hrtime = __commonJS({

package/dist/loaders/export-order-loader.js

@@ -1,15 +1,15 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import "../_node-chunks/chunk-PNIJKQ6N.js";
+import "../_node-chunks/chunk-KU5MRVPI.js";
 
 // src/loaders/export-order-loader.ts
 import assert from "node:assert";

package/dist/loaders/storybook-mock-transform-loader.js

@@ -0,0 +1,29 @@
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import "../_node-chunks/chunk-KU5MRVPI.js";
+
+// src/loaders/storybook-mock-transform-loader.ts
+import { rewriteSbMockImportCalls } from "storybook/internal/mocking-utils";
+import { logger } from "storybook/internal/node-logger";
+var storybookMockTransformLoader = function(source, sourceMap, meta) {
+  let callback = this.async();
+  try {
+    let result = rewriteSbMockImportCalls(source);
+    callback(null, result.code, result.map || void 0, meta);
+  } catch (error) {
+    let filePath = this.resourcePath;
+    logger.debug(`Could not transform sb.mock(import(...)) calls in ${filePath}: ${error}`), callback(null, source, sourceMap, meta);
+  }
+}, storybook_mock_transform_loader_default = storybookMockTransformLoader;
+export {
+  storybook_mock_transform_loader_default as default
+};

package/dist/loaders/webpack-automock-loader.js

@@ -0,0 +1,22 @@
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import "../_node-chunks/chunk-KU5MRVPI.js";
+
+// src/loaders/webpack-automock-loader.ts
+import { babelParser, getAutomockCode } from "storybook/internal/mocking-utils";
+function webpackAutomockLoader(source) {
+  let isSpy = this.getOptions().spy === "true";
+  return getAutomockCode(source, isSpy, babelParser).toString();
+}
+export {
+  webpackAutomockLoader as default
+};

package/dist/presets/custom-webpack-preset.js

@@ -1,23 +1,144 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-import "../_node-chunks/chunk-PNIJKQ6N.js";
+import {
+  __require
+} from "../_node-chunks/chunk-KU5MRVPI.js";
 
 // src/presets/custom-webpack-preset.ts
+import { fileURLToPath as fileURLToPath3 } from "node:url";
+import { findConfigFile } from "storybook/internal/common";
 import { logger as logger2 } from "storybook/internal/node-logger";
 import { loadCustomWebpackConfig } from "@storybook/core-webpack";
 import webpackModule from "webpack";
 
-// src/preview/base-webpack.config.ts
+// src/plugins/webpack-inject-mocker-runtime-plugin.ts
+import { getMockerRuntime } from "storybook/internal/mocking-utils";
+var PLUGIN_NAME = "WebpackInjectMockerRuntimePlugin", WebpackInjectMockerRuntimePlugin = class {
+  // We need to lazy-require HtmlWebpackPlugin because it's an optional peer dependency.
+  getHtmlWebpackPlugin(compiler) {
+    try {
+      let constructor = compiler.options.plugins.find(
+        (p) => p?.constructor?.name === "HtmlWebpackPlugin"
+      )?.constructor;
+      return constructor || __require("html-webpack-plugin");
+    } catch {
+      return compiler.getInfrastructureLogger(PLUGIN_NAME).warn("html-webpack-plugin is not installed. Cannot inject mocker runtime."), null;
+    }
+  }
+  /**
+   * The main entry point for the Webpack plugin.
+   *
+   * @param {Compiler} compiler The Webpack compiler instance.
+   */
+  apply(compiler) {
+    let HtmlWebpackPlugin = this.getHtmlWebpackPlugin(compiler);
+    HtmlWebpackPlugin && compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
+        PLUGIN_NAME,
+        (data, cb) => {
+          try {
+            let runtimeScriptContent = getMockerRuntime(), runtimeAssetName = "mocker-runtime-injected.js";
+            compilation.emitAsset(
+              runtimeAssetName,
+              new compiler.webpack.sources.RawSource(runtimeScriptContent)
+            ), data.assets.js.unshift(runtimeAssetName), cb(null, data);
+          } catch (error) {
+            cb(error);
+          }
+        }
+      );
+    });
+  }
+};
+
+// src/plugins/webpack-mock-plugin.ts
+import { dirname, isAbsolute } from "node:path";
 import { fileURLToPath } from "node:url";
+import {
+  babelParser,
+  extractMockCalls,
+  getIsExternal,
+  resolveExternalModule,
+  resolveWithExtensions
+} from "storybook/internal/mocking-utils";
+import { findMockRedirect } from "@vitest/mocker/redirect";
+var PLUGIN_NAME2 = "storybook-mock-plugin", WebpackMockPlugin = class {
+  constructor(options) {
+    this.mockMap = /* @__PURE__ */ new Map();
+    if (!options.previewConfigPath)
+      throw new Error(`[${PLUGIN_NAME2}] \`previewConfigPath\` is required.`);
+    this.options = options;
+  }
+  /**
+   * The main entry point for the Webpack plugin.
+   *
+   * @param {Compiler} compiler The Webpack compiler instance.
+   */
+  apply(compiler) {
+    let logger3 = compiler.getInfrastructureLogger(PLUGIN_NAME2), updateMocks = () => {
+      this.mockMap = new Map(
+        this.extractAndResolveMocks(compiler).flatMap((mock) => [
+          // first one, full path
+          [mock.absolutePath, mock],
+          // second one, without the extension
+          [mock.absolutePath.replace(/\.[^.]+$/, ""), mock]
+        ])
+      ), logger3.info(`Mock map updated with ${this.mockMap.size / 2} mocks.`);
+    };
+    compiler.hooks.beforeRun.tap(PLUGIN_NAME2, updateMocks), compiler.hooks.watchRun.tap(PLUGIN_NAME2, updateMocks), new compiler.webpack.NormalModuleReplacementPlugin(/.*/, (resource) => {
+      try {
+        let path = resource.request, importer = resource.context, absolutePath = getIsExternal(path, importer) ? resolveExternalModule(path, importer) : resolveWithExtensions(path, importer);
+        this.mockMap.has(absolutePath) && (resource.request = this.mockMap.get(absolutePath).replacementResource);
+      } catch {
+        logger3.debug(`Could not resolve mock for "${resource.request}".`);
+      }
+    }).apply(compiler), compiler.hooks.afterCompile.tap(PLUGIN_NAME2, (compilation) => {
+      compilation.fileDependencies.add(this.options.previewConfigPath);
+      for (let mock of this.mockMap.values())
+        isAbsolute(mock.replacementResource) && mock.replacementResource.includes("__mocks__") && compilation.contextDependencies.add(dirname(mock.replacementResource));
+    });
+  }
+  /**
+   * Reads the preview config, parses it to find all `sb.mock()` calls, and resolves their
+   * corresponding mock implementations.
+   *
+   * @param {Compiler} compiler The Webpack compiler instance.
+   * @returns {ResolvedMock[]} An array of fully processed mocks.
+   */
+  extractAndResolveMocks(compiler) {
+    let { previewConfigPath } = this.options, logger3 = compiler.getInfrastructureLogger(PLUGIN_NAME2), mocks = extractMockCalls(
+      { previewConfigPath, configDir: dirname(previewConfigPath) },
+      babelParser,
+      compiler.context,
+      findMockRedirect
+    ), resolvedMocks = [];
+    for (let mock of mocks)
+      try {
+        let { absolutePath, redirectPath } = mock, replacementResource;
+        redirectPath ? replacementResource = redirectPath : replacementResource = `${fileURLToPath(
+          import.meta.resolve("@storybook/builder-webpack5/loaders/webpack-automock-loader")
+        )}?spy=${mock.spy}!${absolutePath}`, resolvedMocks.push({
+          ...mock,
+          replacementResource
+        });
+      } catch {
+        logger3.warn(`Could not resolve mock for "${mock.path}". It will be ignored.`);
+      }
+    return resolvedMocks;
+  }
+};
+
+// src/preview/base-webpack.config.ts
+import { fileURLToPath as fileURLToPath2 } from "node:url";
 import { logger } from "storybook/internal/node-logger";
 async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   if (options.presetsList?.some(
@@ -29,7 +150,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   let hasPostcssAddon = options.presetsList?.some(
     (preset) => /@storybook(\/|\\)addon-postcss/.test(typeof preset == "string" ? preset : preset.name)
   ), cssLoaders = {};
-  hasPostcssAddon || (logger.info("=> Using implicit CSS loaders"), cssLoaders = {
+  hasPostcssAddon || (logger.info("Using implicit CSS loaders"), cssLoaders = {
     test: /\.css$/,
     sideEffects: !0,
     use: [
@@ -37,9 +158,9 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
       // Trying to apply style-loader or css-loader to files that already have been
       // processed by them causes webpack to crash, so no one else can add similar
       // loader configurations to the `.css` extension.
-      fileURLToPath(import.meta.resolve("style-loader")),
+      fileURLToPath2(import.meta.resolve("style-loader")),
       {
-        loader: fileURLToPath(import.meta.resolve("css-loader")),
+        loader: fileURLToPath2(import.meta.resolve("css-loader")),
         options: {
           importLoaders: 1
         }
@@ -49,6 +170,12 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   let isProd = storybookBaseConfig.mode !== "development";
   return {
     ...storybookBaseConfig,
+    // TODO: Implement the clearing functionality of StyledConsoleLogger so that we can use it for webpack
+    // The issue currently is that the status line is not cleared when the webpack compiler is run,
+    // which causes the status line to be printed multiple times.
+    // infrastructureLogging: {
+    //   console: new StyledConsoleLogger({ prefix: 'Webpack', color: 'bgBlue' }),
+    // },
     module: {
       ...storybookBaseConfig.module,
       rules: [
@@ -117,16 +244,30 @@ var swc = (config) => ({
     bugfixes: config?.env?.bugfixes ?? !0
   }
 });
+async function webpackFinal(config, options) {
+  let previewConfigPath = findConfigFile("preview", options.configDir);
+  return previewConfigPath && (config.plugins = config.plugins || [], config.module.rules.push({
+    test: /preview\.(t|j)sx?$/,
+    use: [
+      {
+        loader: fileURLToPath3(
+          import.meta.resolve("@storybook/builder-webpack5/loaders/storybook-mock-transform-loader")
+        )
+      }
+    ]
+  }), config.plugins.push(new WebpackMockPlugin({ previewConfigPath })), config.plugins.push(new WebpackInjectMockerRuntimePlugin())), config;
+}
 async function webpack(config, options) {
   let { configDir, configType, presets } = options, coreOptions = await presets.apply("core"), defaultConfig = config;
   coreOptions?.disableWebpackDefaults || (defaultConfig = await createDefaultWebpackConfig(config, options));
   let finalDefaultConfig = await presets.apply("webpackFinal", defaultConfig, options), customConfig = await loadCustomWebpackConfig(configDir);
-  return typeof customConfig == "function" ? (logger2.info("=> Loading custom Webpack config (full-control mode)."), customConfig({ config: finalDefaultConfig, mode: configType })) : (logger2.info("=> Using default Webpack5 setup"), finalDefaultConfig);
+  return typeof customConfig == "function" ? (logger2.info("Loading custom Webpack config (full-control mode)."), customConfig({ config: finalDefaultConfig, mode: configType })) : (logger2.info("Using default Webpack5 setup"), finalDefaultConfig);
 }
 var webpackInstance = async () => webpackModule, webpackVersion = async () => "5";
 export {
   swc,
   webpack,
+  webpackFinal,
   webpackInstance,
   webpackVersion
 };

package/dist/presets/preview-preset.js

@@ -1,18 +1,18 @@
-import CJS_COMPAT_NODE_URL_ze7kqjtnjg from 'node:url';
-import CJS_COMPAT_NODE_PATH_ze7kqjtnjg from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ze7kqjtnjg from "node:module";
+import CJS_COMPAT_NODE_URL_0i1wf1q6y4l from 'node:url';
+import CJS_COMPAT_NODE_PATH_0i1wf1q6y4l from 'node:path';
+import CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ze7kqjtnjg.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ze7kqjtnjg.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ze7kqjtnjg.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_0i1wf1q6y4l.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_0i1wf1q6y4l.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_0i1wf1q6y4l.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   getVirtualModules
-} from "../_node-chunks/chunk-NLTG2HNE.js";
-import "../_node-chunks/chunk-PNIJKQ6N.js";
+} from "../_node-chunks/chunk-YGASIQTS.js";
+import "../_node-chunks/chunk-KU5MRVPI.js";
 
 // src/presets/preview-preset.ts
 import { fileURLToPath as fileURLToPath2 } from "node:url";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "10.1.0-alpha.12",
+  "version": "10.1.0-alpha.14",
   "description": "A Storybook builder to dev and build with Webpack",
   "keywords": [
     "storybook",
@@ -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",
@@ -53,7 +55,8 @@
     "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "10.1.0-alpha.12",
+    "@storybook/core-webpack": "10.1.0-alpha.14",
+    "@vitest/mocker": "3.2.4",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "cjs-module-lexer": "^1.2.3",
     "css-loader": "^7.1.2",
@@ -79,7 +82,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.12"
+    "storybook": "^10.1.0-alpha.14"
   },
   "peerDependenciesMeta": {
     "typescript": {