@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20241106063644 to 0.0.0-next-20241106104434

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20241106063644
+## 0.0.0-next-20241106104434
 
 ### Patch Changes
 
+- 3082116: feat: feat: support lifecycyle hooks in module-deferation bridge
+- Updated dependencies [8712967]
 - Updated dependencies [6db4c5f]
-  - @module-federation/sdk@0.0.0-next-20241106063644
-  - @module-federation/bridge-shared@0.0.0-next-20241106063644
+- Updated dependencies [3082116]
+  - @module-federation/runtime@0.0.0-next-20241106104434
+  - @module-federation/sdk@0.0.0-next-20241106104434
+  - @module-federation/bridge-shared@0.0.0-next-20241106104434
 
@@ -11,0 +15,0 @@ ## 0.7.0

dist/index.cjs.js

@@ -6,2 +6,3 @@ "use strict";
 const ReactRouterDOM = require("react-router-dom");
+const runtime = require("@module-federation/runtime");
 const ReactDOM = require("react-dom");
@@ -125,3 +126,19 @@ function _interopNamespaceDefault(e2) {
 }
+const getModuleName = (id) => {
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 const RemoteAppWrapper = React.forwardRef(function(props, ref) {
+  const host = runtime.getInstance();
+  context.LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
@@ -144,5 +161,6 @@ context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
       const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        const renderProps = {
+        let renderProps = {
           moduleName,
@@ -160,2 +178,12 @@ dom: rootRef.current,
         );
+        if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
+          const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
+            ...renderProps
+          });
+          const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
+          renderProps = {
+            ...renderProps,
+            ...extraProps
+          };
+        }
         providerReturn.render(renderProps);
@@ -166,3 +194,3 @@ });
         setTimeout(() => {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
@@ -173,3 +201,13 @@ context.LoggerInstance.log(
             );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
+              (_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps
+              });
+            }
+            (_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
               dom: renderDom.current
@@ -181,6 +219,7 @@ });
     }, []);
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: props == null ? void 0 : props.className,
+        className: rootComponentClassName,
         style: props == null ? void 0 : props.style,
@@ -341,3 +380,3 @@ ref: rootRef
 function createBridgeComponent(bridgeInfo) {
-  return () => {
+  return (params) => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -358,2 +397,3 @@ const RawComponent = (info) => {
       async render(info) {
+        var _a, _b;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -368,2 +408,5 @@ const {
         } = info;
+        const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
+        const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
+        const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
         const rootComponentWithErrorBoundary = (
@@ -379,3 +422,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
@@ -398,7 +441,12 @@ ))
         }
+        const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
+        afterBridgeRender && afterBridgeRender(info);
       },
       async destroy(info) {
+        var _a, _b;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
+        const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
+        beforeBridgeDestroy && beforeBridgeDestroy(info);
         if (context.atLeastReact18(React__namespace)) {
@@ -411,2 +459,4 @@ const root = rootMap.get(info.dom);
         }
+        const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
+        afterBridgeDestroy && afterBridgeDestroy(info);
       },
@@ -413,0 +463,0 @@ rawComponent: bridgeInfo.rootComponent,

dist/index.d.ts

@@ -8,7 +8,14 @@ import { ComponentType } from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
-    render(info: RenderFnParams & any): Promise<void>;
-    destroy(info: {
-        dom: HTMLElement;
-    }): Promise<void>;
+declare type BridgeHooks = {
+    beforeBridgeRender?: (params: RenderFnParams) => any;
+    afterBridgeRender?: (params: RenderFnParams) => any;
+    beforeBridgeDestroy?: (params: DestroyParams) => any;
+    afterBridgeDestroy?: (params: DestroyParams) => any;
+};
+
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): (params?: {
+    hooks?: BridgeHooks;
+}) => {
+    render(info: RenderParams): Promise<void>;
+    destroy(info: DestroyParams): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
@@ -25,2 +32,6 @@ __BRIDGE_FN__: (_args: T) => void;
 
+declare type DestroyParams = {
+    dom: HTMLElement;
+};
+
 declare type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
@@ -53,2 +64,3 @@ fallback?: never;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
+    hooks?: BridgeHooks;
 };
@@ -70,4 +82,6 @@
 
+declare type RenderParams = RenderFnParams & any;
+
 declare type RootType = HTMLElement | default_3.Root;
 
 export { }

dist/index.es.js

@@ -5,2 +5,3 @@ import * as React from "react";
 import * as ReactRouterDOM from "react-router-dom";
+import { getInstance } from "@module-federation/runtime";
 import ReactDOM from "react-dom";
@@ -106,3 +107,19 @@ const ErrorBoundaryContext = createContext(null);
 }
