@module-federation/bridge-react 0.0.0-next-20240723095610 → 0.0.0-next-20240724103050

package/src/create.tsx

@@ -1,5 +1,4 @@
 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 {
@@ -7,9 +6,11 @@ import {
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
 import RemoteApp from './remote';
+
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
+
 interface RemoteModule {
   provider: () => {
     render: (
@@ -52,13 +53,12 @@ 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}
             />
           );
@@ -84,35 +84,35 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   });
 }
 
-type RemoteProps = {
-  basename?: ProviderParams['basename'];
-  memoryRoute?: ProviderParams['memoryRoute'];
-  [key: string]: any;
-};
-
 export function createRemoteComponent<T, E extends keyof T>(info: {
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}): ForwardRefExoticComponent< PropsWithoutRef<RemoteProps> & 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]
-  //     : {}
-  //   : {};
+}) {
+  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(function (props, ref) {
-    const LazyComponent = createLazyRemoteComponent(info);
+  const LazyComponent = createLazyRemoteComponent(info);
+
+  return (
+    props: {
+      basename?: ProviderParams['basename'];
+      memoryRoute?: ProviderParams['memoryRoute'];
+    } & RawComponentType,
+  ) => {
     return (
       <ErrorBoundary FallbackComponent={info.fallback}>
         <React.Suspense fallback={info.loading}>
-          <LazyComponent {...props} ref={ref} />
+          <LazyComponent {...props} />
         </React.Suspense>
       </ErrorBoundary>
     );
-  });
+  };
 }

package/src/provider.tsx

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

package/src/remote/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance, pathJoin } from '../utils';
@@ -27,74 +27,67 @@ interface RemoteAppParams {
   exportName: string | number | symbol;
 }
 
-const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderParams, ref) {
-  const RemoteApp = () => {
-    const {
-      name,
-      memoryRoute,
-      basename,
-      providerInfo,
-      ...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;
-        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 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,
       };
-    }, []);
-  
-    //@ts-ignore
-    return <div ref={rootRef}></div>;
-  }
+      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>;
+};
 
-  (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
-  return <RemoteApp />
-});
+(RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
 
 interface ExtraDataProps {
   basename?: string;
 }
 
-export function withRouterData<P extends Parameters<typeof RemoteAppWrapper>[0]>(
+export function withRouterData<P extends Parameters<typeof RemoteApp>[0]>(
   WrappedComponent: React.ComponentType<P & ExtraDataProps>,
 ): React.FC<Omit<P, keyof ExtraDataProps>> {
-  
-  const Component = forwardRef(function (props: any, ref) {
-    let enableDispathPopstate = false
+  return (props: any) => {
+    let enableDispathPopstate = false;
     let routerContextVal: any;
     try {
       ReactRouterDOM.useLocation();
@@ -165,12 +158,8 @@ export function withRouterData<P extends Parameters<typeof RemoteAppWrapper>[0]>
       }, [location]);
     }
 
-    return <WrappedComponent {...(props as P)} basename={basename} ref={ref} />;
-  });
-
-  return forwardRef(function (props, ref) {
-    return <Component {...props} ref={ref} />
-  }) as any;
+    return <WrappedComponent {...(props as P)} basename={basename} />;
+  };
 }
 
-export default withRouterData(RemoteAppWrapper);
+export default withRouterData(RemoteApp);

package/src/router.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 // The upper alias react-router-dom$ into this file avoids the loop
 import * as ReactRouterDom from 'react-router-dom/';
-
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 
@@ -53,7 +52,6 @@ function WraperRouterProvider(
   const createBrowserRouter = (ReactRouterDom as any)[
     'create' + 'BrowserRouter'
   ];
- 
   if (!routerContextProps) return <RouterProvider {...props} />;
 
   if (routerContextProps.memoryRoute) {

package/vite.config.ts

@@ -22,8 +22,6 @@ export default defineConfig({
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
-        'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
-        'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -34,8 +32,6 @@ export default defineConfig({
         '@remix-run/router',
         'react-router',
         'react-router-dom/',
-        'react-router-dom/index.js',
-        'react-router-dom/dist/index.js',
       ],
     },
     minify: false,

package/dist/router-v5.cjs.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const ReactRouterDom = require("react-router-dom/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;

package/dist/router-v5.d.ts

@@ -1,8 +0,0 @@
-import { default as default_2 } from 'react';
-import * as ReactRouterDom from 'react-router-dom/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 { }

package/dist/router-v5.es.js

@@ -1,63 +0,0 @@
-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

@@ -1,87 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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 { }