@module-federation/devtools 2.4.0 → 2.5.1

package/dist/lib/utils/chrome/observability.js

@@ -0,0 +1,234 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var observability_exports = {};
+__export(observability_exports, {
+  applyObservabilityConfig: () => applyObservabilityConfig,
+  disableObservabilityConfig: () => disableObservabilityConfig,
+  getObservabilityReportScopeLabel: () => getObservabilityReportScopeLabel,
+  mergeObservabilityReports: () => mergeObservabilityReports,
+  readObservabilityConfig: () => readObservabilityConfig,
+  readObservabilitySnapshot: () => readObservabilitySnapshot,
+  reloadInspectedPage: () => reloadInspectedPage
+});
+module.exports = __toCommonJS(observability_exports);
+var import_index = require("./index");
+var import_messages = require("./messages");
+var import_observability_shared = require("./observability-shared");
+const USER_OBSERVABILITY_PLUGIN_NAME = "observability-plugin";
+const CHROME_OBSERVABILITY_PLUGIN_NAME = "observability-plugin:chrome-extension";
+const LEGACY_CHROME_OBSERVABILITY_PLUGIN_NAME = "observability-plugin-devtools";
+const OBSERVABILITY_SNAPSHOT_CONTEXT = {
+  chromeScope: import_observability_shared.CHROME_OBSERVABILITY_SCOPE,
+  userPluginName: USER_OBSERVABILITY_PLUGIN_NAME,
+  chromePluginNames: [
+    CHROME_OBSERVABILITY_PLUGIN_NAME,
+    LEGACY_CHROME_OBSERVABILITY_PLUGIN_NAME
+  ]
+};
+const readConfigFromPage = (storageKey) => {
+  var _a;
+  try {
+    const raw = (_a = window.localStorage) == null ? void 0 : _a.getItem(storageKey);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+};
+const writeConfigToPage = (storageKey, config) => {
+  var _a;
+  (_a = window.localStorage) == null ? void 0 : _a.setItem(storageKey, JSON.stringify(config));
+  return config;
+};
+const removeConfigFromPage = (storageKey) => {
+  var _a;
+  (_a = window.localStorage) == null ? void 0 : _a.removeItem(storageKey);
+  return true;
+};
+const reloadPage = () => {
+  var _a;
+  (_a = globalThis.location) == null ? void 0 : _a.reload();
+};
+const readSnapshotFromPage = (storageKey, context) => {
+  const chromeScope = typeof (context == null ? void 0 : context.chromeScope) === "string" ? context.chromeScope : "chrome_extension";
+  const userPluginName = typeof (context == null ? void 0 : context.userPluginName) === "string" ? context.userPluginName : "observability-plugin";
+  const chromePluginNames = Array.isArray(context == null ? void 0 : context.chromePluginNames) ? context.chromePluginNames : [
+    "observability-plugin:chrome-extension",
+    "observability-plugin-devtools"
+  ];
+  const safeCopy = (value) => {
+    try {
+      return JSON.parse(JSON.stringify(value));
+    } catch (e) {
+      return void 0;
+    }
+  };
+  const rawConfig = (() => {
+    var _a;
+    try {
+      const raw = (_a = window.localStorage) == null ? void 0 : _a.getItem(storageKey);
+      return raw ? JSON.parse(raw) : null;
+    } catch (e) {
+      return null;
+    }
+  })();
+  const federation = window.__FEDERATION__ || window.__VMOK__;
+  const readers = (federation == null ? void 0 : federation.__OBSERVABILITY__) || {};
+  const reports = [];
+  const scopes = Object.keys(readers);
+  const isChromeObservabilityPluginName = (name) => chromePluginNames.includes(String(name));
+  const hasUserObservabilityPluginFromInstances = Array.isArray(
+    federation == null ? void 0 : federation.__INSTANCES__
+  ) ? federation.__INSTANCES__.some((instance) => {
+    var _a;
+    const plugins = (_a = instance == null ? void 0 : instance.options) == null ? void 0 : _a.plugins;
+    if (!Array.isArray(plugins)) {
+      return false;
+    }
+    return plugins.some(
+      (plugin) => (plugin == null ? void 0 : plugin.name) === userPluginName && !isChromeObservabilityPluginName(plugin == null ? void 0 : plugin.name)
+    );
+  }) : false;
+  const hasUserObservabilityPluginFromReaders = scopes.some(
+    (scope) => scope !== chromeScope
+  );
+  scopes.forEach((scope) => {
+    const reader = readers[scope];
+    if (!reader || typeof reader.getReports !== "function") {
+      return;
+    }
+    try {
+      const scopeReports = reader.getReports({ limit: 100 });
+      if (!Array.isArray(scopeReports)) {
+        return;
+      }
+      scopeReports.forEach((report) => {
+        const copied = safeCopy(report);
+        if (copied == null ? void 0 : copied.traceId) {
+          copied.__scope = scope;
+          reports.push(copied);
+        }
+      });
+    } catch (e) {
+    }
+  });
+  return {
+    config: rawConfig,
+    stored: Boolean(rawConfig),
+    scopes,
+    reports,
+    hasUserObservabilityPlugin: hasUserObservabilityPluginFromInstances || hasUserObservabilityPluginFromReaders
+  };
+};
+const readObservabilityConfig = () => __async(void 0, null, function* () {
+  const config = yield (0, import_index.injectScript)(
+    readConfigFromPage,
+    false,
+    import_messages.OBSERVABILITY_DEVTOOLS_STORAGE_KEY
+  );
+  return (0, import_observability_shared.normalizeObservabilityDevtoolsConfig)(
+    config || import_observability_shared.DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG
+  );
+});
+const applyObservabilityConfig = (config) => __async(void 0, null, function* () {
+  return (0, import_index.injectScript)(
+    writeConfigToPage,
+    false,
+    import_messages.OBSERVABILITY_DEVTOOLS_STORAGE_KEY,
+    (0, import_observability_shared.normalizeObservabilityDevtoolsConfig)(config)
+  );
+});
+const disableObservabilityConfig = () => __async(void 0, null, function* () {
+  return (0, import_index.injectScript)(removeConfigFromPage, false, import_messages.OBSERVABILITY_DEVTOOLS_STORAGE_KEY);
+});
+const reloadInspectedPage = () => __async(void 0, null, function* () {
+  return (0, import_index.injectScript)(reloadPage, false);
+});
+const readObservabilitySnapshot = () => __async(void 0, null, function* () {
+  const snapshot = yield (0, import_index.injectScript)(
+    readSnapshotFromPage,
+    true,
+    import_messages.OBSERVABILITY_DEVTOOLS_STORAGE_KEY,
+    OBSERVABILITY_SNAPSHOT_CONTEXT
+  );
+  return {
+    config: (0, import_observability_shared.normalizeObservabilityDevtoolsConfig)(
+      (snapshot == null ? void 0 : snapshot.config) || import_observability_shared.DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG
+    ),
+    stored: Boolean(snapshot == null ? void 0 : snapshot.stored),
+    scopes: Array.isArray(snapshot == null ? void 0 : snapshot.scopes) ? snapshot.scopes : [],
+    reports: Array.isArray(snapshot == null ? void 0 : snapshot.reports) ? snapshot.reports : [],
+    hasUserObservabilityPlugin: Boolean(snapshot == null ? void 0 : snapshot.hasUserObservabilityPlugin)
+  };
+});
+const mergeObservabilityReports = (currentReports, incomingReports) => {
+  const merged = /* @__PURE__ */ new Map();
+  currentReports.forEach((report) => {
+    if (report.traceId) {
+      merged.set(report.traceId, report);
+    }
+  });
+  incomingReports.forEach((report) => {
+    if (report.traceId) {
+      merged.set(report.traceId, report);
+    }
+  });
+  return Array.from(merged.values()).sort((left, right) => {
+    if ((right.updatedAt || 0) !== (left.updatedAt || 0)) {
+      return (right.updatedAt || 0) - (left.updatedAt || 0);
+    }
+    return (right.startedAt || 0) - (left.startedAt || 0);
+  });
+};
+const getObservabilityReportScopeLabel = (report) => {
+  const scope = report.__scope;
+  if (!scope || scope === import_observability_shared.CHROME_OBSERVABILITY_SCOPE) {
+    return void 0;
+  }
+  return `custom: ${scope}`;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  applyObservabilityConfig,
+  disableObservabilityConfig,
+  getObservabilityReportScopeLabel,
+  mergeObservabilityReports,
+  readObservabilityConfig,
+  readObservabilitySnapshot,
+  reloadInspectedPage
+});