+const getModuleName = (id) => {
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
 const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const host = getInstance();
+  LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
@@ -125,5 +142,6 @@ LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
       const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        const renderProps = {
+        let renderProps = {
           moduleName,
@@ -141,2 +159,12 @@ dom: rootRef.current,
         );
+        if ((host == null ? void 0 : host.bridgeHook) && ((_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender)) {
+          const beforeBridgeRenderRes = (_d = (_c = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _c.lifecycle) == null ? void 0 : _d.beforeBridgeRender.emit({
+            ...renderProps
+          });
+          const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
+          renderProps = {
+            ...renderProps,
+            ...extraProps
+          };
+        }
         providerReturn.render(renderProps);
@@ -147,3 +175,3 @@ });
         setTimeout(() => {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
@@ -154,3 +182,13 @@ LoggerInstance.log(
             );
-            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
+            if ((host == null ? void 0 : host.bridgeHook) && ((_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.afterBridgeDestroy)) {
+              (_e = (_d = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy.emit({
+                moduleName,
+                dom: renderDom.current,
+                basename,
+                memoryRoute,
+                fallback,
+                ...resProps
+              });
+            }
+            (_f = providerInfoRef.current) == null ? void 0 : _f.destroy({
               dom: renderDom.current
@@ -162,6 +200,7 @@ });
     }, []);
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: props == null ? void 0 : props.className,
+        className: rootComponentClassName,
         style: props == null ? void 0 : props.style,
@@ -322,3 +361,3 @@ ref: rootRef
 function createBridgeComponent(bridgeInfo) {
-  return () => {
+  return (params) => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -339,2 +378,3 @@ const RawComponent = (info) => {
       async render(info) {
+        var _a, _b;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -349,2 +389,5 @@ const {
         } = info;
+        const beforeBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeRender) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeRender);
+        const beforeBridgeRenderRes = beforeBridgeRender && beforeBridgeRender(info);
+        const extraProps = beforeBridgeRenderRes && typeof beforeBridgeRenderRes === "object" && (beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps) ? beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps : {};
         const rootComponentWithErrorBoundary = (
@@ -360,3 +403,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
               },
-              propsInfo
+              propsInfo: { ...propsInfo, ...extraProps }
             }
@@ -379,7 +422,12 @@ ))
         }
+        const afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeRender);
+        afterBridgeRender && afterBridgeRender(info);
       },
       async destroy(info) {
+        var _a, _b;
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
+        const beforeBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.beforeBridgeDestroy) || ((_a = params == null ? void 0 : params.hooks) == null ? void 0 : _a.beforeBridgeDestroy);
+        beforeBridgeDestroy && beforeBridgeDestroy(info);
         if (atLeastReact18(React)) {
@@ -392,2 +440,4 @@ const root = rootMap.get(info.dom);
         }
+        const afterBridgeDestroy = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_b = params == null ? void 0 : params.hooks) == null ? void 0 : _b.afterBridgeDestroy);
+        afterBridgeDestroy && afterBridgeDestroy(info);
       },
@@ -394,0 +444,0 @@ rawComponent: bridgeInfo.rootComponent,

dist/router.cjs.js

@@ -68,3 +68,3 @@ "use strict";
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename,
+      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
       future: router.future,
@@ -71,0 +71,0 @@ window: router.window

dist/router.es.js

@@ -50,3 +50,3 @@ import React__default, { useContext } from "react";
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename,
+      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
       future: router.future,
@@ -53,0 +53,0 @@ window: router.window

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241106063644",
+  "version": "0.0.0-next-20241106104434",
   "publishConfig": {
@@ -44,4 +44,4 @@ "access": "public"
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241106063644",
-    "@module-federation/sdk": "0.0.0-next-20241106063644"
+    "@module-federation/bridge-shared": "0.0.0-next-20241106104434",
+    "@module-federation/sdk": "0.0.0-next-20241106104434"
   },
@@ -51,3 +51,4 @@ "peerDependencies": {
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4"
+    "react-router-dom": ">=4",
+    "@module-federation/runtime": "0.0.0-next-20241106104434"
   },
@@ -54,0 +55,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

115626

increased by10.98%

Lines of code

3109

increased by6.91%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20241106104434(transitive)

• + Added@module-federation/error-codes@0.0.0-next-20241106104434(transitive)

• + Added@module-federation/runtime@0.0.0-next-20241106104434(transitive)

• + Added@module-federation/sdk@0.0.0-next-20241106104434(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20241106063644(transitive)

• - Removed@module-federation/sdk@0.0.0-next-20241106063644(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20241106104434

• Updated@module-federation/sdk@0.0.0-next-20241106104434