feat(mf): support lazy compilation (#11779)

Author: 2heal1

crates/rspack_plugin_mf/src/sharing/consume_shared_runtime_module.rs

@@ -104,21 +104,35 @@ impl RuntimeModule for ConsumeSharedRuntimeModule {
         add_module(mid, chunk, &mut initial_consumes);
       }
     }
-    if module_id_to_consume_data_mapping.is_empty() {
-      return Ok("".to_string());
-    }
-    let module_id_to_consume_data_mapping = module_id_to_consume_data_mapping
-      .into_iter()
-      .map(|(k, v)| format!("{}: {}", json_stringify(&k), v))
-      .collect::<Vec<_>>()
-      .join(", ");
+    let module_id_to_consume_data_mapping = if module_id_to_consume_data_mapping.is_empty() {
+      "{}".to_string()
+    } else {
+      format!(
+        "{{{}}}",
+        module_id_to_consume_data_mapping
+          .into_iter()
+          .map(|(k, v)| format!("{}: {}", json_stringify(&k), v))
+          .collect::<Vec<_>>()
+          .join(", ")
+      )
+    };
+    let chunk_mapping = if chunk_to_module_mapping.is_empty() {
+      "{}".to_string()
+    } else {
+      json_stringify(&chunk_to_module_mapping)
+    };
+    let initial_consumes_json = if initial_consumes.is_empty() {
+      "[]".to_string()
+    } else {
+      json_stringify(&initial_consumes)
+    };
     let mut source = format!(
       r#"
-__webpack_require__.consumesLoadingData = {{ chunkMapping: {chunk_mapping}, moduleIdToConsumeDataMapping: {{ {module_to_consume_data_mapping} }}, initialConsumes: {initial_consumes} }};
+__webpack_require__.consumesLoadingData = {{ chunkMapping: {chunk_mapping}, moduleIdToConsumeDataMapping: {module_to_consume_data_mapping}, initialConsumes: {initial_consumes_json} }};
 "#,
-      chunk_mapping = json_stringify(&chunk_to_module_mapping),
+      chunk_mapping = chunk_mapping,
       module_to_consume_data_mapping = module_id_to_consume_data_mapping,
-      initial_consumes = json_stringify(&initial_consumes),
+      initial_consumes_json = initial_consumes_json,
     );
     if self.enhanced {
       if ChunkGraph::get_chunk_runtime_requirements(compilation, &chunk_ukey)

packages/rspack/package.json

@@ -67,7 +67,7 @@
     "zod-validation-error": "3.5.3"
   },
   "dependencies": {
-    "@module-federation/runtime-tools": "0.19.1",
+    "@module-federation/runtime-tools": "0.20.0",
     "@rspack/binding": "workspace:*",
     "@rspack/lite-tapable": "1.0.1"
   },

packages/rspack/src/runtime/moduleFederationDefaultRuntime.js

@@ -159,6 +159,11 @@ module.exports = function () {
 			"chunkMapping",
 			() => remotesLoadingChunkMapping
 		);
+		early(
+			__webpack_require__.federation.bundlerRuntimeOptions.remotes,
+			"remoteInfos",
+			() => __module_federation_remote_infos__
+		);
 		early(
 			__webpack_require__.federation.bundlerRuntimeOptions.remotes,
 			"idToExternalAndNameMapping",

pnpm-lock.yaml

@@ -0,0 +1,21 @@
+import { expect, test } from "@/fixtures";
+
+test("should load remote and shared success", async ({ page }) => {
+	await page.waitForSelector('button:has-text("Click me")');
+
+	// trigger lazy-compile
+	await page.getByText("Click me").click();
+
+	// Wait for the component to appear with a more reliable wait
+	await page.waitForSelector('div:has-text("RemoteComponent")');
+
+	// Check that the component was loaded and displayed
+	const RemoteComponentCount = await page.getByText("RemoteComponent").count();
+	expect(RemoteComponentCount).toBe(1);
+
+	// Wait for the component to appear with a more reliable wait
+	await page.waitForSelector('div:has-text("SharedReact")');
+	// Check that the shared component was loaded and displayed
+	const SharedReactCount = await page.getByText("SharedReact").count();
+	expect(SharedReactCount).toBe(1);
+});

tests/e2e/cases/lazy-compilation/module-federation/index.test.ts

@@ -0,0 +1,64 @@
+const { rspack } = require("@rspack/core");
+const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
+
+/** @type { import('@rspack/core').RspackOptions } */
+module.exports = {
+	context: __dirname,
+	entry: "./src/index.jsx",
+	mode: "development",
+	devtool:false,
+	resolve: {
+		extensions: ["...", ".jsx"]
+	},
+	module: {
+			rules: [
+			{
+				test: /\.(jsx?|tsx?)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: {
+									react: {
+										runtime: "automatic",
+										development: true,
+										refresh: true,
+									}
+								},
+							},
+						}
+					},
+				]
+			}
+		]
+	},
+	plugins: [new rspack.HtmlRspackPlugin({ template: "./src/index.html" }), new rspack.container.ModuleFederationPlugin({
+		name:"host",
+		remotes: {
+			remote: "remote@http://localhost:5679/remoteEntry.js"
+		},
+		// prevent init remote entry
+		shareStrategy: 'loaded-first',
+		shared: {
+			react: {},
+			'react-dom': {}
+		},
+		runtimePlugins: [require.resolve('./runtime-plugin.js')]
+	}),
+		new ReactRefreshPlugin(),
+
+],
+	lazyCompilation:true,
+	devServer: {
+		hot: true,
+		port: 5678,
+		devMiddleware: {
+			writeToDisk: true
+		}
+	}
+};

tests/e2e/cases/lazy-compilation/module-federation/rspack.config.js

@@ -0,0 +1,15 @@
+module.exports = function () {
+	let component;
+  return {
+    name: 'proxy-remote',
+    async errorLoadRemote() {
+			if(!component){
+				component = document.createElement("div");
+				component.textContent = "RemoteComponent";
+				document.body.appendChild(component);
+			}
+
+			return ()=>component;
+    },
+  };
+}

tests/e2e/cases/lazy-compilation/module-federation/runtime-plugin.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+	<React.StrictMode>
+		<button type="button" onClick={() => {
+			import("./remote-entry.js");
+			import("./share-entry.js");
+		}}>
+			Click me
+		</button>
+	</React.StrictMode>
+);
+

tests/e2e/cases/lazy-compilation/module-federation/src/bootstrap.jsx

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>

tests/e2e/cases/lazy-compilation/module-federation/src/index.html

@@ -0,0 +1 @@
+import('./bootstrap.jsx')