@module-federation/bridge-react 0.0.0-next-20240814104132 → 0.0.0-next-20240815093707

package/src/remote/index.tsx

@@ -1,20 +1,13 @@
-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';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
-import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
 
 declare const __APP_VERSION__: string;
+
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
 }
 
 interface RemoteModule {
@@ -29,96 +22,71 @@ interface RemoteModule {
 }
 
 interface RemoteAppParams {
-  moduleName: string;
+  name: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
 }
 
-const RemoteAppWrapper = forwardRef(function (
-  props: RemoteAppParams & RenderFnParams,
-  ref,
-) {
-  const RemoteApp = () => {
-    LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
-    const {
-      moduleName,
-      memoryRoute,
-      basename,
-      providerInfo,
-      className,
-      style,
-      fallback,
-      ...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 = {
-          moduleName,
-          dom: rootRef.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        };
-        renderDom.current = rootRef.current;
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent render >>>`,
-          renderProps,
-        );
-        providerReturn.render(renderProps);
+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,
+          });
+        }
       });
+    };
+  }, []);
 
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          if (providerInfoRef.current?.destroy) {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { moduleName, basename, dom: renderDom.current },
-            );
-            providerInfoRef.current?.destroy({
-              dom: renderDom.current,
-            });
-          }
-        });
-      };
-    }, []);
-
-    return (
-      <div
-        className={props?.className}
-        style={props?.style}
-        ref={rootRef}
-      ></div>
-    );
-  };
+  //@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) {
+  return (props: any) => {
     let enableDispathPopstate = false;
     let routerContextVal: any;
     try {
@@ -190,12 +158,8 @@ export function withRouterData<
       }, [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

@@ -4,7 +4,7 @@ import * as ReactRouterDom from 'react-router-dom/';
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 
-function WrapperRouter(
+function WraperRouter(
   props:
     | Parameters<typeof ReactRouterDom.BrowserRouter>[0]
     | Parameters<typeof ReactRouterDom.MemoryRouter>[0],
@@ -12,11 +12,12 @@ function WrapperRouter(
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
 
-  LoggerInstance.log(`WrapperRouter info >>>`, {
+  LoggerInstance.log(`WraperRouter info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProps: props,
+    WraperRouterProps: props,
   });
+  if (!routerContextProps) return <ReactRouterDom.BrowserRouter {...props} />;
 
   if (routerContextProps?.memoryRoute) {
     return (
@@ -34,16 +35,16 @@ function WrapperRouter(
   );
 }
 
-function WrapperRouterProvider(
+function WraperRouterProvider(
   props: Parameters<typeof ReactRouterDom.RouterProvider>[0],
 ) {
   const { router, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};
   const routers = router.routes;
-  LoggerInstance.log(`WrapperRouterProvider info >>>`, {
+  LoggerInstance.log(`WraperRouterProvider info >>>`, {
     ...routerContextProps,
     routerContextProps,
-    WrapperRouterProviderProps: props,
+    WraperRouterProviderProps: props,
     router,
   });
   const RouterProvider = (ReactRouterDom as any)['Router' + 'Provider'];
@@ -51,6 +52,7 @@ function WrapperRouterProvider(
   const createBrowserRouter = (ReactRouterDom as any)[
     'create' + 'BrowserRouter'
   ];
+  if (!routerContextProps) return <RouterProvider {...props} />;
 
   if (routerContextProps.memoryRoute) {
     const MemeoryRouterInstance = createMemoryRouter(routers, {
@@ -69,5 +71,5 @@ function WrapperRouterProvider(
 
 export * from 'react-router-dom/';
 
-export { WrapperRouter as BrowserRouter };
-export { WrapperRouterProvider as RouterProvider };
+export { WraperRouter as BrowserRouter };
+export { WraperRouterProvider as RouterProvider };

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.tsx'),
-        'router-v6': path.resolve(__dirname, 'src/router.tsx'),
       },
       formats: ['cjs', 'es'],
       fileName: (format, entryName) => `${entryName}.${format}.js`,
@@ -34,33 +32,6 @@ export default defineConfig({
         '@remix-run/router',
         'react-router',
         'react-router-dom/',
-        'react-router-dom/index.js',
-        'react-router-dom/dist/index.js',
-      ],
-      plugins: [
-        {
-          name: 'modify-output-plugin',
-          generateBundle(options, bundle) {
-            for (const fileName in bundle) {
-              const chunk = bundle[fileName];
-              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
-                chunk.code = chunk.code.replace(
-                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
-                  /react-router-dom\/(?=[\'\"\`])/g,
-                  'react-router-dom/dist/index.js',
-                );
-              }
-
-              if (fileName.includes('router-v5') && chunk.type === 'chunk') {
-                chunk.code = chunk.code.replace(
-                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v5 dist file structure
-                  /react-router-dom\/(?=[\'\"\`])/g,
-                  'react-router-dom/index.js',
-                );
-              }
-            }
-          },
-        },
       ],
     },
     minify: false,

package/dist/router-v5.cjs.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("react");
-const ReactRouterDom = require("react-router-dom/index.js");
-require("./context--mtFt3tp.cjs");
-const router = require("./router.cjs.js");
-exports.BrowserRouter = router.BrowserRouter;
-exports.RouterProvider = router.RouterProvider;
-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-v5.d.ts

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

package/dist/router-v5.es.js

@@ -1,8 +0,0 @@
-import "react";
-export * from "react-router-dom/index.js";
-import "./context-Bw2PEwa6.js";
-import { BrowserRouter, RouterProvider } from "./router.es.js";
-export {
-  BrowserRouter,
-  RouterProvider
-};

package/dist/router-v6.cjs.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("react");
-const ReactRouterDom = require("react-router-dom/dist/index.js");
-require("./context--mtFt3tp.cjs");
-const router = require("./router.cjs.js");
-exports.BrowserRouter = router.BrowserRouter;
-exports.RouterProvider = router.RouterProvider;
-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/';
-
-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/";
-
-export { }

package/dist/router-v6.es.js

@@ -1,8 +0,0 @@
-import "react";
-export * from "react-router-dom/dist/index.js";
-import "./context-Bw2PEwa6.js";
-import { BrowserRouter, RouterProvider } from "./router.es.js";
-export {
-  BrowserRouter,
-  RouterProvider
-};