@module-federation/bridge-react 0.0.0-next-20240726084328 → 0.0.0-next-20240731105745

package/CHANGELOG.md

@@ -1,10 +1,24 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240726084328
+## 0.0.0-next-20240731105745
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240726084328
+- 67fa05b: feat(@module-federation/bridge): optimize @module-federation/bridge package
+- Updated dependencies [67fa05b]
+  - @module-federation/bridge-shared@0.0.0-next-20240731105745
+
+## 0.3.3
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.3.3
+
+## 0.3.2
+
+### Patch Changes
+
+- @module-federation/bridge-shared@0.3.2
 
 ## 0.3.1
 

package/__tests__/bridge.spec.tsx

@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { createContainer, getHtml, sleep } from './util';
+import { createContainer, createCustomContainer, getHtml, sleep } from './util';
 
 describe('bridge', () => {
   let containerInfo: ReturnType<typeof createContainer>;
@@ -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,82 @@ 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 with dom provided, will render on the provided dom', async () => {
+    containerInfo = createCustomContainer();
+
+    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>,
+      dom: '#container-custom',
+    });
+
+    const { container } = render(
+      <RemoteComponent props={{ msg: 'hello there' }} />,
+    );
+    expect(getHtml(container)).toMatch('loading');
+
+    await sleep(200);
+
+    const element = screen.getByTestId('container-custom');
+    expect(element.children.length).toBeGreaterThan(0);
+    expect(element.innerHTML).toContain('life cycle render');
+    expect(element.innerHTML).toContain('hello there');
+
+    const elementDefault = screen.getByTestId('container');
+    expect(elementDefault.children.length).toBe(0);
+    expect(elementDefault.innerHTML).toContain('');
+  });
+
+  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/__tests__/util.ts

@@ -12,6 +12,24 @@ export async function sleep(time: number) {
 export function createContainer() {
   const container = document.createElement('div');
   container.setAttribute('id', 'container');
+  container.setAttribute('data-testid', 'container');
+
+  container.setAttribute('background', 'rgb(255, 112, 127)');
+
+  document.body.appendChild(container);
+
+  return {
+    clean: () => {
+      document.body.removeChild(container);
+    },
+    container,
+  };
+}
+
+export function createCustomContainer() {
+  const container = document.createElement('div');
+  container.setAttribute('id', 'container-custom');
+  container.setAttribute('data-testid', 'container-custom');
   document.body.appendChild(container);
 
   return {

package/dist/index.cjs.js

@@ -138,14 +138,16 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
         providerInfoRef.current = providerReturn;
         let domElement = null;
         if (dom) {
-          domElement = document.getElementById(dom.replace("#", ""));
+          domElement = document.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
           rootRef.current = domElement;
         } else {
           domElement = rootRef.current;
         }
         const renderProps = {
           name,
-          // dom: rootRef.current,
           dom: domElement,
           basename,
           memoryRoute,
@@ -174,9 +176,16 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
         });
       };
     }, []);
-    return dom ? null : /* @__PURE__ */ React.createElement("div", { className: props == null ? void 0 : props.className, style: props == null ? void 0 : props.style, ref: rootRef });
+    return dom ? null : /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: props == null ? void 0 : props.className,
+        style: props == null ? void 0 : props.style,
+        ref: rootRef
+      }
+    );
   };
