diff --git a/.changeset/angry-spoons-wink.md b/.changeset/angry-spoons-wink.md new file mode 100644 index 0000000000..c2095973b8 --- /dev/null +++ b/.changeset/angry-spoons-wink.md @@ -0,0 +1,5 @@ +--- +'@module-federation/rsbuild-plugin': patch +--- + +chore(rsbuild-plugin): split setUp function to help extend diff --git a/.changeset/spicy-roses-hear.md b/.changeset/spicy-roses-hear.md new file mode 100644 index 0000000000..3d4030fe79 --- /dev/null +++ b/.changeset/spicy-roses-hear.md @@ -0,0 +1,5 @@ +--- +'@module-federation/storybook-addon': patch +--- + +chore: export plugin name diff --git a/packages/rsbuild-plugin/src/cli/index.ts b/packages/rsbuild-plugin/src/cli/index.ts index 8c4ec2393b..82b96858d3 100644 --- a/packages/rsbuild-plugin/src/cli/index.ts +++ b/packages/rsbuild-plugin/src/cli/index.ts @@ -15,11 +15,19 @@ import logger from '../logger'; type ModuleFederationOptions = moduleFederationPlugin.ModuleFederationPluginOptions; -const PLUGIN_MODULE_FEDERATION_NAME = 'rsbuild:module-federation-enhanced'; +const RSBUILD_PLUGIN_MODULE_FEDERATION_NAME = + 'rsbuild:module-federation-enhanced'; +const RSPACK_PLUGIN_MODULE_FEDERATION_NAME = 'module-federation'; + +export { + RSBUILD_PLUGIN_MODULE_FEDERATION_NAME, + RSPACK_PLUGIN_MODULE_FEDERATION_NAME, +}; + export const pluginModuleFederation = ( moduleFederationOptions: ModuleFederationOptions, ): RsbuildPlugin => ({ - name: PLUGIN_MODULE_FEDERATION_NAME, + name: RSBUILD_PLUGIN_MODULE_FEDERATION_NAME, setup: (api) => { const sharedOptions: [string, sharePlugin.SharedConfig][] = parseOptions( moduleFederationOptions.shared || [], @@ -153,7 +161,7 @@ export const pluginModuleFederation = ( api.modifyBundlerChain(async (chain) => { chain - .plugin('module-federation') + .plugin(RSPACK_PLUGIN_MODULE_FEDERATION_NAME) .use(ModuleFederationPlugin, [moduleFederationOptions]); // `uniqueName` is required for react refresh to work diff --git a/packages/storybook-addon/package.json b/packages/storybook-addon/package.json index 92ead4efa1..64b3b44db7 100644 --- a/packages/storybook-addon/package.json +++ b/packages/storybook-addon/package.json @@ -40,6 +40,9 @@ "*": { ".": [ "./dist/index.d.ts" + ], + "preset": [ + "./dist/preset.d.ts" ] } }, diff --git a/packages/storybook-addon/preset.ts b/packages/storybook-addon/preset.ts index 0ef92908f9..2047d71718 100644 --- a/packages/storybook-addon/preset.ts +++ b/packages/storybook-addon/preset.ts @@ -18,3 +18,4 @@ export default { }); }, }; +export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild'; diff --git a/packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts b/packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts index 9b6fdd86e6..da69ff78da 100644 --- a/packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts +++ b/packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts @@ -9,6 +9,7 @@ import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core'; import type { moduleFederationPlugin } from '@module-federation/sdk'; const tempDirPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}`); +export const PLUGIN_NAME = 'module-federation-storybook-addon'; // add bootstrap for host project const bootstrapPath = path.resolve( process.cwd(), @@ -27,7 +28,7 @@ const writeBootstrap = (context: string, entryPath: string) => { } fs.writeFileSync(bootstrapPath, generateBootstrap(context, entryPath)); }; -export const withModuleFederation = async ( +export const withModuleFederation = ( rsbuildConfig: RsbuildConfig, options: moduleFederationPlugin.ModuleFederationPluginOptions, ) => { @@ -52,36 +53,30 @@ export const withModuleFederation = async ( // remoteEntry already includes one hmr runtime, and an additional one is not necessary. hmr: false, }, - tools: { - rspack: (config) => { - config.output ??= {}; - config.output.chunkLoadingGlobal = - 'module-federation-storybook-addon'; - config.plugins?.push( - new ModuleFederationPlugin({ - name: options.name || 'module-federation-storybook-addon', - shared: { - react: { - singleton: true, - }, - 'react-dom': { - singleton: true, - }, - ...options.shared, - }, - remotes: { - ...options.remotes, - }, - shareStrategy: options.shareStrategy, - }), - ); - return config; - }, - }, }; - return mergeRsbuildConfig(config, mfConfig); }); + + api.modifyBundlerChain(async (chain) => { + chain.plugin(PLUGIN_NAME).use(ModuleFederationPlugin, [ + { + name: options.name || PLUGIN_NAME, + shared: { + react: { + singleton: true, + }, + 'react-dom': { + singleton: true, + }, + ...options.shared, + }, + remotes: { + ...options.remotes, + }, + shareStrategy: options.shareStrategy, + }, + ]); + }); }, }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9fbbe6dc23..0893999ed1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20378,7 +20378,7 @@ packages: '@babel/core': 7.25.2 '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2) '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.2) - vite: 5.2.14(@types/node@18.16.9)(less@4.2.0)(stylus@0.64.0) + vite: 5.2.14(@types/node@16.11.68)(less@4.2.0)(stylus@0.64.0) vue: 3.5.10(typescript@5.5.2) transitivePeerDependencies: - supports-color @@ -20391,7 +20391,7 @@ packages: vite: ^5.0.0 vue: ^3.2.25 dependencies: - vite: 5.2.14(@types/node@18.16.9)(less@4.2.0)(stylus@0.64.0) + vite: 5.2.14(@types/node@16.11.68)(less@4.2.0)(stylus@0.64.0) vue: 3.5.10(typescript@5.5.2) dev: true