feat: add React MF SharedWorker example (#4307)

unadlib · web-flow · commit 49c1a3a3f2a5 · 2024-11-04T12:04:04.000-08:00
diff --git a/package.json b/package.json
@@ -175,7 +175,8 @@
       "vue3-demo",
       "vue3-demo/*",
       "vue3-demo-federation-with-vite",
-      "vue3-demo-federation-with-vite/*"
+      "vue3-demo-federation-with-vite/*",
+      "react-sharedworker"
     ]
   },
   "devDependencies": {
diff --git a/react-sharedworker/README.md b/react-sharedworker/README.md
@@ -0,0 +1,23 @@
+# react-sharedworker
+Using Webpack Module Federation in SharedWorker
+
+Federated module (defined under `module` folder), can be consumed by main thread in host application (defined under `host` folder), and it also can be consumed by worker thread.
+
+## How to run
+
+```
+yarn
+yarn start:module
+yarn start:host
+```
+
+[Open browser](http://localhost:3000) and observe error in console.
+
+![shared worker](./image.png)
+
+## How to work
+
+1. Use SharedWorker instead of Worker in host application
+2. Dynamically import bootstrap file in worker thread
+3. Use promise based dynamic remotes `host/webpack.host-config.js`
+4. Use multiple entry points in webpack config `module/webpack.module-config.js`
diff --git a/react-sharedworker/host/index.html b/react-sharedworker/host/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    open console to see the error
+  </body>
+</html>
diff --git a/react-sharedworker/host/src/bootstrap.js b/react-sharedworker/host/src/bootstrap.js
@@ -0,0 +1,5 @@
+import { testValue } from 'myModule/testValue';
+
+console.log('testValue in main thread', testValue);
+
+const worker = new SharedWorker(new URL('./worker', import.meta.url));
diff --git a/react-sharedworker/host/src/bootstrapWorker.js b/react-sharedworker/host/src/bootstrapWorker.js
@@ -0,0 +1,3 @@
+import { testValue } from 'myModule/testValue';
+
+console.log('testValue in worker thread', testValue);
diff --git a/react-sharedworker/host/src/index.js b/react-sharedworker/host/src/index.js
@@ -0,0 +1 @@
+import('./bootstrap');
diff --git a/react-sharedworker/host/src/worker.js b/react-sharedworker/host/src/worker.js
@@ -0,0 +1 @@
+import('./bootstrapWorker');
diff --git a/react-sharedworker/host/webpack.host-config.js b/react-sharedworker/host/webpack.host-config.js
@@ -0,0 +1,59 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { container } = require('webpack');
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, 'src/index.js'),
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'host-bundle-[name].js',
+    chunkFilename: 'host-chunk-[name].js',
+  },
+  plugins: [
+    new container.ModuleFederationPlugin({
+      remotes: {
+        myModule: `promise new Promise(resolve => {
+      // This part depends on how you plan on hosting and versioning your federated modules
+      if (globalThis.SharedWorkerGlobalScope) {
+        const remoteUrlWithVersion = 'http://localhost:3001/worker/remoteEntry.js'
+        importScripts(remoteUrlWithVersion)
+        resolve(globalThis.myModule);
+        return;
+      }
+      const remoteUrlWithVersion = 'http://localhost:3001/remoteEntry.js'
+      const script = document.createElement('script')
+      script.src = remoteUrlWithVersion
+      script.onload = () => {
+        // the injected script has loaded and is available on window
+        // we can now resolve this Promise
+        const proxy = {
+          get: (request) => window.myModule.get(request),
+          init: (...arg) => {
+            try {
+              return window.myModule.init(...arg)
+            } catch(e) {
+              console.log('remote container already initialized')
+            }
+          }
+        }
+        resolve(proxy)
+      }
+      // inject this script with the src set to the versioned remoteEntry.js
+      document.head.appendChild(script);
+    })
+    `,
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'index.html'),
+    }),
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'build'),
+    },
+    compress: true,
+    port: 3000,
+  }
+};
diff --git a/react-sharedworker/image.png b/react-sharedworker/image.png
diff --git a/react-sharedworker/module/dev.js b/react-sharedworker/module/dev.js
@@ -0,0 +1,25 @@
+const express = require("express");
+const webpack = require("webpack");
+const webpackDevMiddleware = require("webpack-dev-middleware");
+
+const app = express();
+const [config1, config2] = require("./webpack.module-config.js");
+
+const compiler1 = webpack(config1);
+const compiler2 = webpack(config2);
+
+app.use(
+  webpackDevMiddleware(compiler1, {
+    publicPath: config1.output.publicPath + "worker/",
+  })
+);
+
+app.use(
+  webpackDevMiddleware(compiler2, {
+    publicPath: config2.output.publicPath,
+  })
+);
+
+app.listen(3001, function () {
+  console.log("App listening on port 3001!\n");
+});
diff --git a/react-sharedworker/module/src/index.js b/react-sharedworker/module/src/index.js
@@ -0,0 +1 @@
+export * from './testValue';
diff --git a/react-sharedworker/module/src/testValue.js b/react-sharedworker/module/src/testValue.js
@@ -0,0 +1 @@
+export const testValue = 'module federation test value';
diff --git a/react-sharedworker/module/webpack.module-config.js b/react-sharedworker/module/webpack.module-config.js
@@ -0,0 +1,44 @@
+const path = require("path");
+const { container } = require("webpack");
+
+module.exports = [
+  {
+    target: "webworker",
+    mode: "development",
+    entry: path.resolve(__dirname, "src/index.js"),
+    output: {
+      path: path.resolve(__dirname, "build/worker"),
+      filename: "module-bundle-[name].js",
+      chunkFilename: "module-chunk-[name].js",
+      publicPath: "http://localhost:3001/",
+    },
+    plugins: [
+      new container.ModuleFederationPlugin({
+        name: "myModule",
+        filename: "remoteEntry.js",
+        exposes: {
+          "./testValue": path.resolve(__dirname, "src/testValue.js"),
+        },
+      }),
+    ],
+  },
+  {
+    mode: "development",
+    entry: path.resolve(__dirname, "src/index.js"),
+    output: {
+      path: path.resolve(__dirname, 'build'),
+      filename: "module-bundle-[name].js",
+      chunkFilename: "module-chunk-[name].js",
+      publicPath: "http://localhost:3001/",
+    },
+    plugins: [
+      new container.ModuleFederationPlugin({
+        name: "myModule",
+        filename: "remoteEntry.js",
+        exposes: {
+          "./testValue": path.resolve(__dirname, "src/testValue.js"),
+        },
+      }),
+    ],
+  },
+];
diff --git a/react-sharedworker/package.json b/react-sharedworker/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-sharedworker",
+  "private": true,
+  "scripts": {
+    "build:host": "webpack --node-env=production --progress --config ./host/webpack.host-config.js",
+    "build:module": "webpack --node-env=production --progress --config ./module/webpack.module-config.js",
+    "serve:host": "npx http-server ./host/build -p 3000",
+    "serve:module": "npx http-server ./module/build -p 3001",
+    "start:host": "npm run build:host && npm run serve:host",
+    "start:module": "npm run build:module && npm run serve:module",
+    "clean": "rimraf ./host/build ./module/build",
+    "dev:host": "webpack serve --config ./host/webpack.host-config.js",
+    "dev:module": "node ./module/dev.js",
+    "dev": "yarn dev:host & yarn dev:module"
+  },
+  "devDependencies": {
+    "express": "^4.18.2",
+    "html-webpack-plugin": "5.6.0",
+    "rimraf": "^5.0.5",
+    "webpack": "5.95.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-middleware": "^7.4.2",
+    "webpack-dev-server": "5.0.4"
+  },
+  "license": "MIT"
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { testValue } from 'myModule/testValue';`
	`2`	`+`
	`3`	`+console.log('testValue in worker thread', testValue);`