fix(rspack): support getPublicPath

.changeset/shiny-geckos-switch.md

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

apps/router-demo/router-host-vue3-2100/rsbuild.config.ts

@@ -15,8 +15,6 @@ export default defineConfig({
     port: 2100,
   },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:2100',
     writeToDisk: true,
   },
   plugins: [

apps/router-demo/router-remote1-2001/rsbuild.config.ts

@@ -20,15 +20,8 @@ export default defineConfig({
     port: 2001,
   },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:2001',
     writeToDisk: true,
   },
-  tools: {
-    rspack: (config, { appendPlugins }) => {
-      delete config.optimization?.splitChunks;
-    },
-  },
   plugins: [
     pluginReact(),
     pluginModuleFederation({

apps/router-demo/router-remote2-2002/rsbuild.config.ts

@@ -17,28 +17,6 @@ export default defineConfig({
   server: {
     port: 2002,
   },
-  dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:2002',
-  },
-  tools: {
-    // cssExtract: {
-    // 	pluginOptions: {
-    // 		insert(element) {
-    // 			console.log('element22222233333333333333',document.querySelector("#remote2-style-component"));
-    // 			document.querySelector("#remote2-style-component")?.appendChild(element);
-    // 		},
-    // 	}
-    // },
-    // styleLoader: {
-    // 	insert: (element)=> {
-    // 		debugger
-    // 		const styleContainer = document.querySelector(".remote2_export-app") || document.head;
-    // 		styleContainer.appendChild(element);
-    // 		console.log('styleContainer', styleContainer)
-    // 	},
-    // },
-  },
   plugins: [
     pluginReact(),
     pluginModuleFederation({

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

@@ -13,16 +13,8 @@ export default defineConfig({
     port: 2003,
   },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:2003',
     writeToDisk: true,
   },
-  tools: {
-    rspack: (config, { appendPlugins }) => {
-      delete config.optimization?.splitChunks;
-    },
-  },
-
   plugins: [
     pluginVue(),
     pluginModuleFederation({

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

@@ -14,33 +14,11 @@ export default defineConfig({
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
     },
   },
-  server: {
-    port: 2004,
-  },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:2004',
+    writeToDisk: true,
   },
-  tools: {
-    rspack: (config, { appendPlugins }) => {
-      delete config.optimization?.splitChunks;
-    },
-    // cssExtract: {
-    // 	pluginOptions: {
-    // 		insert(element) {
-    // 			console.log('element22222233333333333333',document.querySelector("#remote2-style-component"));
-    // 			document.querySelector("#remote2-style-component")?.appendChild(element);
-    // 		},
-    // 	}
-    // },
-    // styleLoader: {
-    // 	insert: (element)=> {
-    // 		debugger
-    // 		const styleContainer = document.querySelector(".remote2_export-app") || document.head;
-    // 		styleContainer.appendChild(element);
-    // 		console.log('styleContainer', styleContainer)
-    // 	},
-    // },
+  server: {
+    port: 2004,
   },
   plugins: [
     pluginReact(),
@@ -50,6 +28,7 @@ export default defineConfig({
         './export-app': './src/export-App.tsx',
       },
       shared: ['react', 'react-dom'],
+      getPublicPath: `return 'http://localhost:2004/'`,
     }),
   ],
 });

packages/data-prefetch/tsconfig.json

@@ -9,7 +9,6 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "allowJs": false,
-    "strict": true,
     "types": ["jest", "node"],
     "experimentalDecorators": true,
     "resolveJsonModule": true,

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

@@ -1,6 +1,25 @@
 import type { Compiler, WebpackPluginInstance } from 'webpack';
 import pBtoa from 'btoa';
 
+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 WebpackPluginInstance {
   readonly name = 'VmokRemoteEntryPlugin';
   private _name: string;
@@ -13,12 +32,14 @@
 
   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/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:*",
@@ -33,6 +34,7 @@
     "@module-federation/sdk": "workspace:*"
   },
   "devDependencies": {
+    "@types/btoa": "1.2.5",
     "@rspack/core": "^1.0.2"
   },
   "exports": {

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/rspack/src/RemoteEntryPlugin.ts

@@ -0,0 +1,47 @@
+import type { Compiler, RspackPluginInstance } from '@rspack/core';
+import pBtoa from 'btoa';
+
+const charMap = {
+  '<': '\\u003C',
+  '>': '\\u003E',
+  '/': '\\u002F',
+  '\\': '\\\\',
+  '\b': '\\b',
+  '\f': '\\f',
+  '\n': '\\n',
+  '\r': '\\r',
+  '\t': '\\t',
+  '\0': '\\0',
+  '\u2028': '\\u2028',
+  '\u2029': '\\u2029',
+};
+
+function escapeUnsafeChars(str) {
+  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;
+
+  constructor(name: string, getPublicPath: string) {
+    this._name = name;
+    this._getPublicPath = getPublicPath;
+  }
+
+  apply(compiler: Compiler): void {
+    const sanitizedPublicPath = escapeUnsafeChars(this._getPublicPath);
+    const code = `${
+      compiler.webpack.RuntimeGlobals.publicPath
+    } = new Function(${JSON.stringify(sanitizedPublicPath)})()`;
+    const base64Code = pBtoa(code);
+    const dataUrl = `data:text/javascript;base64,${base64Code}`;
+
+    compiler.hooks.afterPlugins.tap('VmokRemoteEntryPlugin', () => {
+      new compiler.webpack.EntryPlugin(compiler.context, dataUrl, {
+        name: this._name,
+      }).apply(compiler);
+    });
+  }
+}

packages/rspack/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,

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,

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

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,