@module-federation/devtools 2.4.0 → 2.5.0

package/dist/es/utils/chrome/post-message-listener.js

@@ -1,9 +1,23 @@
 import { sanitizePostMessagePayload } from "./safe-post-message";
+import {
+  MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT,
+  OBSERVABILITY_DEVTOOLS_SOURCE
+} from "./messages";
 if (window.moduleHandler) {
   window.removeEventListener("message", window.moduleHandler);
 } else {
   window.moduleHandler = (event) => {
     const { origin, data } = event;
+    if ((data == null ? void 0 : data.source) === OBSERVABILITY_DEVTOOLS_SOURCE) {
+      chrome.runtime.sendMessage({
+        type: MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT,
+        origin,
+        data: sanitizePostMessagePayload(data)
+      }).catch(() => {
+        return false;
+      });
+      return;
+    }
     if (!data.moduleInfo) {
       return;
     }

package/dist/es/utils/chrome/snapshot-plugin.js

@@ -1,36 +1,2 @@
-var _a;
-import { MODULE_DEVTOOL_IDENTIFIER } from "@module-federation/sdk";
-import runtimeHelpers from "@module-federation/runtime/helpers";
-import { definePropertyGlobalVal } from "../sdk";
-const chromeDevtoolsPlugin = function() {
-  return {
-    name: "mf-chrome-devtools-inject-snapshot-plugin",
-    beforeLoadRemoteSnapshot({ options }) {
-      const { nativeGlobal } = runtimeHelpers.global;
-      if (!options || options.inBrowser) {
-        const realLocalStorage = nativeGlobal.localStorage || localStorage;
-        const debugModuleInfoStr = realLocalStorage.getItem(
-          MODULE_DEVTOOL_IDENTIFIER
-        );
-        if (debugModuleInfoStr && !nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__) {
-          const chromeDevtoolSnapshot = JSON.parse(debugModuleInfoStr);
-          if (chromeDevtoolSnapshot) {
-            runtimeHelpers.global.addGlobalSnapshot(chromeDevtoolSnapshot);
-            nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__ = true;
-            console.warn(
-              "[Module Federation Devtools]: You are using the chrome devtool to proxy online module"
-            );
-          }
-        }
-      }
-    }
-  };
-};
-if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  definePropertyGlobalVal(window, "__FEDERATION__", {});
-  definePropertyGlobalVal(window, "__VMOK__", window.__FEDERATION__);
-}
-if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
-  window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
-}
-(_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(chromeDevtoolsPlugin());
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
+basicProxyCore.registerSnapshotPlugin(globalThis);

package/dist/es/utils/data/index.js

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { calculateSnapshot, calculateMicroAppSnapshot } from "./snapshot";
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
 const separateType = (moduleInfo) => {
   const consumers = {};
   const producer = [];
@@ -48,31 +48,11 @@ const separateType = (moduleInfo) => {
   };
 };
 const getModuleInfo = (proxyRules) => __async(void 0, null, function* () {
-  let freshModuleInfo;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = separateType(moduleInfo);
-  const overrides = {};
-  const isMicroMode = Object.keys(consumers).some((moduleId) => {
-    const subApps = consumers[moduleId].consumerList;
-    return Array.isArray(subApps) && subApps.length;
-  });
-  proxyRules.forEach((rule) => {
-    const { key, value } = rule;
-    overrides[key] = value;
-  });
-  if (isMicroMode) {
-    freshModuleInfo = calculateMicroAppSnapshot(moduleInfo, overrides);
-  } else {
-    freshModuleInfo = calculateSnapshot(moduleInfo, overrides);
-  }
-  console.debug("New Snapshot: ", freshModuleInfo);
-  return {
-    status: "success",
-    moduleInfo: freshModuleInfo,
-    overrides
-  };
+  return basicProxyCore.getModuleInfo(
+    proxyRules,
+    window.__FEDERATION__.moduleInfo
+  );
 });
-export * from "./snapshot";
 export {
   getModuleInfo,
   separateType

package/dist/es/vendor/basic-proxy-core.js

@@ -0,0 +1,155 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var require_basic_proxy_core = __commonJS({
+  "src/vendor/basic-proxy-core.js"(exports) {
+    var P = "__MF_DEVTOOLS_MODULE_INFO__", f = "__MF_DEVTOOLS__", G = "MF_ENV", h = "mf-chrome-devtools-inject-snapshot-plugin", L = "mf-chrome-devtools-override-remotes-plugin", l = () => globalThis, y = (e) => Object.prototype.toString.call(e) === "[object Object]", O = (e) => JSON.parse(JSON.stringify(e || {})), d = (e, t, o) => {
+      if (Object.prototype.hasOwnProperty.call(e, t)) {
+        e[t] = o;
+        return;
+      }
+      Object.defineProperty(e, t, { value: o, configurable: false, writable: true });
+    }, g = (e = l()) => {
+      !e.__FEDERATION__ && e.__VMOK__ && d(e, "__FEDERATION__", e.__VMOK__), e.__FEDERATION__ || d(e, "__FEDERATION__", {}), e.__VMOK__ || d(e, "__VMOK__", e.__FEDERATION__);
+      let t = e.__FEDERATION__;
+      return Array.isArray(t.__GLOBAL_PLUGIN__) || (t.__GLOBAL_PLUGIN__ = []), y(t.moduleInfo) || (t.moduleInfo = {}), t;
+    }, p = (e, t) => {
+      if (!e)
+        return t;
+      try {
+        return JSON.parse(e);
+      } catch (o) {
+        return t;
+      }
+    }, x = (e = l()) => {
+      var t;
+      return e.localStorage || ((t = e.window) == null ? void 0 : t.localStorage);
+    }, M = (e = l()) => {
+      let t = x(e);
+      return t ? p(t.getItem(P), null) : null;
+    }, I = (e) => {
+      let t = {};
+      return y(e) && Object.keys(e).forEach((o) => {
+        typeof e[o] == "string" && e[o] && (t[o] = e[o]);
+      }), t;
+    }, N = (e = l()) => {
+      let t = x(e);
+      if (!t)
+        return {};
+      let o = p(t.getItem(f), {});
+      return y(o.overrides) ? I(o.overrides) : I(o);
+    }, S = (e) => e.indexOf("http://") === 0 || e.indexOf("https://") === 0 || e.indexOf("//") === 0, m = (e, t) => {
+      Reflect.deleteProperty(e, t);
+    }, T = (e) => {
+      let t = {}, o = [];
+      return Object.keys(e || {}).forEach((s) => {
+        var r;
+        let i = (r = e[s]) == null ? void 0 : r.remotesInfo;
+        if (i) {
+          let n = Object.keys(i);
+          n.length && (n.forEach((c) => {
+            let a = c;
+            c.indexOf(":") !== -1 && (a = c.split(":").pop()), o.indexOf(a) === -1 && o.push(c);
+          }), t[s] = e[s]);
+        }
+      }), { consumers: t, producer: o };
+    }, R = (e, t) => {
+      let o = Object.keys(t || {}).reduce((i, r) => (r.indexOf(":") !== -1 && (i[r.split(":")[1]] = t[r]), i), {}), s = O(e);
+      return Object.keys(e || {}).forEach((i) => {
+        let r = e[i];
+        r != null && r.remotesInfo && Object.keys(r.remotesInfo).forEach((n) => {
+          let c = n.split(":")[1], a = t[n] || o[n] || t[c] || o[c];
+          a && (s[i].remotesInfo[n].matchedVersion = a, s[`${n}:${a}`] = { remoteEntry: a, version: a });
+        });
+      }), s;
+    }, v = (e, t) => {
+      let o = null, s = O(e);
+      if (Object.keys(e || {}).forEach((r) => {
+        let n = s[r];
+        n && Array.isArray(n.consumerList) && n.consumerList.length > 0 && (o = n);
+      }), !o)
+        return s;
+      let i = o.consumerList;
+      for (let r = 0; r < i.length; r++) {
+        let n = "", c = i[r];
+        if (Object.keys(t || {}).find((_) => {
+          let u = _;
+          return _.indexOf(":") !== -1 && (u = _.split(":")[1]), c.indexOf(u) !== -1 ? (n = _, true) : false;
+        })) {
+          let _ = t[n], u = c.split(":");
+          u[u.length - 1] = _, i[r] = u.join(":"), s[`${n}:${_}`] = { remoteEntry: _, version: _ };
+        }
+      }
+      return R(s, t);
+    }, F = (e = [], t) => {
+      var n;
+      let o = t || ((n = l().__FEDERATION__) == null ? void 0 : n.moduleInfo) || {}, s = {}, { consumers: i } = T(o), r = Object.keys(i).some((c) => {
+        var _;
+        let a = (_ = i[c]) == null ? void 0 : _.consumerList;
+        return Array.isArray(a) && a.length > 0;
+      });
+      return e.forEach((c) => {
+        c != null && c.key && (c != null && c.value) && (s[c.key] = c.value);
+      }), { status: "success", moduleInfo: r ? v(o, s) : R(o, s), overrides: s };
+    }, E = (e = l()) => {
+      let t = e, o = false;
+      return { name: h, beforeLoadRemoteSnapshot: (s) => {
+        var c;
+        let i = s == null ? void 0 : s.options;
+        if (i && i.inBrowser === false)
+          return;
+        let r = M(t);
+        if (!r || o)
+          return;
+        let n = g(t);
+        n.moduleInfo = Object.assign({}, n.moduleInfo || {}, r), o = true, (c = t.console) == null || c.warn("[Module Federation Devtools]: You are using the chrome devtool to proxy online module");
+      } };
+    }, B = (e = l()) => {
+      let t = e;
+      return { name: L, beforeRegisterRemote: (o) => {
+        var s;
+        try {
+          let i = o == null ? void 0 : o.remote;
+          if (!i)
+            return o;
+          let r = N(t), n = r[i.name] || r[i.alias || ""];
+          if (!n)
+            return o;
+          S(n) ? (m(i, "version"), i.entry = n) : (m(i, "entry"), i.version = n);
+        } catch (i) {
+          (s = t.console) == null || s.error(i);
+        }
+        return o;
+      } };
+    }, b = (e = l()) => {
+      let t = g(e);
+      return [B(e), E(e)].forEach((s) => {
+        var r, n;
+        ((r = t.__GLOBAL_PLUGIN__) == null ? void 0 : r.some((c) => c.name === s.name)) || (n = t.__GLOBAL_PLUGIN__) == null || n.push(s);
+      }), t.__GLOBAL_PLUGIN__ || [];
+    }, A = (e, t) => {
+      var r, n;
+      let o = g(e), s = t(e);
+      return ((r = o.__GLOBAL_PLUGIN__) == null ? void 0 : r.some((c) => c.name === s.name)) || (n = o.__GLOBAL_PLUGIN__) == null || n.push(s), s;
+    }, k = (e = l()) => A(e, B), D = (e = l()) => A(e, E), V = (e = l()) => {
+      let t = x(e);
+      if (!t)
+        return;
+      t.removeItem(P), t.removeItem(G);
+      let o = p(t.getItem(f), {});
+      y(o) && (m(o, "overrides"), Object.keys(o).length ? t.setItem(f, JSON.stringify(o)) : t.removeItem(f));
+    };
+    exports.calculateMicroAppSnapshot = v;
+    exports.calculateSnapshot = R;
+    exports.createOverridePlugin = B;
+    exports.createSnapshotPlugin = E;
+    exports.getModuleInfo = F;
+    exports.registerOverridePlugin = k;
+    exports.registerRuntimePlugins = b;
+    exports.registerSnapshotPlugin = D;
+    exports.resetProxyStorage = V;
+    exports.separateType = T;
+  }
+});
+export default require_basic_proxy_core();

package/dist/es/worker/index.js

@@ -1,4 +1,20 @@
+var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -40,12 +56,12 @@ var require_worker = __commonJS({
       });
       return activeTab == null ? void 0 : activeTab.id;
     });
