module-federation · ScriptedAlchemy · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rspack_hmr/README.md b/rspack_hmr/README.md
@@ -0,0 +1,12 @@
+# mf-runtime
+
+`pnpm run start`
+
+Rspack remotes:
+run `host` (localhost:3000) and `app2`
+
+runtime remotes:
+run `runhost` (localhost:3003) and `app2`
+
+
+HMR should work fine in both cases!
diff --git a/rspack_hmr/app2/.gitignore b/rspack_hmr/app2/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/rspack_hmr/app2/index.html b/rspack_hmr/app2/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/react.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Rspack + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/rspack_hmr/app2/package.json b/rspack_hmr/app2/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@rspack-hmr/app2",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "NODE_ENV=development rspack serve",
+    "build": "NODE_ENV=production rspack build"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "^0.1.7",
+    "@module-federation/runtime": "^0.1.7",
+    "@module-federation/sdk": "^0.1.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rspack/cli": "0.6.2",
+    "@rspack/core": "0.6.2",
+    "@rspack/plugin-react-refresh": "0.6.2",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "prettier": "^3.2.5",
+    "react-refresh": "^0.14.0"
+  }
+}
diff --git a/rspack_hmr/app2/rspack.config.js b/rspack_hmr/app2/rspack.config.js
@@ -0,0 +1,121 @@
+const rspack = require("@rspack/core");
+const refreshPlugin = require("@rspack/plugin-react-refresh");
+const isDev = process.env.NODE_ENV === "development";
+
+const path = require("path");
+const deps = require("./package.json").dependencies;
+console.log({ deps });
+const { ModuleFederationPlugin } = require("@module-federation/enhanced/rspack");
+
+const name = "app_02";
+const name1 = name + "1";
+/**
+ * @type {import('@rspack/cli').Configuration}
+ */
+module.exports = {
+  entry: {
+    main: "./src/index.tsx",
+  },
+  resolve: {
+    extensions: ["...", ".ts", ".tsx", ".jsx"],
+  },
+
+  devtool: "source-map",
+  optimization: {
+    minimize: false,
+  },
+  devServer: {
+    port: 3001,
+    hot: true,
+    static: {
+      directory: path.join(__dirname, "build"),
+    },
+    liveReload: false,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
+    },
+  },
+  optimization: { minimize: false },
+  output: {
+    path: __dirname + "/dist",
+    uniqueName: name1,
+    publicPath: "http://localhost:3001/",
+    filename: "[name].js",
+  },
+  watch: true,
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        type: "asset",
+      },
+      {
+        test: /\.(jsx?|tsx?)$/,
+        exclude: /(node_modules|\.webpack)/,
+        use: [
+          {
+            loader: "builtin:swc-loader",
+            options: {
+              sourceMap: true,
+              jsc: {
+                parser: {
+                  syntax: "typescript",
+                  tsx: true,
+                },
+                transform: {
+                  react: {
+                    runtime: "automatic",
+                    development: isDev,
+                    refresh: isDev,
+                  },
+                },
+              },
+              env: {
+                targets: ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new rspack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+    }),
+    new rspack.ProgressPlugin({}),
+    isDev && new rspack.HotModuleReplacementPlugin(),
+
+    new rspack.HtmlRspackPlugin({
+      template: "./index.html",
+      excludedChunks: [name],
+      filename: "index.html",
+      inject: true,
+      publicPath: "/",
+    }),
+    new ModuleFederationPlugin({
+      name: name,
+      filename: "remoteEntry.js",
+      exposes: {
+        "./Hello": "./src/Hello.tsx",
+        "./pi": "./src/pi.ts",
+      },
+      manifest: true,
+      // shared: {
+      //   ...deps,
+      //   "react-router-dom": {
+      //     singleton: true,
+      //   },
+      //   "react-dom": {
+      //     singleton: true,
+      //   },
+      //   react: {
+      //     singleton: true,
+      //   },
+      // },
+    }),
+    isDev ? new refreshPlugin() : null,
+  ].filter(Boolean),
+};