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

Comparing version 0.0.0-next-20241111073908 to 0.0.0-next-20241112032845

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20241111073908
+## 0.0.0-next-20241112032845
 
 ### Patch Changes
 
-- 3082116: feat: feat: support lifecycyle hooks in module-deferation bridge
+- @module-federation/sdk@0.0.0-next-20241112032845
+- @module-federation/bridge-shared@0.0.0-next-20241112032845
+
+## 0.7.2
+
+### Patch Changes
+
+- @module-federation/sdk@0.7.2
+- @module-federation/bridge-shared@0.7.2
+
+## 0.7.1
+
+### Patch Changes
+
 - Updated dependencies [6db4c5f]
-  - @module-federation/sdk@0.0.0-next-20241111073908
-  - @module-federation/bridge-shared@0.0.0-next-20241111073908
+  - @module-federation/sdk@0.7.1
+  - @module-federation/bridge-shared@0.7.1
 
@@ -12,0 +25,0 @@ ## 0.7.0

dist/index.cjs.js

 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const context = require("./context-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 const ReactRouterDOM = require("react-router-dom");
@@ -124,16 +124,2 @@ const ReactDOM = require("react-dom");
 }
-const getHostInstance = (moduleName) => {
-  var _a, _b;
-  let hostInstance = void 0;
-  const currentName = context.getModuleName(moduleName);
-  const remoteInstance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
-    (v) => v.name === currentName
-  );
-  if (remoteInstance && (remoteInstance == null ? void 0 : remoteInstance.hostName)) {
-    hostInstance = window.__VMOK__.__INSTANCES__.find(
-      (instance) => instance.name === (remoteInstance == null ? void 0 : remoteInstance.hostName)
-    );
-  }
-  return hostInstance;
-};
 const RemoteAppWrapper = React.forwardRef(function(props, ref) {
@@ -155,10 +141,7 @@ const RemoteApp2 = () => {
     const providerInfoRef = React.useRef(null);
-    const hostInstance = getHostInstance(moduleName);
-    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     React.useEffect(() => {
       const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        let renderProps = {
+        const renderProps = {
           moduleName,
@@ -176,14 +159,3 @@ dom: rootRef.current,
         );
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
-        );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
-          renderProps
-        )) || {};
-        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          renderProps
-        );
       });
@@ -193,3 +165,3 @@ return () => {
         setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
+          var _a, _b;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
@@ -200,22 +172,5 @@ context.LoggerInstance.log(
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-              moduleName,
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
               dom: renderDom.current
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
           }
@@ -225,7 +180,6 @@ });
     }, []);
-    const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: rootComponentClassName,
+        className: props == null ? void 0 : props.className,
         style: props == null ? void 0 : props.style,
@@ -236,3 +190,3 @@ ref: rootRef
   };
-  RemoteApp2["__APP_VERSION__"] = "0.7.0";
+  RemoteApp2["__APP_VERSION__"] = "0.7.2";
   return /* @__PURE__ */ React.createElement(RemoteApp2, null);
@@ -401,13 +355,4 @@ });
     };
-    const getModuleInstance = (moduleName) => {
-      var _a, _b;
-      const moduleNameWithoutExpose = context.getModuleName(moduleName);
-      const instance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
-        (v) => v.name === moduleNameWithoutExpose
-      );
-      return instance;
-    };
     return {
       async render(info) {
-        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -422,5 +367,2 @@ const {
         } = info;
-        const instance = getModuleInstance(moduleName);
-        context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = (
@@ -436,3 +378,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
               },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+              propsInfo
             }
@@ -455,12 +397,7 @@ ))
         }
-        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
       async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const instance = getModuleInstance(info.moduleName);
-        context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
         if (context.atLeastReact18(React__namespace)) {
@@ -473,3 +410,2 @@ const root = rootMap.get(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
       },
@@ -476,0 +412,0 @@ rawComponent: bridgeInfo.rootComponent,

dist/index.d.ts

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

dist/index.es.js

 import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as getModuleName, b as atLeastReact18, R as RouterContext } from "./context-Dh6IUBWT.js";
+import { L as LoggerInstance, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-BcyT-d0V.js";
 import * as ReactRouterDOM from "react-router-dom";
@@ -105,16 +105,2 @@ import ReactDOM from "react-dom";
 }
-const getHostInstance = (moduleName) => {
-  var _a, _b;
-  let hostInstance = void 0;
-  const currentName = getModuleName(moduleName);
-  const remoteInstance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
-    (v) => v.name === currentName
-  );
-  if (remoteInstance && (remoteInstance == null ? void 0 : remoteInstance.hostName)) {
-    hostInstance = window.__VMOK__.__INSTANCES__.find(
-      (instance) => instance.name === (remoteInstance == null ? void 0 : remoteInstance.hostName)
-    );
-  }
-  return hostInstance;
-};
 const RemoteAppWrapper = forwardRef(function(props, ref) {
@@ -136,10 +122,7 @@ const RemoteApp2 = () => {
     const providerInfoRef = useRef(null);
-    const hostInstance = getHostInstance(moduleName);
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d, _e, _f;
         const providerReturn = providerInfo();
         providerInfoRef.current = providerReturn;
-        let renderProps = {
+        const renderProps = {
           moduleName,
@@ -157,14 +140,3 @@ dom: rootRef.current,
         );
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
-        );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
-          renderProps
-        )) || {};
-        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          renderProps
-        );
       });
