Enhance Web Worker federation runtime support

.changeset/steady-workers-remotes.md

@@ -0,0 +1,5 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Keep async entry runtime helpers available when cloning runtimes for web workers and other dynamic entrypoints.

apps/runtime-demo/3005-runtime-host/cypress/e2e/app.cy.ts

@@ -77,4 +77,19 @@ describe('3005-runtime-host/', () => {
       });
     });
   });
+
+  describe('web worker check', () => {
+    it('should display value returned from worker', () => {
+      cy.get('.worker-native-result').should('contain.text', '"answer": "1"');
+      cy.get('.worker-native-result').should(
+        'contain.text',
+        '"federationKeys"',
+      );
+      cy.get('.worker-loader-result').should('contain.text', '"answer": "1"');
+      cy.get('.worker-loader-result').should(
+        'contain.text',
+        '"federationKeys"',
+      );
+    });
+  });
 });

apps/runtime-demo/3005-runtime-host/package.json

@@ -4,14 +4,15 @@
   "version": "0.0.0",
   "devDependencies": {
     "@module-federation/core": "workspace:*",
+    "@module-federation/dts-plugin": "workspace:*",
+    "@module-federation/enhanced": "workspace:*",
     "@module-federation/runtime": "workspace:*",
     "@module-federation/typescript": "workspace:*",
-    "@module-federation/enhanced": "workspace:*",
-    "@module-federation/dts-plugin": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-    "react-refresh": "0.14.2",
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0"
+    "@types/react-dom": "18.3.0",
+    "react-refresh": "0.14.2",
+    "worker-loader": "^3.0.8"
   },
   "dependencies": {
     "antd": "4.24.15",

apps/runtime-demo/3005-runtime-host/src/Root.tsx

@@ -5,6 +5,8 @@ import WebpackPng from './webpack.png';
 import WebpackSvg from './webpack.svg';
 import { WebpackPngRemote, WebpackSvgRemote } from './Remote1';
 import Remote2 from './Remote2';
+import WorkerNativeDemo from './components/WorkerNativeDemo';
+import WorkerLoaderDemo from './components/WorkerLoaderDemo';
 
 const Root = () => (
   <div>
@@ -89,6 +91,40 @@ const Root = () => (
         </tr>
       </tbody>
     </table>
+
+    <h3>check workers</h3>
+    <table border={1} cellPadding={5}>
+      <thead>
+        <tr>
+          <td></td>
+          <td>Test case</td>
+          <td>Expected</td>
+          <td>Actual</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>✅</td>
+          <td>Native new Worker(new URL(...))</td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerNativeDemo />
+          </td>
+        </tr>
+        <tr>
+          <td>✅</td>
+          <td>worker-loader integration</td>
+          <td>
+            <div className="worker-expected">Expected worker response: 1</div>
+          </td>
+          <td>
+            <WorkerLoaderDemo />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 );
 

apps/runtime-demo/3005-runtime-host/src/components/WorkerLoaderDemo.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import LoaderWorker from 'worker-loader!../worker/loader-worker.js';
+
+export function WorkerLoaderDemo() {
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new LoaderWorker();
+
+      worker.onmessage = (event) => {
+        setResult(event.data ?? null);
+      };
+
+      worker.onerror = (event) => {
+        setError((event as unknown as ErrorEvent).message ?? 'Worker error');
+      };
+
+      worker.postMessage({ value: 'foo' });
+
+      return () => {
+        worker.terminate();
+      };
+    } catch (err) {
+      setError((err as Error).message);
+    }
+
+    return undefined;
+  }, []);
+
+  return (
+    <div>
+      <div className="worker-expected">Expected worker response: 1</div>
+      <pre className="worker-loader-result">
+        {result ? JSON.stringify(result, null, 2) : 'n/a'}
+      </pre>
+      {error ? <div className="worker-error">Worker error: {error}</div> : null}
+    </div>
+  );
+}
+
+export default WorkerLoaderDemo;

apps/runtime-demo/3005-runtime-host/src/components/WorkerNativeDemo.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export function WorkerNativeDemo() {
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const worker = new Worker(
+        new URL('../worker/native-worker.js', import.meta.url),
+        {
+          name: 'mf-native-worker',
+          type: 'module',
+        },
+      );
+
+      worker.onmessage = (event) => {
+        setResult(event.data ?? null);
+      };
+
+      worker.onerror = (event) => {
+        setError((event as unknown as ErrorEvent).message ?? 'Worker error');
+      };
+
+      worker.postMessage({ value: 'foo' });
+
+      return () => {
+        worker.terminate();
+      };
+    } catch (err) {
+      setError((err as Error).message);
+    }
+
+    return undefined;
+  }, []);
+
+  return (
+    <div>
+      <pre className="worker-native-result">
+        {result ? JSON.stringify(result, null, 2) : 'n/a'}
+      </pre>
+      {error ? <div className="worker-error">Worker error: {error}</div> : null}
+    </div>
+  );
+}
+
+export default WorkerNativeDemo;

apps/runtime-demo/3005-runtime-host/src/types/worker-loader.d.ts

@@ -0,0 +1,7 @@
+declare module 'worker-loader!*' {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}

apps/runtime-demo/3005-runtime-host/src/worker/loader-worker.js

@@ -0,0 +1,15 @@
+/* eslint-env worker */
+import { workerMap } from './map.js';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  const federation =
+    typeof __webpack_require__ !== 'undefined'
+      ? __webpack_require__.federation || {}
+      : {};
+  const federationKeys = Object.keys(federation);
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+    federationKeys,
+  });
+};

apps/runtime-demo/3005-runtime-host/src/worker/map.js

@@ -0,0 +1,4 @@
+export const workerMap = {
+  foo: '1',
+  bar: '2',
+};

