feat(bridge-react): add support for custom createRoot on createBridgeComponent

.changeset/kind-eagles-dream.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': minor
+---
+
+feat(bridge-react): Added support for custom `createRoot` on `createBridgeComponent`

packages/bridge/bridge-react/__tests__/bridge.spec.tsx

@@ -102,4 +102,36 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('hello world');
     expect(ref.current).not.toBeNull();
   });
+
+  it('createRemoteComponent with custom createRoot prop', async () => {
+    const renderMock = vi.fn();
+
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+      createRoot: () => {
+        return {
+          render: renderMock,
+          unmount: vi.fn(),
+        };
+      },
+    });
+    const RemoteComponent = createRemoteComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(<RemoteComponent />);
+    expect(getHtml(container)).toMatch('loading');
+
+    await sleep(200);
+    expect(renderMock).toHaveBeenCalledTimes(1);
+  });
 });

packages/bridge/bridge-react/src/provider/create.tsx

@@ -8,7 +8,7 @@ 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;
@@ -17,17 +17,24 @@ type DestroyParams = {
   moduleName: string;
   dom: HTMLElement;
 };
-type RootType = HTMLElement | ReturnType<typeof createRoot>;
+type RootType = HTMLElement | ReturnType<typeof defaultCreateRoot>;
 
 export type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
+  createRoot?: (
+    container: Parameters<typeof defaultCreateRoot>[0],
+    options?: Parameters<typeof defaultCreateRoot>[1],
+  ) => ReturnType<typeof defaultCreateRoot>;
 };
 
-export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
+export function createBridgeComponent<T>({
+  createRoot = defaultCreateRoot,
+  ...bridgeInfo
+}: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
     const instance = federationRuntime.instance;