@module-federation/bridge-react 0.0.0-next-20250416061914 → 0.0.0-next-20250421062338

package/dist/index.es.js

@@ -1,10 +1,39 @@
-import * as React from "react";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-0CS6p-6-.js";
+import ReactDOM from "react-dom";
 import React__default, { forwardRef, useRef, useState, useEffect, useContext } from "react";
-import { E as ErrorBoundary } from "./react-error-boundary.esm-CMdlkNPP.js";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-Dbqf0szX.js";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin } from "./index-BlBMQSoq.js";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
-import ReactDOM from "react-dom";
+function createReact16Or17Root(container) {
+  return {
+    render(children) {
+      const reactVersion = ReactDOM.version || "";
+      const isReact18 = reactVersion.startsWith("18");
+      const isReact19 = reactVersion.startsWith("19");
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. Please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v19'`
+        );
+      }
+      if (isReact18) {
+        console.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'`
+        );
+      }
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    createRoot: createReact16Or17Root,
+    ...bridgeInfo
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
 function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
@@ -213,118 +242,6 @@ function createRemoteComponent(info) {
     );
   });
 }
-function defaultCreateRoot(container, options) {
-  const reactVersion = ReactDOM.version || "";
-  const isReact18 = reactVersion.startsWith("18");
-  if (isReact18) {
-    try {
-      return ReactDOM.createRoot(container, options);
-    } catch (e2) {
-      console.warn(
-        "Failed to use React 18 createRoot API, falling back to legacy API",
-        e2
-      );
-    }
-  }
-  return {
-    render(children) {
-      ReactDOM.render(children, container);
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container);
-    }
-  };
-}
-function createBridgeComponent({
-  createRoot = defaultCreateRoot,
-  defaultRootOptions,
-  ...bridgeInfo
-}) {
-  return () => {
-    const rootMap = /* @__PURE__ */ new Map();
-    const instance = federationRuntime.instance;
-    LoggerInstance.debug(
-      `createBridgeComponent instance from props >>>`,
-      instance
-    );
-    const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
-        bridgeInfo.rootComponent,
-        {
-          ...propsInfo,
-          basename,
-          ...restProps
-        }
-      ));
-    };
-    return {
-      async render(info) {
-        var _a, _b, _c, _d, _e, _f;
-        LoggerInstance.debug(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          rootOptions,
-          ...propsInfo
-        } = info;
-        const mergedRootOptions = {
-          ...defaultRootOptions,
-          ...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(
-          ErrorBoundary,
-          {
-            FallbackComponent: fallback
-          },
-          /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: {
-                ...propsInfo,
-                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-              }
-            }
-          )
-        );
-        let root = rootMap.get(dom);
-        if (!root) {
-          root = createRoot(dom, mergedRootOptions);
-          rootMap.set(dom, root);
-        }
-        if ("render" in root) {
-          root.render(rootComponentWithErrorBoundary);
-        }
-        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
-      },
-      destroy(info) {
-        var _a, _b, _c;
-        const { dom } = info;
-        LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
-        const root = rootMap.get(dom);
-        if (root) {
-          if ("unmount" in root) {
-            root.unmount();
-          } else {
-            ReactDOM.unmountComponentAtNode(dom);
-          }
-          rootMap.delete(dom);
-        }
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
-      }
-    };
-  };
-}
 export {
   createBridgeComponent,
   createRemoteComponent

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 context = require("./context-C79iMWYD.cjs");
+const index = require("./index-BYDWxFmi.cjs");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,8 +23,8 @@ function _interopNamespaceDefault(e) {
 const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom$1);
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
-  const routerContextProps = React.useContext(context.RouterContext) || {};
-  context.LoggerInstance.debug(`WraperRouter info >>>`, {
+  const routerContextProps = React.useContext(index.RouterContext) || {};
+  index.LoggerInstance.debug(`WraperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
     WraperRouterProps: props

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 "./context-Dbqf0szX.js";
+import { R as RouterContext, L as LoggerInstance } from "./index-BlBMQSoq.js";
 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 context = require("./context-C79iMWYD.cjs");
+const index = require("./index-BYDWxFmi.cjs");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,8 +23,8 @@ function _interopNamespaceDefault(e) {
 const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom$1);
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
-  const routerContextProps = React.useContext(context.RouterContext) || {};
-  context.LoggerInstance.debug(`WraperRouter info >>>`, {
+  const routerContextProps = React.useContext(index.RouterContext) || {};
+  index.LoggerInstance.debug(`WraperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
     WraperRouterProps: props
@@ -48,9 +48,9 @@ function WraperRouter(props) {
 }
 function WraperRouterProvider(props) {
   const { router, ...propsRes } = props;
-  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routerContextProps = React.useContext(index.RouterContext) || {};
   const routers = router.routes;
-  context.LoggerInstance.debug(`WraperRouterProvider info >>>`, {
+  index.LoggerInstance.debug(`WraperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
     WraperRouterProviderProps: props,

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 "./context-Dbqf0szX.js";
+import { R as RouterContext, L as LoggerInstance } from "./index-BlBMQSoq.js";
 export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

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 context = require("./context-C79iMWYD.cjs");
+const index = require("./index-BYDWxFmi.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -22,8 +22,8 @@ function _interopNamespaceDefault(e) {
 const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
-  const routerContextProps = React.useContext(context.RouterContext) || {};
-  context.LoggerInstance.debug(`WrapperRouter info >>>`, {
+  const routerContextProps = React.useContext(index.RouterContext) || {};
+  index.LoggerInstance.debug(`WrapperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
     WrapperRouterProps: props
@@ -47,9 +47,9 @@ function WrapperRouter(props) {
 }
 function WrapperRouterProvider(props) {
   const { router, ...propsRes } = props;
-  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routerContextProps = React.useContext(index.RouterContext) || {};
   const routers = router.routes;
-  context.LoggerInstance.debug(`WrapperRouterProvider info >>>`, {
+  index.LoggerInstance.debug(`WrapperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
     WrapperRouterProviderProps: props,

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 "./context-Dbqf0szX.js";
+import { R as RouterContext, L as LoggerInstance } from "./index-BlBMQSoq.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/dist/v18.cjs.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-BQcdOEoU.cjs");
+const bridgeBase = require("./bridge-base-DIOcSEVT.cjs");
 function createReact18Root(container, options) {
   return client.createRoot(container, options);
 }
 function createBridgeComponent(bridgeInfo) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
-    createRoot: createReact18Root
+    createRoot: createReact18Root,
+    ...bridgeInfo
   };
   return bridgeBase.createBaseBridgeComponent(fullBridgeInfo);
 }

package/dist/v18.es.js

@@ -1,12 +1,12 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-BbzPi965.js";
+import { c as createBaseBridgeComponent } from "./bridge-base-0CS6p-6-.js";
 function createReact18Root(container, options) {
   return createRoot(container, options);
 }
 function createBridgeComponent(bridgeInfo) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
-    createRoot: createReact18Root
+    createRoot: createReact18Root,
+    ...bridgeInfo
   };
   return createBaseBridgeComponent(fullBridgeInfo);
 }

package/dist/v19.cjs.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-BQcdOEoU.cjs");
+const bridgeBase = require("./bridge-base-DIOcSEVT.cjs");
 function createReact19Root(container, options) {
   return client.createRoot(container, options);
 }
 function createBridgeComponent(bridgeInfo) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
-    createRoot: createReact19Root
+    createRoot: createReact19Root,
+    ...bridgeInfo
   };
   return bridgeBase.createBaseBridgeComponent(fullBridgeInfo);
 }

package/dist/v19.es.js

@@ -1,12 +1,12 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-BbzPi965.js";
+import { c as createBaseBridgeComponent } from "./bridge-base-0CS6p-6-.js";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }
 function createBridgeComponent(bridgeInfo) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
-    createRoot: createReact19Root
+    createRoot: createReact19Root,
+    ...bridgeInfo
   };
   return createBaseBridgeComponent(fullBridgeInfo);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250416061914",
+  "version": "0.0.0-next-20250421062338",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,6 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
-    "./legacy": {
-      "types": "./dist/legacy.d.ts",
-      "import": "./dist/legacy.es.js",
-      "require": "./dist/legacy.cjs.js"
-    },
     "./v18": {
       "types": "./dist/v18.d.ts",
       "import": "./dist/v18.es.js",
@@ -60,8 +55,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250416061914",
-    "@module-federation/sdk": "0.0.0-next-20250416061914"
+    "@module-federation/bridge-shared": "0.0.0-next-20250421062338",
+    "@module-federation/sdk": "0.0.0-next-20250421062338"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -80,9 +75,9 @@
     "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
-    "vite": "^5.4.12",
+    "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250416061914"
+    "@module-federation/runtime": "0.0.0-next-20250421062338"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -1,8 +1,14 @@
+/**
+ * Entry point for React 16/17 (legacy) specific bridge components
+ * This file provides support for React 16 and 17 versions, using the traditional ReactDOM.render API
+ */
+export { createBridgeComponent } from './provider/versions/legacy';
 export { createRemoteComponent } from './remote/create';
-export { createBridgeComponent } from './provider/create';
+export type { CreateRootOptions, Root } from './provider/versions/legacy';
 export type {
   ProviderParams,
-  RenderFnParams,
+  ProviderFnParams,
+  RootType,
   DestroyParams,
   RenderParams,
 } from './types';

package/src/provider/versions/legacy.ts

@@ -16,11 +16,55 @@ export interface Root {
   unmount(): void;
 }
 
+/**
+ * Default createRoot function that automatically detects React version and uses the appropriate API(only support React 16/17, 18)
+ *
+ * Note: Users can also directly import version-specific bridge components:
+ * - import { createBridgeComponent } from '@module-federation/bridge-react'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v18'
+ * - import { createBridgeComponent } from '@module-federation/bridge-react/v19'
+ */
+
 export function createReact16Or17Root(
   container: Element | DocumentFragment,
 ): Root {
   return {
     render(children: React.ReactNode) {
+      /**
+       * Detect React version
+       */
+      const reactVersion = ReactDOM.version || '';
+      const isReact18 = reactVersion.startsWith('18');
+      const isReact19 = reactVersion.startsWith('19');
+
+      /**
+       * Throw error for React 19
+       *
+       * Note: Due to Module Federation sharing mechanism, the actual version detected here
+       * might be 18 or 19, even if the application itself uses React 16/17.
+       * This happens because in MF environments, different remote modules may share different React versions.
+       * The console may throw warnings about version and API mismatches. If you need to resolve these issues,
+       * consider disabling the shared configuration for React.
+       */
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. ` +
+            `Please use the version-specific import: ` +
+            `import { createBridgeComponent } from '@module-federation/bridge-react/v19'`,
+        );
+      }
+
+      /**
+       * Provide warning for React 18
+       */
+      if (isReact18) {
+        console.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'`,
+        );
+      }
+
       // @ts-ignore - React 17's render method is deprecated but still functional
       ReactDOM.render(children, container);
     },
@@ -34,8 +78,8 @@ export function createBridgeComponent<T = any>(
   bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
 ) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
     createRoot: createReact16Or17Root,
+    ...bridgeInfo,
   } as unknown as ProviderFnParams<T>;
 
   return createBaseBridgeComponent(fullBridgeInfo);

package/src/provider/versions/v18.ts

@@ -39,8 +39,8 @@ export function createBridgeComponent<T = any>(
   bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
 ) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
     createRoot: createReact18Root,
+    ...bridgeInfo,
   } as unknown as ProviderFnParams<T>;
 
   return createBaseBridgeComponent(fullBridgeInfo);

package/src/provider/versions/v19.ts

@@ -40,8 +40,8 @@ export function createBridgeComponent<T = any>(
   bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
 ) {
   const fullBridgeInfo = {
-    ...bridgeInfo,
     createRoot: createReact19Root,
+    ...bridgeInfo,
   } as unknown as ProviderFnParams<T>;
 
   return createBaseBridgeComponent(fullBridgeInfo);

package/vite.config.ts

@@ -24,8 +24,6 @@ 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'),
-        v16: path.resolve(__dirname, 'src/legacy.ts'),
-        legacy: path.resolve(__dirname, 'src/legacy.ts'),
         v18: path.resolve(__dirname, 'src/v18.ts'),
         v19: path.resolve(__dirname, 'src/v19.ts'),
       },

package/dist/legacy.cjs.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const v16 = require("./v16.cjs.js");
-exports.createBridgeComponent = v16.createBridgeComponent;

package/dist/legacy.d.ts

@@ -1,104 +0,0 @@
-import * as React_2 from 'react';
-
-export declare function createBridgeComponent<T = any>(bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>): () => {
-    render(info: RenderParams): Promise<void>;
-    destroy(info: DestroyParams): void;
-};
-
-export declare interface CreateRootOptions {
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
-}
-
-/**
- * Options for creating a React root
- */
-declare interface CreateRootOptions_2 {
-    identifierPrefix?: string;
-    onRecoverableError?: (error: unknown) => void;
-    transitionCallbacks?: unknown;
-}
-
-/**
- * Parameters for the destroy function
- */
-export declare interface DestroyParams {
-    moduleName: string;
-    dom: HTMLElement;
-}
-
-/**
- * Parameters for the provider function
- */
-export declare interface ProviderFnParams<T> {
-    rootComponent: React_2.ComponentType<T>;
-    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
-    createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions_2) => Root_2;
-    /**
-     * Default options to pass to createRoot for React 18 and 19
-     * These options will be used when creating a root unless overridden by rootOptions in render params
-     * @example
-     * {
-     *   identifierPrefix: 'app-',
-     *   onRecoverableError: (err) => console.error(err)
-     * }
-     */
-    defaultRootOptions?: CreateRootOptions_2;
-}
-
-/**
- * Parameters for the provider function
- */
-export declare interface ProviderParams {
-    moduleName?: string;
-    basename?: string;
-    memoryRoute?: {
-        entryPath: string;
-        initialState?: Record<string, unknown>;
-    };
-    style?: React_2.CSSProperties;
-    className?: string;
-}
-
-/**
- * Parameters for the render function
- */
-export declare interface RenderParams {
-    moduleName?: string;
-    basename?: string;
-    memoryRoute?: {
-        entryPath: string;
-        initialState?: Record<string, unknown>;
-    };
-    dom: HTMLElement;
-    /**
-     * Options to pass to createRoot for React 18 and 19
-     * @example
-     * {
-     *   identifierPrefix: 'app-',
-     *   onRecoverableError: (err) => console.error(err)
-     * }
-     */
-    rootOptions?: CreateRootOptions_2;
-    [key: string]: unknown;
-}
-
-export declare interface Root {
-    render(children: React.ReactNode): void;
-    unmount(): void;
-}
-
-/**
- * Interface for a React root object
- */
-declare interface Root_2 {
-    render(children: React_2.ReactNode): void;
-    unmount(): void;
-}
-
-/**
- * Type for a root element, which can be either an HTMLElement or a React root
- */
-export declare type RootType = HTMLElement | Root_2;
-
-export { }

package/dist/legacy.es.js

@@ -1,4 +0,0 @@
-import { createBridgeComponent } from "./v16.es.js";
-export {
-  createBridgeComponent
-};