@module-federation/bridge-react 0.0.0-next-20240814104132 → 0.0.0-next-20240815094326

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { L as LoggerInstance, p as pathJoin, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import * as ReactRouterDOM from "react-router-dom";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
@@ -98,71 +98,55 @@ function hasArrayChanged() {
   let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
   return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
 }
-const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const RemoteApp2 = () => {
-    LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
-    const {
-      moduleName,
-      memoryRoute,
-      basename,
-      providerInfo,
-      className,
-      style,
-      fallback,
-      ...resProps
-    } = props;
-    const rootRef = ref && "current" in ref ? ref : useRef(null);
-    const renderDom = useRef(null);
-    const providerInfoRef = useRef(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);
-      });
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          var _a, _b;
-          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { moduleName, basename, dom: renderDom.current }
-            );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
-              dom: renderDom.current
-            });
-          }
-        });
+const RemoteApp = ({
+  name,
+  memoryRoute,
+  basename,
+  providerInfo,
+  ...resProps
+}) => {
+  const rootRef = useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef(null);
+  useEffect(() => {
+    const renderTimeout = setTimeout(() => {
+      const providerReturn = providerInfo();
+      providerInfoRef.current = providerReturn;
+      const renderProps = {
+        name,
+        dom: rootRef.current,
+        basename,
+        memoryRoute,
+        ...resProps
       };
-    }, []);
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: props == null ? void 0 : props.className,
-        style: props == null ? void 0 : props.style,
-        ref: rootRef
-      }
-    );
-  };
-  RemoteApp2["__APP_VERSION__"] = "0.4.0";
-  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
-});
+      renderDom.current = rootRef.current;
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent render >>>`,
+        renderProps
+      );
+      providerReturn.render(renderProps);
+    });
+    return () => {
+      clearTimeout(renderTimeout);
+      setTimeout(() => {
+        var _a, _b;
+        if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+          LoggerInstance.log(
+            `createRemoteComponent LazyComponent destroy >>>`,
+            { name, basename, dom: renderDom.current }
+          );
+          (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            dom: renderDom.current
+          });
+        }
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", { ref: rootRef });
+};
+RemoteApp["__APP_VERSION__"] = "0.3.5";
 function withRouterData(WrappedComponent) {
-  const Component2 = forwardRef(function(props, ref) {
+  return (props) => {
     var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
@@ -220,13 +204,10 @@ function withRouterData(WrappedComponent) {
         setPathname(location.pathname);
       }, [location]);
     }
-    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
-  });
-  return forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
-  });
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
+  };
 }
-const RemoteApp = withRouterData(RemoteAppWrapper);
+const RemoteApp$1 = withRouterData(RemoteApp);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React__default.lazy(async () => {
@@ -243,15 +224,13 @@ function createLazyRemoteComponent(info) {
       );
       const exportFn = m2[exportName];
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, ref) => {
+        const RemoteAppComponent = forwardRef((props, _ref) => {
           return /* @__PURE__ */ React__default.createElement(
-            RemoteApp,
+            RemoteApp$1,
             {
-              moduleName,
+              name: moduleName,
               providerInfo: exportFn,
               exportName: info.export || "default",
-              fallback: info.fallback,
-              ref,
               ...props
             }
           );
@@ -276,13 +255,10 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  return forwardRef((props, ref) => {
-    const LazyComponent = createLazyRemoteComponent(info);
-    return (
-      // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
-      /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })))
-    );
-  });
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
+  };
 }
 var client = {};
 var m = ReactDOM;
@@ -312,65 +288,54 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
-        bridgeInfo.rootComponent,
-        {
-          ...propsInfo,
-          basename,
-          ...restProps
-        }
-      ));
+      const { appInfo, propsInfo } = info;
+      const { name, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
     };
     return {
-      async render(info) {
+      render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          ...propsInfo
-        } = info;
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo
-            }
-          ))
-        );
+        const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
-          }
+          const root = client.createRoot(info.dom);
+          rootMap.set(info.dom, root);
+          root.render(
+            /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
+              }
+            )
+          );
         } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
+          ReactDOM.render(
+            /* @__PURE__ */ React.createElement(
+              RawComponent,
+              {
+                propsInfo,
+                appInfo: {
+                  name,
+                  basename,
+                  memoryRoute
+                }
+              }
+            ),
+            info.dom
+          );
         }
       },
-      async destroy(info) {
+      destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
-          rootMap.delete(info.dom);
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }

package/dist/router.cjs.js

@@ -20,14 +20,16 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
-function WrapperRouter(props) {
+function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = React.useContext(context.RouterContext) || {};
-  context.LoggerInstance.log(`WrapperRouter info >>>`, {
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProps: props
+    WraperRouterProps: props
   });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(ReactRouterDom__namespace.BrowserRouter, { ...props });
   if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
     return /* @__PURE__ */ React.createElement(
       ReactRouterDom__namespace.MemoryRouter,
@@ -45,19 +47,21 @@ function WrapperRouter(props) {
     }
   );
 }
-function WrapperRouterProvider(props) {
+function WraperRouterProvider(props) {
   const { router, ...propsRes } = props;
   const routerContextProps = React.useContext(context.RouterContext) || {};
   const routers = router.routes;
-  context.LoggerInstance.log(`WrapperRouterProvider info >>>`, {
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProviderProps: props,
+    WraperRouterProviderProps: props,
     router
   });
   const RouterProvider = ReactRouterDom__namespace["RouterProvider"];
   const createMemoryRouter = ReactRouterDom__namespace["createMemoryRouter"];
   const createBrowserRouter = ReactRouterDom__namespace["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
@@ -72,8 +76,8 @@ function WrapperRouterProvider(props) {
     return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
   }
 }
-exports.BrowserRouter = WrapperRouter;
-exports.RouterProvider = WrapperRouterProvider;
+exports.BrowserRouter = WraperRouter;
+exports.RouterProvider = WraperRouterProvider;
 Object.keys(ReactRouterDom).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
     Object.defineProperty(exports, k, {

package/dist/router.es.js

@@ -2,14 +2,16 @@ import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
 import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
-function WrapperRouter(props) {
+function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
-  LoggerInstance.log(`WrapperRouter info >>>`, {
+  LoggerInstance.log(`WraperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProps: props
+    WraperRouterProps: props
   });
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(ReactRouterDom.BrowserRouter, { ...props });
   if (routerContextProps == null ? void 0 : routerContextProps.memoryRoute) {
     return /* @__PURE__ */ React__default.createElement(
       ReactRouterDom.MemoryRouter,
@@ -27,19 +29,21 @@ function WrapperRouter(props) {
     }
   );
 }
