@module-federation/bridge-react 0.0.0-next-20240731082143 → 0.0.0-next-20240731105745

package/src/create.tsx

@@ -1,4 +1,9 @@
 import React, { forwardRef } from 'react';
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from 'react';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 import {
@@ -13,11 +18,7 @@ export interface RenderFnParams extends ProviderParams {
 
 interface RemoteModule {
   provider: () => {
-    render: (
-      info: ProviderParams & {
-        dom: any;
-      },
-    ) => void;
+    render: (info: RenderFnParams) => void;
     destroy: (info: { dom: any }) => void;
   };
 }
@@ -27,6 +28,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
+  dom?: string;
 }) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
@@ -53,12 +55,13 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
             basename?: ProviderParams['basename'];
             memoryRoute?: ProviderParams['memoryRoute'];
           }
-        >((props, _ref) => {
+        >((props, ref) => {
           return (
             <RemoteApp
               name={moduleName}
               providerInfo={exportFn}
               exportName={info.export || 'default'}
+              ref={ref}
               {...props}
             />
           );
@@ -89,30 +92,27 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}) {
-  type ExportType = T[E] extends (...args: any) => any
-    ? ReturnType<T[E]>
-    : never;
-  type RawComponentType = '__BRIDGE_FN__' extends keyof ExportType
-    ? ExportType['__BRIDGE_FN__'] extends (...args: any) => any
-      ? Parameters<ExportType['__BRIDGE_FN__']>[0]
-      : {}
-    : {};
-
-  const LazyComponent = createLazyRemoteComponent(info);
+  dom?: string;
+}): ForwardRefExoticComponent<
+  PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>
+> {
+  // type ExportType = T[E] extends (...args: any) => any
+  //   ? ReturnType<T[E]>
+  //   : never;
+  // type RawComponentType = '__BRIDGE_FN__' extends keyof ExportType
+  //   ? ExportType['__BRIDGE_FN__'] extends (...args: any) => any
+  //     ? Parameters<ExportType['__BRIDGE_FN__']>[0]
+  //     : {}
+  //   : {};
 
-  return (
-    props: {
-      basename?: ProviderParams['basename'];
-      memoryRoute?: ProviderParams['memoryRoute'];
-    } & RawComponentType,
-  ) => {
+  return forwardRef(function (props, ref) {
+    const LazyComponent = createLazyRemoteComponent(info);
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} />
+          <LazyComponent {...props} dom={info?.dom} ref={ref} />
         </React.Suspense>
       </ErrorBoundary>
     );
-  };
+  });
 }

package/src/provider.tsx

@@ -9,45 +9,69 @@ import type {
 } from '@module-federation/bridge-shared';
 import { LoggerInstance, atLeastReact18 } from './utils';
 
