@modern-js/storybook-builder 2.40.0 → 2.41.0

package/dist/cjs/core.js

@@ -26,15 +26,19 @@ var import_core = require("@modern-js/core");
 var import_utils = require("./utils");
 var import_plugin_storybook = require("./plugin-storybook");
 async function getCompiler(cwd, builderOptions, options) {
-  const bundler = builderOptions.bundler || "webpack";
+  const { bundler } = builderOptions;
   const { presets } = options;
   const entries = await presets.apply("entries", []);
   const res = await (0, import_utils.runWithErrorMsg)(() => (0, import_core.loadConfig)(cwd, builderOptions.configPath || (0, import_utils.getConfigFileName)()), "Failed to load config");
   const loadedConfig = res ? res.config : {};
   const finalConfig = await presets.apply("modern", loadedConfig) || loadedConfig;
-  const provider = await (0, import_utils.getProvider)(bundler, finalConfig);
+  const provider = await (0, import_utils.getProvider)(bundler, (0, import_builder.mergeBuilderConfig)(finalConfig, builderOptions.builderConfig) || {});
   if (!provider) {
-    throw new Error(`@modern-js/builder-${bundler}-provider not found `);
+    if (bundler) {
+      throw new Error(`You choose to use ${bundler}, but @modern-js/builder-${bundler}-provider not found in your project, please install it`);
+    } else {
+      throw new Error(`Please install one provider first, try install @modern-js/builder-rspack-provider or @modern-js/builder-webpack-provider first`);
+    }
   }
   const builder = await (0, import_builder.createBuilder)(provider, {
     cwd,

package/dist/cjs/plugin-storybook.js

@@ -89,6 +89,7 @@ const pluginStorybook = (cwd, options) => {
         await applyCsfPlugin(config, options);
       };
       if ("modifyWebpackConfig" in api) {
+        addonAdapter(api, options);
         api.modifyWebpackConfig(modifyConfig);
         api.modifyWebpackChain(async (chain) => {
           await (0, import_docgen.applyDocgenWebpack)(chain, options);
@@ -330,6 +331,65 @@ async function watchStories(patterns, cwd, writeModule) {
   ]);
   return watcher;
 }
+function addonAdapter(api, options) {
+  const { presets } = options;
+  api.modifyBuilderConfig(async (finalConfig) => {
+    var _finalConfig;
+    const babelOptions = await presets.apply("babel", {}, {
+      ...options
+    });
+    var _tools;
+    (_tools = (_finalConfig = finalConfig).tools) !== null && _tools !== void 0 ? _tools : _finalConfig.tools = {};
+    const userConfig = finalConfig.tools.babel;
+    finalConfig.tools.babel = (config, utils) => {
+      const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
+      const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
+      const replaceOrInsert = (plugin, plugins) => {
+        const pluginName = getPluginName(plugin);
+        const append = [];
+        for (let i = 0; i < plugins.length; i++) {
+          if (getPluginName(plugins[i]) === pluginName) {
+            if (getOptions(plugin)) {
+              import_utils.logger.info(`Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`);
+              plugins[i] = plugin;
+            }
+          } else {
+            append.push(plugin);
+          }
+        }
+        plugins.push(...append);
+      };
+      const currentPlugins = config.plugins || [];
+      const currentPresets = config.presets || [];
+      for (const plugin of babelOptions.plugins || []) {
+        replaceOrInsert(plugin, currentPlugins);
+      }
+      for (const preset of babelOptions.presets || []) {
+        replaceOrInsert(preset, currentPresets);
+      }
+      const finalConfig2 = {
+        ...config,
+        ...babelOptions,
+        plugins: currentPlugins,
+        presets: currentPresets
+      };
+      if (typeof userConfig === "function") {
+        return userConfig(finalConfig2, utils);
+      } else if (typeof userConfig === "object") {
+        return {
+          ...finalConfig2,
+          ...userConfig
+        };
+      } else {
+        return finalConfig2;
+      }
+    };
+  });
+  api.modifyWebpackConfig(async (config) => {
+    const finalDefaultConfig = await presets.apply("webpackFinal", config, options);
+    return finalDefaultConfig;
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   finalize,

package/dist/cjs/utils.js

@@ -59,14 +59,15 @@ async function getProvider(bundler, builderConfig) {
       return builderWebpackProvider({
         builderConfig
       });
-    } else {
+    } else if (bundler === "rspack") {
       const { builderRspackProvider } = await Promise.resolve().then(() => __toESM(require("@modern-js/builder-rspack-provider")));
       return builderRspackProvider({
         builderConfig
       });
+    } else {
+      return await getProvider("webpack", builderConfig) || await getProvider("rspack", builderConfig);
     }
   } catch (e) {
-    import_utils.logger.error(`Cannot find provider, you need to install @modern-js/builder-${bundler}-provider first`);
   }
 }
 async function virtualModule(tempDir, cwd, virtualModuleMap) {

package/dist/esm/core.js

@@ -1,9 +1,9 @@
-import { createBuilder } from "@modern-js/builder";
+import { createBuilder, mergeBuilderConfig } from "@modern-js/builder";
 import { loadConfig } from "@modern-js/core";
 import { getConfigFileName, getProvider, runWithErrorMsg } from "./utils";
 import { pluginStorybook } from "./plugin-storybook";
 async function getCompiler(cwd, builderOptions, options) {
-  const bundler = builderOptions.bundler || "webpack";
+  const { bundler } = builderOptions;
   const { presets } = options;
   const entries = await presets.apply("entries", []);
   const res = await runWithErrorMsg(
@@ -12,9 +12,20 @@ async function getCompiler(cwd, builderOptions, options) {
   );
   const loadedConfig = res ? res.config : {};
   const finalConfig = await presets.apply("modern", loadedConfig) || loadedConfig;
-  const provider = await getProvider(bundler, finalConfig);
+  const provider = await getProvider(
+    bundler,
+    mergeBuilderConfig(finalConfig, builderOptions.builderConfig) || {}
+  );
   if (!provider) {
-    throw new Error(`@modern-js/builder-${bundler}-provider not found `);
+    if (bundler) {
+      throw new Error(
+        `You choose to use ${bundler}, but @modern-js/builder-${bundler}-provider not found in your project, please install it`
+      );
+    } else {
+      throw new Error(
+        `Please install one provider first, try install @modern-js/builder-rspack-provider or @modern-js/builder-webpack-provider first`
+      );
+    }
   }
   const builder = await createBuilder(provider, {
     cwd,

package/dist/esm/plugin-storybook.js

@@ -1,5 +1,11 @@
 import { isAbsolute, join, resolve } from "path";
-import { slash, watch, globby, applyOptionsChain } from "@modern-js/utils";
+import {
+  slash,
+  watch,
+  globby,
+  applyOptionsChain,
+  logger
+} from "@modern-js/utils";
 import {
   mergeBuilderConfig
 } from "@modern-js/builder-shared";
@@ -73,6 +79,7 @@ const pluginStorybook = (cwd, options) => {
         await applyCsfPlugin(config, options);
       };
       if ("modifyWebpackConfig" in api) {
+        addonAdapter(api, options);
         api.modifyWebpackConfig(modifyConfig);
         api.modifyWebpackChain(async (chain) => {
           await applyDocgenWebpack(chain, options);
@@ -346,6 +353,65 @@ async function watchStories(patterns, cwd, writeModule) {
   );
   return watcher;
 }
+function addonAdapter(api, options) {
+  const { presets } = options;
+  api.modifyBuilderConfig(async (finalConfig) => {
+    var _a;
+    const babelOptions = await presets.apply("babel", {}, { ...options });
+    (_a = finalConfig.tools) != null ? _a : finalConfig.tools = {};
+    const userConfig = finalConfig.tools.babel;
+    finalConfig.tools.babel = (config, utils) => {
+      const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
+      const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
+      const replaceOrInsert = (plugin, plugins) => {
+        const pluginName = getPluginName(plugin);
+        const append = [];
+        for (let i = 0; i < plugins.length; i++) {
+          if (getPluginName(plugins[i]) === pluginName) {
+            if (getOptions(plugin)) {
+              logger.info(
+                `Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`
+              );
+              plugins[i] = plugin;
+            }
+          } else {
+            append.push(plugin);
+          }
+        }
+        plugins.push(...append);
+      };
+      const currentPlugins = config.plugins || [];
+      const currentPresets = config.presets || [];
+      for (const plugin of babelOptions.plugins || []) {
+        replaceOrInsert(plugin, currentPlugins);
+      }
+      for (const preset of babelOptions.presets || []) {
+        replaceOrInsert(preset, currentPresets);
+      }
+      const finalConfig2 = {
+        ...config,
+        ...babelOptions,
+        plugins: currentPlugins,
+        presets: currentPresets
+      };
+      if (typeof userConfig === "function") {
+        return userConfig(finalConfig2, utils);
+      } else if (typeof userConfig === "object") {
+        return { ...finalConfig2, ...userConfig };
+      } else {
+        return finalConfig2;
+      }
+    };
+  });
+  api.modifyWebpackConfig(async (config) => {
+    const finalDefaultConfig = await presets.apply(
+      "webpackFinal",
+      config,
+      options
+    );
+    return finalDefaultConfig;
+  });
+}
 export {
   finalize,
   pluginStorybook

package/dist/esm/utils.js

@@ -15,16 +15,15 @@ async function getProvider(bundler, builderConfig) {
       return builderWebpackProvider({
         builderConfig
       });
-    } else {
+    } else if (bundler === "rspack") {
       const { builderRspackProvider } = await import("@modern-js/builder-rspack-provider");
       return builderRspackProvider({
         builderConfig
       });
+    } else {
+      return await getProvider("webpack", builderConfig) || await getProvider("rspack", builderConfig);
     }
   } catch (e) {
-    logger.error(
-      `Cannot find provider, you need to install @modern-js/builder-${bundler}-provider first`
-    );
   }
 }
 async function virtualModule(tempDir, cwd, virtualModuleMap) {

package/dist/types/utils.d.ts

@@ -1,9 +1,11 @@
+import { BuilderWebpackProvider } from '@modern-js/builder-webpack-provider';
+import { BuilderRspackProvider } from '@modern-js/builder-rspack-provider';
 import { AllBuilderConfig } from './types';
 export declare const VIRTUAL_MODULE_BASE = ".MODERN_STORYBOOK";
 export declare const STORIES_FILENAME = "storybook-stories.js";
 export declare const STORYBOOK_CONFIG_ENTRY = "storybook-config-entry.js";
 export declare const requireResolve: (importer: string, path: string) => void;
-export declare function getProvider(bundler: 'webpack' | 'rspack', builderConfig: AllBuilderConfig): Promise<import("@modern-js/builder-webpack-provider").BuilderWebpackProvider | import("@modern-js/builder-rspack-provider").BuilderRspackProvider | undefined>;
+export declare function getProvider(bundler: 'webpack' | 'rspack' | undefined, builderConfig: AllBuilderConfig): Promise<BuilderWebpackProvider | BuilderRspackProvider | undefined>;
 export declare function virtualModule(tempDir: string, cwd: string, virtualModuleMap: Record<string, string>): Promise<[Record<string, string>, (p: string, content: string) => void]>;
 export declare function toImportFn(cwd: string, stories: string[]): Promise<string>;
 export declare function getAbsolutePath<I extends string>(input: I): I;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/storybook-builder",
-  "version": "2.40.0",
+  "version": "2.41.0",
   "description": "modern.js support for storybook",
   "repository": {
     "type": "git",
@@ -17,19 +17,19 @@
   ],
   "exports": {
     ".": {
-      "jsnext:source": "./src/index.ts",
       "types": "./dist/types/index.d.ts",
+      "jsnext:source": "./src/index.ts",
       "default": "./dist/cjs/index.js"
     },
     "./preset": "./dist/esm/preset.js",
     "./addons": {
-      "jsnext:source": "./src/addons/preset/preview.ts",
       "types": "./dist/types/addons/preset/preview.d.ts",
+      "jsnext:source": "./src/addons/preset/preview.ts",
       "default": "./dist/esm/addons/preset/preview.js"
     },
     "./types": {
-      "jsnext:source": "./src/types.ts",
       "types": "./dist/types/types.d.ts",
+      "jsnext:source": "./src/types.ts",
       "default": "./dist/cjs/types.js"
     },
     "./templates/preview.ejs": "./templates/preview.ejs",
@@ -51,7 +51,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@rspack/dev-client": "0.3.2",
+    "@rspack/dev-client": "0.4.0",
     "@storybook/components": "^7.5.1",
     "@storybook/core-common": "^7.5.1",
     "@storybook/csf-plugin": "^7.5.1",
@@ -71,11 +71,11 @@
     "serve-static": "^1.14.1",
     "tinypool": "^0.8.0",
     "webpack-hot-middleware": "^2.25.4",
-    "@modern-js/builder": "2.40.0",
-    "@modern-js/builder-shared": "2.40.0",
-    "@modern-js/core": "2.40.0",
-    "@modern-js/runtime": "2.40.0",
-    "@modern-js/utils": "2.40.0"
+    "@modern-js/builder": "2.41.0",
+    "@modern-js/runtime": "2.41.0",
+    "@modern-js/builder-shared": "2.41.0",
+    "@modern-js/core": "2.41.0",
+    "@modern-js/utils": "2.41.0"
   },
   "devDependencies": {
     "@storybook/types": "^7.5.1",
@@ -83,10 +83,22 @@
     "@types/serve-static": "^1.13.10",
     "@types/webpack-hot-middleware": "^2.25.6",
     "typescript": "^5.2.2",
-    "@modern-js/builder-rspack-provider": "2.40.0",
-    "@modern-js/builder-webpack-provider": "2.40.0",
-    "@modern-js/core": "2.40.0",
-    "@scripts/build": "2.40.0"
+    "@modern-js/builder-rspack-provider": "2.41.0",
+    "@modern-js/core": "2.41.0",
+    "@modern-js/builder-webpack-provider": "2.41.0",
+    "@scripts/build": "2.41.0"
+  },
+  "peerDependencies": {
+    "@modern-js/builder-webpack-provider": "^2.41.0",
+    "@modern-js/builder-rspack-provider": "^2.41.0"
+  },
+  "peerDependenciesMeta": {
+    "@modern-js/builder-webpack-provider": {
+      "optional": true
+    },
+    "@modern-js/builder-rspack-provider": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/templates/virtualModuleModernEntry.js.handlebars

@@ -27,13 +27,13 @@ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore
 
 preview.initialize({ importFn, getProjectAnnotations });
 
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
+if (module.hot) {
+  module.hot.accept('./{{storiesFilename}}', () => {
     // importFn has changed so we need to patch the new one in
     preview.onStoriesChanged({ importFn });
   });
 
-  import.meta.webpackHot.accept([
+  module.hot.accept([
     {{#each previewAnnotations}}'{{this}}',
     {{/each}}
   ], () => {