@module-federation/bridge-react 0.20.0 → 0.21.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @module-federation/bridge-react
 
+## 0.21.1
+
+### Patch Changes
+
+- @module-federation/sdk@0.21.1
+- @module-federation/bridge-shared@0.21.1
+
+## 0.21.0
+
+### Minor Changes
+
+- d225658: feat: Add React Router v7 Support to Module Federation Bridge
+
+### Patch Changes
+
+- Updated dependencies [d1e90a4]
+  - @module-federation/sdk@0.21.0
+  - @module-federation/bridge-shared@0.21.0
+
 ## 0.20.0
 
 ### Patch Changes

package/dist/{bridge-base-Bn6DO0Fi.js → bridge-base-B2malZDo.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index = require("./index-DqCpgmgH.js");
+const index = require("./index-DRSBaSu3.js");
 const plugin = require("./plugin.cjs.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -156,7 +156,7 @@ function createBaseBridgeComponent({
           ...rootOptions
         };
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(
+        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React__namespace.createElement(
           ErrorBoundary,
           {
             FallbackComponent: fallback
@@ -166,16 +166,18 @@ function createBaseBridgeComponent({
             {
               appInfo: {
                 moduleName,
-                basename,
+                basename: basename2,
                 memoryRoute
               },
               propsInfo: {
                 ...propsInfo,
+                basename: basename2,
                 ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
               }
             }
           )
         );
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(BridgeWrapper, { basename });
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom)
@@ -201,7 +203,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            index.LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }

package/dist/{bridge-base-DxcR1fja.mjs → bridge-base-DRFFglgm.mjs}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Component, createElement, createContext } from "react";
-import { L as LoggerInstance, R as RouterContext } from "./index-Dm-M9ouh.mjs";
+import { L as LoggerInstance, R as RouterContext } from "./index-DyQNwY2M.mjs";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -139,7 +139,7 @@ function createBaseBridgeComponent({
           ...rootOptions
         };
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(
+        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React.createElement(
           ErrorBoundary,
           {
             FallbackComponent: fallback
@@ -149,16 +149,18 @@ function createBaseBridgeComponent({
             {
               appInfo: {
                 moduleName,
-                basename,
+                basename: basename2,
                 memoryRoute
               },
               propsInfo: {
                 ...propsInfo,
+                basename: basename2,
                 ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
               }
             }
           )
         );
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(BridgeWrapper, { basename });
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom)
@@ -184,7 +186,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }

package/dist/data-fetch-server-middleware.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-0HFFqmd4.js");
-const index_esm = require("./index.esm-CzoIcLts.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-server-middleware.es.js

@@ -1,5 +1,5 @@
-import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-BTpxHmva.mjs";
-import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-JLwyxgUK.mjs";
+import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-Bx_8GGd-.mjs";
+import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CPwSeCvw.mjs";
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyUtils = require("./utils-0HFFqmd4.js");
-const prefetch = require("./prefetch-NDhOcbO7.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const prefetch = require("./prefetch-CTmmXyx-.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
-import { x as DATA_FETCH_FUNCTION } from "./utils-BTpxHmva.mjs";
-import { C, b, e, h, c, d, r } from "./utils-BTpxHmva.mjs";
-import { d as dataFetchFunction } from "./prefetch-COMVhC39.mjs";
-import { i, p } from "./prefetch-COMVhC39.mjs";
+import { x as DATA_FETCH_FUNCTION } from "./utils-Bx_8GGd-.mjs";
+import { C, b, e, h, c, d, r } from "./utils-Bx_8GGd-.mjs";
+import { d as dataFetchFunction } from "./prefetch-D6cu5QUG.mjs";
+import { i, p } from "./prefetch-D6cu5QUG.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/{index-DqCpgmgH.js → index-DRSBaSu3.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index_esm = require("./index.esm-CzoIcLts.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 const RouterContext = React.createContext(null);
 const LoggerInstance = index_esm.createLogger(
   "[ Module Federation Bridge React ]"

package/dist/{index-Dm-M9ouh.mjs → index-DyQNwY2M.mjs}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { c as createLogger } from "./index.esm-JLwyxgUK.mjs";
+import { c as createLogger } from "./index.esm-CPwSeCvw.mjs";
 const RouterContext = React__default.createContext(null);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"

package/dist/index.cjs.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-Bn6DO0Fi.js");
+const bridgeBase = require("./bridge-base-B2malZDo.js");
 const ReactDOM = require("react-dom");
+const index = require("./index-DRSBaSu3.js");
 const React = require("react");
-const index = require("./index-DqCpgmgH.js");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-C-qNUGjT.js");
-const lazyUtils = require("./utils-0HFFqmd4.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-IOan5uEb.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-NDhOcbO7.js");
+const prefetch = require("./prefetch-CTmmXyx-.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -39,7 +39,7 @@ function createReact16Or17Root(container) {
         );
       }
       if (isReact18) {
-        console.warn(
+        index.LoggerInstance.warn(
           `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
         );
       }

package/dist/index.d.ts

@@ -134,7 +134,7 @@ export declare function generateKey(dataFetchOptions: DataFetchParams): string;
 
 export declare function lazyLoadComponentPlugin(): ModuleFederationRuntimePlugin;
 
-declare type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
+export declare type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
 
 export declare type NoSSRRemoteInfo = {
     name: string;
@@ -193,7 +193,7 @@ declare type ReactKey = {
 /**
  * Parameters for the remote component loader
  */
-declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
+export declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
     loader: () => Promise<T>;
     loading: React_2.ReactNode;
     fallback: React_2.ComponentType<{
@@ -206,7 +206,7 @@ declare interface RemoteComponentParams<T = Record<string, unknown>, E extends k
 /**
  * Parameters for the remote component
  */
-declare interface RemoteComponentProps<T = Record<string, unknown>> {
+export declare interface RemoteComponentProps<T = Record<string, unknown>> {
     props?: T;
     fallback?: React_2.ComponentType<{
         error: Error;
@@ -215,6 +215,29 @@ declare interface RemoteComponentProps<T = Record<string, unknown>> {
     [key: string]: unknown;
 }
 
+/**
+ * Interface for a remote module provider
+ */
+export declare interface RemoteModule {
+    provider: () => {
+        render: (info: RenderFnParams) => void;
+        destroy: (info: {
+            dom: any;
+        }) => void;
+    };
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
+export declare interface RenderFnParams extends ProviderParams {
+    dom: HTMLElement;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    [key: string]: unknown;
+}
+
 /**
  * Parameters for the render function
  */

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-DxcR1fja.mjs";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-DRFFglgm.mjs";
 import ReactDOM from "react-dom";
+import { L as LoggerInstance, p as pathJoin, g as getRootDomDefaultClassName } from "./index-DyQNwY2M.mjs";
 import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
-import { p as pathJoin, L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-Dm-M9ouh.mjs";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
-import { b, a, c, l } from "./lazy-load-component-plugin-Bcm5-gd8.mjs";
-import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-BTpxHmva.mjs";
+import { b, a, c, l } from "./lazy-load-component-plugin-ZkRCYTos.mjs";
+import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-Bx_8GGd-.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-COMVhC39.mjs";
+import { p } from "./prefetch-D6cu5QUG.mjs";
 function createReact16Or17Root(container) {
   return {
     render(children) {
@@ -20,7 +20,7 @@ function createReact16Or17Root(container) {
         );
       }
       if (isReact18) {
-        console.warn(
+        LoggerInstance.warn(
           `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
         );
       }

package/dist/{index.esm-CzoIcLts.js → index.esm-BWaKho-8.js}

@@ -44,6 +44,35 @@ const warn = (msg) => {
 };
 const PREFIX = "[ Module Federation ]";
 const DEFAULT_DELEGATE = console;
+const LOGGER_STACK_SKIP_TOKENS = [
+  "logger.ts",
+  "logger.js",
+  "captureStackTrace",
+  "Logger.emit",
+  "Logger.log",
+  "Logger.info",
+  "Logger.warn",
+  "Logger.error",
+  "Logger.debug"
+];
+function captureStackTrace() {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return void 0;
+    }
+    const [, ...rawLines] = stack.split("\n");
+    const filtered = rawLines.filter((line) => !LOGGER_STACK_SKIP_TOKENS.some((token) => line.includes(token)));
+    if (!filtered.length) {
+      return void 0;
+    }
+    const stackPreview = filtered.slice(0, 5).join("\n");
+    return `Stack trace:
+${stackPreview}`;
+  } catch {
+    return void 0;
+  }
+}
 class Logger {
   constructor(prefix, delegate = DEFAULT_DELEGATE) {
     this.prefix = prefix;
@@ -57,6 +86,9 @@ class Logger {
   }
   emit(method, args) {
     const delegate = this.delegate;
+    const debugMode = isDebugMode();
+    const stackTrace = debugMode ? captureStackTrace() : void 0;
+    const enrichedArgs = stackTrace ? [...args, stackTrace] : args;
     const order = (() => {
       switch (method) {
         case "log":
@@ -75,14 +107,14 @@ class Logger {
     for (const candidate of order) {
       const handler = delegate[candidate];
       if (typeof handler === "function") {
-        handler.call(delegate, this.prefix, ...args);
+        handler.call(delegate, this.prefix, ...enrichedArgs);
         return;
       }
     }
     for (const candidate of order) {
       const handler = DEFAULT_DELEGATE[candidate];
       if (typeof handler === "function") {
-        handler.call(DEFAULT_DELEGATE, this.prefix, ...args);
+        handler.call(DEFAULT_DELEGATE, this.prefix, ...enrichedArgs);
         return;
       }
     }

package/dist/{index.esm-JLwyxgUK.mjs → index.esm-CPwSeCvw.mjs}

@@ -43,6 +43,35 @@ const warn = (msg) => {
 };
 const PREFIX = "[ Module Federation ]";
 const DEFAULT_DELEGATE = console;
+const LOGGER_STACK_SKIP_TOKENS = [
+  "logger.ts",
+  "logger.js",
+  "captureStackTrace",
+  "Logger.emit",
+  "Logger.log",
+  "Logger.info",
+  "Logger.warn",
+  "Logger.error",
+  "Logger.debug"
+];
+function captureStackTrace() {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return void 0;
+    }
+    const [, ...rawLines] = stack.split("\n");
+    const filtered = rawLines.filter((line) => !LOGGER_STACK_SKIP_TOKENS.some((token) => line.includes(token)));
+    if (!filtered.length) {
+      return void 0;
+    }
+    const stackPreview = filtered.slice(0, 5).join("\n");
+    return `Stack trace:
+${stackPreview}`;
+  } catch {
+    return void 0;
+  }
+}
 class Logger {
   constructor(prefix, delegate = DEFAULT_DELEGATE) {
     this.prefix = prefix;
@@ -56,6 +85,9 @@ class Logger {
   }
   emit(method, args) {
     const delegate = this.delegate;
+    const debugMode = isDebugMode();
+    const stackTrace = debugMode ? captureStackTrace() : void 0;
+    const enrichedArgs = stackTrace ? [...args, stackTrace] : args;
     const order = (() => {
       switch (method) {
         case "log":
@@ -74,14 +106,14 @@ class Logger {
     for (const candidate of order) {
       const handler = delegate[candidate];
       if (typeof handler === "function") {
-        handler.call(delegate, this.prefix, ...args);
+        handler.call(delegate, this.prefix, ...enrichedArgs);
         return;
       }
     }
     for (const candidate of order) {
       const handler = DEFAULT_DELEGATE[candidate];
       if (typeof handler === "function") {
-        handler.call(DEFAULT_DELEGATE, this.prefix, ...args);
+        handler.call(DEFAULT_DELEGATE, this.prefix, ...enrichedArgs);
         return;
       }
     }

package/dist/{lazy-load-component-plugin-C-qNUGjT.js → lazy-load-component-plugin-IOan5uEb.js}

@@ -1,6 +1,6 @@
 "use strict";
-const prefetch = require("./prefetch-NDhOcbO7.js");
-const lazyUtils = require("./utils-0HFFqmd4.js");
+const prefetch = require("./prefetch-CTmmXyx-.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
 const React = require("react");
 const autoFetchData = () => {
   lazyUtils.initDataFetchMap();

package/dist/{lazy-load-component-plugin-Bcm5-gd8.mjs → lazy-load-component-plugin-ZkRCYTos.mjs}

@@ -1,5 +1,5 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-COMVhC39.mjs";
-import { i as initDataFetchMap, j as isDataLoaderExpose, k as getDataFetchInfo, m as getDataFetchMapKey, l as logger, n as getDataFetchItem, o as DATA_FETCH_CLIENT_SUFFIX, p as MF_DATA_FETCH_TYPE, q as isCSROnly, a as loadDataFetchModule, M as MF_DATA_FETCH_STATUS, g as getDataFetchMap, t as isServerEnv, u as getDataFetchIdWithErrorMsgs, v as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, x as DATA_FETCH_FUNCTION, y as getLoadedRemoteInfos, f as fetchData$1, z as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-BTpxHmva.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-D6cu5QUG.mjs";
+import { i as initDataFetchMap, j as isDataLoaderExpose, k as getDataFetchInfo, m as getDataFetchMapKey, l as logger, n as getDataFetchItem, o as DATA_FETCH_CLIENT_SUFFIX, p as MF_DATA_FETCH_TYPE, q as isCSROnly, a as loadDataFetchModule, M as MF_DATA_FETCH_STATUS, g as getDataFetchMap, t as isServerEnv, u as getDataFetchIdWithErrorMsgs, v as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, x as DATA_FETCH_FUNCTION, y as getLoadedRemoteInfos, f as fetchData$1, z as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-Bx_8GGd-.mjs";
 import React__default, { useRef, useState, Suspense, useEffect } from "react";
 const autoFetchData = () => {
   initDataFetchMap();

package/dist/lazy-load-component-plugin.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-C-qNUGjT.js");
-require("./prefetch-NDhOcbO7.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-IOan5uEb.js");
+require("./prefetch-CTmmXyx-.js");
 exports.default = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;

package/dist/lazy-load-component-plugin.es.js

@@ -1,5 +1,5 @@
-import { l, l as l2 } from "./lazy-load-component-plugin-Bcm5-gd8.mjs";
-import "./prefetch-COMVhC39.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-ZkRCYTos.mjs";
+import "./prefetch-D6cu5QUG.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/lazy-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./index.esm-CzoIcLts.js");
-const lazyUtils = require("./utils-0HFFqmd4.js");
+require("./index.esm-BWaKho-8.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
 exports.callAllDowngrade = lazyUtils.callAllDowngrade;
 exports.callDowngrade = lazyUtils.callDowngrade;
 exports.fetchData = lazyUtils.fetchData;

package/dist/lazy-utils.es.js

@@ -1,5 +1,5 @@
-import "./index.esm-JLwyxgUK.mjs";
-import { G, H, f, J, I, u, k, n, g, m, B, y, i, q, j, t, a, z, s, w } from "./utils-BTpxHmva.mjs";
+import "./index.esm-CPwSeCvw.mjs";
+import { G, H, f, J, I, u, k, n, g, m, B, y, i, q, j, t, a, z, s, w } from "./utils-Bx_8GGd-.mjs";
 export {
   G as callAllDowngrade,
   H as callDowngrade,

package/dist/{prefetch-NDhOcbO7.js → prefetch-CTmmXyx-.js}

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-0HFFqmd4.js");
-const index_esm = require("./index.esm-CzoIcLts.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 const dataFetchFunction = async function(options) {
   var _a, _b;
   const [id, data, downgrade] = options;
@@ -211,7 +211,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = index_esm.isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.20.0";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.1";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/{prefetch-COMVhC39.mjs → prefetch-D6cu5QUG.mjs}

@@ -1,5 +1,5 @@
-import { x as DATA_FETCH_FUNCTION, F as FS_HREF, l as logger$1, g as getDataFetchMap, i as initDataFetchMap, n as getDataFetchItem, M as MF_DATA_FETCH_STATUS, p as MF_DATA_FETCH_TYPE, A as DOWNGRADE_KEY, B as getDowngradeTag, G as callAllDowngrade, H as callDowngrade, k as getDataFetchInfo, m as getDataFetchMapKey } from "./utils-BTpxHmva.mjs";
-import { i as isDebugMode, a as createLink, b as createScript, d as isBrowserEnv, c as createLogger, e as composeKeyWithSeparator, l as loadScriptNode, f as loadScript } from "./index.esm-JLwyxgUK.mjs";
+import { x as DATA_FETCH_FUNCTION, F as FS_HREF, l as logger$1, g as getDataFetchMap, i as initDataFetchMap, n as getDataFetchItem, M as MF_DATA_FETCH_STATUS, p as MF_DATA_FETCH_TYPE, A as DOWNGRADE_KEY, B as getDowngradeTag, G as callAllDowngrade, H as callDowngrade, k as getDataFetchInfo, m as getDataFetchMapKey } from "./utils-Bx_8GGd-.mjs";
+import { i as isDebugMode, a as createLink, b as createScript, d as isBrowserEnv, c as createLogger, e as composeKeyWithSeparator, l as loadScriptNode, f as loadScript } from "./index.esm-CPwSeCvw.mjs";
 const dataFetchFunction = async function(options) {
   var _a, _b;
   const [id, data, downgrade] = options;
@@ -210,7 +210,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.20.0";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.1";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/router-v5.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const index = require("./index-DqCpgmgH.js");
+const index = require("./index-DRSBaSu3.js");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v5.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./index-Dm-M9ouh.mjs";
+import { R as RouterContext, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
 export * from "react-router-dom/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router-v6.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
-const index = require("./index-DqCpgmgH.js");
+const index = require("./index-DRSBaSu3.js");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v6.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./index-Dm-M9ouh.mjs";
+import { R as RouterContext, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
 export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router-v7.cjs.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactRouterDom = require("react-router");
+const index = require("./index-DRSBaSu3.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(index.RouterContext) || {};
+  index.LoggerInstance.debug(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React.createElement(
+      ReactRouterDom__namespace.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(index.RouterContext) || {};
+  const routers = router.routes;
+  index.LoggerInstance.debug(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+exports.BrowserRouter = WraperRouter;
+exports.RouterProvider = WraperRouterProvider;
+Object.keys(ReactRouterDom).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => ReactRouterDom[k]
+  });
+});

package/dist/router-v7.d.ts

@@ -0,0 +1,20 @@
+import { default as default_2 } from 'react';
+import * as ReactRouterDom from 'react-router';
+
+export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+
+export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
+
+
+export * from "react-router";
+
+export { }
+
+
+declare module '@module-federation/runtime-core' {
+    interface ModuleFederation {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}

package/dist/router-v7.es.js

@@ -0,0 +1,61 @@
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from 'react-router/dist/production/index.js';
+export * from 'react-router/dist/production/index.js';
+import { R as RouterContext, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.debug(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props
+  });
+  if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
+    return /* @__PURE__ */ React__default.createElement(
+      ReactRouterDom.MemoryRouter,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.debug(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router
+  });
+  const RouterProvider = ReactRouterDom["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const index = require("./index-DqCpgmgH.js");
+const index = require("./index-DRSBaSu3.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./index-Dm-M9ouh.mjs";
+import { R as RouterContext, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/dist/{utils-BTpxHmva.mjs → utils-Bx_8GGd-.mjs}

@@ -18,7 +18,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   }
 });
 var _a, _constructing, _b, _c, _max, _maxSize, _dispose, _disposeAfter, _fetchMethod, _memoMethod, _size, _calculatedSize, _keyMap, _keyList, _valList, _next, _prev, _head, _tail, _free, _disposed, _sizes, _starts, _ttls, _hasDispose, _hasFetchMethod, _hasDisposeAfter, _LRUCache_instances, initializeTTLTracking_fn, _updateItemAge, _statusTTL, _setItemTTL, _isStale, initializeSizeTracking_fn, _removeItemSize, _addItemSize, _requireSize, indexes_fn, rindexes_fn, isValidIndex_fn, evict_fn, backgroundFetch_fn, isBackgroundFetch_fn, connect_fn, moveToTail_fn, delete_fn, clear_fn;
-import { c as createLogger, d as isBrowserEnv, e as composeKeyWithSeparator } from "./index.esm-JLwyxgUK.mjs";
+import { c as createLogger, d as isBrowserEnv, e as composeKeyWithSeparator } from "./index.esm-CPwSeCvw.mjs";
 const PLUGIN_IDENTIFIER = "[ Module Federation React ]";
 const DOWNGRADE_KEY = "_mfSSRDowngrade";
 const DATA_FETCH_FUNCTION = "_mfDataFetch";

package/dist/{utils-0HFFqmd4.js → utils-tM9yE73c.js}

@@ -19,7 +19,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   }
 });
 var _a, _constructing, _b, _c, _max, _maxSize, _dispose, _disposeAfter, _fetchMethod, _memoMethod, _size, _calculatedSize, _keyMap, _keyList, _valList, _next, _prev, _head, _tail, _free, _disposed, _sizes, _starts, _ttls, _hasDispose, _hasFetchMethod, _hasDisposeAfter, _LRUCache_instances, initializeTTLTracking_fn, _updateItemAge, _statusTTL, _setItemTTL, _isStale, initializeSizeTracking_fn, _removeItemSize, _addItemSize, _requireSize, indexes_fn, rindexes_fn, isValidIndex_fn, evict_fn, backgroundFetch_fn, isBackgroundFetch_fn, connect_fn, moveToTail_fn, delete_fn, clear_fn;
-const index_esm = require("./index.esm-CzoIcLts.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 const PLUGIN_IDENTIFIER = "[ Module Federation React ]";
 const DOWNGRADE_KEY = "_mfSSRDowngrade";
 const DATA_FETCH_FUNCTION = "_mfDataFetch";

package/dist/v18.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-Bn6DO0Fi.js");
+const bridgeBase = require("./bridge-base-B2malZDo.js");
 function createReact18Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v18.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-DxcR1fja.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-DRFFglgm.mjs";
 function createReact18Root(container, options) {
   return createRoot(container, options);
 }

package/dist/v19.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-Bn6DO0Fi.js");
+const bridgeBase = require("./bridge-base-B2malZDo.js");
 function createReact19Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v19.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-DxcR1fja.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-DRFFglgm.mjs";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -51,6 +51,11 @@
       "import": "./dist/router-v6.es.js",
       "require": "./dist/router-v6.cjs.js"
     },
+    "./router-v7": {
+      "types": "./dist/router-v7.d.ts",
+      "import": "./dist/router-v7.es.js",
+      "require": "./dist/router-v7.cjs.js"
+    },
     "./lazy-utils": {
       "types": "./dist/lazy-utils.d.ts",
       "import": "./dist/lazy-utils.es.js",
@@ -95,13 +100,22 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/sdk": "0.20.0",
-    "@module-federation/bridge-shared": "0.20.0"
+    "@module-federation/sdk": "0.21.1",
+    "@module-federation/bridge-shared": "0.21.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": "^4 || ^5 || ^6 || ^7"
+    "react-router-dom": "^4 || ^5 || ^6 || ^7",
+    "react-router": "^7"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "react-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -114,12 +128,13 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
+    "react-router": "7.9.4",
     "typescript": "^5.2.2",
     "vite": "^5.4.20",
     "vite-plugin-dts": "^4.3.0",
     "hono": "3.12.12",
-    "@module-federation/runtime": "0.20.0",
-    "@module-federation/runtime-core": "0.20.0"
+    "@module-federation/runtime-core": "0.21.1",
+    "@module-federation/runtime": "0.21.1"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -7,6 +7,7 @@ export {
   createRemoteComponent,
   createRemoteAppComponent,
 } from './remote/create';
+export type { LazyRemoteComponentInfo } from './remote/create';
 export {
   ERROR_TYPE,
   createLazyComponent,
@@ -34,6 +35,10 @@ export type {
   RootType,
   DestroyParams,
   RenderParams,
+  RemoteComponentParams,
+  RenderFnParams,
+  RemoteComponentProps,
+  RemoteModule,
 } from './types';
 export type {
   DataFetchParams,

package/src/provider/versions/bridge-base.tsx

@@ -64,7 +64,7 @@ export function createBaseBridgeComponent<T>({
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
-        const rootComponentWithErrorBoundary = (
+        const BridgeWrapper = ({ basename }: { basename?: string }) => (
           <ErrorBoundary
             FallbackComponent={fallback as React.ComponentType<FallbackProps>}
           >
@@ -77,6 +77,7 @@ export function createBaseBridgeComponent<T>({
               propsInfo={
                 {
                   ...propsInfo,
+                  basename,
                   ...(beforeBridgeRenderRes as any)?.extraProps,
                 } as T
               }
@@ -84,6 +85,10 @@ export function createBaseBridgeComponent<T>({
           </ErrorBoundary>
         );
 
+        const rootComponentWithErrorBoundary = (
+          <BridgeWrapper basename={basename} />
+        );
+
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom),
@@ -111,7 +116,7 @@ export function createBaseBridgeComponent<T>({
           if ('unmount' in root) {
             root.unmount();
           } else {
-            console.warn('Root does not have unmount method');
+            LoggerInstance.warn('Root does not have unmount method');
           }
           rootMap.delete(dom);
         }

package/src/provider/versions/legacy.ts

@@ -5,6 +5,7 @@
 import type { ProviderFnParams } from '../../types';
 import { createBaseBridgeComponent } from './bridge-base';
 import ReactDOM from 'react-dom';
+import { LoggerInstance } from '../../utils';
 
 export interface CreateRootOptions {
   identifierPrefix?: string;
@@ -58,7 +59,7 @@ export function createReact16Or17Root(
        * Provide warning for React 18
        */
       if (isReact18) {
-        console.warn(
+        LoggerInstance.warn(
           `[Bridge-React] React 18 detected in legacy mode. ` +
             `For better compatibility, please use the version-specific import: ` +
             `import { createBridgeComponent } from '@module-federation/bridge-react/v18'`,

package/src/remote/create.tsx

@@ -8,7 +8,10 @@ import {
   RemoteModule,
 } from '../types';
 
-type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
+export type LazyRemoteComponentInfo<
+  T,
+  _E extends keyof T,
+> = RemoteComponentParams<T>;
 
 function createLazyRemoteComponent<
   T = Record<string, unknown>,

package/src/router/v7.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react';
+// The upper alias react-router$ into this file avoids the loop
+// React Router v7 uses different dist structure, we'll import from the main entry
+import * as ReactRouterDom from 'react-router';
+import { RouterContext } from '../provider/context';
+import { LoggerInstance } from '../utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.debug(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.debug(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+// Export all from react-router for v7 compatibility
+export * from 'react-router';
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/vite.config.ts

@@ -24,6 +24,7 @@ export default defineConfig({
         router: path.resolve(__dirname, 'src/router/default.tsx'),
         'router-v5': path.resolve(__dirname, 'src/router/v5.tsx'),
         'router-v6': path.resolve(__dirname, 'src/router/v6.tsx'),
+        'router-v7': path.resolve(__dirname, 'src/router/v7.tsx'),
         v18: path.resolve(__dirname, 'src/v18.ts'),
         v19: path.resolve(__dirname, 'src/v19.ts'),
         'lazy-load-component-plugin': path.resolve(
@@ -49,6 +50,12 @@ export default defineConfig({
         '@remix-run/router',
         /react-dom\/.*/,
         'react-router',
+        'react-router/',
+        'react-router/index.js',
+        'react-router/dist/index.js',
+        'react-router/dist/development/index.js',
+        'react-router/dist/production/index.js',
+        /^react-router\/.*/,
         'react-router-dom/',
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
@@ -67,6 +74,23 @@ export default defineConfig({
                 );
               }
 
+              if (fileName.includes('router-v7') && chunk.type === 'chunk') {
+                // Replace 'react-router' with the correct v7 dist path based on environment
+                const isProduction = process.env.NODE_ENV === 'production';
+                const distPath = isProduction
+                  ? 'react-router/dist/production/index.js'
+                  : 'react-router/dist/development/index.js';
+
+                chunk.code = chunk.code.replace(
+                  /from\s+['"`]react-router['"`]/g,
+                  `from '${distPath}'`,
+                );
+                chunk.code = chunk.code.replace(
+                  /export\s+\*\s+from\s+['"`]react-router['"`]/g,
+                  `export * from '${distPath}'`,
+                );
+              }
+
               if (fileName.includes('router-v5') && chunk.type === 'chunk') {
                 chunk.code = chunk.code.replace(
                   // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure