@module-federation/bridge-react 0.0.0-next-20250410121036 → 0.0.0-next-20250411200445

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250410121036",
+  "version": "0.0.0-next-20250411200445",
   "publishConfig": {
     "access": "public"
   },
@@ -21,21 +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",
-      "require": "./dist/v18.cjs.js"
-    },
-    "./v19": {
-      "types": "./dist/v19.d.ts",
-      "import": "./dist/v19.es.js",
-      "require": "./dist/v19.cjs.js"
-    },
     "./router": {
       "types": "./dist/router.d.ts",
       "import": "./dist/router.es.js",
@@ -60,8 +45,8 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250410121036",
-    "@module-federation/sdk": "0.0.0-next-20250410121036"
+    "@module-federation/bridge-shared": "0.0.0-next-20250411200445",
+    "@module-federation/sdk": "0.0.0-next-20250411200445"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -82,7 +67,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.12",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250410121036"
+    "@module-federation/runtime": "0.0.0-next-20250411200445"
   },
   "scripts": {
     "dev": "vite",

package/src/index.ts

@@ -6,9 +6,3 @@ export type {
   DestroyParams,
   RenderParams,
 } from './types';
-
-// 注意：对于特定React版本的支持，请使用以下导入路径：
-// - React 16/17: import { createBridgeComponent } from '@module-federation/bridge-react/legacy'
-// - React 18: import { createBridgeComponent } from '@module-federation/bridge-react/v18'
-// - React 19: import { createBridgeComponent } from '@module-federation/bridge-react/v19'
-// export * from './legacy';

package/src/provider/compat.ts

@@ -0,0 +1,60 @@
+import ReactDOM from 'react-dom';
+import { CreateRootOptions, Root } from '../types';
+
+// ReactDOM.version is only available in React 16.13.0 and later
+const isReact18 = ReactDOM.version?.startsWith('18');
+
+/**
+ * Creates a root for a container element compatible with both React 16 and 18
+ */
+export function createRoot(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  if (isReact18) {
+    // For React 18, use the new createRoot API
+    // @ts-ignore - Types will be available in React 18
+    return (ReactDOM as any).createRoot(container, options);
+  }
+
+  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
+  return {
+    render(children: React.ReactNode) {
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}
+
+/**
+ * Hydrates a container compatible with both React 16 and 18
+ */
+export function hydrateRoot(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+): Root {
+  if (isReact18) {
+    // For React 18, use the new hydrateRoot API
+    // @ts-ignore - Types will be available in React 18
+    return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
+  }
+
+  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
+  return {
+    render(children: React.ReactNode) {
+      // For the initial render, use hydrate
+      if (children === initialChildren) {
+        ReactDOM.hydrate(children, container);
+      } else {
+        // For subsequent renders, use regular render
+        ReactDOM.render(children, container);
+      }
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}

package/src/provider/create.tsx

@@ -6,63 +6,15 @@ import type {
   RootType,
   DestroyParams,
   RenderParams,
-  CreateRootOptions,
 } from '../types';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
 import { LoggerInstance } from '../utils';
 import { federationRuntime } from './plugin';
+import { createRoot as defaultCreateRoot } from './compat';
 
-/**
- * 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/legacy'
- * - import { createBridgeComponent } from '@module-federation/bridge-react/v18'
- * - import { createBridgeComponent } from '@module-federation/bridge-react/v19'
- */
-function defaultCreateRoot(
-  container: Element | DocumentFragment,
-  options?: CreateRootOptions,
-): {
-  render(children: React.ReactNode): void;
-  unmount(): void;
-} {
-  const reactVersion = ReactDOM.version || '';
-  const isReact18 = reactVersion.startsWith('18');
-
-  // For React 18, use createRoot API
-  if (isReact18) {
-    try {
-      // @ts-ignore - Types will be available in React 18
-      return (ReactDOM as any).createRoot(container, options);
-    } catch (e) {
-      console.warn(
-        'Failed to use React 18 createRoot API, falling back to legacy API',
-        e,
-      );
-    }
-  }
-
-  // For React 16/17, use legacy API
-  return {
-    render(children: React.ReactNode) {
-      // @ts-ignore - React 17's render method is deprecated but still functional
-      ReactDOM.render(children, container);
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container as Element);
-    },
-  };
-}
-
-/**
- * Creates a bridge component factory that automatically detects and uses
- * the appropriate React version (16/17, 18, or 19)
- */
 export function createBridgeComponent<T>({
   createRoot = defaultCreateRoot,
-  defaultRootOptions,
   ...bridgeInfo
 }: ProviderFnParams<T>) {
   return () => {
@@ -96,23 +48,14 @@ export function createBridgeComponent<T>({
           basename,
           memoryRoute,
           fallback,
-          rootOptions,
           ...propsInfo
         } = info;
 
-        // Merge default root options with render-specific root options
-        const mergedRootOptions: CreateRootOptions | undefined = {
-          ...defaultRootOptions,
-          ...(rootOptions as CreateRootOptions),
-        };
-
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
         const rootComponentWithErrorBoundary = (
-          <ErrorBoundary
-            FallbackComponent={fallback as React.ComponentType<FallbackProps>}
-          >
+          <ErrorBoundary FallbackComponent={fallback}>
             <RawComponent
               appInfo={{
                 moduleName,
@@ -120,25 +63,29 @@ export function createBridgeComponent<T>({
                 memoryRoute,
               }}
               propsInfo={
-                {
-                  ...propsInfo,
-                  ...(beforeBridgeRenderRes as any)?.extraProps,
-                } as T
+                { ...propsInfo, ...beforeBridgeRenderRes?.extraProps } as T
               }
             />
           </ErrorBoundary>
         );
 
-        let root = rootMap.get(dom);
-        // Do not call createRoot multiple times
-        if (!root) {
-          root = createRoot(dom, mergedRootOptions);
-          rootMap.set(dom, root);
-        }
+        if (bridgeInfo.render) {
+          await Promise.resolve(
+            bridgeInfo.render(rootComponentWithErrorBoundary, dom),
+          ).then((root: RootType) => rootMap.set(dom, root));
+        } else {
+          let root = rootMap.get(dom);
+          // do not call createRoot multiple times
+          if (!root) {
+            root = createRoot(dom);
+            rootMap.set(dom, root);
+          }
 
-        if ('render' in root) {
-          root.render(rootComponentWithErrorBoundary);
+          if ('render' in root) {
+            root.render(rootComponentWithErrorBoundary);
+          }
         }
+
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
@@ -150,7 +97,7 @@ export function createBridgeComponent<T>({
           if ('unmount' in root) {
             root.unmount();
           } else {
-            ReactDOM.unmountComponentAtNode(dom as HTMLElement);
+            ReactDOM.unmountComponentAtNode(root as HTMLElement);
           }
           rootMap.delete(dom);
         }

package/src/remote/create.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
 import { LoggerInstance } from '../utils';
 import RemoteApp from './component';
 import {
@@ -77,9 +77,7 @@ export function createRemoteComponent<
   const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef<HTMLDivElement, RemoteComponentProps>((props, ref) => {
     return (
-      <ErrorBoundary
-        FallbackComponent={info.fallback as React.ComponentType<FallbackProps>}
-      >
+      <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
           <LazyComponent {...props} ref={ref} />
         </React.Suspense>

package/src/types.ts

@@ -34,15 +34,6 @@ export interface RenderParams {
     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;
   [key: string]: unknown;
 }
 
@@ -90,16 +81,6 @@ export interface ProviderFnParams<T> {
     container: Element | DocumentFragment,
     options?: CreateRootOptions,
   ) => Root;
-  /**
-   * 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;
 }
 
 /**

package/src/utils/index.ts

@@ -1,9 +1,29 @@
+import React from 'react';
 import { createLogger } from '@module-federation/sdk';
 
 export const LoggerInstance = createLogger(
   '[ Module Federation Bridge React ]',
 );
 
+type typeReact = typeof React;
+
+export function atLeastReact18(React: typeReact) {
+  if (
+    React &&
+    typeof React.version === 'string' &&
+    React.version.indexOf('.') >= 0
+  ) {
+    const majorVersionString = React.version.split('.')[0];
+    try {
+      return Number(majorVersionString) >= 18;
+    } catch (err) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
 export function pathJoin(...args: string[]) {
   const res = args.reduce((res, path: string) => {
     let nPath = path;

package/vite.config.ts

@@ -4,53 +4,17 @@ import path from 'path';
 import dts from 'vite-plugin-dts';
 // import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
-import fs from 'fs';
 
 const perDepsKeys = Object.keys(packageJson.peerDependencies);
 
 export default defineConfig({
   plugins: [
-    // 添加我们的自定义插件
     dts({
       rollupTypes: true,
       bundledPackages: [
         '@module-federation/bridge-shared',
         'react-error-boundary',
       ],
-      // 自定义类型声明文件的输出路径
-      afterBuild: () => {
-        // 确保provider目录存在
-        if (!fs.existsSync('dist/provider')) {
-          fs.mkdirSync('dist/provider', { recursive: true });
-        }
-
-        // 复制src/provider/versions中的类型声明文件到dist/provider目录
-        const srcDir = path.resolve(__dirname, 'dist/provider/versions');
-        const destDir = path.resolve(__dirname, 'dist/provider');
-
-        if (fs.existsSync(srcDir)) {
-          // 读取srcDir中的所有文件
-          const files = fs.readdirSync(srcDir);
-
-          // 复制每个v*.d.ts文件到destDir
-          files.forEach((file) => {
-            if (file.match(/^v\d+\.d\.ts$/)) {
-              const srcFile = path.join(srcDir, file);
-              const destFile = path.join(destDir, file);
-
-              // 读取源文件内容
-              const content = fs.readFileSync(srcFile, 'utf8');
-
-              // 写入目标文件
-              fs.writeFileSync(destFile, content);
-
-              console.log(`Copied ${srcFile} to ${destFile}`);
-            }
-          });
-        } else {
-          console.warn(`Source directory ${srcDir} does not exist.`);
-        }
-      },
     }),
   ],
   build: {
@@ -61,10 +25,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'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -79,20 +39,6 @@ export default defineConfig({
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
       ],
-      output: {
-        // 将共享chunk文件放在internal目录下，并使用更清晰的命名
-        chunkFileNames: (chunkInfo) => {
-          // 根据chunk的名称或内容确定一个更有意义的名称
-          const name = chunkInfo.name;
-          if (name.includes('context')) {
-            return 'internal/context.[format].js';
-          }
-          if (name.includes('version-specific')) {
-            return 'internal/version-specific.[format].js';
-          }
-          return 'internal/[name]-[hash].[format].js';
-        },
-      },
       plugins: [
         {
           name: 'modify-output-plugin',

package/dist/internal/bridge-base-CW88-1Be.es.js

@@ -1,103 +0,0 @@
-import * as React from "react";
-import { E as ErrorBoundary } from "./react-error-boundary.esm-CMdlkNPP.es.js";
-import { L as LoggerInstance, R as RouterContext } from "./context.es.js";
-import { federationRuntime } from "../plugin.es.js";
-function createBaseBridgeComponent({
-  createRoot,
-  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
-              }
-            }
-          )
-        );
-        if (bridgeInfo.render) {
-          await Promise.resolve(
-            bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-          ).then((root) => rootMap.set(dom, root));
-        } else {
-          let root = rootMap.get(dom);
-          if (!root && createRoot) {
-            root = createRoot(dom, mergedRootOptions);
-            rootMap.set(dom, root);
-          }
-          if (root && "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 {
-            console.warn("Root does not have unmount method");
-          }
-          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 {
-  createBaseBridgeComponent as c
-};