}) {
+ return life cycle render {props?.msg}
;
+ }
+ const BridgeComponent = createBridgeComponent({
+ rootComponent: Component,
+ createRoot: () => {
+ return {
+ render: renderMock,
+ unmount: vi.fn(),
+ };
+ },
+ });
+ const RemoteComponent = createRemoteComponent({
+ loader: async () => {
+ return {
+ default: BridgeComponent,
+ };
+ },
+ fallback: () => ,
+ loading: loading
,
+ });
+
+ const { container } = render();
+ expect(getHtml(container)).toMatch('loading');
+
+ await sleep(200);
+ expect(renderMock).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/bridge/bridge-react/src/index.ts b/packages/bridge/bridge-react/src/index.ts
index 146de283507..6f61382ce25 100644
--- a/packages/bridge/bridge-react/src/index.ts
+++ b/packages/bridge/bridge-react/src/index.ts
@@ -1,6 +1,3 @@
export { createRemoteComponent } from './remote/create';
export { createBridgeComponent } from './provider/create';
-export type {
- ProviderParams,
- RenderFnParams,
-} from '@module-federation/bridge-shared';
+export type { ProviderParams, RenderFnParams } from './types';
diff --git a/packages/bridge/bridge-react/src/provider/compat.ts b/packages/bridge/bridge-react/src/provider/compat.ts
index e09c34c1aa1..815fec41de4 100644
--- a/packages/bridge/bridge-react/src/provider/compat.ts
+++ b/packages/bridge/bridge-react/src/provider/compat.ts
@@ -1,15 +1,5 @@
import ReactDOM from 'react-dom';
-
-interface CreateRootOptions {
- identifierPrefix?: string;
- onRecoverableError?: (error: unknown) => void;
- transitionCallbacks?: unknown;
-}
-
-interface Root {
- render(children: React.ReactNode): void;
- unmount(): void;
-}
+import { CreateRootOptions, Root } from '../types';
const isReact18 = ReactDOM.version.startsWith('18');
@@ -29,7 +19,6 @@ export function createRoot(
// For React 16/17, simulate the new root API using render/unmountComponentAtNode
return {
render(children: React.ReactNode) {
- // @ts-ignore - React 17's render method is deprecated but still functional
ReactDOM.render(children, container);
},
unmount() {
@@ -52,11 +41,16 @@ export function hydrateRoot(
return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
}
- // For React 16/17, simulate the new root API using hydrate
+ // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
return {
render(children: React.ReactNode) {
- // @ts-ignore - React 17's hydrate method is deprecated but still functional
- ReactDOM.hydrate(children, container);
+ // 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);
diff --git a/packages/bridge/bridge-react/src/provider/context.tsx b/packages/bridge/bridge-react/src/provider/context.tsx
index 6af19e1b765..f6843a5f8ee 100644
--- a/packages/bridge/bridge-react/src/provider/context.tsx
+++ b/packages/bridge/bridge-react/src/provider/context.tsx
@@ -1,4 +1,4 @@
import React from 'react';
-import { ProviderParams } from '@module-federation/bridge-shared';
+import { ProviderParams } from '../types';
export const RouterContext = React.createContext(null);
diff --git a/packages/bridge/bridge-react/src/provider/create.tsx b/packages/bridge/bridge-react/src/provider/create.tsx
index 64e4592e774..366f7cc4d1f 100644
--- a/packages/bridge/bridge-react/src/provider/create.tsx
+++ b/packages/bridge/bridge-react/src/provider/create.tsx
@@ -2,32 +2,21 @@ import * as React from 'react';
import ReactDOM from 'react-dom';
import type {
ProviderParams,
- RenderFnParams,
-} from '@module-federation/bridge-shared';
+ ProviderFnParams,
+ RootType,
+ DestroyParams,
+ RenderParams,
+} from '../types';
import { ErrorBoundary } from 'react-error-boundary';
import { RouterContext } from './context';
import { LoggerInstance } from '../utils';
import { federationRuntime } from './plugin';
-import { createRoot } from './compat';
+import { createRoot as defaultCreateRoot } from './compat';
-type RenderParams = RenderFnParams & {
- [key: string]: unknown;
-};
-type DestroyParams = {
- moduleName: string;
- dom: HTMLElement;
-};
-type RootType = HTMLElement | ReturnType;
-
-export type ProviderFnParams = {
- rootComponent: React.ComponentType;
- render?: (
- App: React.ReactElement,
- id?: HTMLElement | string,
- ) => RootType | Promise;
-};
-
-export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
+export function createBridgeComponent({
+ createRoot = defaultCreateRoot,
+ ...bridgeInfo
+}: ProviderFnParams) {
return () => {
const rootMap = new Map();
const instance = federationRuntime.instance;
@@ -80,34 +69,37 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) {
);
- if (bridgeInfo?.render) {
- // in case bridgeInfo?.render is an async function, resolve this to promise
- Promise.resolve(
- bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
- ).then((root: RootType) => rootMap.set(info.dom, root));
+ if (bridgeInfo.render) {
+ await Promise.resolve(
+ bridgeInfo.render(rootComponentWithErrorBoundary, dom),
+ ).then((root: RootType) => rootMap.set(dom, root));
} else {
- let root = rootMap.get(info.dom);
+ let root = rootMap.get(dom);
// do not call createRoot multiple times
if (!root) {
- root = createRoot(info.dom);
- rootMap.set(info.dom, root);
+ root = createRoot(dom);
+ rootMap.set(dom, root);
+ }
+
+ if ('render' in root) {
+ root.render(rootComponentWithErrorBoundary);
}
- 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(info.dom);
+ const root = rootMap.get(dom);
if (root) {
if ('unmount' in root) {
root.unmount();
} else {
ReactDOM.unmountComponentAtNode(root as HTMLElement);
}
- rootMap.delete(info.dom);
+ rootMap.delete(dom);
}
instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
},
diff --git a/packages/bridge/bridge-react/src/remote/component.tsx b/packages/bridge/bridge-react/src/remote/component.tsx
index 2a5ce1810ac..9112d9bb650 100644
--- a/packages/bridge/bridge-react/src/remote/component.tsx
+++ b/packages/bridge/bridge-react/src/remote/component.tsx
@@ -6,38 +6,13 @@ import React, {
forwardRef,
} from 'react';
import * as ReactRouterDOM from 'react-router-dom';
-import type { ProviderParams } from '@module-federation/bridge-shared';
import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
import { federationRuntime } from '../provider/plugin';
-
-declare const __APP_VERSION__: string;
-export interface RenderFnParams extends ProviderParams {
- dom?: any;
- fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-}
-
-interface RemoteModule {
- provider: () => {
- render: (
- info: ProviderParams & {
- dom: any;
- },
- ) => void;
- destroy: (info: { dom: any }) => void;
- };
-}
-
-interface RemoteAppParams {
- moduleName: string;
- providerInfo: NonNullable;
- exportName: string | number | symbol;
- fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-}
+import { RemoteComponentProps, RemoteAppParams } from '../types';
const RemoteAppWrapper = forwardRef(function (
- props: RemoteAppParams & RenderFnParams,
+ props: RemoteAppParams & RemoteComponentProps,
ref,
) {
const {
diff --git a/packages/bridge/bridge-react/src/remote/create.tsx b/packages/bridge/bridge-react/src/remote/create.tsx
index fe138b55ca3..ec0f179ab1d 100644
--- a/packages/bridge/bridge-react/src/remote/create.tsx
+++ b/packages/bridge/bridge-react/src/remote/create.tsx
@@ -1,33 +1,19 @@
import React, { forwardRef } from 'react';
-import {
- ErrorBoundary,
- ErrorBoundaryPropsWithComponent,
-} from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
import { LoggerInstance } from '../utils';
import RemoteApp from './component';
-import type { ProviderParams } from '@module-federation/bridge-shared';
-
-export interface RenderFnParams extends ProviderParams {
- dom?: any;
-}
-
-interface RemoteModule {
- provider: () => {
- render: (info: RenderFnParams) => void;
- destroy: (info: { dom: any }) => void;
- };
-}
+import {
+ RemoteComponentParams,
+ RemoteComponentProps,
+ RemoteModule,
+} from '../types';
-type LazyRemoteComponentInfo = {
- loader: () => Promise;
- loading: React.ReactNode;
- fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
- export?: E;
-};
+type LazyRemoteComponentInfo = RemoteComponentParams;
-function createLazyRemoteComponent(
- info: LazyRemoteComponentInfo,
-) {
+function createLazyRemoteComponent<
+ T = Record,
+ E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo) {
const exportName = info?.export || 'default';
return React.lazy(async () => {
LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
@@ -49,10 +35,7 @@ function createLazyRemoteComponent(
if (exportName in m && typeof exportFn === 'function') {
const RemoteAppComponent = forwardRef<
HTMLDivElement,
- {
- basename?: ProviderParams['basename'];
- memoryRoute?: ProviderParams['memoryRoute'];
- }
+ RemoteComponentProps
>((props, ref) => {
return (
(
});
}
-export function createRemoteComponent(
- info: LazyRemoteComponentInfo,
-) {
- type ExportType = T[E] extends (...args: any) => any
- ? ReturnType
- : never;
-
- type RawComponentType = '__BRIDGE_FN__' extends keyof ExportType
- ? ExportType['__BRIDGE_FN__'] extends (...args: any) => any
- ? Parameters[0]
- : {}
- : {};
-
+export function createRemoteComponent<
+ T = Record,
+ E extends keyof T = keyof T,
+>(info: LazyRemoteComponentInfo) {
const LazyComponent = createLazyRemoteComponent(info);
- return forwardRef(
- (props, ref) => {
- return (
-
-
-
-
-
- );
- },
- );
+ return forwardRef((props, ref) => {
+ return (
+
+
+
+
+
+ );
+ });
}
diff --git a/packages/bridge/bridge-react/src/types.ts b/packages/bridge/bridge-react/src/types.ts
new file mode 100644
index 00000000000..77e1c63314e
--- /dev/null
+++ b/packages/bridge/bridge-react/src/types.ts
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
+
+/**
+ * Options for creating a React root
+ */
+export interface CreateRootOptions {
+ identifierPrefix?: string;
+ onRecoverableError?: (error: unknown) => void;
+ transitionCallbacks?: unknown;
+}
+
+/**
+ * Interface for a React root object
+ */
+export interface Root {
+ render(children: React.ReactNode): void;
+ unmount(): void;
+}
+
+/**
+ * Type for a root element, which can be either an HTMLElement or a React root
+ */
+export type RootType = HTMLElement | Root;
+
+/**
+ * Parameters for the render function
+ */
+export interface RenderParams {
+ moduleName?: string;
+ basename?: string;
+ memoryRoute?: {
+ entryPath: string;
+ initialState?: Record;
+ };
+ dom: HTMLElement;
+ [key: string]: unknown;
+}
+
+/**
+ * Parameters for the destroy function
+ */
+export interface DestroyParams {
+ moduleName: string;
+ dom: HTMLElement;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export interface ProviderParams {
+ moduleName?: string;
+ basename?: string;
+ memoryRoute?: {
+ entryPath: string;
+ initialState?: Record;
+ };
+ style?: React.CSSProperties;
+ className?: string;
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
+export interface RenderFnParams extends ProviderParams {
+ dom: HTMLElement;
+ fallback?: React.ComponentType<{ error: Error }>;
+ [key: string]: unknown;
+}
+
+/**
+ * Parameters for the provider function
+ */
+export interface ProviderFnParams {
+ rootComponent: React.ComponentType;
+ render?: (
+ App: React.ReactElement,
+ id?: HTMLElement | string,
+ ) => RootType | Promise;
+ createRoot?: (
+ container: Element | DocumentFragment,
+ options?: CreateRootOptions,
+ ) => Root;
+}
+
+/**
+ * Parameters for the remote component
+ */
+export interface RemoteComponentProps> {
+ props?: T;
+ fallback?: React.ComponentType<{ error: Error }>;
+ loading?: React.ReactNode;
+ [key: string]: unknown;
+}
+
+/**
+ * Parameters for the remote component loader
+ */
+export interface RemoteComponentParams<
+ T = Record,
+ E extends keyof T = keyof T,
+> {
+ loader: () => Promise;
+ loading: React.ReactNode;
+ fallback: React.ComponentType<{ error: Error }>;
+ export?: E;
+ props?: T;
+}
+
+/**
+ * Interface for a remote module provider
+ */
+export interface RemoteModule {
+ provider: () => {
+ render: (info: RenderFnParams) => void;
+ destroy: (info: { dom: any }) => void;
+ };
+}
+
+/**
+ * Parameters for a remote app component
+ */
+export interface RemoteAppParams extends ProviderParams {
+ moduleName: string;
+ providerInfo: NonNullable;
+ exportName: string | number | symbol;
+ fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+}