@module-federation/bridge-react 0.0.0-next-20240718040714 → 0.0.0-next-20240718063946

package/CHANGELOG.md

@@ -1,11 +1,11 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240718040714
+## 0.0.0-next-20240718063946
 
 ### Patch Changes
 
 - chore: bump next
-  - @module-federation/bridge-shared@0.0.0-next-20240718040714
+  - @module-federation/bridge-shared@0.0.0-next-20240718063946
 
 ## 0.2.6
 

package/dist/index.cjs.js

@@ -312,13 +312,12 @@ function createBridgeComponent(bridgeInfo) {
       return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, 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;
         if (context.atLeastReact18(React__namespace)) {
-          let root = null;
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            root = bridgeInfo == null ? void 0 : bridgeInfo.render(
+            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
               /* @__PURE__ */ React__namespace.createElement(
                 RawComponent,
                 {
@@ -331,9 +330,9 @@ function createBridgeComponent(bridgeInfo) {
                 }
               ),
               info.dom
-            );
+            )).then((root) => rootMap.set(info.dom, root));
           } else {
-            root = client.createRoot(info.dom);
+            const root = client.createRoot(info.dom);
             root.render(
               /* @__PURE__ */ React__namespace.createElement(
                 RawComponent,
@@ -347,8 +346,8 @@ function createBridgeComponent(bridgeInfo) {
                 }
               )
             );
+            rootMap.set(info.dom, root);
           }
-          rootMap.set(info.dom, root);
         } else {
           const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFunc(
@@ -367,7 +366,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      destroy(info) {
+      async destroy(info) {
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/dist/index.d.ts

@@ -6,10 +6,10 @@ 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;
 };
@@ -50,7 +50,7 @@ declare type FallbackProps = {
 
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
-    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => default_3.Root;
+    render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
 };
 
 export declare interface ProviderParams {
@@ -65,4 +65,6 @@ export declare interface RenderFnParams extends ProviderParams {
     dom: HTMLElement;
 }
 
+declare type RootType = HTMLElement | default_3.Root;
+
 export { }

package/dist/index.es.js

@@ -293,13 +293,12 @@ function createBridgeComponent(bridgeInfo) {
       return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
     };
     return {
-      render(info) {
+      async render(info) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          let root = null;
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            root = bridgeInfo == null ? void 0 : bridgeInfo.render(
+            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
               /* @__PURE__ */ React.createElement(
                 RawComponent,
                 {
@@ -312,9 +311,9 @@ function createBridgeComponent(bridgeInfo) {
                 }
               ),
               info.dom
-            );
+            )).then((root) => rootMap.set(info.dom, root));
           } else {
-            root = client.createRoot(info.dom);
+            const root = client.createRoot(info.dom);
             root.render(
               /* @__PURE__ */ React.createElement(
                 RawComponent,
@@ -328,8 +327,8 @@ function createBridgeComponent(bridgeInfo) {
                 }
               )
             );
+            rootMap.set(info.dom, root);
           }
-          rootMap.set(info.dom, root);
         } else {
           const renderFunc = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
           renderFunc(
@@ -348,7 +347,7 @@ function createBridgeComponent(bridgeInfo) {
           );
         }
       },
-      destroy(info) {
+      async destroy(info) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240718040714",
+  "version": "0.0.0-next-20240718063946",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240718040714"
+    "@module-federation/bridge-shared": "0.0.0-next-20240718063946"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/provider.tsx

@@ -9,15 +9,15 @@ 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) => ReactDOMClient.Root;
+  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, ...restProps } = info;
       const { name, memoryRoute, basename = '/' } = appInfo;
@@ -30,14 +30,13 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
     };
 
     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)) {
-          // if render is provided by user
-          let root = null;
+          // render is provided by user
           if (bridgeInfo?.render) {
-            root = bridgeInfo?.render(
+            Promise.resolve(bridgeInfo?.render(
               <RawComponent
                 propsInfo={propsInfo}
                 appInfo={{
@@ -47,9 +46,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 }}
               />,
               info.dom
-            );
+            )).then((root: RootType) => rootMap.set(info.dom, root));
           } else {
-            root = ReactDOMClient.createRoot(info.dom);
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
             root.render(
               <RawComponent
                 propsInfo={propsInfo}
@@ -60,8 +59,8 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 }}
               />,
             );
+            rootMap.set(info.dom, root);
           }
-          rootMap.set(info.dom, root);
         } else {
           const renderFunc = bridgeInfo?.render || ReactDOM.render;
           renderFunc(
@@ -77,13 +76,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);
         }
@@ -101,5 +100,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-// function ShadowContent() {}