@module-federation/bridge-react 0.0.0-next-20241015065721 → 0.0.0-next-20241016071233

package/dist/router-v6.cjs.js

@@ -65,7 +65,8 @@ function WraperRouterProvider(props) {
     return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
       future: router.future,
       window: router.window
     });

package/dist/router-v6.es.js

@@ -47,7 +47,8 @@ function WraperRouterProvider(props) {
     return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
       future: router.future,
       window: router.window
     });

package/dist/router.cjs.js

@@ -65,7 +65,7 @@ function WrapperRouterProvider(props) {
     return /* @__PURE__ */ React.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });

package/dist/router.es.js

@@ -47,7 +47,7 @@ function WrapperRouterProvider(props) {
     return /* @__PURE__ */ React__default.createElement(RouterProvider, { router: MemeoryRouterInstance });
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241015065721",
+  "version": "0.0.0-next-20241016071233",
   "publishConfig": {
     "access": "public"
   },
@@ -35,24 +35,23 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241015065721"
+    "@module-federation/bridge-shared": "0.0.0-next-20241016071233"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20241015065721"
+    "react-router-dom": ">=4"
   },
   "devDependencies": {
     "@testing-library/react": "15.0.7",
     "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "jsdom": "^24.1.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",

package/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/bridge/bridge-react/src",
   "projectType": "library",
+  "tags": ["type:pkg"],
   "targets": {
     "build": {
       "executor": "nx:run-commands",
@@ -22,6 +23,5 @@
         ]
       }
     }
-  },
-  "tags": ["type:pkg"]
+  }
 }

package/src/create.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
+import type { ProviderParams } from '@module-federation/bridge-shared';
+import { LoggerInstance } from './utils';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
-import { LoggerInstance } from './utils';
 import RemoteApp from './remote';
-import type { ProviderParams } from '@module-federation/bridge-shared';
 
 export interface RenderFnParams extends ProviderParams {
   dom?: any;

package/src/provider.tsx

@@ -2,37 +2,25 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOMClient from 'react-dom/client';
+import { RouterContext } from './context';
 import type {
   ProviderParams,
   RenderFnParams,
 } from '@module-federation/bridge-shared';
-import { ErrorBoundary } from 'react-error-boundary';
-import { RouterContext } from './context';
 import { LoggerInstance, atLeastReact18 } from './utils';
+import { ErrorBoundary } from 'react-error-boundary';
 
-type RenderParams = RenderFnParams & any;
-type DestroyParams = {
-  dom: HTMLElement;
-};
 type RootType = HTMLElement | ReactDOMClient.Root;
-
-type BridgeHooks = {
-  beforeBridgeRender?: (params: RenderFnParams) => any;
-  afterBridgeRender?: (params: RenderFnParams) => any;
-  beforeBridgeDestroy?: (params: DestroyParams) => any;
-  afterBridgeDestroy?: (params: DestroyParams) => any;
-};
-
 type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  hooks?: BridgeHooks;
 };