-  RemoteApp2["__APP_VERSION__"] = "0.3.1";
+  RemoteApp2["__APP_VERSION__"] = "0.3.3";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -328,7 +337,14 @@ function createBridgeComponent(bridgeInfo) {
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = 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, ...restProps }));
+      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
     };
     return {
       async render(info) {
@@ -336,20 +352,22 @@ function createBridgeComponent(bridgeInfo) {
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (context.atLeastReact18(React__namespace)) {
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
-              /* @__PURE__ */ React__namespace.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
+            Promise.resolve(
+              bridgeInfo == null ? void 0 : bridgeInfo.render(
+                /* @__PURE__ */ React__namespace.createElement(
+                  RawComponent,
+                  {
+                    propsInfo,
+                    appInfo: {
+                      name,
+                      basename,
+                      memoryRoute
+                    }
                   }
-                }
-              ),
-              info.dom
-            )).then((root) => rootMap.set(info.dom, root));
+                ),
+                info.dom
+              )
+            ).then((root) => rootMap.set(info.dom, root));
           } else {
             const root = client.createRoot(info.dom);
             root.render(

package/dist/index.es.js

@@ -119,14 +119,16 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
         providerInfoRef.current = providerReturn;
         let domElement = null;
         if (dom) {
-          domElement = document.getElementById(dom.replace("#", ""));
+          domElement = document.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
           rootRef.current = domElement;
         } else {
           domElement = rootRef.current;
         }
         const renderProps = {
           name,
-          // dom: rootRef.current,
           dom: domElement,
           basename,
           memoryRoute,
@@ -155,9 +157,16 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
         });
       };
     }, []);
