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

Comparing version 0.0.0-next-20241108091829 to 0.0.0-next-20241111073908

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20241108091829
+## 0.0.0-next-20241111073908
 
@@ -8,8 +8,5 @@ ### Patch Changes
 - 3082116: feat: feat: support lifecycyle hooks in module-deferation bridge
-- Updated dependencies [8712967]
 - Updated dependencies [6db4c5f]
-- Updated dependencies [3082116]
-  - @module-federation/runtime@0.0.0-next-20241108091829
-  - @module-federation/sdk@0.0.0-next-20241108091829
-  - @module-federation/bridge-shared@0.0.0-next-20241108091829
+  - @module-federation/sdk@0.0.0-next-20241111073908
+  - @module-federation/bridge-shared@0.0.0-next-20241111073908
 
@@ -16,0 +13,0 @@ ## 0.7.0

dist/index.cjs.js

@@ -6,3 +6,2 @@ "use strict";
 const ReactRouterDOM = require("react-router-dom");
-const runtime = require("@module-federation/runtime");
 const ReactDOM = require("react-dom");
@@ -126,5 +125,17 @@ function _interopNamespaceDefault(e2) {
 }
+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) {
-  const host = runtime.getInstance();
-  context.LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
@@ -145,2 +156,4 @@ context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const providerInfoRef = React.useRef(null);
+    const hostInstance = getHostInstance(moduleName);
+    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     React.useEffect(() => {
@@ -164,6 +177,14 @@ const renderTimeout = setTimeout(() => {
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+        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 = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(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
+        );
       });
@@ -179,3 +200,3 @@ return () => {
             );
-            (_d = (_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_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,
@@ -192,3 +213,3 @@ dom: renderDom.current,
             });
-            (_h = (_g = (_f = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_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,
@@ -365,3 +386,3 @@ dom: renderDom.current,
 function createBridgeComponent(bridgeInfo) {
-  return (params) => {
+  return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -380,5 +401,13 @@ const RawComponent = (info) => {
     };
+    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;
+        var _a, _b, _c, _d, _e, _f;
         context.LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -393,6 +422,3 @@ const {
         } = info;
-        const moduleNameWithoutExpose = context.getModuleName(moduleName);
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        const instance = getModuleInstance(moduleName);
         context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
@@ -428,4 +454,3 @@ 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 afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_d = params == null ? void 0 : params.hooks) == null ? void 0 : _d.afterBridgeRender);
-        afterBridgeRender && afterBridgeRender(info);
+        ((_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)) || {};
       },
@@ -437,10 +462,3 @@ async destroy(info) {
         });
-        const moduleNameWithoutExpose = context.getModuleName(info.moduleName);
-        context.LoggerInstance.log(
-          `createBridgeComponent remote module without expose name >>>`,
-          moduleNameWithoutExpose
-        );
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        const instance = getModuleInstance(info.moduleName);
         context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
@@ -447,0 +465,0 @@ (_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);

dist/index.d.ts

@@ -15,5 +15,3 @@ import { ComponentType } from 'react';
 
-export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): (params?: {
-    hooks?: BridgeHooks;
-}) => {
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
@@ -20,0 +18,0 @@ destroy(info: DestroyParams): Promise<void>;

dist/index.es.js

@@ -5,3 +5,2 @@ import * as React from "react";
 import * as ReactRouterDOM from "react-router-dom";
-import { getInstance } from "@module-federation/runtime";
 import ReactDOM from "react-dom";
@@ -107,5 +106,17 @@ const ErrorBoundaryContext = createContext(null);
 }
+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) {
-  const host = getInstance();
-  LoggerInstance.log(`RemoteAppWrapper host >>>`, host);
   const RemoteApp2 = () => {
@@ -126,2 +137,4 @@ LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
     const providerInfoRef = useRef(null);
+    const hostInstance = getHostInstance(moduleName);
+    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
     useEffect(() => {
@@ -145,6 +158,14 @@ const renderTimeout = setTimeout(() => {
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
+        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 = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(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
+        );
       });
@@ -160,3 +181,3 @@ return () => {
             );
-            (_d = (_c = (_b = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_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,
@@ -173,3 +194,3 @@ dom: renderDom.current,
             });
-            (_h = (_g = (_f = host == null ? void 0 : host.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_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,
@@ -346,3 +367,3 @@ dom: renderDom.current,
 function createBridgeComponent(bridgeInfo) {
-  return (params) => {
+  return () => {
     const rootMap = /* @__PURE__ */ new Map();
@@ -361,5 +382,13 @@ const RawComponent = (info) => {
     };
+    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;
+        var _a, _b, _c, _d, _e, _f;
         LoggerInstance.log(`createBridgeComponent render Info`, info);
@@ -374,6 +403,3 @@ const {
         } = info;
-        const moduleNameWithoutExpose = getModuleName(moduleName);
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        const instance = getModuleInstance(moduleName);
         LoggerInstance.log(`createBridgeComponent remote instance`, instance);
@@ -409,4 +435,3 @@ 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 afterBridgeRender = (bridgeInfo == null ? void 0 : bridgeInfo.hooks) && (bridgeInfo == null ? void 0 : bridgeInfo.hooks.afterBridgeDestroy) || ((_d = params == null ? void 0 : params.hooks) == null ? void 0 : _d.afterBridgeRender);
-        afterBridgeRender && afterBridgeRender(info);
+        ((_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)) || {};
       },
@@ -418,10 +443,3 @@ async destroy(info) {
         });
-        const moduleNameWithoutExpose = getModuleName(info.moduleName);
-        LoggerInstance.log(
-          `createBridgeComponent remote module without expose name >>>`,
-          moduleNameWithoutExpose
-        );
-        const instance = __FEDERATION__.__INSTANCES__.find(
-          (v) => v.name === moduleNameWithoutExpose
-        );
+        const instance = getModuleInstance(info.moduleName);
         LoggerInstance.log(`createBridgeComponent remote instance`, instance);
@@ -428,0 +446,0 @@ (_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);

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241108091829",
+  "version": "0.0.0-next-20241111073908",
   "publishConfig": {
@@ -44,4 +44,4 @@ "access": "public"
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241108091829",
-    "@module-federation/sdk": "0.0.0-next-20241108091829"
+    "@module-federation/bridge-shared": "0.0.0-next-20241111073908",
+    "@module-federation/sdk": "0.0.0-next-20241111073908"
   },
@@ -51,4 +51,3 @@ "peerDependencies": {
     "react-dom": ">=16.9.0",
-    "react-router-dom": ">=4",
-    "@module-federation/runtime": "0.0.0-next-20241108091829"
+    "react-router-dom": ">=4"
   },
@@ -68,3 +67,4 @@ "devDependencies": {
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "@module-federation/runtime": "0.0.0-next-20241111073908"
   },
@@ -71,0 +71,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

117903

increased by1.37%

Dependency count

7

decreased by-12.5%

Lines of code

3190

increased by1.75%

Worsened metrics

Dev dependency count

14

increased by7.69%

Dependency changes

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

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

• + Addedreact-router@7.1.5(transitive)

• + Addedreact-router-dom@7.1.5(transitive)

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

• - Removed@module-federation/error-codes@0.0.0-next-20241108091829(transitive)

• - Removed@module-federation/runtime@0.0.0-next-20241108091829(transitive)

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

• - Removedreact-router@7.1.4(transitive)

• - Removedreact-router-dom@7.1.4(transitive)

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

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