chore: use new modern.js plugin for improved functionality

module-federation · Jan 23, 2025 · 0d704f8 · 0d704f8
1 parent b081094
commit 0d704f8
Show file tree

Hide file tree

Showing 7 changed files with 448 additions and 392 deletions.
diff --git a/.changeset/bright-planets-boil.md b/.changeset/bright-planets-boil.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+chore: use new modern.js plugin for improved functionality
diff --git a/packages/modernjs/package.json b/packages/modernjs/package.json
@@ -94,7 +94,6 @@
     "@module-federation/node": "workspace:*",
     "@module-federation/sdk": "workspace:*",
     "@swc/helpers": "0.5.13",
-    "hoist-non-react-statics": "3.3.2",
     "node-fetch": "~3.3.0",
     "react-error-boundary": "4.1.2"
   },
@@ -104,8 +103,7 @@
     "@modern-js/module-tools": "2.64.0",
     "@modern-js/runtime": "2.64.0",
     "@modern-js/tsconfig": "2.64.0",
-    "@module-federation/manifest": "workspace:*",
-    "@types/hoist-non-react-statics": "3.3.5"
+    "@module-federation/manifest": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=17",

diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import type {
-  CliPlugin,
+  CliPluginFuture,
   AppTools,
   UserConfig,
   Bundler,
@@ -53,12 +53,12 @@ export function modifyBundlerConfig<T extends Bundler>(options: {
 
 export const moduleFederationConfigPlugin = (
   userConfig: InternalModernPluginOptions,
-): CliPlugin<AppTools> => ({
+): CliPluginFuture<AppTools> => ({
   name: '@modern-js/plugin-module-federation-config',
   pre: ['@modern-js/plugin-initialize'],
   post: ['@modern-js/plugin-module-federation'],
-  setup: async ({ useConfigContext, useAppContext }) => {
-    const modernjsConfig = useConfigContext();
+  setup: async (api) => {
+    const modernjsConfig = api.getConfig();
     const mfConfig = await getMFConfig(userConfig.originPluginOptions);
     const csrConfig =
       userConfig.csrConfig || JSON.parse(JSON.stringify(mfConfig));
@@ -67,86 +67,84 @@ export const moduleFederationConfigPlugin = (
     userConfig.ssrConfig = ssrConfig;
     userConfig.csrConfig = csrConfig;
 
-    return {
-      config: async () => {
-        const bundlerType =
-          useAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
-        const ipv4 = getIPV4();
-        const enableSSR =
-          userConfig.userConfig?.ssr === false
-            ? false
-            : Boolean(modernjsConfig?.server?.ssr);
+    api.config(() => {
+      const bundlerType =
+        api.getAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
+      const ipv4 = getIPV4();
+      const enableSSR =
+        userConfig.userConfig?.ssr === false
+          ? false
+          : Boolean(modernjsConfig?.server?.ssr);
 
-        if (userConfig.remoteIpStrategy === undefined) {
-          if (!enableSSR) {
-            userConfig.remoteIpStrategy = 'inherit';
-          } else {
-            userConfig.remoteIpStrategy = 'ipv4';
-          }
+      if (userConfig.remoteIpStrategy === undefined) {
+        if (!enableSSR) {
+          userConfig.remoteIpStrategy = 'inherit';
+        } else {
+          userConfig.remoteIpStrategy = 'ipv4';
         }
+      }
 
-        return {
-          tools: {
-            bundlerChain(chain, { isServer }) {
-              addMyTypes2Ignored(chain, isServer ? ssrConfig : csrConfig);
-            },
-            rspack(config, { isServer }) {
-              modifyBundlerConfig({
-                bundlerType,
-                mfConfig: isServer ? ssrConfig : csrConfig,
-                config,
-                isServer,
-                modernjsConfig,
-                remoteIpStrategy: userConfig.remoteIpStrategy,
-              });
-              userConfig.distOutputDir =
-                config.output?.path || path.resolve(process.cwd(), 'dist');
-            },
-            webpack(config, { isServer }) {
-              modifyBundlerConfig({
-                bundlerType,
-                mfConfig: isServer ? ssrConfig : csrConfig,
-                config,
-                isServer,
-                modernjsConfig,
-                remoteIpStrategy: userConfig.remoteIpStrategy,
-              });
+      return {
+        tools: {
+          bundlerChain(chain, { isServer }) {
+            addMyTypes2Ignored(chain, isServer ? ssrConfig : csrConfig);
+          },
+          rspack(config, { isServer }) {
+            modifyBundlerConfig({
+              bundlerType,
+              mfConfig: isServer ? ssrConfig : csrConfig,
+              config,
+              isServer,
+              modernjsConfig,
+              remoteIpStrategy: userConfig.remoteIpStrategy,
+            });
+            userConfig.distOutputDir =
+              config.output?.path || path.resolve(process.cwd(), 'dist');
+          },
+          webpack(config, { isServer }) {
+            modifyBundlerConfig({
+              bundlerType,
+              mfConfig: isServer ? ssrConfig : csrConfig,
+              config,
+              isServer,
+              modernjsConfig,
+              remoteIpStrategy: userConfig.remoteIpStrategy,
+            });
 
-              userConfig.distOutputDir =
-                config.output?.path || path.resolve(process.cwd(), 'dist');
-            },
-            devServer: {
-              headers: {
-                'Access-Control-Allow-Origin': '*',
-                'Access-Control-Allow-Methods':
-                  'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-                'Access-Control-Allow-Headers': '*',
-              },
-            },
+            userConfig.distOutputDir =
+              config.output?.path || path.resolve(process.cwd(), 'dist');
           },
-          source: {
-            alias: {
-              '@modern-js/runtime/mf': require.resolve(
-                '@module-federation/modern-js/runtime',
-              ),
+          devServer: {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods':
+                'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+              'Access-Control-Allow-Headers': '*',
             },
-            define: {
-              FEDERATION_IPV4: JSON.stringify(ipv4),
-              REMOTE_IP_STRATEGY: JSON.stringify(userConfig.remoteIpStrategy),
-            },
-            enableAsyncEntry:
-              bundlerType === 'rspack'
-                ? (modernjsConfig.source?.enableAsyncEntry ?? true)
-                : modernjsConfig.source?.enableAsyncEntry,
           },
-          dev: {
-            assetPrefix: modernjsConfig?.dev?.assetPrefix
-              ? modernjsConfig.dev.assetPrefix
-              : true,
+        },
+        source: {
+          alias: {
+            '@modern-js/runtime/mf': require.resolve(
+              '@module-federation/modern-js/runtime',
+            ),
+          },
+          define: {
+            FEDERATION_IPV4: JSON.stringify(ipv4),
+            REMOTE_IP_STRATEGY: JSON.stringify(userConfig.remoteIpStrategy),
           },
-        };
-      },
-    };
+          enableAsyncEntry:
+            bundlerType === 'rspack'
+              ? (modernjsConfig.source?.enableAsyncEntry ?? true)
+              : modernjsConfig.source?.enableAsyncEntry,
+        },
+        dev: {
+          assetPrefix: modernjsConfig?.dev?.assetPrefix
+            ? modernjsConfig.dev.assetPrefix
+            : true,
+        },
+      };
+    });
   },
 });
 

diff --git a/packages/modernjs/src/cli/index.ts b/packages/modernjs/src/cli/index.ts
@@ -1,4 +1,4 @@
-import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
 import {
   ModuleFederationPlugin as WebpackModuleFederationPlugin,
   AsyncBoundaryPlugin,
@@ -12,7 +12,7 @@ import { WebpackPluginInstance } from '@rspack/core';
 
 export const moduleFederationPlugin = (
   userConfig: PluginOptions = {},
-): CliPlugin<AppTools> => {
+): CliPluginFuture<AppTools> => {
   const internalModernPluginOptions: InternalModernPluginOptions = {
     csrConfig: undefined,
     ssrConfig: undefined,
@@ -25,55 +25,49 @@ export const moduleFederationPlugin = (
   };
   return {
     name: '@modern-js/plugin-module-federation',
-    setup: async ({ useConfigContext }) => {
-      const modernjsConfig = useConfigContext();
-      return {
-        config: async () => {
-          return {
-            tools: {
-              rspack(config, { isServer }) {
-                const browserPluginOptions =
-                  internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
-                if (!isServer) {
-                  internalModernPluginOptions.browserPlugin =
-                    new RspackModuleFederationPlugin(browserPluginOptions);
-                  config.plugins?.push(
-                    internalModernPluginOptions.browserPlugin,
-                  );
-                }
-              },
-              webpack(config, { isServer }) {
-                const browserPluginOptions =
-                  internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
-                if (!isServer) {
-                  internalModernPluginOptions.browserPlugin =
-                    new WebpackModuleFederationPlugin(browserPluginOptions);
-                  config.plugins?.push(
-                    internalModernPluginOptions.browserPlugin as WebpackPluginInstance,
-                  );
-                }
-                const enableAsyncEntry =
-                  modernjsConfig.source?.enableAsyncEntry;
-                if (!enableAsyncEntry && browserPluginOptions.async !== false) {
-                  const asyncBoundaryPluginOptions =
-                    typeof browserPluginOptions.async === 'object'
-                      ? browserPluginOptions.async
-                      : {
-                          eager: (module) =>
-                            module &&
-                            /\.federation/.test(module?.request || ''),
-                          excludeChunk: (chunk) =>
-                            chunk.name === browserPluginOptions.name,
-                        };
-                  config.plugins?.push(
-                    new AsyncBoundaryPlugin(asyncBoundaryPluginOptions) as any,
-                  );
-                }
-              },
+    setup: async (api) => {
+      const modernjsConfig = api.getConfig();
+      api.config(() => {
+        return {
+          tools: {
+            rspack(config, { isServer }) {
+              const browserPluginOptions =
+                internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
+              if (!isServer) {
+                internalModernPluginOptions.browserPlugin =
+                  new RspackModuleFederationPlugin(browserPluginOptions);
+                config.plugins?.push(internalModernPluginOptions.browserPlugin);
+              }
             },
-          };
-        },
-      };
+            webpack(config, { isServer }) {
+              const browserPluginOptions =
+                internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
+              if (!isServer) {
+                internalModernPluginOptions.browserPlugin =
+                  new WebpackModuleFederationPlugin(browserPluginOptions);
+                config.plugins?.push(
+                  internalModernPluginOptions.browserPlugin as WebpackPluginInstance,
+                );
+              }
+              const enableAsyncEntry = modernjsConfig.source?.enableAsyncEntry;
+              if (!enableAsyncEntry && browserPluginOptions.async !== false) {
+                const asyncBoundaryPluginOptions =
+                  typeof browserPluginOptions.async === 'object'
+                    ? browserPluginOptions.async
+                    : {
+                        eager: (module) =>
+                          module && /\.federation/.test(module?.request || ''),
+                        excludeChunk: (chunk) =>
+                          chunk.name === browserPluginOptions.name,
+                      };
+                config.plugins?.push(
+                  new AsyncBoundaryPlugin(asyncBoundaryPluginOptions) as any,
+                );
+              }
+            },
+          },
+        };
+      });
     },
     usePlugins: [
       moduleFederationConfigPlugin(internalModernPluginOptions),