@module-federation/bridge-react 0.0.0-next-20250925034616 → 0.0.0-perf-devtools-20260106124142

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-eN2xRRXs.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-rAO0Wr0M.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-eN2xRRXs.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-rAO0Wr0M.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-VSOJTX_o.mjs → utils-dUgb9Jkm.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, i as isBrowserEnv, a as composeKeyWithSeparator } from "./index.esm-CtI0uQUR.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";
@@ -1987,14 +1987,14 @@ export {
   flushDataFetch as J,
   LOAD_REMOTE_ERROR_PREFIX as L,
   MF_DATA_FETCH_STATUS as M,
-  loadDataFetchModule as a,
-  CacheTime as b,
+  CacheTime as a,
+  cache as b,
   configureCache as c,
-  generateKey as d,
-  cache as e,
+  clearStore as d,
+  getDataFetchMap as e,
   fetchData as f,
-  getDataFetchMap as g,
-  clearStore as h,
+  generateKey as g,
+  loadDataFetchModule as h,
   initDataFetchMap as i,
   isDataLoaderExpose as j,
   getDataFetchInfo as k,

package/dist/{utils-vIpCrZmn.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-Ju4RY-yW.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-Ds850AOx.js");
+const bridgeBase = require("./bridge-base-RStDxH71.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-BwHtOqw_.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-CPSTBjEp.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-Ds850AOx.js");
+const bridgeBase = require("./bridge-base-RStDxH71.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-BwHtOqw_.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-CPSTBjEp.mjs";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250925034616",
+  "version": "0.0.0-perf-devtools-20260106124142",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -21,6 +21,11 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
+    "./base": {
+      "types": "./dist/base.d.ts",
+      "import": "./dist/base.es.js",
+      "require": "./dist/base.cjs.js"
+    },
     "./v18": {
       "types": "./dist/v18.d.ts",
       "import": "./dist/v18.es.js",
@@ -39,7 +44,7 @@
     "./plugin": {
       "types": "./dist/plugin.d.ts",
       "import": "./dist/plugin.es.js",
-      "require": "./dist/plugin.es.js"
+      "require": "./dist/plugin.cjs.js"
     },
     "./router-v5": {
       "types": "./dist/router-v5.d.ts",
@@ -51,6 +56,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",
@@ -76,7 +86,31 @@
   "typesVersions": {
     "*": {
       ".": [
-        "./dist/types/index.d.ts"
+        "./dist/index.d.ts"
+      ],
+      "base": [
+        "./dist/base.d.ts"
+      ],
+      "v18": [
+        "./dist/v18.d.ts"
+      ],
+      "v19": [
+        "./dist/v19.d.ts"
+      ],
+      "router": [
+        "./dist/router.d.ts"
+      ],
+      "plugin": [
+        "./dist/plugin.d.ts"
+      ],
+      "router-v5": [
+        "./dist/router-v5.d.ts"
+      ],
+      "router-v6": [
+        "./dist/router-v6.d.ts"
+      ],
+      "router-v7": [
+        "./dist/router-v7.d.ts"
       ],
       "lazy-load-component-plugin": [
         "./dist/lazy-load-component-plugin.d.ts"
@@ -95,13 +129,22 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/sdk": "0.0.0-next-20250925034616",
-    "@module-federation/bridge-shared": "0.0.0-next-20250925034616"
+    "@module-federation/bridge-shared": "0.0.0-perf-devtools-20260106124142",
+    "@module-federation/sdk": "0.0.0-perf-devtools-20260106124142"
   },
   "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": "^6 || ^7"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "react-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
@@ -114,12 +157,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.18",
+    "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
-    "hono": "3.12.12",
-    "@module-federation/runtime": "0.0.0-next-20250925034616",
-    "@module-federation/runtime-core": "0.0.0-next-20250925034616"
+    "hono": "4.10.3",
+    "@module-federation/runtime-core": "0.0.0-perf-devtools-20260106124142",
+    "@module-federation/runtime": "0.0.0-perf-devtools-20260106124142"
   },
   "scripts": {
     "dev": "vite",

package/src/base.ts

@@ -0,0 +1,50 @@
+export { createBridgeComponent } from './provider/versions/legacy';
+
+// Export router-free versions of remote component creators
+export {
+  createRemoteComponent,
+  createRemoteAppComponent,
+} from './remote/base-component';
+export type { LazyRemoteComponentInfo } from './remote/base-component';
+
+// Export all lazy loading and data fetching utilities (no router dependencies)
+export {
+  ERROR_TYPE,
+  createLazyComponent,
+  collectSSRAssets,
+  callDataFetch,
+  setSSREnv,
+  autoFetchDataPlugin,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './lazy';
+
+export { lazyLoadComponentPlugin } from './plugins/lazy-load-component-plugin';
+
+// Export all types
+export type { CreateRootOptions, Root } from './provider/versions/legacy';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+  RemoteComponentParams,
+  RenderFnParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from './types';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateLazyComponentOptions,
+  CacheStatus,
+  CacheStatsInfo,
+} from './lazy';

package/src/index.ts

@@ -6,7 +6,8 @@ export { createBridgeComponent } from './provider/versions/legacy';
 export {
   createRemoteComponent,
   createRemoteAppComponent,
-} from './remote/create';
+} from './remote/router-component';
+export type { LazyRemoteComponentInfo } from './remote/router-component';
 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

@@ -43,6 +43,38 @@ export function createBaseBridgeComponent<T>({
       );
     };
 
+    const DefaultFallback = ({ error }: FallbackProps) => (
+      <div role="alert">
+        <p>Something went wrong:</p>
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+      </div>
+    );
+
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback,
+    }: {
+      basename?: string;
+      moduleName?: string;
+      memoryRoute?: any;
+      propsInfo: T;
+      fallback?: React.ComponentType<FallbackProps>;
+    }) => (
+      <ErrorBoundary FallbackComponent={fallback || DefaultFallback}>
+        <RawComponent
+          appInfo={{
+            moduleName,
+            basename,
+            memoryRoute,
+          }}
+          propsInfo={propsInfo}
+        />
+      </ErrorBoundary>
+    );
+
     return {
       async render(info: RenderParams) {
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
@@ -65,23 +97,19 @@ export function createBaseBridgeComponent<T>({
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
         const rootComponentWithErrorBoundary = (
-          <ErrorBoundary
-            FallbackComponent={fallback as React.ComponentType<FallbackProps>}
-          >
-            <RawComponent
-              appInfo={{
-                moduleName,
+          <BridgeWrapper
+            basename={basename}
+            moduleName={moduleName}
+            memoryRoute={memoryRoute}
+            fallback={fallback as React.ComponentType<FallbackProps>}
+            propsInfo={
+              {
+                ...propsInfo,
                 basename,
-                memoryRoute,
-              }}
-              propsInfo={
-                {
-                  ...propsInfo,
-                  ...(beforeBridgeRenderRes as any)?.extraProps,
-                } as T
-              }
-            />
-          </ErrorBoundary>
+                ...(beforeBridgeRenderRes as any)?.extraProps,
+              } as T
+            }
+          />
         );
 
         if (bridgeInfo.render) {
@@ -111,7 +139,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'`,