@@ -174,3 +146,3 @@ return () => {
         setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
+          var _a, _b;
           if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
@@ -181,22 +153,5 @@ LoggerInstance.log(
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-              moduleName,
+            (_b = providerInfoRef.current) == null ? void 0 : _b.destroy({
               dom: renderDom.current
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
           }
@@ -206,7 +161,6 @@ });
     }, []);
-    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
     return /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: rootComponentClassName,
+        className: props == null ? void 0 : props.className,
         style: props == null ? void 0 : props.style,
@@ -217,3 +171,3 @@ ref: rootRef
   };
-  RemoteApp2["__APP_VERSION__"] = "0.7.0";
+  RemoteApp2["__APP_VERSION__"] = "0.7.2";
   return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
@@ -382,13 +336,4 @@ });
     };
-    const getModuleInstance = (moduleName) => {
-      var _a, _b;
-      const moduleNameWithoutExpose = getModuleName(moduleName);
-      const instance = (_b = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.__INSTANCES__) == null ? void 0 : _b.find(
-        (v) => v.name === moduleNameWithoutExpose
-      );
-      return instance;
-    };
     return {
       async render(info) {
-        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -403,5 +348,2 @@ const {
         } = info;
-        const instance = getModuleInstance(moduleName);
-        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
         const rootComponentWithErrorBoundary = (
@@ -417,3 +359,3 @@ // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
               },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
+              propsInfo
             }
@@ -436,12 +378,7 @@ ))
         }
-        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
       async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom
         });
-        const instance = getModuleInstance(info.moduleName);
-        LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
         if (atLeastReact18(React)) {
@@ -454,3 +391,2 @@ const root = rootMap.get(info.dom);
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
       },
@@ -457,0 +393,0 @@ rawComponent: bridgeInfo.rootComponent,

dist/router-v5.cjs.js

@@ -5,3 +5,3 @@ "use strict";
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const context = require("./context-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 const ReactRouterDom = require("react-router-dom/index.js");
@@ -8,0 +8,0 @@ function _interopNamespaceDefault(e) {

dist/router-v5.es.js

 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
 export * from "react-router-dom/index.js";
@@ -5,0 +5,0 @@ function WraperRouter(props) {

dist/router-v6.cjs.js

@@ -5,3 +5,3 @@ "use strict";
 const ReactRouterDom = require("react-router-dom/dist/index.js");
-const context = require("./context-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 function _interopNamespaceDefault(e) {
@@ -8,0 +8,0 @@ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

dist/router-v6.es.js

 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-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
 function WraperRouter(props) {
@@ -6,0 +6,0 @@ const { basename, ...propsRes } = props;

dist/router.cjs.js

@@ -5,3 +5,3 @@ "use strict";
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-DmzxwI_7.cjs");
+const context = require("./context-BBLu8BlQ.cjs");
 function _interopNamespaceDefault(e) {
@@ -69,3 +69,3 @@ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
@@ -72,0 +72,0 @@ window: router.window

dist/router.es.js

 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-Dh6IUBWT.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-BcyT-d0V.js";
 function WrapperRouter(props) {
@@ -50,3 +50,3 @@ const { basename, ...propsRes } = props;
     const BrowserRouterInstance = createBrowserRouter(routers, {
-      basename: routerContextProps.basename || (router == null ? void 0 : router.basename),
+      basename: routerContextProps.basename,
       future: router.future,
@@ -53,0 +53,0 @@ window: router.window

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241111073908",
+  "version": "0.0.0-next-20241112032845",
   "publishConfig": {
@@ -44,4 +44,4 @@ "access": "public"
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241111073908",
-    "@module-federation/sdk": "0.0.0-next-20241111073908"
+    "@module-federation/bridge-shared": "0.0.0-next-20241112032845",
+    "@module-federation/sdk": "0.0.0-next-20241112032845"
   },
@@ -66,4 +66,3 @@ "peerDependencies": {
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1",
-    "@module-federation/runtime": "0.0.0-next-20241111073908"
+    "vite-plugin-dts": "^3.9.1"
   },
@@ -70,0 +69,0 @@ "scripts": {

src/utils.ts

@@ -44,22 +44,1 @@ import React from 'react';
 }
-
-export const getModuleName = (id: string) => {
-  if (!id) {
-    return id;
-  }
-  // separate module name without detailed module path
-  // @vmok-e2e/edenx-demo-app2/button -> @vmok-e2e/edenx-demo-app2
-  const idArray = id.split('/');
-  if (idArray.length < 2) {
-    return id;
-  }
-  return idArray[0] + '/' + idArray[1];
-};
-
-export const getRootDomDefaultClassName = (moduleName: string) => {
-  if (!moduleName) {
-    return '';
-  }
-  const name = getModuleName(moduleName).replace(/\@/, '').replace(/\//, '-');
-  return `bridge-root-component-${name}`;
-};

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

Dev dependency count

13

decreased by-7.14%

Worsened metrics

Total package byte prevSize

104394

decreased by-11.46%

Lines of code

2908

decreased by-8.84%

Dependency changes

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

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

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

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

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

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