feat(enhanced): runtimePlugins support pass params (#4118)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: 2heal1

.changeset/giant-falcons-tie.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': patch
+---
+
+feat(enhanced): runtimePlugins support pass params

apps/website-new/docs/en/configure/_meta.json

@@ -32,7 +32,7 @@
   {
     "type": "file",
     "name": "runtimeplugins",
-    "label": "Runtime Plugins"
+    "label": "runtimePlugins"
   },
   {
     "type": "file",

apps/website-new/docs/en/configure/runtimeplugins.mdx

@@ -1,15 +1,20 @@
 # runtimePlugins
 
-- Type: `string[]`
+- Type: `string[] | Array<[string, object]>`
 - Required: No
 - Default: `undefined`
 
-The `runtimePlugins` configuration is used to add additional plugins needed at runtime. The value should be the path to the specific plugin, which can be an absolute/relative path or a package name. You can learn more about how to develop `runtimePlugin` details by visiting the [Plugin System](../plugin/dev/index).
+The `runtimePlugins` configuration is used to add additional plugins needed at runtime. The value can be:
+- A string representing the path to the specific plugin (absolute/relative path or package name)
+- An array where each element can be either a string or a tuple with [string path, object options]
+
+You can learn more about how to develop `runtimePlugin` details by visiting the [Plugin System](../plugin/dev/index).
 
 Once set, runtime plugins will be automatically injected and used during the build process.
 
 - Examples
 
+**Basic usage:**
 To create a runtime plugin file, you can name it `custom-runtime-plugin.ts`:
 
 ```ts title="custom-runtime-plugin.ts"
@@ -47,3 +52,52 @@ module.exports = {
   ],
 };
 ```
+
+**With options:**
+You can also provide options to runtime plugins by using a tuple format:
+
+```ts title="rspack.config.ts"
+const path = require('path');
+module.exports = {
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'host',
+      remotes: {
+        'manifest-provider':
+          'manifest_provider@http://localhost:3011/mf-manifest.json',
+      },
+      runtimePlugins: [
+        path.resolve(__dirname, './custom-runtime-plugin.ts'),
+        [
+          path.resolve(__dirname, './another-plugin.ts'),
+          {
+            debug: true,
+            timeout: 5000,
+            customConfig: 'value'
+          }
+        ]
+      ],
+    }),
+  ],
+};
+```
+
+The plugin can then access these options:
+
+```ts title="another-plugin.ts"
+import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+export default function (options: any): ModuleFederationRuntimePlugin {
+  console.log('Plugin options:', options);
+
+  return {
+    name: 'another-plugin',
+    beforeInit(args) {
+      if (options.debug) {
+        console.log('[debug] beforeInit: ', args);
+      }
+      return args;
+    },
+  };
+}
+```

apps/website-new/docs/zh/configure/runtimeplugins.mdx

@@ -1,15 +1,20 @@
 # runtimePlugins
 
-- 类型：`string[]`
+- 类型：`string[] | Array<[string, object]>`
 - 是否必填：否
 - 默认值：`undefined`
 
-用于添加运行时需要的额外插件，值为具体插件的路径，支持绝对/相对路径、包名，通过「[插件系统](../plugin/dev/index)」了解更多关于如何开发 runtimePlugin 细节。
+用于添加运行时需要的额外插件。值可以是：
+- 表示具体插件路径的字符串（支持绝对/相对路径、包名）
+- 一个数组，其中每个元素可以是字符串或元组 [字符串路径, 对象配置]
+
+通过「[插件系统](../plugin/dev/index)」了解更多关于如何开发 runtimePlugin 细节。
 
 设置后，运行时插件会自动在构建时注入并使用。
 
-- examples
+- 示例
 
+**基础用法：**
 创建运行时插件文件： `custom-runtime-plugin.ts`
 
 ```ts title="custom-runtime-plugin.ts"
@@ -48,3 +53,53 @@ module.exports = {
   ],
 };
 ```
+
+**带参数用法：**
+你还可以通过使用元组格式为运行时插件提供配置选项：
+
+```ts title="rspack.config.ts"
+const path = require('path');
+module.exports = {
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'host',
+      remotes: {
+        'manifest-provider':
+          'manifest_provider@http://localhost:3011/mf-manifest.json',
+      },
+      runtimePlugins: [
+        path.resolve(__dirname, './custom-runtime-plugin.ts'),
+        [
+          path.resolve(__dirname, './another-plugin.ts'),
+          {
+            debug: true,
+            timeout: 5000,
+            customConfig: 'value'
+          }
+        ]
+      ],
+    }),
+  ],
+};
+
+```
+
+插件可以访问这些配置选项：
+
+```ts title="another-plugin.ts"
+import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+
+export default function (options: any): ModuleFederationRuntimePlugin {
+  console.log('插件配置:', options);
+
+  return {
+    name: 'another-plugin',
+    beforeInit(args) {
+      if (options.debug) {
+        console.log('[调试] beforeInit: ', args);
+      }
+      return args;
+    },
+  };
+}
+```

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

@@ -82,19 +82,30 @@ class FederationRuntimePlugin {
     );
 
     let runtimePluginTemplates = '';
-    const runtimePluginNames: string[] = [];
+    const runtimePluginCalls: string[] = [];
 
     if (Array.isArray(runtimePlugins)) {
       runtimePlugins.forEach((runtimePlugin, index) => {
+        if (!runtimePlugin) {
+          return;
+        }
         const runtimePluginName = `plugin_${index}`;
+        const runtimePluginEntry = Array.isArray(runtimePlugin)
+          ? runtimePlugin[0]
+          : runtimePlugin;
         const runtimePluginPath = normalizeToPosixPath(
-          path.isAbsolute(runtimePlugin)
-            ? runtimePlugin
-            : path.join(process.cwd(), runtimePlugin),
+          path.isAbsolute(runtimePluginEntry)
+            ? runtimePluginEntry
+            : path.join(process.cwd(), runtimePluginEntry),
         );
-
+        const paramsStr =
+          Array.isArray(runtimePlugin) && runtimePlugin.length > 1
+            ? JSON.stringify(runtimePlugin[1])
+            : 'undefined';
         runtimePluginTemplates += `import ${runtimePluginName} from '${runtimePluginPath}';\n`;
-        runtimePluginNames.push(runtimePluginName);
+        runtimePluginCalls.push(
+          `${runtimePluginName} ? (${runtimePluginName}.default || ${runtimePluginName})(${paramsStr}) : false`,
+        );
       });
     }
     const embedRuntimeLines = Template.asString([
@@ -118,13 +129,11 @@ class FederationRuntimePlugin {
       embedRuntimeLines,
       `if(!${federationGlobal}.instance){`,
       Template.indent([
-        runtimePluginNames.length
+        runtimePluginCalls.length
           ? Template.asString([
               `var pluginsToAdd = [`,
               Template.indent(
-                runtimePluginNames.map(
-                  (item) => `${item} ? (${item}.default || ${item})() : false,`,
-                ),
+                Template.indent(runtimePluginCalls.map((call) => `${call},`)),
               ),
               `].filter(Boolean);`,
               `${federationGlobal}.initOptions.plugins = ${federationGlobal}.initOptions.plugins ? `,