-    return dom ? null : /* @__PURE__ */ React__default.createElement("div", { className: props == null ? void 0 : props.className, style: props == null ? void 0 : props.style, ref: rootRef });
+    return dom ? null : /* @__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.3.1";
+  RemoteApp2["__APP_VERSION__"] = "0.3.3";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
@@ -309,7 +318,14 @@ function createBridgeComponent(bridgeInfo) {
     const RawComponent = (info) => {
       const { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(bridgeInfo.rootComponent, { ...propsInfo, basename, ...restProps }));
+      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { name, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
+        bridgeInfo.rootComponent,
+        {
+          ...propsInfo,
+          basename,
+          ...restProps
+        }
+      ));
     };
     return {
       async render(info) {
@@ -317,20 +333,22 @@ function createBridgeComponent(bridgeInfo) {
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
           if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(bridgeInfo == null ? void 0 : bridgeInfo.render(
-              /* @__PURE__ */ React.createElement(
-                RawComponent,
-                {
-                  propsInfo,
-                  appInfo: {
-                    name,
-                    basename,
-                    memoryRoute
+            Promise.resolve(
+              bridgeInfo == null ? void 0 : bridgeInfo.render(
+                /* @__PURE__ */ React.createElement(
+                  RawComponent,
+                  {
+                    propsInfo,
+                    appInfo: {
+                      name,
+                      basename,
+                      memoryRoute
+                    }
                   }
-                }
-              ),
-              info.dom
-            )).then((root) => rootMap.set(info.dom, root));
+                ),
+                info.dom
+              )
+            ).then((root) => rootMap.set(info.dom, root));
           } else {
             const root = client.createRoot(info.dom);
             root.render(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240726084328",
+  "version": "0.0.0-next-20240731105745",
   "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-20240726084328"
+    "@module-federation/bridge-shared": "0.0.0-next-20240731105745"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -1,5 +1,9 @@
 import React, { forwardRef } from 'react';
-import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from 'react';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 import {
@@ -11,11 +15,10 @@ import RemoteApp from './remote';
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
+
 interface RemoteModule {
   provider: () => {
-    render: (
-      info: RenderFnParams,
-    ) => void;
+    render: (info: RenderFnParams) => void;
     destroy: (info: { dom: any }) => void;
   };
 }
@@ -90,7 +93,9 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
   dom?: string;
-}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>> {
+}): ForwardRefExoticComponent<
+  PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>
+> {
   // type ExportType = T[E] extends (...args: any) => any
   //   ? ReturnType<T[E]>
   //   : never;
@@ -100,7 +105,7 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
   //     : {}
   //   : {};
 
-  return forwardRef(function (props, ref) {    
+  return forwardRef(function (props, ref) {
     const LazyComponent = createLazyRemoteComponent(info);
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>

package/src/provider.tsx

@@ -12,7 +12,10 @@ import { LoggerInstance, atLeastReact18 } from './utils';
 type RootType = HTMLElement | ReactDOMClient.Root;
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
-  render?: (App: React.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+  render?: (
+    App: React.ReactElement,
+    id?: HTMLElement | string,
+  ) => RootType | Promise<RootType>;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
@@ -24,7 +27,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
 
       return (
         <RouterContext.Provider value={{ name, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent {...propsInfo} basename={basename} {...restProps} />
+          <bridgeInfo.rootComponent
+            {...propsInfo}
+            basename={basename}
+            {...restProps}
+          />
         </RouterContext.Provider>
       );
     };
@@ -34,19 +41,20 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const { name, basename, memoryRoute, ...propsInfo } = info;
         if (atLeastReact18(React)) {
-          // render is provided by user
           if (bridgeInfo?.render) {
-            Promise.resolve(bridgeInfo?.render(
-              <RawComponent
-                propsInfo={propsInfo}
-                appInfo={{
-                  name,
-                  basename,
-                  memoryRoute,
-                }}
-              />,
-              info.dom
-            )).then((root: RootType) => rootMap.set(info.dom, root));
+            Promise.resolve(
+              bridgeInfo?.render(
+                <RawComponent
+                  propsInfo={propsInfo}
+                  appInfo={{
+                    name,
+                    basename,
+                    memoryRoute,
+                  }}
+                />,
+                info.dom,
+              ),
+            ).then((root: RootType) => rootMap.set(info.dom, root));
           } else {
             const root: RootType = ReactDOMClient.createRoot(info.dom);
             root.render(

package/src/remote/index.tsx

@@ -1,4 +1,10 @@
-import React, { useContext, useEffect, useRef, useState, forwardRef } 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';
@@ -24,10 +30,12 @@ interface RemoteAppParams {
   name: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
-  dom?: string;
 }
 
-const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderParams, ref) {
+const RemoteAppWrapper = forwardRef(function (
+  props: RemoteAppParams & RenderFnParams,
+  ref,
+) {
   const RemoteApp = () => {
     const {
       name,
@@ -40,19 +48,24 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
       ...resProps
     } = props;
 
-    const rootRef: React.MutableRefObject<HTMLElement | null> = ref && 'current' in ref ? ref as React.MutableRefObject<HTMLElement | null> : useRef(null);
+    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;
-        
+
         let domElement = null;
         if (dom) {
-          domElement = document.getElementById(dom.replace('#', ''));
-          // TODO: if domElement is null, throw Error.
+          domElement = document.querySelector(dom);
+          if (!domElement || !(domElement instanceof HTMLElement)) {
+            throw new Error(`Invalid dom: ${dom}`);
+          }
           rootRef.current = domElement;
         } else {
           domElement = rootRef.current;
@@ -60,7 +73,6 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
 
         const renderProps = {
           name,
-          // dom: rootRef.current,
           dom: domElement,
           basename,
           memoryRoute,
@@ -73,7 +85,7 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
         );
         providerReturn.render(renderProps);
       });
-  
+
       return () => {
         clearTimeout(renderTimeout);
         setTimeout(() => {
@@ -90,23 +102,30 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
       };
     }, []);
 
-    return dom ? null : <div className={props?.className} style={props?.style} ref={rootRef}></div>;
-  }
+    return dom ? null : (
+      <div
+        className={props?.className}
+        style={props?.style}
+        ref={rootRef}
+      ></div>
+    );
+  };
 
   (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
-  return <RemoteApp />
+  return <RemoteApp />;
 });
 
 interface ExtraDataProps {
   basename?: string;
 }
 
-export function withRouterData<P extends Parameters<typeof RemoteAppWrapper>[0]>(
+export function withRouterData<
+  P extends Parameters<typeof RemoteAppWrapper>[0],
+>(
   WrappedComponent: React.ComponentType<P & ExtraDataProps>,
 ): React.FC<Omit<P, keyof ExtraDataProps>> {
-  
   const Component = forwardRef(function (props: any, ref) {
-    let enableDispathPopstate = false
+    let enableDispathPopstate = false;
     let routerContextVal: any;
     try {
       ReactRouterDOM.useLocation();
@@ -181,7 +200,7 @@ export function withRouterData<P extends Parameters<typeof RemoteAppWrapper>[0]>
   });
 
   return forwardRef(function (props, ref) {
-    return <Component {...props} ref={ref} />
+    return <Component {...props} ref={ref} />;
   }) as any;
 }