apps/runtime-demo/3005-runtime-host/src/worker/native-worker.js

@@ -0,0 +1,15 @@
+/* eslint-env worker */
+import { workerMap } from './map.js';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  const federation =
+    typeof __webpack_require__ !== 'undefined'
+      ? __webpack_require__.federation || {}
+      : {};
+  const federationKeys = Object.keys(federation);
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+    federationKeys,
+  });
+};

apps/runtime-demo/3005-runtime-host/src/worker/worker.js

@@ -0,0 +1,9 @@
+/* eslint-env worker */
+import { workerMap } from './map';
+
+self.onmessage = (event) => {
+  const value = event.data && event.data.value;
+  self.postMessage({
+    answer: workerMap[value] ?? null,
+  });
+};

apps/runtime-demo/3005-runtime-host/webpack.config.js

@@ -78,6 +78,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
       },
     }),
   );
+
   if (!config.devServer) {
     config.devServer = {};
   }
@@ -99,7 +100,10 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
     scriptType: 'text/javascript',
   };
   config.optimization = {
-    runtimeChunk: false,
+    ...(config.optimization ?? {}),
+    runtimeChunk: {
+      name: 'runtime',
+    },
     minimize: false,
     moduleIds: 'named',
   };

nx.json

@@ -66,6 +66,9 @@
     ],
     "sharedGlobals": ["{workspaceRoot}/babel.config.json"]
   },
+  "tui": {
+    "enabled": false
+  },
   "workspaceLayout": {
     "appsDir": "apps",
     "libsDir": "packages"

package.json

@@ -25,7 +25,7 @@
     "f": "nx format:write",
     "enhanced:jest": "pnpm build && cd packages/enhanced && NODE_OPTIONS=--experimental-vm-modules npx jest test/ConfigTestCases.basictest.js test/unit",
     "lint": "nx run-many --target=lint",
-    "test": "nx run-many --target=test",
+    "test": "NX_TUI=false nx run-many --target=test --projects=tag:type:pkg --skip-nx-cache",
     "build": "NX_TUI=false  nx run-many --target=build --parallel=5  --projects=tag:type:pkg",
     "build:pkg": "NX_TUI=false nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache",
     "test:pkg": "NX_TUI=false nx run-many --targets=test --projects=tag:type:pkg --skip-nx-cache",

packages/enhanced/jest.config.ts

@@ -1,16 +1,18 @@
 /* eslint-disable */
-import { readFileSync, rmdirSync, existsSync } from 'fs';
+import { readFileSync, rmSync, existsSync } from 'fs';
 import path from 'path';
 import os from 'os';
-const rimraf = require('rimraf');
 
 // Reading the SWC compilation config and remove the "exclude"
 // for the test files to be compiled by SWC
 const { exclude: _, ...swcJestConfig } = JSON.parse(
   readFileSync(`${__dirname}/.swcrc`, 'utf-8'),
 );
 
-rimraf.sync(__dirname + '/test/js');
+const transpiledDir = path.join(__dirname, 'test/js');
+if (existsSync(transpiledDir)) {
+  rmSync(transpiledDir, { recursive: true, force: true });
+}
 
 // disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
 // If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
@@ -23,13 +25,11 @@ if (swcJestConfig.swcrc === undefined) {
 // jest needs EsModule Interop to find the default exported setup/teardown functions
 // swcJestConfig.module.noInterop = false;
 
-const testMatch = [];
-
-if (process.env['TEST_TYPE'] === 'unit') {
-  testMatch.push('<rootDir>/test/unit/**/*.test.ts');
-} else {
-  testMatch.push('<rootDir>/test/*.basictest.js');
-}
+const testMatch = [
+  '<rootDir>/test/*.basictest.js',
+  '<rootDir>/test/unit/**/*.test.ts',
+  '<rootDir>/test/compiler-unit/**/*.test.ts',
+];
 
 export default {
   displayName: 'enhanced',

packages/enhanced/jest.embed.ts

@@ -1,16 +1,18 @@
 /* eslint-disable */
-import { readFileSync, rmdirSync, existsSync } from 'fs';
+import { readFileSync, rmSync, existsSync } from 'fs';
 import path from 'path';
 import os from 'os';
-const rimraf = require('rimraf');
 
 // Reading the SWC compilation config and remove the "exclude"
 // for the test files to be compiled by SWC
 const { exclude: _, ...swcJestConfig } = JSON.parse(
   readFileSync(`${__dirname}/.swcrc`, 'utf-8'),
 );
 
-rimraf.sync(__dirname + '/test/js');
+const transpiledDir = path.join(__dirname, 'test/js');
+if (existsSync(transpiledDir)) {
+  rmSync(transpiledDir, { recursive: true, force: true });
+}
 
 // disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
 // If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"

packages/enhanced/project.json

@@ -49,11 +49,7 @@
         "parallel": false,
         "commands": [
           {
-            "command": "TEST_TYPE=basic node --expose-gc --max-old-space-size=24576 --experimental-vm-modules --trace-deprecation ./node_modules/jest-cli/bin/jest --logHeapUsage --config packages/enhanced/jest.config.ts --silent",
-            "forwardAllArgs": false
-          },
-          {
-            "command": "TEST_TYPE=unit node --expose-gc --max-old-space-size=24576 --experimental-vm-modules --trace-deprecation ./node_modules/jest-cli/bin/jest --logHeapUsage --config packages/enhanced/jest.config.ts --silent",
+            "command": "node --expose-gc --max-old-space-size=24576 --experimental-vm-modules --trace-deprecation ./node_modules/jest-cli/bin/jest --logHeapUsage --config packages/enhanced/jest.config.ts --silent",
             "forwardAllArgs": false
           }
         ]