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

package/dist/router-v5.es.js

@@ -0,0 +1,63 @@
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/dist/router-v6.cjs.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ReactRouterDom = require("react-router-dom/dist/index.js");
+const context = require("./context--mtFt3tp.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  context.LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ReactRouterDom__namespace.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = React.useContext(context.RouterContext) || {};
+  const routers = router.routes;
+  context.LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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]
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+exports.BrowserRouter = WraperRouter;
+exports.RouterProvider = WraperRouterProvider;
+Object.keys(ReactRouterDom).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => ReactRouterDom[k]
+    });
+});

package/dist/router-v6.d.ts

@@ -0,0 +1,11 @@
+import { default as default_2 } from 'react';
+import * as ReactRouterDom from 'react-router-dom/dist/index.js';
+
+export declare function BrowserRouter(props: Parameters<typeof ReactRouterDom.BrowserRouter>[0] | Parameters<typeof ReactRouterDom.MemoryRouter>[0]): default_2.JSX.Element;
+
+export declare function RouterProvider(props: Parameters<typeof ReactRouterDom.RouterProvider>[0]): default_2.JSX.Element;
+
+
+export * from "react-router-dom/dist/index.js";
+
+export { }

package/dist/router-v6.es.js

@@ -0,0 +1,64 @@
+import React__default, { useContext } from "react";
+import * as ReactRouterDom from "react-router-dom/dist/index.js";
+export * from "react-router-dom/dist/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
+function WraperRouter(props) {
+  const { basename, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  LoggerInstance.log(`WraperRouter info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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,
+      {
+        ...props,
+        initialEntries: [routerContextProps == null ? void 0 : routerContextProps.memoryRoute.entryPath]
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    ReactRouterDom.BrowserRouter,
+    {
+      ...propsRes,
+      basename: (routerContextProps == null ? void 0 : routerContextProps.basename) || basename
+    }
+  );
+}
+function WraperRouterProvider(props) {
+  const { router, ...propsRes } = props;
+  const routerContextProps = useContext(RouterContext) || {};
+  const routers = router.routes;
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
+    ...routerContextProps,
+    routerContextProps,
+    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]
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
+  } else {
+    const BrowserRouterInstance = createBrowserRouter(routers, {
+      basename: routerContextProps.basename,
+      future: router.future,
+      window: router.window
+    });
+    return /* @__PURE__ */ React__default.createElement(RouterProvider, { ...propsRes, router: BrowserRouterInstance });
+  }
+}
+export {
+  WraperRouter as BrowserRouter,
+  WraperRouterProvider as RouterProvider
+};

package/package.json

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

package/src/create.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 import {
@@ -10,13 +11,10 @@ import RemoteApp from './remote';
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
-
 interface RemoteModule {
   provider: () => {
     render: (
-      info: ProviderParams & {
-        dom: any;
-      },
+      info: RenderFnParams,
     ) => void;
     destroy: (info: { dom: any }) => void;
   };
@@ -27,6 +25,7 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
+  dom?: string;
 }) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
@@ -53,12 +52,13 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
             basename?: ProviderParams['basename'];
             memoryRoute?: ProviderParams['memoryRoute'];
           }
-        >((props, _ref) => {
+        >((props, ref) => {
           return (
             <RemoteApp
               name={moduleName}
               providerInfo={exportFn}
               exportName={info.export || 'default'}
+              ref={ref}
               {...props}
             />
           );
@@ -89,30 +89,25 @@ export function createRemoteComponent<T, E extends keyof T>(info: {
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}) {
-  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]
-      : {}
-    : {};
-
-  const LazyComponent = createLazyRemoteComponent(info);
+  dom?: string;
+}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>> {
+  // 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 (
-    props: {
-      basename?: ProviderParams['basename'];
-      memoryRoute?: ProviderParams['memoryRoute'];
-    } & RawComponentType,
-  ) => {
+  return forwardRef(function (props, ref) {    
+    const LazyComponent = createLazyRemoteComponent(info);
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} />
+          <LazyComponent {...props} dom={info?.dom} ref={ref} />
         </React.Suspense>
       </ErrorBoundary>
     );
-  };
+  });
 }

package/src/provider.tsx

@@ -9,45 +9,61 @@ 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) => 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 { appInfo, propsInfo, ...restProps } = info;
       const { name, memoryRoute, basename = '/' } = appInfo;
 
       return (
         <RouterContext.Provider value={{ name, basename, memoryRoute }}>
-          <bridgeInfo.rootComponent {...propsInfo} basename={basename} />
+          <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(
-            <RawComponent
-              propsInfo={propsInfo}
-              appInfo={{
-                name,
-                basename,
-                memoryRoute,
-              }}
-            />,
-          );
+          // 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));
+          } else {
+            const root: RootType = ReactDOMClient.createRoot(info.dom);
+            root.render(
+              <RawComponent
+                propsInfo={propsInfo}
+                appInfo={{
+                  name,
+                  basename,
+                  memoryRoute,
+                }}
+              />,
+            );
+            rootMap.set(info.dom, root);
+          }
         } else {
-          ReactDOM.render(
+          const renderFunc = bridgeInfo?.render || ReactDOM.render;
+          renderFunc(
             <RawComponent
               propsInfo={propsInfo}
               appInfo={{
@@ -60,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);
         }
@@ -84,5 +100,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-// function ShadowContent() {}

package/src/remote/index.tsx

@@ -1,11 +1,10 @@
-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';
 
 declare const __APP_VERSION__: string;
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -25,69 +24,89 @@ interface RemoteAppParams {
   name: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
+  dom?: string;
 }
 
-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 & ProviderParams, ref) {
+  const RemoteApp = () => {
+    const {
+      name,
+      memoryRoute,
+      basename,
+      providerInfo,
+      dom,
+      className,
+      style,
+      ...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;
+        
+        let domElement = null;
+        if (dom) {
+          domElement = document.getElementById(dom.replace('#', ''));
+          // TODO: if domElement is null, throw Error.
+          rootRef.current = domElement;
+        } else {
+          domElement = rootRef.current;
         }
+
+        const renderProps = {
+          name,
+          // dom: rootRef.current,
+          dom: domElement,
+          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,
+            });
+          }
+        });
+      };
+    }, []);
 
-  //@ts-ignore
-  return <div ref={rootRef}></div>;
-};
+    return dom ? null : <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) => {
-    let enableDispathPopstate = false;
+  
+  const Component = forwardRef(function (props: any, ref) {
+    let enableDispathPopstate = false
     let routerContextVal: any;
     try {
       ReactRouterDOM.useLocation();
@@ -158,8 +177,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);