feat(modern-js-plugin): add server plugin to handle remote's SSR assets (#3777)

zllkjc · web-flow · commit 0c68c2fb43cf · 2025-05-27T10:28:25.000+08:00
diff --git a/.changeset/spotty-ducks-look.md b/.changeset/spotty-ducks-look.md
@@ -0,0 +1,9 @@
+---
+'create-module-federation': patch
+'@module-federation/devtools': patch
+'@module-federation/modern-js': patch
+'@module-federation/modernjsapp': patch
+'@module-federation/cli': patch
+---
+
+feat(modern-js-plugin): add server plugin to handle remote's SSR assets
diff --git a/apps/modernjs-ssr/dynamic-nested-remote/package.json b/apps/modernjs-ssr/dynamic-nested-remote/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/dynamic-remote-new-version/package.json b/apps/modernjs-ssr/dynamic-remote-new-version/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/dynamic-remote/package.json b/apps/modernjs-ssr/dynamic-remote/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/host/package.json b/apps/modernjs-ssr/host/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/nested-remote/package.json b/apps/modernjs-ssr/nested-remote/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/remote-new-version/package.json b/apps/modernjs-ssr/remote-new-version/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs-ssr/remote/modern.config.ts b/apps/modernjs-ssr/remote/modern.config.ts
@@ -6,6 +6,9 @@ export default defineConfig({
   dev: {
     port: 3051,
   },
+  output: {
+    assetPrefix: 'http://localhost:8080',
+  },
   runtime: {
     router: true,
   },
diff --git a/apps/modernjs-ssr/remote/module-federation.config.ts b/apps/modernjs-ssr/remote/module-federation.config.ts
@@ -1,7 +1,10 @@
 import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'remote',
-  filename: 'remoteEntry.js',
+  manifest: {
+    filePath: 'static',
+  },
+  filename: 'static/remoteEntry.js',
   exposes: {
     './Image': './src/components/Image.tsx',
     './Button': './src/components/Button.tsx',
diff --git a/apps/modernjs-ssr/remote/package.json b/apps/modernjs-ssr/remote/package.json
@@ -26,17 +26,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/modern-js": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",
     "@types/react": "~18.2.0",
diff --git a/apps/modernjs/package.json b/apps/modernjs/package.json
@@ -26,16 +26,16 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/enhanced": "workspace:*",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/tsconfig": "2.67.6",
     "@types/jest": "~29.5.0",
     "@types/node": "~20.12.12",
     "@types/react": "~18.2.0",
diff --git a/packages/chrome-devtools/package.json b/packages/chrome-devtools/package.json
@@ -11,18 +11,16 @@
     "build:storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
     "reset": "npx rimraf ./**/node_modules",
-    "dev": "modern dev",
-    "build": "modern build && node postpack.js",
-    "build:debug": "DEBUG=true modern build && node postpack.js",
+    "dev": "modern-app dev",
+    "build": "modern-app build && node postpack.js",
+    "build:debug": "DEBUG=true modern-app build && node postpack.js",
     "build:lib": "rm -rf dist && modern-module build -c modern.lib.config.ts",
     "release": "npm publish --tag canary",
     "test": "vitest run",
     "test:e2e": "E2ETEST=true pnpm build && playwright test",
     "test:e2e:ui": "E2ETEST=true  pnpm build && playwright test --ui",
-    "start": "modern start",
-    "serve": "modern serve",
-    "new": "modern new",
-    "upgrade": "modern upgrade",
+    "start": "modern-app start",
+    "serve": "modern-app serve",
     "postinstall": "bash install-deps.bash"
   },
   "files": [
@@ -57,7 +55,7 @@
   },
   "dependencies": {
     "@arco-design/web-react": "^2.64.1",
-    "@modern-js/runtime": "2.65.1",
+    "@modern-js/runtime": "2.67.6",
     "@module-federation/sdk": "workspace:*",
     "ahooks": "^3.7.10",
     "dagre": "^0.8.5",
@@ -67,12 +65,11 @@
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.54.6",
-    "@modern-js/app-tools": "2.65.1",
-    "@modern-js/builder-webpack-provider": "2.46.1",
+    "@modern-js/app-tools": "2.67.6",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/module-tools": "2.65.1",
-    "@modern-js/storybook": "2.65.1",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/module-tools": "2.67.6",
+    "@modern-js/storybook": "2.67.6",
+    "@modern-js/tsconfig": "2.67.6",
     "@module-federation/runtime": "workspace:*",
     "@playwright/test": "1.49.1",
     "@storybook/addon-essentials": "^8",
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -26,7 +26,7 @@
     "@module-federation/dts-plugin": "workspace:*",
     "commander": "11.1.0",
     "chalk": "3.0.0",
-    "@modern-js/node-bundle-require": "2.65.1"
+    "@modern-js/node-bundle-require": "2.67.6"
   },
   "devDependencies": {
     "@types/node": "~16.11.7"
diff --git a/packages/create-module-federation/templates/modern-common/package.json.handlebars b/packages/create-module-federation/templates/modern-common/package.json.handlebars
@@ -24,13 +24,13 @@
     "pre-commit": "npx lint-staged"
   },
   "dependencies": {
-    "@modern-js/runtime": "^2.65.1",
+    "@modern-js/runtime": "^2.67.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.65.1",
-    "@modern-js/tsconfig": "^2.65.1",
+    "@modern-js/app-tools": "^2.67.6",
+    "@modern-js/tsconfig": "^2.67.6",
     "@biomejs/biome": "1.8.3",
     "typescript": "~5.0.4",
     "@types/jest": "~29.2.4",
diff --git a/packages/modernjs/package.json b/packages/modernjs/package.json
@@ -55,6 +55,10 @@
       "types": "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts",
       "import": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
       "require": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js"
+    },
+    "./server": {
+      "types": "./dist/types/server/index.d.ts",
+      "default": "./dist/cjs/server/index.js"
     }
   },
   "typesVersions": {
@@ -79,6 +83,9 @@
       ],
       "inject-node-fetch": [
         "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
+      ],
+      "server": [
+        "./dist/types/server/index.d.ts"
       ]
     }
   },