+
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
-  return (params: { hooks?: BridgeHooks }) => {
+  return () => {
     const rootMap = new Map<any, RootType>();
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -49,7 +37,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
     };
 
     return {
-      async render(info: RenderParams) {
+      async render(info: RenderFnParams & any) {
         LoggerInstance.log(`createBridgeComponent render Info`, info);
         const {
           moduleName,
@@ -59,21 +47,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           fallback,
           ...propsInfo
         } = info;
-
-        const beforeBridgeRender =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeRender) ||
-          params?.hooks?.beforeBridgeRender;
-
-        // 可通过beforeBridgeRender返回一个props对象，用于传递额外的 props 参数
-        const beforeBridgeRenderRes =
-          beforeBridgeRender && beforeBridgeRender(info);
-        const extraProps =
-          beforeBridgeRenderRes &&
-          typeof beforeBridgeRenderRes === 'object' &&
-          beforeBridgeRenderRes?.extraProps
-            ? beforeBridgeRenderRes?.extraProps
-            : {};
-
         const rootComponentWithErrorBoundary = (
           // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
           <ErrorBoundary FallbackComponent={fallback}>
@@ -83,11 +56,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
                 basename,
                 memoryRoute,
               }}
-              propsInfo={{ ...propsInfo, ...extraProps } as T}
+              propsInfo={propsInfo}
             />
           </ErrorBoundary>
         );
-        // call render function
+
         if (atLeastReact18(React)) {
           if (bridgeInfo?.render) {
             // in case bridgeInfo?.render is an async function, resolve this to promise
@@ -104,33 +77,11 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
-
-        const afterBridgeRender =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeRender;
-        afterBridgeRender && afterBridgeRender(info);
       },
-
-      async destroy(info: DestroyParams) {
+      async destroy(info: { dom: HTMLElement }) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-
-        // call beforeBridgeDestroy hook
-        if (
-          bridgeInfo?.hooks &&
-          bridgeInfo?.hooks.beforeBridgeDestroy &&
-          typeof bridgeInfo?.hooks.beforeBridgeDestroy === 'function'
-        ) {
-          bridgeInfo.hooks.beforeBridgeDestroy(info);
-        }
-
-        const beforeBridgeDestroy =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.beforeBridgeDestroy) ||
-          params?.hooks?.beforeBridgeDestroy;
-        beforeBridgeDestroy && beforeBridgeDestroy(info);
-
-        // call destroy function
         if (atLeastReact18(React)) {
           const root = rootMap.get(info.dom);
           (root as ReactDOMClient.Root)?.unmount();
@@ -138,11 +89,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
         } else {
           ReactDOM.unmountComponentAtNode(info.dom);
         }
-
-        const afterBridgeDestroy =
-          (bridgeInfo?.hooks && bridgeInfo?.hooks.afterBridgeDestroy) ||
-          params?.hooks?.afterBridgeDestroy;
-        afterBridgeDestroy && afterBridgeDestroy(info);
       },
       rawComponent: bridgeInfo.rootComponent,
       __BRIDGE_FN__: (_args: T) => {},

package/src/remote/index.tsx

@@ -7,10 +7,9 @@ import React, {
 } 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';
-import { registerBridgeLifeCycle } from '../lifecycle';
-import { LoggerInstance, pathJoin } from '../utils';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -40,7 +39,6 @@ const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
-  const bridgeHook = registerBridgeLifeCycle();
   const RemoteApp = () => {
     LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const {
@@ -67,7 +65,7 @@ const RemoteAppWrapper = forwardRef(function (
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
 
-        let renderProps = {
+        const renderProps = {
           moduleName,
           dom: rootRef.current,
           basename,
@@ -80,24 +78,6 @@ const RemoteAppWrapper = forwardRef(function (
           `createRemoteComponent LazyComponent render >>>`,
           renderProps,
         );
-
-        if (bridgeHook && bridgeHook?.lifecycle?.beforeBridgeRender) {
-          const beforeBridgeRenderRes =
-            bridgeHook?.lifecycle?.beforeBridgeRender.emit({
-              ...renderProps,
-            });
-          const extraProps =
-            beforeBridgeRenderRes &&
-            typeof beforeBridgeRenderRes === 'object' &&
-            beforeBridgeRenderRes?.extraProps
-              ? beforeBridgeRenderRes?.extraProps
-              : {};
-
-          renderProps = {
-            ...renderProps,
-            ...extraProps,
-          } as any;
-        }
         providerReturn.render(renderProps);
       });
 
@@ -109,16 +89,6 @@ const RemoteAppWrapper = forwardRef(function (
               `createRemoteComponent LazyComponent destroy >>>`,
               { moduleName, basename, dom: renderDom.current },
             );
-            if (bridgeHook && bridgeHook?.lifecycle?.afterBridgeDestroy) {
-              bridgeHook?.lifecycle?.afterBridgeDestroy.emit({
-                moduleName,
-                dom: renderDom.current,
-                basename,
-                memoryRoute,
-                fallback,
-                ...resProps,
-              });
-            }
             providerInfoRef.current?.destroy({
               dom: renderDom.current,
             });

package/src/router-v5.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 // The upper alias react-router-dom$ into this file avoids the loop
 // @ts-ignore
 import * as ReactRouterDom from 'react-router-dom/index.js';
+
 import { RouterContext } from './context';
 import { LoggerInstance } from './utils';
 

package/src/router-v6.tsx

@@ -60,7 +60,8 @@ function WraperRouterProvider(
     return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || router?.basename,
+      // In host app, the routerContextProps is {}, so we should use router.basename as fallback
+      basename: routerContextProps.basename || router.basename,
       future: router.future,
       window: router.window,
     });

package/src/router.tsx

@@ -59,7 +59,7 @@ function WrapperRouterProvider(
     return <RouterProvider router={MemeoryRouterInstance} />;
   } else {
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || router?.basename,
+      basename: routerContextProps.basename,
       future: router.future,
       window: router.window,
     });

package/src/lifecycle.ts

@@ -1,28 +0,0 @@
-import { getInstance } from '@module-federation/runtime';
-import helper from '@module-federation/runtime/helpers';
-
-function registerBridgeLifeCycle() {
-  const { registerPlugins, pluginHelper } = helper.global;
-  const host = getInstance();
-  const pluginSystem = new pluginHelper.PluginSystem({
-    beforeBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], any>(),
-    afterBridgeRender: new pluginHelper.SyncHook<[Record<string, any>], any>(),
-    beforeBridgeDestroy: new pluginHelper.SyncHook<
-      [Record<string, any>],
-      any
-    >(),
-    afterBridgeDestroy: new pluginHelper.SyncHook<[Record<string, any>], any>(),
-  });
-
-  if (host) {
-    registerPlugins<typeof pluginSystem.lifecycle, typeof pluginSystem>(
-      host?.options?.plugins,
-      [pluginSystem],
-    );
-    return pluginSystem;
-  }
-
-  return null;
-}
-
-export { registerBridgeLifeCycle };