package/dist/lib/utils/chrome/override-remote.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -13,53 +11,8 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var import_helpers = __toESM(require("@module-federation/runtime/helpers"));
-var import_sdk = require("@module-federation/sdk");
-var import_sdk2 = require("../sdk");
-var _a;
-const chromeOverrideRemotesPlugin = function() {
-  return {
-    name: "mf-chrome-devtools-override-remotes-plugin",
-    beforeRegisterRemote(args) {
-      try {
-        const { remote } = args;
-        const overrideRemote = import_helpers.default.global.nativeGlobal.localStorage.getItem(
-          import_sdk.MODULE_DEVTOOL_IDENTIFIER
-        );
-        if (!overrideRemote) {
-          return args;
-        }
-        const parsedOverrideRemote = JSON.parse(overrideRemote);
-        const overrideEntryOrVersion = parsedOverrideRemote[remote.name];
-        if (overrideEntryOrVersion) {
-          if (overrideEntryOrVersion.startsWith("http")) {
-            delete remote.version;
-            remote.entry = overrideEntryOrVersion;
-          } else {
-            delete remote.entry;
-            remote.version = overrideEntryOrVersion;
-          }
-        }
-      } catch (e) {
-        console.error(e);
-      }
-      return args;
-    }
-  };
-};
-if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk2.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(chromeOverrideRemotesPlugin());
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var override_remote_exports = {};
+module.exports = __toCommonJS(override_remote_exports);
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
+basicProxyCore.registerOverridePlugin(globalThis);

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

