@module-federation/bridge-react 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @module-federation/bridge-react
 
+## 0.5.0
+
+### Patch Changes
+
+- 49d6135: feat(@module-federation/bridge): enhance Bridge capabilities and fix some issues
+- Updated dependencies [49d6135]
+  - @module-federation/bridge-shared@0.5.0
+
 ## 0.4.0
 
 ### Patch Changes

package/__tests__/bridge.spec.tsx

@@ -45,8 +45,8 @@ describe('bridge', () => {
   });
 
   it('createRemoteComponent', async () => {
-    function Component(info: { msg: string }) {
-      return <div>life cycle render {info.msg}</div>;
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
     }
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
@@ -61,11 +61,45 @@ describe('bridge', () => {
       loading: <div>loading</div>,
     });
 
-    const { container } = render(<RemoteComponent msg={'hello world'} />);
+    const { container } = render(
+      <RemoteComponent props={{ msg: 'hello world' }} />,
+    );
+    expect(getHtml(container)).toMatch('loading');
+
+    await sleep(200);
+    expect(getHtml(container)).toMatch('life cycle render');
+    expect(getHtml(container)).toMatch('hello world');
+  });
+
+  it('createRemoteComponent and obtain ref property', async () => {
+    const ref = {
+      current: null,
+    };
+
+    function Component({ props }: { props?: Record<string, any> }) {
+      return <div>life cycle render {props?.msg}</div>;
+    }
+    const BridgeComponent = createBridgeComponent({
+      rootComponent: Component,
+    });
+    const RemoteComponent = createRemoteComponent({
+      loader: async () => {
+        return {
+          default: BridgeComponent,
+        };
+      },
+      fallback: () => <div></div>,
+      loading: <div>loading</div>,
+    });
+
+    const { container } = render(
+      <RemoteComponent ref={ref} props={{ msg: 'hello world' }} />,
+    );
     expect(getHtml(container)).toMatch('loading');
 
     await sleep(200);
     expect(getHtml(container)).toMatch('life cycle render');
     expect(getHtml(container)).toMatch('hello world');
+    expect(ref.current).not.toBeNull();
   });
 });

package/dist/index.cjs.js

@@ -117,55 +117,71 @@ 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 RemoteApp = ({
-  name,
-  memoryRoute,
-  basename,
-  providerInfo,
-  ...resProps
-}) => {
-  const rootRef = React.useRef(null);
-  const renderDom = React.useRef(null);
-  const providerInfoRef = React.useRef(null);
-  React.useEffect(() => {
-    const renderTimeout = setTimeout(() => {
-      const providerReturn = providerInfo();
-      providerInfoRef.current = providerReturn;
-      const renderProps = {
-        name,
-        dom: rootRef.current,
-        basename,
-        memoryRoute,
-        ...resProps
-      };
-      renderDom.current = rootRef.current;
-      context.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) {
-          context.LoggerInstance.log(
-            `createRemoteComponent LazyComponent destroy >>>`,
-            { name, basename, dom: renderDom.current }
-          );
-          (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
-            dom: renderDom.current
-          });
-        }
+const RemoteAppWrapper = React.forwardRef(function(props, ref) {
+  const RemoteApp2 = () => {
+    context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
+    const rootRef = ref && "current" in ref ? ref : React.useRef(null);
+    const renderDom = React.useRef(null);
+    const providerInfoRef = React.useRef(null);
+    React.useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+        const renderProps = {
+          moduleName,
+          dom: rootRef.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        };
+        renderDom.current = rootRef.current;
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps
+        );
+        providerReturn.render(renderProps);
       });
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", { ref: rootRef });
-};
-RemoteApp["__APP_VERSION__"] = "0.4.0";
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          var _a, _b;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            context.LoggerInstance.log(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current }
+            );
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+              dom: renderDom.current
+            });
+          }
+        });
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: props == null ? void 0 : props.className,
+        style: props == null ? void 0 : props.style,
+        ref: rootRef
+      }
+    );
+  };
+  RemoteApp2["__APP_VERSION__"] = "0.5.0";
+  return /* @__PURE__ */ React.createElement(RemoteApp2, null);
+});
 function withRouterData(WrappedComponent) {
-  return (props) => {
+  const Component = React.forwardRef(function(props, ref) {
     var _a;
     let enableDispathPopstate = false;
     let routerContextVal;
@@ -223,10 +239,13 @@ function withRouterData(WrappedComponent) {
         setPathname(location.pathname);
       }, [location]);
     }
-    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
-  };
+    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
+  });
+  return React.forwardRef(function(props, ref) {
+    return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
+  });
 }
