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

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

@@ -0,0 +1,122 @@
+/**
+ * Base bridge component implementation
+ * This file contains bridge component logic shared across all React versions
+ */
+import * as React from 'react';
+import type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+  CreateRootOptions,
+} from '../../types';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { RouterContext } from '../context';
+import { LoggerInstance } from '../../utils';
+import { federationRuntime } from '../plugin';
+
+export function createBaseBridgeComponent<T>({
+  createRoot,
+  defaultRootOptions,
+  ...bridgeInfo
+}: ProviderFnParams<T>) {
+  return () => {
+    const rootMap = new Map<any, RootType>();
+    const instance = federationRuntime.instance;
+    LoggerInstance.debug(
+      `createBridgeComponent instance from props >>>`,
+      instance,
+    );
+
+    const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = '/' } = appInfo;
+      return (
+        <RouterContext.Provider value={{ moduleName, basename, memoryRoute }}>
+          <bridgeInfo.rootComponent
+            {...propsInfo}
+            basename={basename}
+            {...restProps}
+          />
+        </RouterContext.Provider>
+      );
+    };
+
+    return {
+      async render(info: RenderParams) {
+        LoggerInstance.debug(`createBridgeComponent render Info`, info);
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          fallback,
+          rootOptions,
+          ...propsInfo
+        } = info;
+
+        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>}
+          >
+            <RawComponent
+              appInfo={{
+                moduleName,
+                basename,
+                memoryRoute,
+              }}
+              propsInfo={
+                {
+                  ...propsInfo,
+                  ...(beforeBridgeRenderRes as any)?.extraProps,
+                } as T
+              }
+            />
+          </ErrorBoundary>
+        );
+
+        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 && createRoot) {
+            root = createRoot(dom, mergedRootOptions);
+            rootMap.set(dom, root as any);
+          }
+
+          if (root && 'render' in root) {
+            root.render(rootComponentWithErrorBoundary);
+          }
+        }
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
+      },
+
+      destroy(info: DestroyParams) {
+        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);
+        }
+        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+      },
+    };
+  };
+}

package/src/provider/versions/legacy.ts

@@ -0,0 +1,42 @@
+/**
+ * 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
+ */
+import type { ProviderFnParams } from '../../types';
+import { createBaseBridgeComponent } from './bridge-base';
+import ReactDOM from 'react-dom';
+
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+export function createReact16Or17Root(
+  container: Element | DocumentFragment,
+): Root {
+  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);
+    },
+  };
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact16Or17Root,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/provider/versions/v18.ts

@@ -0,0 +1,47 @@
+/**
+ * Entry point for React 18 specific bridge components
+ */
+import React from 'react';
+import { createRoot as createReactRoot, hydrateRoot } from 'react-dom/client';
+import { createBaseBridgeComponent } from './bridge-base';
+import type { ProviderFnParams } from '../../types';
+
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+export function createReact18Root(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  return createReactRoot(container, options);
+}
+
+export function hydrateReact18Root(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+) {
+  return hydrateRoot(
+    container as Element,
+    initialChildren as React.ReactElement,
+    options,
+  );
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact18Root,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/provider/versions/v19.ts

@@ -0,0 +1,48 @@
+/**
+ * Entry point for React 19 specific bridge components
+ * This file provides support for React 19 version, using the new ReactDOM.createRoot API
+ */
+import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { createBaseBridgeComponent } from './bridge-base';
+import type { ProviderFnParams } from '../../types';
+export interface CreateRootOptions {
+  identifierPrefix?: string;
+  onRecoverableError?: (error: unknown, errorInfo: unknown) => void;
+  transitionCallbacks?: unknown;
+}
+
+export interface Root {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+export function createReact19Root(
+  container: Element | DocumentFragment,
+  options?: CreateRootOptions,
+): Root {
+  return createRoot(container as Element, options);
+}
+
+export function hydrateReact19Root(
+  container: Element | DocumentFragment,
+  initialChildren: React.ReactNode,
+  options?: CreateRootOptions,
+): Root {
+  return hydrateRoot(
+    container as Element,
+    initialChildren as React.ReactElement,
+    options,
+  );
+}
+
+export function createBridgeComponent<T = any>(
+  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>,
+) {
+  const fullBridgeInfo = {
+    ...bridgeInfo,
+    createRoot: createReact19Root,
+  } as unknown as ProviderFnParams<T>;
+
+  return createBaseBridgeComponent(fullBridgeInfo);
+}

package/src/remote/create.tsx

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

package/src/types.ts

@@ -34,6 +34,15 @@ 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;
 }
 
@@ -81,6 +90,16 @@ 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,29 +1,9 @@
-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/src/v18.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v18';
+export type { CreateRootOptions, Root } from './provider/versions/v18';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/src/v19.ts

@@ -0,0 +1,9 @@
+export { createBridgeComponent } from './provider/versions/v19';
+export type { CreateRootOptions, Root } from './provider/versions/v19';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+} from './types';

package/vite.config.ts

@@ -4,17 +4,53 @@ 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: {
@@ -25,6 +61,10 @@ 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`,
@@ -39,6 +79,20 @@ 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/src/provider/compat.ts

@@ -1,60 +0,0 @@
-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);
-    },
-  };
-}