@@ -87,9 +94,10 @@
   "author": "hanric <hanric.zhang@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@modern-js/node-bundle-require": "2.65.1",
+    "@modern-js/node-bundle-require": "2.67.6",
     "@module-federation/rsbuild-plugin": "workspace:*",
-    "@modern-js/utils": "2.65.1",
+    "fs-extra": "11.3.0",
+    "lru-cache": "11.1.0",
     "@module-federation/enhanced": "workspace:*",
     "@module-federation/node": "workspace:*",
     "@module-federation/sdk": "workspace:*",
@@ -100,11 +108,11 @@
   },
   "devDependencies": {
     "@rsbuild/core": "1.2.8",
-    "@modern-js/app-tools": "2.65.1",
-    "@modern-js/core": "2.65.1",
-    "@modern-js/module-tools": "2.65.1",
-    "@modern-js/runtime": "2.65.1",
-    "@modern-js/tsconfig": "2.65.1",
+    "@modern-js/app-tools": "2.67.6",
+    "@modern-js/server-runtime": "2.67.6",
+    "@modern-js/module-tools": "2.67.6",
+    "@modern-js/runtime": "2.67.6",
+    "@modern-js/tsconfig": "2.67.6",
     "@module-federation/manifest": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/modernjs/src/cli/index.ts b/packages/modernjs/src/cli/index.ts
@@ -66,6 +66,13 @@ export const moduleFederationPlugin = (
           }
         }
       });
+
+      api._internalServerPlugins(({ plugins }) => {
+        plugins.push({
+          name: '@module-federation/modern-js/server',
+        });
+        return { plugins };
+      });
     },
     usePlugins: [
       moduleFederationConfigPlugin(internalModernPluginOptions),
diff --git a/packages/modernjs/src/cli/manifest.ts b/packages/modernjs/src/cli/manifest.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 import { Stats, Manifest } from '@module-federation/sdk';
-import { fs } from '@modern-js/utils';
+import fs from 'fs-extra';
 import { BundlerPlugin } from '../types';
 
 function mergeStats(browserStats: Stats, nodeStats: Stats): Stats {
diff --git a/packages/modernjs/src/cli/ssrPlugin.ts b/packages/modernjs/src/cli/ssrPlugin.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { fs } from '@modern-js/utils';
+import fs from 'fs-extra';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 import UniverseEntryChunkTrackerPlugin from '@module-federation/node/universe-entry-chunk-tracker-plugin';
diff --git a/packages/modernjs/src/server/fileCache.spec.ts b/packages/modernjs/src/server/fileCache.spec.ts
@@ -0,0 +1,29 @@
+import { it, expect, describe, vi, beforeAll } from 'vitest';
+import { FileCache } from './fileCache';
+
+beforeAll(() => {
+  vi.mock('fs-extra', () => ({
+    default: {
+      pathExists: () => {
+        return true;
+      },
+      lstat: () => {
+        return {
+          mtimeMs: Date.now(),
+          size: 4,
+        };
+      },
+      readFile: () => {
+        return 'test';
+      },
+    },
+  }));
+});
+
+describe('modern serve static file cache', async () => {
+  it('should cache file', async () => {
+    const cache = new FileCache();
+    const result = await cache.getFile('test.txt');
+    expect(result?.content).toBe('test');
+  });
+});
diff --git a/packages/modernjs/src/server/fileCache.ts b/packages/modernjs/src/server/fileCache.ts
diff --git a/packages/modernjs/src/server/index.ts b/packages/modernjs/src/server/index.ts
diff --git a/packages/modernjs/src/server/staticMiddleware.spec.ts b/packages/modernjs/src/server/staticMiddleware.spec.ts
diff --git a/packages/modernjs/src/server/staticMiddleware.ts b/packages/modernjs/src/server/staticMiddleware.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