-function WrapperRouterProvider(props) {
+function WraperRouterProvider(props) {
   const { router, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
   const routers = router.routes;
-  LoggerInstance.log(`WrapperRouterProvider info >>>`, {
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProviderProps: props,
+    WraperRouterProviderProps: props,
     router
   });
   const RouterProvider = ReactRouterDom["RouterProvider"];
   const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
   const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  if (!routerContextProps)
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...props });
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
       initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
@@ -55,6 +59,6 @@ function WrapperRouterProvider(props) {
   }
 }
 export {
-  WrapperRouter as BrowserRouter,
-  WrapperRouterProvider as RouterProvider
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
 };

package/package.json

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

package/src/create.tsx

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

package/src/provider.tsx

@@ -8,84 +8,65 @@ 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, RootType>();
+    const rootMap = new Map<any, ReactDOMClient.Root>();
+
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = '/' } = appInfo;
+      const { appInfo, propsInfo } = info;
+      const { name, memoryRoute, basename = '/' } = appInfo;
+
       return (
-        <RouterContext.Provider value={{ moduleName, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent
-            {...propsInfo}
-            basename={basename}
-            {...restProps}
-          />
+        <RouterContext.Provider value={{ name, basename, memoryRoute }}>
+          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
         </RouterContext.Provider>
       );
     };
 
     return {
-      async render(info: RenderFnParams & any) {
+      render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
-        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}>
+        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={{
-                moduleName,
+                name,
                 basename,
                 memoryRoute,
               }}
-              propsInfo={propsInfo}
-            />
-          </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);
+          ReactDOM.render(
+            <RawComponent
+              propsInfo={propsInfo}
+              appInfo={{
+                name,
+                basename,
+                memoryRoute,
+              }}
+            />,
+            info.dom,
+          );
         }
       },
-      async destroy(info: { dom: HTMLElement }) {
+      destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
-          (root as ReactDOMClient.Root)?.unmount();
-          rootMap.delete(info.dom);
+          root?.unmount();
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
@@ -103,3 +84,5 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
+
+// function ShadowContent() {}