@@ -1,10 +1,21 @@
 "use strict";
 var import_safe_post_message = require("./safe-post-message");
+var import_messages = require("./messages");
 if (window.moduleHandler) {
   window.removeEventListener("message", window.moduleHandler);
 } else {
   window.moduleHandler = (event) => {
     const { origin, data } = event;
+    if ((data == null ? void 0 : data.source) === import_messages.OBSERVABILITY_DEVTOOLS_SOURCE) {
+      chrome.runtime.sendMessage({
+        type: import_messages.MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT,
+        origin,
+        data: (0, import_safe_post_message.sanitizePostMessagePayload)(data)
+      }).catch(() => {
+        return false;
+      });
+      return;
+    }
     if (!data.moduleInfo) {
       return;
     }

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -13,47 +11,8 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var import_sdk = require("@module-federation/sdk");
-var import_helpers = __toESM(require("@module-federation/runtime/helpers"));
-var import_sdk2 = require("../sdk");
-var _a;
-const chromeDevtoolsPlugin = function() {
-  return {
-    name: "mf-chrome-devtools-inject-snapshot-plugin",
-    beforeLoadRemoteSnapshot({ options }) {
-      const { nativeGlobal } = import_helpers.default.global;
-      if (!options || options.inBrowser) {
-        const realLocalStorage = nativeGlobal.localStorage || localStorage;
-        const debugModuleInfoStr = realLocalStorage.getItem(
-          import_sdk.MODULE_DEVTOOL_IDENTIFIER
-        );
-        if (debugModuleInfoStr && !nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__) {
-          const chromeDevtoolSnapshot = JSON.parse(debugModuleInfoStr);
-          if (chromeDevtoolSnapshot) {
-            import_helpers.default.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__)) {
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk2.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());
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var snapshot_plugin_exports = {};
+module.exports = __toCommonJS(snapshot_plugin_exports);
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
+basicProxyCore.registerSnapshotPlugin(globalThis);

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

@@ -15,7 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -43,8 +42,7 @@ __export(data_exports, {
   separateType: () => separateType
 });
 module.exports = __toCommonJS(data_exports);
-var import_snapshot = require("./snapshot");
-__reExport(data_exports, require("./snapshot"), module.exports);
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
 const separateType = (moduleInfo) => {
   const consumers = {};
   const producer = [];
@@ -74,33 +72,13 @@ 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 = (0, import_snapshot.calculateMicroAppSnapshot)(moduleInfo, overrides);
-  } else {
-    freshModuleInfo = (0, import_snapshot.calculateSnapshot)(moduleInfo, overrides);
-  }
-  console.debug("New Snapshot: ", freshModuleInfo);
-  return {
-    status: "success",
-    moduleInfo: freshModuleInfo,
-    overrides
-  };
+  return basicProxyCore.getModuleInfo(
+    proxyRules,
+    window.__FEDERATION__.moduleInfo
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getModuleInfo,
-  separateType,
-  ...require("./snapshot")
+  separateType
 });

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

@@ -0,0 +1,147 @@
+"use strict";
+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;

package/dist/lib/worker/index.js

@@ -1,4 +1,20 @@
 "use strict";
+var __defProp = Object.defineProperty;
+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 __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -32,12 +48,12 @@ const resolveTabId = (tabId) => __async(exports, null, function* () {
   });
   return activeTab == null ? void 0 : activeTab.id;
 });
-const broadcastActiveTab = (tabId) => {
+const broadcastActiveTab = (tabId, payload) => {
   try {
-    chrome.runtime.sendMessage({
+    chrome.runtime.sendMessage(__spreadValues({
       type: import_messages.MESSAGE_ACTIVE_TAB_CHANGED,
       tabId
-    });
+    }, payload));
   } catch (error) {
     console.warn(
       "[Module Federation Devtools] Failed to broadcast active tab",
@@ -62,11 +78,11 @@ const openSidePanel = (tabId) => __async(exports, null, function* () {
   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);
@@ -113,7 +129,7 @@ chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, funct
     return;
   }
   try {
-    broadcastActiveTab(tabId);
+    broadcastActiveTab(tabId, { reason: "activated" });
   } catch (error) {
     console.warn(
       "[Module Federation Devtools] Failed to handle tab activation",
@@ -122,12 +138,15 @@ chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, funct
   }
 }));
 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/types/src/component/LoadingTrace/index.d.ts

@@ -0,0 +1,6 @@
+interface LoadingTraceProps {
+    tabId?: number;
+    resetKey?: number;
+}
+declare const LoadingTrace: ({ tabId, resetKey }: LoadingTraceProps) => import("react").JSX.Element;
+export default LoadingTrace;

package/dist/types/src/utils/chrome/messages.d.ts

@@ -1,2 +1,5 @@
 export declare const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
 export declare const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";
+export declare const MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT = "mf-devtools/observability-event";
+export declare const OBSERVABILITY_DEVTOOLS_SOURCE = "module-federation/observability";
+export declare const OBSERVABILITY_DEVTOOLS_STORAGE_KEY = "__MF_DEVTOOLS_OBSERVABILITY_CONFIG__";