@module-federation/bridge-react 0.3.5 → 0.5.0

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,96 @@ 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<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;
+
+        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 +190,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.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.tsx'),
+        'router-v6': path.resolve(__dirname, 'src/router.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,