@module-federation/bridge-react 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "publishConfig": {
     "access": "public"
   },
@@ -20,12 +20,22 @@
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
+    "./router-v5": {
+      "types": "./dist/router-v5.d.ts",
+      "import": "./dist/router-v5.es.js",
+      "require": "./dist/router-v5.cjs.js"
+    },
+    "./router-v6": {
+      "types": "./dist/router-v6.d.ts",
+      "import": "./dist/router-v6.es.js",
+      "require": "./dist/router-v6.cjs.js"
+    },
     "./*": "./*"
   },
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.4.0"
+    "@module-federation/bridge-shared": "0.5.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -13,11 +13,7 @@ export interface RenderFnParams extends ProviderParams {
 
 interface RemoteModule {
   provider: () => {
-    render: (
-      info: ProviderParams & {
-        dom: any;
-      },
-    ) => void;
+    render: (info: RenderFnParams) => void;
     destroy: (info: { dom: any }) => void;
   };
 }
@@ -34,6 +30,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
       lazyComponent: info.loader,
       exportName,
     });
+
     try {
       const m = (await info.loader()) as RemoteModule;
       // @ts-ignore
@@ -44,8 +41,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
       );
 
       // @ts-ignore
-      const exportFn = m[exportName] as any;
-
+      const exportFn = m[exportName];
       if (exportName in m && typeof exportFn === 'function') {
         const RemoteAppComponent = forwardRef<
           HTMLDivElement,
@@ -53,12 +49,15 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
             basename?: ProviderParams['basename'];
             memoryRoute?: ProviderParams['memoryRoute'];
           }
-        >((props, _ref) => {
+        >((props, ref) => {
           return (
             <RemoteApp
-              name={moduleName}
+              // change `name` key to `moduleName` to avoid same property `name` passed by user's props which may cause unexpected issues.
+              moduleName={moduleName}
               providerInfo={exportFn}
               exportName={info.export || 'default'}
+              fallback={info.fallback}
+              ref={ref}
               {...props}
             />
           );
@@ -93,26 +92,23 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
   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);
-
-  return (
-    props: {
-      basename?: ProviderParams['basename'];
-      memoryRoute?: ProviderParams['memoryRoute'];
-    } & RawComponentType,
-  ) => {
-    return (
-      <ErrorBoundary FallbackComponent={info.fallback}>
-        <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} />
-        </React.Suspense>
-      </ErrorBoundary>
-    );
-  };
+  return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>(
+    (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
+      return (
+        <ErrorBoundary FallbackComponent={info.fallback}>
+          <React.Suspense fallback={info.loading}>
+            <LazyComponent {...props} ref={ref} />
+          </React.Suspense>
+        </ErrorBoundary>
+      );
+    },
+  );
 }

package/src/provider.tsx

@@ -8,65 +8,84 @@ import type {
   RenderFnParams,
 } from '@module-federation/bridge-shared';
 import { LoggerInstance, atLeastReact18 } from './utils';
+import { ErrorBoundary } from 'react-error-boundary';
 
+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 { name, memoryRoute, basename = '/' } = appInfo;
-
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = '/' } = appInfo;
       return (
-        <RouterContext.Provider value={{ name, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
+        <RouterContext.Provider value={{ moduleName, basename, memoryRoute }}>
+          <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(
+        const {
+          moduleName,
+          dom,
+          basename,
+          memoryRoute,
+          fallback,
+          ...propsInfo
+        } = info;
+        const rootComponentWithErrorBoundary = (
+          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
+          <ErrorBoundary FallbackComponent={fallback}>
             <RawComponent
-              propsInfo={propsInfo}
               appInfo={{
-                name,
+                moduleName,
                 basename,
                 memoryRoute,
               }}
-            />,
-          );
-        } else {
-          ReactDOM.render(
-            <RawComponent
               propsInfo={propsInfo}
-              appInfo={{
-                name,
-                basename,
-                memoryRoute,
-              }}
-            />,
-            info.dom,
-          );
+            />
+          </ErrorBoundary>
+        );
+
+        if (atLeastReact18(React)) {
+          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));
+          } else {
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
+            root.render(rootComponentWithErrorBoundary);
+            rootMap.set(info.dom, root);
+          }
+        } else {
+          // react 17 render
+          const renderFn = bridgeInfo?.render || ReactDOM.render;
+          renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
       },