-const RemoteApp$1 = withRouterData(RemoteApp);
+const RemoteApp = withRouterData(RemoteAppWrapper);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React.lazy(async () => {
@@ -243,13 +262,15 @@ function createLazyRemoteComponent(info) {
       );
       const exportFn = m2[exportName];
       if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = React.forwardRef((props, _ref) => {
+        const RemoteAppComponent = React.forwardRef((props, ref) => {
           return /* @__PURE__ */ React.createElement(
-            RemoteApp$1,
+            RemoteApp,
             {
-              name: moduleName,
+              moduleName,
               providerInfo: exportFn,
               exportName: info.export || "default",
+              fallback: info.fallback,
+              ref,
               ...props
             }
           );
@@ -274,10 +295,13 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
-  return (props) => {
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
-  };
+  return React.forwardRef((props, ref) => {
+    const LazyComponent = createLazyRemoteComponent(info);
+    return (
+      // set ErrorBoundary for LazyComponent rendering error, usually caused by inner bridge logic render process
+      /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })))
+    );
+  });
 }
 var client = {};
 var m = ReactDOM;
@@ -307,54 +331,65 @@ function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
     const RawComponent = (info) => {
-      const { appInfo, propsInfo } = info;
-      const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename }));
+      const { appInfo, propsInfo, ...restProps } = info;
+      const { moduleName, memoryRoute, basename = "/" } = appInfo;
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
     };
     return {
-      render(info) {
+      async render(info) {
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const { name, basename, memoryRoute, ...propsInfo } = 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__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
+            RawComponent,
+            {
+              appInfo: {
+                moduleName,
+                basename,
+                memoryRoute
+              },
+              propsInfo
+            }
+          ))
+        );
         if (context.atLeastReact18(React__namespace)) {
-          const root = client.createRoot(info.dom);
-          rootMap.set(info.dom, root);
-          root.render(
-            /* @__PURE__ */ React__namespace.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
-                }
-              }
-            )
-          );
+          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);
+          }
         } else {
-          ReactDOM.render(
-            /* @__PURE__ */ React__namespace.createElement(
-              RawComponent,
-              {
-                propsInfo,
-                appInfo: {
-                  name,
-                  basename,
-                  memoryRoute
-                }
-              }
-            ),
-            info.dom
-          );
+          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
+          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
         }
       },
-      destroy(info) {
+      async destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
         if (context.atLeastReact18(React__namespace)) {
           const root = rootMap.get(info.dom);
           root == null ? void 0 : root.unmount();
+          rootMap.delete(info.dom);
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
+import { default as default_3 } from 'react-dom/client';
 import { ErrorInfo } from 'react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): void;
+    render(info: RenderFnParams & any): Promise<void>;
     destroy(info: {
         dom: HTMLElement;
-    }): void;
+    }): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
@@ -18,10 +19,7 @@ export declare function createRemoteComponent<T, E extends keyof T>(info: {
     loading: default_2.ReactNode;
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
-}): (props: {
-    basename?: ProviderParams['basename'];
-    memoryRoute?: ProviderParams['memoryRoute'];
-} & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})) => default_2.JSX.Element;
+}): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<unknown>>;
 
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
     fallback?: never;
@@ -49,18 +47,23 @@ declare type FallbackProps = {
 
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
 export declare interface ProviderParams {
-    name?: string;
+    moduleName?: string;
     basename?: string;
     memoryRoute?: {
         entryPath: string;
     };
+    style?: React.CSSProperties;
+    className?: string;
 }
 
 export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
 }
 
+declare type RootType = HTMLElement | default_3.Root;
+
 export { }