feat: support library for instance unique name (#4628)

* feat: support library for instance unique name

* feat: add template for build

Author: nyqykk

packages/rspack-plugin-react-refresh/client/reactRefreshEntry.js

@@ -37,6 +37,14 @@ var safeThis = (function () {
 if (process.env.NODE_ENV !== "production") {
 	if (typeof safeThis !== "undefined") {
 		var $RefreshInjected$ = "__reactRefreshInjected";
+		// Namespace the injected flag (if necessary) for monorepo compatibility
+		if (
+			typeof __react_refresh_library__ !== "undefined" &&
+			__react_refresh_library__
+		) {
+			$RefreshInjected$ += "_" + __react_refresh_library__;
+		}
+
 		// Only inject the runtime if it hasn't been injected
 		if (!safeThis[$RefreshInjected$]) {
 			RefreshRuntime.injectIntoGlobalHook(safeThis);

packages/rspack-plugin-react-refresh/src/index.ts

@@ -1,5 +1,6 @@
 import path from "path";
 import type { Compiler } from "@rspack/core";
+import { DefinePlugin } from "@rspack/core";
 import { normalizeOptions, type PluginOptions } from "./options";
 
 export type { PluginOptions };
@@ -55,6 +56,18 @@ class ReactRefreshRspackPlugin {
 			use: "builtin:react-refresh-loader"
 		});
 
+		const definedModules = {
+			// For Mutiple Instance Mode
+			__react_refresh_library__: JSON.stringify(
+				compiler.webpack.Template.toIdentifier(
+					this.options.library ||
+						compiler.options.output.uniqueName ||
+						compiler.options.output.library
+				)
+			)
+		};
+		new DefinePlugin(definedModules).apply(compiler);
+
 		const refreshPath = path.dirname(require.resolve("react-refresh"));
 		compiler.options.resolve.alias = {
 			"react-refresh": refreshPath,

packages/rspack-plugin-react-refresh/src/options.ts

@@ -1,12 +1,13 @@
 export type PluginOptions = {
 	include?: string | RegExp | (string | RegExp)[] | null;
 	exclude?: string | RegExp | (string | RegExp)[] | null;
+	library?: string;
 };
 
-const d = (
+const d = <K extends keyof PluginOptions>(
 	object: PluginOptions,
-	property: keyof PluginOptions,
-	defaultValue: PluginOptions[keyof PluginOptions]
+	property: K,
+	defaultValue?: PluginOptions[K]
 ) => {
 	if (
 		typeof object[property] === "undefined" &&
@@ -20,5 +21,6 @@ const d = (
 export function normalizeOptions(options: PluginOptions) {
 	d(options, "exclude", /node_modules/i);
 	d(options, "include", /\.([cm]js|[jt]sx?|flow)$/i);
+	d(options, "library");
 	return options;
 }

packages/rspack-plugin-react-refresh/tests/test.spec.ts

@@ -3,6 +3,7 @@ const path = require("path");
 const { rspack } = require("@rspack/core");
 const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
 
+const uniqueName = "ReactRefreshLibrary";
 const compileWithReactRefresh = (fixturePath, refreshOptions, callback) => {
 	let dist = path.join(fixturePath, "dist");
 	rspack(
@@ -13,7 +14,8 @@ const compileWithReactRefresh = (fixturePath, refreshOptions, callback) => {
 				fixture: path.join(fixturePath, "index.js")
 			},
 			output: {
-				path: dist
+				path: dist,
+				uniqueName
 			},
 			plugins: [new ReactRefreshPlugin(refreshOptions)],
 			optimization: {
@@ -89,6 +91,17 @@ describe("react-refresh-rspack-plugin", () => {
 		);
 	});
 
+	it("should add library to make sure work in Micro-Frontend", done => {
+		compileWithReactRefresh(
+			path.join(__dirname, "fixtures/default"),
+			{},
+			(_, __, { reactRefresh, fixture, runtime, vendor }) => {
+				expect(reactRefresh).toContain(uniqueName);
+				done();
+			}
+		);
+	});
+
 	it("should include selected file when compiling", done => {
 		compileWithReactRefresh(
 			path.join(__dirname, "fixtures/custom"),

packages/rspack/src/Compiler.ts

@@ -227,6 +227,9 @@ class Compiler {
 			get CopyRspackPlugin() {
 				return require("./builtin-plugin").CopyRspackPlugin;
 			},
+			get Template() {
+				return require("./Template");
+			},
 			optimize: {
 				get LimitChunkCountPlugin() {
 					return require("./builtin-plugin").LimitChunkCountPlugin;