fix(rspack): support getPublicPath (#3422)

Author: 2heal1

.changeset/shiny-geckos-switch.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/rspack': patch
+---
+
+fix(rspack): support getPublicPath

apps/router-demo/router-remote3-2003/rsbuild.config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
         './export-app': './src/export-app.ts',
       },
       shared: ['vue', 'vue-router'],
+      getPublicPath: `return 'http://localhost:2003/'`,
     }),
   ],
 });

apps/router-demo/router-remote4-2004/rsbuild.config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
         './export-app': './src/export-App.tsx',
       },
       shared: ['react', 'react-dom'],
+      getPublicPath: `function(){return 'http://localhost:2004/'}`,
     }),
   ],
 });

packages/enhanced/src/lib/container/ModuleFederationPlugin.ts

@@ -19,7 +19,7 @@ import SharePlugin from '../sharing/SharePlugin';
 import ContainerPlugin from './ContainerPlugin';
 import ContainerReferencePlugin from './ContainerReferencePlugin';
 import FederationRuntimePlugin from './runtime/FederationRuntimePlugin';
-import { RemoteEntryPlugin } from './runtime/RemoteEntryPlugin';
+import { RemoteEntryPlugin } from '@module-federation/rspack/remote-entry-plugin';
 import { ExternalsType } from 'webpack/declarations/WebpackOptions';
 import StartupChunkDependenciesPlugin from '../startup/MfStartupChunkDependenciesPlugin';
 import FederationModulesPlugin from './runtime/FederationModulesPlugin';
@@ -69,6 +69,7 @@ class ModuleFederationPlugin implements WebpackPluginInstance {
     // must before ModuleFederationPlugin
     if (options.getPublicPath && options.name) {
       new RemoteEntryPlugin(options.name, options.getPublicPath).apply(
+        // @ts-ignore
         compiler,
       );
     }

packages/rspack/package.json

@@ -24,6 +24,7 @@
   "module": "./dist/index.esm.mjs",
   "types": "./dist/index.cjs.d.ts",
   "dependencies": {
+    "btoa": "1.2.1",
     "@module-federation/bridge-react-webpack-plugin": "workspace:*",
     "@module-federation/dts-plugin": "workspace:*",
     "@module-federation/managers": "workspace:*",
@@ -45,6 +46,11 @@
       "types": "./dist/plugin.cjs.d.ts",
       "import": "./dist/plugin.esm.mjs",
       "require": "./dist/plugin.cjs.js"
+    },
+    "./remote-entry-plugin": {
+      "types": "./dist/remote-entry-plugin.cjs.d.ts",
+      "import": "./dist/remote-entry-plugin.esm.mjs",
+      "require": "./dist/remote-entry-plugin.cjs.js"
     }
   },
   "typesVersions": {
@@ -54,6 +60,9 @@
       ],
       "plugin": [
         "./dist/plugin.cjs.d.ts"
+      ],
+      "remote-entry-plugin": [
+        "./dist/remote-entry-plugin.cjs.d.ts"
       ]
     }
   },

packages/rspack/rollup.config.js

@@ -9,6 +9,10 @@ module.exports = (rollupConfig, projectOptions) => {
     process.cwd(),
     './packages/rspack/src/ModuleFederationPlugin.ts',
   );
+  rollupConfig.input['remote-entry-plugin'] = path.resolve(
+    process.cwd(),
+    './packages/rspack/src/RemoteEntryPlugin.ts',
+  );
 
   if (Array.isArray(rollupConfig.output)) {
     rollupConfig.output = rollupConfig.output.map((c) => ({

packages/rspack/src/ModuleFederationPlugin.ts

@@ -13,6 +13,7 @@ import { DtsPlugin } from '@module-federation/dts-plugin';
 import ReactBridgePlugin from '@module-federation/bridge-react-webpack-plugin';
 import path from 'node:path';
 import fs from 'node:fs';
+import { RemoteEntryPlugin } from './RemoteEntryPlugin';
 
 type ExcludeFalse<T> = T extends undefined | false ? never : T;
 type SplitChunks = Compiler['options']['optimization']['splitChunks'];
@@ -75,6 +76,13 @@ export class ModuleFederationPlugin implements RspackPluginInstance {
       this._patchChunkSplit(compiler, options.name);
     }
 
+    // must before ModuleFederationPlugin
+    if (options.getPublicPath && options.name) {
+      new RemoteEntryPlugin(options.name, options.getPublicPath).apply(
+        compiler,
+      );
+    }
+
     if (options.experiments?.provideExternalRuntime) {
       if (options.exposes) {
         throw new Error(

packages/enhanced/src/lib/container/runtime/RemoteEntryPlugin.ts packages/rspack/src/RemoteEntryPlugin.ts

@@ -1,7 +1,27 @@
-import type { Compiler, WebpackPluginInstance } from 'webpack';
+import type { Compiler, RspackPluginInstance } from '@rspack/core';
+// @ts-ignore
 import pBtoa from 'btoa';
 
-export class RemoteEntryPlugin implements WebpackPluginInstance {
+const charMap: Record<string, string> = {
+  '<': '\\u003C',
+  '>': '\\u003E',
+  '/': '\\u002F',
+  '\\': '\\\\',
+  '\b': '\\b',
+  '\f': '\\f',
+  '\n': '\\n',
+  '\r': '\\r',
+  '\t': '\\t',
+  '\0': '\\0',
+  '\u2028': '\\u2028',
+  '\u2029': '\\u2029',
+};
+
+function escapeUnsafeChars(str: string) {
+  return str.replace(/[<>\b\f\n\r\t\0\u2028\u2029\\]/g, (x) => charMap[x]);
+}
+
+export class RemoteEntryPlugin implements RspackPluginInstance {
   readonly name = 'VmokRemoteEntryPlugin';
   private _name: string;
   private _getPublicPath: string;
@@ -13,12 +33,14 @@ export class RemoteEntryPlugin implements WebpackPluginInstance {
 
   apply(compiler: Compiler): void {
     let code;
+    const sanitizedPublicPath = escapeUnsafeChars(this._getPublicPath);
+
     if (!this._getPublicPath.startsWith('function')) {
       code = `${
         compiler.webpack.RuntimeGlobals.publicPath
-      } = new Function(${JSON.stringify(this._getPublicPath)})()`;
+      } = new Function(${JSON.stringify(sanitizedPublicPath)})()`;
     } else {
-      code = `(${this._getPublicPath})()`;
+      code = `(${sanitizedPublicPath}())`;
     }
     const base64Code = pBtoa(code);
     const dataUrl = `data:text/javascript;base64,${base64Code}`;

packages/runtime-plugins/inject-external-runtime-core-plugin/project.json

@@ -14,9 +14,6 @@
         "tsConfig": "packages/runtime-plugins/inject-external-runtime-core-plugin/tsconfig.lib.json",
         "assets": [],
         "project": "packages/runtime-plugins/inject-external-runtime-core-plugin/package.json",
-        "additionalEntryPoints": [
-          "packages/runtime-plugins/inject-external-runtime-core-plugin/src/normalize-webpack-path.ts"
-        ],
         "rollupConfig": "packages/runtime-plugins/inject-external-runtime-core-plugin/rollup.config.js",
         "compiler": "swc",
         "generatePackageJson": false,