@module-federation/devtools 0.0.0-perf-devtools-20260107043700 → 0.0.0-perf-website-code-usage-20260914033703

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/utils/sdk/graph.js

@@ -20,26 +20,38 @@ const validateSemver = (schema) => {
   return reg.test(schema);
 };
 const validatePort = (schema) => !isNaN(Number(schema));
-const splitModuleId = (target) => {
+const isEntrySegment = (segment) => segment.startsWith("http") || segment.startsWith("//");
+const parseModuleId = (target) => {
   const array = target.split(":");
   const { length } = array;
+  const result = {
+    name: target,
+    version: ""
+  };
   if (length === 1) {
-    return target;
+    return result;
   } else if (length >= 3) {
-    if (array[length - 1].endsWith(".json") || array[length - 1].endsWith(".js")) {
-      const idx = array.findIndex((t) => t.startsWith("http"));
-      return array[idx - 1];
-    } else {
-      return array[1];
+    const idx = array.findIndex(isEntrySegment);
+    if (idx > 0) {
+      result.name = array[idx - 1];
+      result.version = array.slice(idx).join(":");
+      return result;
     }
+    result.name = array[1];
+    result.version = array.slice(2).join(":");
+    return result;
   } else {
     const nameOrVersion = array[length - 1];
-    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion)) {
-      return array[0];
+    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion) || isEntrySegment(nameOrVersion) || nameOrVersion.endsWith(".json") || nameOrVersion.endsWith(".js")) {
+      result.name = array[0];
+      result.version = nameOrVersion;
+      return result;
     } else {
-      return nameOrVersion;
+      result.name = nameOrVersion;
+      return result;
     }
   }
+  return result;
 };
 class DependencyGraph {
   constructor(snapshot, initTarget) {
@@ -112,12 +124,14 @@ class DependencyGraph {
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
     }
-    const name = splitModuleId(target);
+    const { name, version } = parseModuleId(target);
     const targetWithoutType = name;
     let info = name;
     const remote = this.snapshot[target];
     if (remote && ("version" in remote || "remoteEntry" in remote)) {
       info += `:${remote.version || remote.remoteEntry}`;
+    } else if (version) {
+      info += `:${version}`;
     }
     if (!this.identifyMap.has(targetWithoutType)) {
       this.identifyMap.set(targetWithoutType, this.identify());

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.css

@@ -1,12 +1,13 @@
 .loaded-status-tag {
-  color: white !important;
-  background-color: black !important;
+  color: var(--color-bg-1, white) !important;
+  background-color: var(--color-neutral-10, black) !important;
 }
 .reused-status-tag {
   background-color: greenyellow !important;
+  color: black !important;
 }
 .common-tag {
-  color: rgb(113 113 122 / var(--tw-text-opacity)) !important;
-  background-color: #fff !important;
-  border-color: rgba(228, 228, 231, 0.5) !important;
+  color: var(--color-text-2, #71717a) !important;
+  background-color: var(--color-bg-1, #ffffff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
 }