feat(mf): support wasm

Author: 2heal1

crates/rspack_plugin_mf/src/container/container_entry_module.rs

@@ -325,6 +325,16 @@ impl ExposeModuleMap {
             .join(", "),
         )
       } else {
+        let has_wasm_async = modules_iter.clone().any(|(_, module, _, _)| {
+          if let Some(module) = module {
+            let module_graph = compilation.get_module_graph();
+            let module_type = module.module_type();
+            matches!(module_type, rspack_core::ModuleType::WasmAsync)
+          } else {
+            false
+          }
+        });
+
         let block_promise = block_promise(Some(block_id), runtime_requirements, compilation, "");
         let module_raw = returning_function(
           &compilation.options.output.environment,
@@ -346,7 +356,24 @@ impl ExposeModuleMap {
           ),
           "",
         );
-        format!("return {block_promise}.then({module_raw});")
+
+        if has_wasm_async {
+          format!(
+            r#"
+            return {block_promise}.then({module_raw}).then(function(exports) {{
+              // handle WebAssembly async module
+              if (exports && typeof exports.then === 'function') {{
+                return exports.then(function(wasmModule) {{
+                  return wasmModule;
+                }});
+              }}
+              return exports;
+            }});
+          "#
+          )
+        } else {
+          format!("return {block_promise}.then({module_raw});")
+        }
       };
       module_map.push((name.to_string(), str));
     }

tests/rspack-test/configCases/container-1-5/wasm-async/index.js

@@ -0,0 +1,40 @@
+// WebAssembly 异步模块测试
+it("should handle WebAssembly async modules in container", async () => {
+  const container = await import("./container.js");
+
+  // 获取暴露的 WebAssembly 模块
+  const wasmModule = await container.get("./wasm-module");
+
+  // 验证 WebAssembly 模块正确加载
+  expect(typeof wasmModule).toBe("object");
+  expect(typeof wasmModule.instance).toBe("object");
+  expect(typeof wasmModule.exports).toBe("object");
+
+  // 验证 WebAssembly 导出函数
+  if (wasmModule.exports.add) {
+    expect(typeof wasmModule.exports.add).toBe("function");
+    expect(wasmModule.exports.add(1, 2)).toBe(3);
+  }
+});
+
+it("should handle WebAssembly async module with promise chain", async () => {
+  const container = await import("./container.js");
+
+  // 测试多次调用 WebAssembly 模块
+  const wasmModule1 = await container.get("./wasm-module");
+  const wasmModule2 = await container.get("./wasm-module");
+
+  // 验证模块实例正确复用或重新实例化
+  expect(wasmModule1).toEqual(wasmModule2);
+});
+
+it("should handle WebAssembly async module errors gracefully", async () => {
+  const container = await import("./container.js");
+
+  try {
+    await container.get("./non-existent-wasm");
+    expect.fail("Should throw error for non-existent module");
+  } catch (error) {
+    expect(error.message).toContain("does not exist in container");
+  }
+});

tests/rspack-test/configCases/container-1-5/wasm-async/main.js

@@ -0,0 +1,36 @@
+// 主入口文件 - 测试 WebAssembly 模块在 Module Federation 中的使用
+import container from "./container.js";
+
+async function testWebAssemblyModule() {
+  try {
+    // 测试同步 WebAssembly 模块
+    const wasmSync = await container.get("./wasm-module");
+    console.log("WebAssembly sync module loaded:", wasmSync);
+    
+    // 测试异步 WebAssembly 模块
+    const wasmAsync = await container.get("./wasm-async");
+    console.log("WebAssembly async module loaded:", wasmAsync);
+    
+    // 验证函数调用
+    if (wasmSync && wasmSync.add) {
+      console.log("1 + 2 =", wasmSync.add(1, 2));
+    }
+    
+    if (wasmAsync && wasmAsync.multiply) {
+      console.log("3 * 4 =", wasmAsync.multiply(3, 4));
+    }
+    
+    return true;
+  } catch (error) {
+    console.error("WebAssembly test failed:", error);
+    return false;
+  }
+}
+
+// 导出测试函数供测试框架使用
+export { testWebAssemblyModule };
+
+// 如果是直接运行
+if (typeof window !== 'undefined') {
+  testWebAssemblyModule();
+}

tests/rspack-test/configCases/container-1-5/wasm-async/rspack.config.js

@@ -0,0 +1,43 @@
+const { ModuleFederationPlugin } = require("@rspack/core").container;
+
+module.exports = {
+  mode: "development",
+  entry: {
+    main: "./index.js"
+  },
+  output: {
+    filename: "[name].js",
+    library: { type: "commonjs-module" }
+  },
+  experiments: {
+    asyncWebAssembly: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.wat$/,
+        type: "webassembly/async",
+        use: [
+          {
+            loader: "@rspack/core/wasm-loader"
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "wasm-container",
+      filename: "container.js",
+      library: { type: "commonjs-module" },
+      exposes: {
+        "./wasm-module": "./wasm-loader.js",
+        "./wasm-async": "./wasm-module.wat"
+      },
+      shared: {
+        react: { singleton: true },
+        "react-dom": { singleton: true }
+      }
+    })
+  ]
+};

tests/rspack-test/configCases/container-1-5/wasm-async/test.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  findBundle: function (i, options) {
+    return ["./main.js", "./container.js"];
+  }
+};

tests/rspack-test/configCases/container-1-5/wasm-async/wasm-loader.js

@@ -0,0 +1,23 @@
+// WebAssembly 模块加载器
+export default async function loadWasmModule() {
+  try {
+    const response = await fetch('./wasm-module.wasm');
+    const bytes = await response.arrayBuffer();
+    const module = await WebAssembly.instantiate(bytes);
+    
+    return {
+      instance: module.instance,
+      exports: module.instance.exports,
+      module: module.module
+    };
+  } catch (error) {
+    console.error('Failed to load WebAssembly module:', error);
+    throw error;
+  }
+}
+
+// 同步版本用于测试
+export const wasmModule = {
+  add: (a, b) => a + b,
+  multiply: (a, b) => a * b
+};

tests/rspack-test/configCases/container-1-5/wasm-async/wasm-module.wat

@@ -0,0 +1,19 @@
+;; WebAssembly 模块示例
+(module
+  (func $add (param $a i32) (param $b i32) (result i32)
+    local.get $a
+    local.get $b
+    i32.add
+  )
+  (export "add" (func $add))
+  (export "memory" (memory 0))
+  (memory 1)
+)
+
+;; 额外的测试函数
+(func $multiply (param $a i32) (param $b i32) (result i32)
+  local.get $a
+  local.get $b
+  i32.mul
+)
+(export "multiply" (func $multiply))