@module-federation/vite 1.15.5 → 1.16.0

package/lib/utils/ssrEntryLoader.mjs

@@ -0,0 +1,301 @@
+//#region src/utils/ssrEntryLoader.ts
+/**
+* MF runtime plugin that intercepts the `loadEntry` lifecycle hook on the
+* server and loads the SSR-compatible remote entry instead of the browser one.
+*
+* This completely replaces the need for any `@module-federation/sdk` patches.
+* The `loadEntry` hook is emitted by `runtime-core` before it falls through to
+* `loadScriptNode` — if the hook returns a value, the runtime uses it directly.
+*
+* Strategy:
+*  - In Node (typeof window === 'undefined'), fetch the remote's mf-manifest.json
+*    to discover the ssrRemoteEntry URL and its type.
+*  - ESM entry: use a dynamic `import()` — the SSR entry has no browser
+*    globals and all shared packages are external.
+*  - Dev mode (Vite 8+ only): use `ModuleRunner` with an HTTP transport backed
+*    by the remote's `/__mf_runner__` endpoint. This fetches fully-transformed
+*    module source through Vite's plugin pipeline, avoiding serialisation which
+*    cannot faithfully represent React components or closures.
+*
+*    Dev mode on Vite < 8 is NOT supported — `ModuleRunner` and
+*    `FetchableDevEnvironment` are Vite 8+ APIs. If you need dev-mode SSR on
+*    an older Vite version, implement an alternative loader in `loadSSRRemoteEntry`
+*    for the `isDevSsrEntry` branch and expose a corresponding server endpoint
+*    from `pluginSSRRemoteEntry.configureServer`.
+*
+* Exported as a plain factory function so it can be serialised into the
+* generated runtimePlugins list in virtualRemotes.ts.
+*/
+const importCache = /* @__PURE__ */ new Map();
+async function nodeImport(id) {
+	if (!importCache.has(id)) importCache.set(id, import(
+		/* @vite-ignore */
+		id
+));
+	return importCache.get(id);
+}
+const runnerCache = /* @__PURE__ */ new Map();
+/**
+* Import `vite/module-runner` dynamically. Returns null on Vite < 8 where the
+* subpath doesn't exist. Uses a plain dynamic import (not nodeImport) so that
+* Vitest can intercept it with vi.mock in tests.
+*/
+async function getModuleRunnerModule() {
+	try {
+		return await import("vite/module-runner");
+	} catch {
+		return null;
+	}
+}
+/**
+* Create a ModuleRunner that fetches modules from a remote Vite dev server's
+* `/__mf_runner__` endpoint. Each HTTP POST carries a `fetchModule` invoke
+* payload; the remote responds with the transformed module source as JSON.
+*
+* This is Vite 8+ only — older versions don't expose `vite/module-runner` or
+* the `/__mf_runner__` proxy endpoint.
+*/
+async function getOrCreateRunner(remoteOrigin) {
+	if (runnerCache.has(remoteOrigin)) return runnerCache.get(remoteOrigin);
+	const promise = (async () => {
+		const viteRunner = await getModuleRunnerModule();
+		if (!viteRunner) return null;
+		const { ModuleRunner, ESModulesEvaluator } = viteRunner;
+		const runnerEndpoint = `${remoteOrigin}/__mf_runner__`;
+		try {
+			return new ModuleRunner({
+				hmr: false,
+				transport: { async invoke(payload) {
+					return await (await fetch(runnerEndpoint, {
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify({
+							name: payload.data.name,
+							data: payload.data.data
+						})
+					})).json();
+				} }
+			}, new ESModulesEvaluator());
+		} catch {
+			return null;
+		}
+	})();
+	runnerCache.set(remoteOrigin, promise);
+	return promise;
+}
+const _path = () => nodeImport("path");
+const _fs = () => nodeImport("fs");
+const _crypto = () => nodeImport("crypto");
+const _module = () => nodeImport("module");
+const manifestCache = /* @__PURE__ */ new Map();
+async function fetchManifest(manifestUrl) {
+	try {
+		const res = await fetch(manifestUrl);
+		if (!res.ok) return null;
+		return await res.json();
+	} catch {
+		return null;
+	}
+}
+function getManifestUrl(remoteEntryUrl) {
+	return remoteEntryUrl.replace(/\/[^/]+$/, "/mf-manifest.json");
+}
+function resolveSSREntryUrl(manifest, manifestUrl) {
+	const meta = manifest?.metaData;
+	if (!meta?.ssrRemoteEntry?.name) return null;
+	const base = manifestUrl.replace(/\/[^/]+$/, "/");
+	const entryPath = (meta.ssrRemoteEntry.path || "") + meta.ssrRemoteEntry.name;
+	return {
+		url: new URL(entryPath, base).href,
+		type: meta.ssrRemoteEntry.type || "module"
+	};
+}
+/**
+* Derive the SSR entry URL by convention when no manifest is available.
+* remoteEntry.js → remoteEntry.ssr.js
+* remoteEntry.js → /__mf_ssr__/remoteEntry.ssr.js (dev middleware)
+* Returns the first URL that responds with a 200.
+*/
+async function headCheckSsrEntry(candidate) {
+	try {
+		const res = await fetch(candidate.url, { method: "HEAD" });
+		const ct = res.headers.get("content-type") ?? "";
+		if (res.ok && !ct.includes("text/html")) return candidate;
+	} catch {}
+	return null;
+}
+async function getSSREntryByConvention(remoteEntryUrl, options = {}) {
+	const base = remoteEntryUrl.replace(/\.[^.]+$/, "");
+	const remoteOrigin = remoteEntryUrl.replace(/\/[^/]+$/, "");
+	const filename = remoteEntryUrl.split("/").pop()?.replace(/\.[^.]+$/, "") ?? "remoteEntry";
+	const candidates = [
+		...options.skipServerBuild ? [] : [{
+			url: `${remoteOrigin}/__mf_server__/${filename}.ssr.js`,
+			type: "module"
+		}],
+		{
+			url: `${base}.ssr.js`,
+			type: "module"
+		},
+		{
+			url: `${remoteOrigin}/__mf_ssr__/${filename}.ssr.js`,
+			type: "module"
+		}
+	];
+	for (const candidate of candidates) {
+		const hit = await headCheckSsrEntry(candidate);
+		if (hit) return hit;
+	}
+	return null;
+}
+async function getSSREntry(remoteEntryUrl) {
+	const remoteOrigin = remoteEntryUrl.replace(/\/[^/]+$/, "");
+	const filename = remoteEntryUrl.split("/").pop()?.replace(/\.[^.]+$/, "") ?? "remoteEntry";
+	const manifestUrl = getManifestUrl(remoteEntryUrl);
+	if (!manifestCache.has(manifestUrl)) manifestCache.set(manifestUrl, (async () => {
+		const fromServerBuild = await headCheckSsrEntry({
+			url: `${remoteOrigin}/__mf_server__/${filename}.ssr.js`,
+			type: "module"
+		});
+		if (fromServerBuild) return fromServerBuild;
+		const manifest = await fetchManifest(manifestUrl);
+		if (manifest) {
+			const fromManifest = resolveSSREntryUrl(manifest, manifestUrl);
+			if (fromManifest) return fromManifest;
+		}
+		return getSSREntryByConvention(remoteEntryUrl, { skipServerBuild: true });
+	})());
+	return manifestCache.get(manifestUrl);
+}
+const tempFileCache = /* @__PURE__ */ new Map();
+let ssrCacheDirPromise;
+async function getSSRCacheDir() {
+	if (!ssrCacheDirPromise) ssrCacheDirPromise = (async () => {
+		const { join } = await _path();
+		const { rmSync } = await _fs();
+		const dir = join(process.cwd(), "node_modules", ".ssr-cache");
+		process.once("exit", () => {
+			try {
+				rmSync(dir, {
+					recursive: true,
+					force: true
+				});
+			} catch {}
+		});
+		return dir;
+	})();
+	return ssrCacheDirPromise;
+}
+function transformSsrCode(code, base, sharedPkgMap) {
+	code = code.replace(/((?:from|export\s*\*\s*from)\s*)(["'`])(\.\.?\/[^"'`\s][^"'`]*)["'`]/g, (_m, prefix, _q, specifier) => `${prefix}"${new URL(specifier, base).href}"`);
+	code = code.replace(/(import\s*)(["'`])(\.\.?\/[^"'`\s][^"'`]*)["'`]/g, (_m, prefix, _q, specifier) => `${prefix}"${new URL(specifier, base).href}"`);
+	code = code.replace(/(import\s*\(\s*)(["'`])(\.\.?\/[^"'`\s][^"'`]*)["'`](\s*\))/g, (_m, prefix, _q, specifier, suffix) => `${prefix}"${new URL(specifier, base).href}"${suffix}`);
+	if (sharedPkgMap && sharedPkgMap.size > 0) code = code.replace(/(?:from|import\s*\()\s*(["'`])([^"'`./][^"'`]*)["'`]/g, (m, _q, specifier) => {
+		const resolved = sharedPkgMap.get(specifier);
+		return resolved ? m.replace(specifier, `file://${resolved}`) : m;
+	});
+	code = code.replace(/import\s*\{([^}]*)\}\s*from\s*["'][^"']*preload-helper[^"']*["'];?/g, (_m, bindings) => {
+		return bindings.split(",").map((b) => {
+			const parts = b.trim().split(/\s+as\s+/);
+			return (parts[1] ?? parts[0]).trim();
+		}).filter(Boolean).map((l) => `const ${l} = (fn) => fn();`).join("\n");
+	});
+	code = code.replace(/__vite__mapDeps\([^)]+\)/g, "[]");
+	code = code.replace(/\b([A-Za-z_$][\w$]*)\s*\(\s*\(\s*\)\s*=>\s*import\(([^)]*)\)\s*,\s*\[\]\s*\)/g, "import($2)");
+	return code;
+}
+/**
+* Fetch an HTTP ESM module, transform it, write it to a temp .mjs file and
+* return the file path. Recursively does the same for HTTP transitive imports
+* so that `import('file:///...temp.mjs')` can resolve them.
+*/
+async function fetchEsmToTempFile(url, tmpDir, visited, sharedPkgMap) {
+	if (visited.has(url)) return visited.get(url);
+	if (tempFileCache.has(url)) return tempFileCache.get(url);
+	const promise = (async () => {
+		let code = await (await fetch(url)).text();
+		const base = url.replace(/\/[^/]*$/, "/");
+		const relImports = [];
+		const relRegex = /(?:from|export\s*\*\s*from|import\s*(?:\(|\s))\s*["'`]([^"'`\s]+)["'`]/g;
+		let m;
+		while ((m = relRegex.exec(code)) !== null) if (m[1].startsWith("./") || m[1].startsWith("../")) relImports.push(new URL(m[1], base).href);
+		const subMap = /* @__PURE__ */ new Map();
+		await Promise.all([...new Set(relImports)].filter((u) => u.startsWith("http://") || u.startsWith("https://")).map(async (u) => {
+			const tmpPath = await fetchEsmToTempFile(u, tmpDir, visited, sharedPkgMap);
+			subMap.set(u, `file://${tmpPath}`);
+		}));
+		code = transformSsrCode(code, base, sharedPkgMap);
+		for (const [httpUrl, fileUrl] of subMap) code = code.split(httpUrl).join(fileUrl);
+		const { createHash } = await _crypto();
+		const { join } = await _path();
+		const { writeFileSync } = await _fs();
+		const tmpFile = join(tmpDir, `${createHash("sha1").update(url).digest("hex").slice(0, 12)}.mjs`);
+		writeFileSync(tmpFile, code, "utf8");
+		visited.set(url, tmpFile);
+		return tmpFile;
+	})();
+	tempFileCache.set(url, promise);
+	return promise;
+}
+async function importTempModule(filePath) {
+	return await import(
+		/* @vite-ignore */
+		filePath
+);
+}
+async function loadSSRRemoteEntry(ssrEntry, resolvedShared = {}) {
+	const { url, type } = ssrEntry;
+	if (type === "commonjs-module" || type === "commonjs") {
+		const { createRequire } = await _module();
+		const req = createRequire(import.meta.url);
+		try {
+			return req(url);
+		} catch {}
+	}
+	if (url.startsWith("http://") || url.startsWith("https://")) {
+		const urlObj = new URL(url);
+		if (urlObj.pathname.includes("/__mf_ssr__/")) {
+			const remoteOrigin = urlObj.origin;
+			const runner = await getOrCreateRunner(remoteOrigin);
+			if (!runner) return null;
+			try {
+				return await runner.import(urlObj.pathname);
+			} catch {
+				return null;
+			}
+		}
+		const { mkdirSync } = await _fs();
+		const cacheDir = await getSSRCacheDir();
+		mkdirSync(cacheDir, { recursive: true });
+		const sharedPkgMap = new Map(Object.entries(resolvedShared));
+		try {
+			return await importTempModule(await fetchEsmToTempFile(url, cacheDir, /* @__PURE__ */ new Map(), sharedPkgMap));
+		} catch {
+			return null;
+		}
+	}
+	try {
+		return await import(
+			/* @vite-ignore */
+			url
+);
+	} catch {
+		return null;
+	}
+}
+function ssrEntryLoaderPlugin(options = {}) {
+	const resolvedShared = options.resolvedShared ?? {};
+	return {
+		name: "mf-vite:ssr-entry-loader",
+		async loadEntry({ remoteInfo }) {
+			if (typeof globalThis.window !== "undefined") return;
+			const ssrEntry = await getSSREntry(remoteInfo.entry);
+			if (!ssrEntry) return;
+			const mod = await loadSSRRemoteEntry(ssrEntry, resolvedShared);
+			if (!mod) return;
+			return mod;
+		}
+	};
+}
+//#endregion
+export { ssrEntryLoaderPlugin as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/vite",
-  "version": "1.15.5",
+  "version": "1.16.0",
   "description": "Vite plugin for Module Federation",
   "type": "module",
   "main": "./lib/index.cjs",
@@ -15,6 +15,14 @@
       "import": "./lib/index.mjs",
       "require": "./lib/index.cjs"
     },
+    "./ssrEntryLoader": {
+      "types": {
+        "import": "./lib/utils/ssrEntryLoader.d.mts",
+        "require": "./lib/utils/ssrEntryLoader.d.cts"
+      },
+      "import": "./lib/utils/ssrEntryLoader.mjs",
+      "require": "./lib/utils/ssrEntryLoader.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -69,9 +77,9 @@
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
-    "@module-federation/dts-plugin": "2.4.0",
-    "@module-federation/runtime": "2.4.0",
-    "@module-federation/sdk": "2.4.0",
+    "@module-federation/dts-plugin": "2.5.0",
+    "@module-federation/runtime": "2.5.0",
+    "@module-federation/sdk": "2.5.0",
     "es-module-lexer": "^2.0.0",
     "estree-walker": "^3.0.3",
     "pathe": "^2.0.3"
@@ -88,4 +96,4 @@
     "vite": "^8.0.10",
     "vitest": "^4.0.18"
   }
-}
+}