-      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();
+          rootMap.delete(info.dom);
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
@@ -84,5 +103,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-// function ShadowContent() {}

package/src/remote/index.tsx

@@ -1,13 +1,20 @@
-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';
+import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
 
 declare const __APP_VERSION__: string;
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
 }
 
 interface RemoteModule {
@@ -22,71 +29,97 @@ interface RemoteModule {
 }
 
 interface RemoteAppParams {
-  name: string;
+  moduleName: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
+  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
 }
 
-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 = () => {
+    LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
+
+    const rootRef: React.MutableRefObject<HTMLDivElement | null> =
+      ref && 'current' in ref
+        ? (ref as React.MutableRefObject<HTMLDivElement | 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;
+
+        const renderProps = {
+          moduleName,
+          dom: rootRef.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...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 >>>`,
+              { moduleName, basename, dom: renderDom.current },
+            );
+            providerInfoRef.current?.destroy({
+              dom: renderDom.current,
+            });
+          }
+        });
+      };
+    }, []);
+
+    return (
+      <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 +191,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,44 @@
+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?.memoryRoute) {
+    return (
+      <ReactRouterDom.MemoryRouter
+        {...props}
+        initialEntries={[routerContextProps?.memoryRoute.entryPath]}
+      />
+    );
+  }
+  return (
+    <ReactRouterDom.BrowserRouter
+      {...propsRes}
+      basename={routerContextProps?.basename || basename}
+    />
+  );
+}
+
+// @ts-ignore
+// cause export directly from react-router-dom/index.js will cause build falied.
+// it will be replace by react-router-dom/index.js in building phase
+export * from 'react-router-dom/';
+
+export { WraperRouter as BrowserRouter };

package/src/router-v6.tsx

@@ -0,0 +1,73 @@
+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?.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.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

@@ -4,7 +4,7 @@ import * as ReactRouterDom from 'react-router-dom/';
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 
-function WraperRouter(
+function WrapperRouter(
   props:
     | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
     | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
@@ -12,12 +12,11 @@ function WraperRouter(
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
 
-  LoggerInstance.log(`WraperRouter info >>>`, {
+  LoggerInstance.log(`WrapperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WraperRouterProps: props,
+    WrapperRouterProps: props,
   });
-  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
 
   if (routerContextProps?.memoryRoute) {
     return (
@@ -35,16 +34,16 @@ function WraperRouter(
   );
 }
 
-function WraperRouterProvider(
+function WrapperRouterProvider(
   props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
 ) {
   const { router, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
   const routers = router.routes;
-  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+  LoggerInstance.log(`WrapperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WraperRouterProviderProps: props,
+    WrapperRouterProviderProps: props,
     router,
   });
   const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
@@ -52,7 +51,6 @@ function WraperRouterProvider(
   const createBrowserRouter = (ReactRouterDom as any)[
     'create' + 'BrowserRouter'
   ];
-  if (!routerContextProps) return <RouterProvider {...props} />;
 
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
@@ -71,5 +69,5 @@ function WraperRouterProvider(
 
 export * from 'react-router-dom/';
 
-export { WraperRouter as BrowserRouter };
-export { WraperRouterProvider as RouterProvider };
+export { WrapperRouter as BrowserRouter };
+export { WrapperRouterProvider as RouterProvider };

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,33 @@ export default defineConfig({
         '@remix-run/router',
         'react-router',
         'react-router-dom/',
+        'react-router-dom/index.js',
+        'react-router-dom/dist/index.js',
+      ],
+      plugins: [
+        {
+          name: 'modify-output-plugin',
+          generateBundle(options, bundle) {
+            for (const fileName in bundle) {
+              const chunk = bundle[fileName];
+              // if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+              //   chunk.code = chunk.code.replace(
+              //     // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+              //     /react-router-dom\/(?=[\'\"\`])/g,
+              //     'react-router-dom/dist/index.js',
+              //   );
+              // }
+
+              if (fileName.includes('router-v5') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/index.js',
+                );
+              }
+            }
+          },
+        },
       ],
     },
     minify: false,