+type RootType = HTMLElement | ReactDOMClient.Root;
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
+  render?: (
+    App: React.ReactElement,
+    id?: HTMLElement | string,
+  ) => RootType | Promise<RootType>;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
-    const rootMap = new Map<any, ReactDOMClient.Root>();
-
+    const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
-      const { appInfo, propsInfo } = info;
+      const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = '/' } = appInfo;
 
       return (
         <RouterContext.Provider value={{ name, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
+          <bridgeInfo.rootComponent
+            {...propsInfo}
+            basename={basename}
+            {...restProps}
+          />
         </RouterContext.Provider>
       );
     };
 
     return {
-      render(info: RenderFnParams & any) {
+      async render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
-
         if (atLeastReact18(React)) {
-          const root = ReactDOMClient.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            <RawComponent
-              propsInfo={propsInfo}
-              appInfo={{
-                name,
-                basename,
-                memoryRoute,
-              }}
-            />,
-          );
+          if (bridgeInfo?.render) {
+            Promise.resolve(
+              bridgeInfo?.render(
+                <RawComponent
+                  propsInfo={propsInfo}
+                  appInfo={{
+                    name,
+                    basename,
+                    memoryRoute,
+                  }}
+                />,
+                info.dom,
+              ),
+            ).then((root: RootType) => rootMap.set(info.dom, root));
+          } else {
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
+            root.render(
+              <RawComponent
+                propsInfo={propsInfo}
+                appInfo={{
+                  name,
+                  basename,
+                  memoryRoute,
+                }}
+              />,
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = bridgeInfo?.render || ReactDOM.render;
+          renderFunc(
             <RawComponent
               propsInfo={propsInfo}
               appInfo={{
@@ -60,13 +84,13 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           );
         }
       },
-      destroy(info: { dom: HTMLElement }) {
+      async destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
-          root?.unmount();
+          (root as ReactDOMClient.Root)?.unmount();
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
@@ -84,5 +108,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-// function ShadowContent() {}

package/src/remote/index.tsx

@@ -1,11 +1,16 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+} from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance, pathJoin } from '../utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 
 declare const __APP_VERSION__: string;
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -27,66 +32,99 @@ interface RemoteAppParams {
   exportName: string | number | symbol;
 }
 
-const RemoteApp = ({
-  name,
-  memoryRoute,
-  basename,
-  providerInfo,
-  ...resProps
-}: RemoteAppParams & ProviderParams) => {
-  const rootRef = useRef(null);
-  const renderDom = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-
-  useEffect(() => {
-    const renderTimeout = setTimeout(() => {
-      const providerReturn = providerInfo();
-      providerInfoRef.current = providerReturn;
-      const renderProps = {
-        name,
-        dom: rootRef.current,
-        basename,
-        memoryRoute,
-        ...resProps,
-      };
-      renderDom.current = rootRef.current;
-      LoggerInstance.log(
-        `createRemoteComponent LazyComponent render >>>`,
-        renderProps,
-      );
-      providerReturn.render(renderProps);
-    });
-
-    return () => {
-      clearTimeout(renderTimeout);
-      setTimeout(() => {
-        if (providerInfoRef.current?.destroy) {
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent destroy >>>`,
-            { name, basename, dom: renderDom.current },
-          );
-          providerInfoRef.current?.destroy({
-            dom: renderDom.current,
-          });
+const RemoteAppWrapper = forwardRef(function (
+  props: RemoteAppParams & RenderFnParams,
+  ref,
+) {
+  const RemoteApp = () => {
+    const {
+      name,
+      memoryRoute,
+      basename,
+      providerInfo,
+      dom,
+      className,
+      style,
+      ...resProps
+    } = props;
+
+    const rootRef: React.MutableRefObject<HTMLElement | null> =
+      ref && 'current' in ref
+        ? (ref as React.MutableRefObject<HTMLElement | null>)
+        : useRef(null);
+    const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
+    const providerInfoRef = useRef<any>(null);
+
+    useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+
+        let domElement = null;
+        if (dom) {
+          domElement = document.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
+          rootRef.current = domElement;
+        } else {
+          domElement = rootRef.current;
         }
+
+        const renderProps = {
+          name,
+          dom: domElement,
+          basename,
+          memoryRoute,
+          ...resProps,
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps,
+        );
+        providerReturn.render(renderProps);
       });
-    };
-  }, []);
 
-  //@ts-ignore
-  return <div ref={rootRef}></div>;
-};
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          if (providerInfoRef.current?.destroy) {
+            LoggerInstance.log(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { name, basename, dom: renderDom.current },
+            );
+            providerInfoRef.current?.destroy({
+              dom: renderDom.current,
+            });
+          }
+        });
+      };
+    }, []);
+
+    return dom ? null : (
+      <div
+        className={props?.className}
+        style={props?.style}
+        ref={rootRef}
+      ></div>
+    );
+  };
 
-(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+  (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+  return <RemoteApp />;
+});
 
 interface ExtraDataProps {
   basename?: string;
 }
 
-export function withRouterData<P extends Parameters<typeof RemoteApp>[0]>(
+export function withRouterData<
+  P extends Parameters<typeof RemoteAppWrapper>[0],
+>(
   WrappedComponent: React.ComponentType<P & ExtraDataProps>,
 ): React.FC<Omit<P, keyof ExtraDataProps>> {
-  return (props: any) => {
+  const Component = forwardRef(function (props: any, ref) {
     let enableDispathPopstate = false;
     let routerContextVal: any;
     try {
@@ -158,8 +196,12 @@ export function withRouterData<P extends Parameters<typeof RemoteApp>[0]>(
       }, [location]);
     }
 
-    return <WrappedComponent {...(props as P)} basename={basename} />;
-  };
+    return <WrappedComponent {...(props as P)} basename={basename} ref={ref} />;
+  });
+
+  return forwardRef(function (props, ref) {
+    return <Component {...props} ref={ref} />;
+  }) as any;
 }
 
-export default withRouterData(RemoteApp);
+export default withRouterData(RemoteAppWrapper);

package/src/router-v5.tsx

@@ -0,0 +1,78 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+// @ts-ignore
+import * as ReactRouterDom from 'react-router-dom/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+// @ts-ignore
+// export * from 'react-router-dom/index.js';
+
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/src/router-v6.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+// The upper alias react-router-dom$ into this file avoids the loop
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
+
+import { RouterContext } from './context';
+import { LoggerInstance } from './utils';
+
+function WraperRouter(
+  props:
+    | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
+    | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
+) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProps: props,
+  });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
+
+  if (routerContextProps?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+function WraperRouterProvider(
+  props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
+) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    WraperRouterProviderProps: props,
+    router,
+  });
+  const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
+  const createMemoryRouter = (ReactRouterDom as any)['create' + 'MemoryRouter'];
+  const createBrowserRouter = (ReactRouterDom as any)[
+    'create' + 'BrowserRouter'
+  ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
+
+  if (routerContextProps.memoryRoute) {
+    const MemeoryRouterInstance = createMemoryRouter(routers, {
+      initialEntries: [routerContextProps?.memoryRoute.entryPath],
+    });
+    return <RouterProvider router={MemeoryRouterInstance} />;
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window,
+    });
+    return <RouterProvider {...propsRes} router={BrowserRouterInstance} />;
+  }
+}
+
+export * from 'react-router-dom/dist/index.js';
+
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

package/src/router.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 // The upper alias react-router-dom$ into this file avoids the loop
 import * as ReactRouterDom from 'react-router-dom/';
+
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 
@@ -52,6 +53,7 @@ function WraperRouterProvider(
   const createBrowserRouter = (ReactRouterDom as any)[
     'create' + 'BrowserRouter'
   ];
+ 
   if (!routerContextProps) return <RouterProvider {...props} />;
 
   if (routerContextProps.memoryRoute) {

package/vite.config.ts

@@ -22,6 +22,8 @@ export default defineConfig({
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
+        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -32,6 +34,8 @@ export default defineConfig({
         '@remix-run/router',
         'react-router',
         'react-router-dom/',
+        'react-router-dom/index.js',
+        'react-router-dom/dist/index.js',
       ],
     },
     minify: false,