-    const broadcastActiveTab = (tabId) => {
+    const broadcastActiveTab = (tabId, payload) => {
       try {
-        chrome.runtime.sendMessage({
+        chrome.runtime.sendMessage(__spreadValues({
           type: MESSAGE_ACTIVE_TAB_CHANGED,
           tabId
-        });
+        }, payload));
       } catch (error) {
         console.warn(
           "[Module Federation Devtools] Failed to broadcast active tab",
@@ -70,11 +86,11 @@ var require_worker = __commonJS({
       if (sidePanel.open) {
         yield sidePanel.open({ tabId: targetTabId });
       }
-      broadcastActiveTab(targetTabId);
+      broadcastActiveTab(targetTabId, { reason: "side-panel" });
       if (sidePanel.getOptions) {
         try {
           const options = yield sidePanel.getOptions({ tabId: targetTabId });
-          broadcastActiveTab(targetTabId);
+          broadcastActiveTab(targetTabId, { reason: "side-panel" });
           return options;
         } catch (error) {
           console.warn("[Module Federation Devtools] getOptions failed", error);
@@ -121,7 +137,7 @@ var require_worker = __commonJS({
         return;
       }
       try {
-        broadcastActiveTab(tabId);
+        broadcastActiveTab(tabId, { reason: "activated" });
       } catch (error) {
         console.warn(
           "[Module Federation Devtools] Failed to handle tab activation",
@@ -130,12 +146,15 @@ var require_worker = __commonJS({
       }
     }));
     chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-      if (changeInfo.status !== "complete") {
+      if (changeInfo.status !== "loading" && changeInfo.status !== "complete") {
         return;
       }
       if (tab == null ? void 0 : tab.active) {
         try {
-          broadcastActiveTab(tabId);
+          broadcastActiveTab(tabId, {
+            reason: "updated",
+            status: changeInfo.status
+          });
         } catch (error) {
           console.warn(
             "[Module Federation Devtools] Failed to handle tab update",

package/dist/lib/App.js

@@ -77,6 +77,7 @@ var import_Layout = __toESM(require("./component/Layout"));
 var import_DependencyGraph = __toESM(require("./component/DependencyGraph"));
 var import_ModuleInfo = __toESM(require("./component/ModuleInfo"));
 var import_SharedDepsExplorer = __toESM(require("./component/SharedDepsExplorer"));
+var import_LoadingTrace = __toESM(require("./component/LoadingTrace"));
 var import_LanguageSwitch = __toESM(require("./component/LanguageSwitch"));
 var import_ThemeToggle = __toESM(require("./component/ThemeToggle"));
 var import_utils = require("./utils");
@@ -145,6 +146,7 @@ const NAV_ITEMS = [
   { key: "proxy", i18nKey: "app.nav.proxy" },
   { key: "dependency", i18nKey: "app.nav.dependency" },
   { key: "share", i18nKey: "app.nav.share" },
+  { key: "loadingTrace", i18nKey: "app.nav.loadingTrace" },
   { key: "performance", i18nKey: "app.nav.performance" }
 ];
 const THEME_STORAGE_KEY = "mf-devtools-theme";
@@ -177,6 +179,7 @@ const InnerApp = (props) => {
   const [inspectedTab, setInspectedTab] = (0, import_react.useState)(
     window.targetTab
   );
+  const [inspectedTabRefreshKey, setInspectedTabRefreshKey] = (0, import_react.useState)(0);
   const [activePanel, setActivePanel] = (0, import_react.useState)("proxy");
   const [selectedModuleId, setSelectedModuleId] = (0, import_react.useState)(null);
   const [refreshing, setRefreshing] = (0, import_react.useState)(false);
@@ -284,10 +287,14 @@ const InnerApp = (props) => {
     };
   }, [applyModuleUpdate]);
   (0, import_react.useEffect)(() => {
-    const updateActiveTab = (tabId) => __async(void 0, null, function* () {
+    const updateActiveTab = (tabId, options) => __async(void 0, null, function* () {
       var _a, _b;
       const tab = yield (0, import_utils.syncActiveTab)(tabId);
       setInspectedTab(tab || void 0);
+      if ((options == null ? void 0 : options.status) === "loading") {
+        setInspectedTabRefreshKey((key) => key + 1);
+        return;
+      }
       if ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo) {
         applyModuleUpdate(cloneModuleInfo((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
       }
@@ -295,7 +302,7 @@ const InnerApp = (props) => {
     });
     const onMessage = (message, _sender, _sendResponse) => {
       if ((message == null ? void 0 : message.type) === import_messages.MESSAGE_ACTIVE_TAB_CHANGED) {
-        updateActiveTab(message.tabId);
+        updateActiveTab(message.tabId, { status: message.status });
       }
     };
     chrome.runtime.onMessage.addListener(onMessage);
@@ -423,6 +430,14 @@ const InnerApp = (props) => {
             )
           }
         );
+      case "loadingTrace":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_LoadingTrace.default,
+          {
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id,
+            resetKey: inspectedTabRefreshKey
+          }
+        );
       case "performance":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: t("app.performance.placeholder") });
       default:

package/dist/lib/App_module.css

@@ -76,10 +76,10 @@ body[arco-theme=dark] {
 }
 
 .activeTab_ae2ee {
-  border-color: rgba(99, 102, 241, 0.65);
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
+  border-color: rgba(24, 24, 27, 0.28);
+  background: linear-gradient(135deg, rgba(24, 24, 27, 0.08), rgba(113, 113, 122, 0.08));
   color: var(--color-text-1, #1e293b);
-  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25);
+  box-shadow: 0 12px 28px rgba(24, 24, 27, 0.14);
 }
 
 .panel_ae2ee {