@module-federation/devtools 0.0.0-perf-devtools-20260106124142 → 0.0.0-perf-devtools-20260108034446

package/dist/es/component/SharedDepsExplorer/index_module.css

@@ -0,0 +1,457 @@
+.container_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 12px;
+  max-width: 1024px;
+}
+
+@media (min-width: 768px) {
+  .container_967de {
+    padding: 24px 16px;
+  }
+}
+.heroSection_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.heroSubtitle_967de {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: #71717a;
+  margin: 0;
+}
+
+.heroTitle_967de {
+  font-size: 30px;
+  line-height: 36px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #18181b;
+  margin: 0;
+}
+
+.statsGrid_967de {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 16px;
+}
+
+@media (min-width: 640px) {
+  .statsGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .statsGrid_967de {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.card_967de {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #e4e4e7;
+  background-color: white;
+}
+
+.cardWithPadding_967de {
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid #e4e4e7;
+  background-color: white;
+  padding: 16px;
+}
+
+.cardHeader_967de {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 8px;
+}
+
+.statSpace_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.statLabel_967de {
+  font-size: 14px;
+  color: #71717a;
+}
+
+.statValue_967de {
+  font-size: 24px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #18181b;
+}
+
+.icon_967de {
+  height: 20px;
+  width: 20px;
+  color: #a1a1aa;
+}
+
+.iconSmall_967de {
+  height: 12px;
+  width: 12px;
+}
+
+.iconMedium_967de {
+  height: 14px;
+  width: 14px;
+  color: #71717a;
+}
+
+.statDescription_967de {
+  font-size: 12px;
+  color: #71717a;
+  margin: 0;
+}
+
+.statSubtext_967de {
+  font-size: 16px;
+  color: #a1a1aa;
+  font-weight: 400;
+}
+
+.cardFooter_967de {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #71717a;
+  white-space: nowrap;
+}
+
+.truncate_967de {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mr2_967de {
+  margin-right: 8px;
+}
+
+.badgeGroup_967de {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.statusTags_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.tagRow_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tagContent_967de {
+  display: flex;
+  align-items: center;
+}
+
+.tagValue_967de {
+  font-weight: 600;
+  color: #18181b;
+  margin-left: 4px;
+}
+
+.mr1_967de {
+  margin-right: 4px;
+}
+
+.rightPanels_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panelStack_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.cardTitle_967de {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlsGrid_967de {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 8px;
+}
+
+@media (min-width: 768px) {
+  .controlsGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.inputGroup_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.inputLabel_967de {
+  font-size: 12px;
+  color: #71717a;
+}
+
+.fullWidth_967de {
+  width: 100%;
+}
+
+.resultBox_967de {
+  border-radius: 6px;
+  border: 1px dashed #e4e4e7;
+  background-color: #f9fafb;
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.filterGrid_967de {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+@media (min-width: 768px) {
+  .filterGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .filterGrid_967de {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.padding2_967de {
+  padding: 8px;
+}
+
+.searchGrid_967de {
+  display: grid;
+  gap: 12px;
+  padding: 8px;
+}
+
+@media (min-width: 768px) {
+  .searchGrid_967de {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.searchInput_967de {
+  font-size: 12px;
+}
+
+.matchCount_967de {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.matchValue_967de {
+  font-weight: 600;
+  color: #18181b;
+  margin-left: 4px;
+}
+
+.loadingText_967de {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.errorText_967de {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: 12px;
+  color: #dc2626;
+}
+
+.noMatchText_967de {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  font-size: 12px;
+  color: #71717a;
+}
+
+.treeContainer_967de {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.collapseWrapper_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 0;
+}
+
+.providerHeader_967de {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  text-align: left;
+}
+
+.providerTitle_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.providerMeta_967de {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 10px;
+  color: #71717a;
+}
+
+.scopeList_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.scopeItem_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.scopeHeader_967de {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #52525b;
+}
+
+.tableContainer_967de {
+  overflow: hidden;
+  border-radius: 6px;
+  border: 1px solid #e4e4e7;
+  background-color: rgba(249, 250, 251, 0.4);
+}
+
+.cellCol_967de {
+  display: flex;
+  flex-direction: column;
+}
+
+.packageName_967de {
+  word-break: break-all;
+  font-family: monospace;
+  font-size: 11px;
+  color: #27272a;
+}
+
+.version_967de {
+  margin-top: 4px;
+  font-size: 11px;
+  color: #71717a;
+}
+
+.cellColGap_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.scopeText_967de {
+  font-size: 11px;
+  color: #71717a;
+}
+
+.tagContainer_967de {
+  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.configTags_967de {
+  margin-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-size: 10px;
+  color: #71717a;
+}
+
+.scale90_967de {
+  transform: scale(0.9);
+  transform-origin: left;
+}
+
+.popoverContent_967de {
+  width: 288px;
+}
+
+.popoverTitle_967de {
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.consumerList_967de {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: #374151;
+  padding-left: 0;
+  list-style: none;
+  margin: 0;
+}
+
+.consumerItem_967de {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dot_967de {
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  background-color: #10b981;
+}
+
+.btnContent_967de {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,42 @@
+var _a;
+import runtimeHelpers from "@module-federation/runtime/helpers";
+import { definePropertyGlobalVal } from "../sdk";
+import { __FEDERATION_DEVTOOLS__ } from "../../template";
+const chromeOverrideRemotesPlugin = function() {
+  return {
+    name: "mf-chrome-devtools-override-remotes-plugin",
+    beforeRegisterRemote(args) {
+      try {
+        const { remote } = args;
+        const overrideRemote = runtimeHelpers.global.nativeGlobal.localStorage.getItem(
+          __FEDERATION_DEVTOOLS__
+        );
+        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__)) {
+  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(chromeOverrideRemotesPlugin());

package/dist/lib/{index.css → App.css}

@@ -1,6 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 .loaded-status-tag {
   color: white !important;
   background-color: black !important;

package/dist/lib/App.js

@@ -53,6 +53,8 @@ __export(App_exports, {
 module.exports = __toCommonJS(App_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_19_adapter = require("@arco-design/web-react/es/_util/react-19-adapter");
+var import_App = require("./App.css");
 var import_web_react = require("@arco-design/web-react");
 var import_init = require("./init");
 var import_Layout = __toESM(require("./component/Layout"));
@@ -62,7 +64,7 @@ var import_SharedDepsExplorer = __toESM(require("./component/SharedDepsExplorer"
 var import_utils = require("./utils");
 var import_messages = require("./utils/chrome/messages");
 var import_arco = require("@arco-design/web-react/dist/css/arco.css");
-var import_App = __toESM(require("./App.module"));
+var import_App2 = __toESM(require("./App.module"));
 const cloneModuleInfo = (info) => {
   try {
     return JSON.parse(JSON.stringify(info || {}));
@@ -293,11 +295,11 @@ const App = (props) => {
           }
         );
       case "dependency":
-        return hasModule ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DependencyGraph.default, { snapshot: moduleInfo }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return hasModule ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DependencyGraph.default, { snapshot: moduleInfo }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_web_react.Empty,
           {
             description: "No ModuleInfo Detected",
-            className: import_App.default.empty
+            className: import_App2.default.empty
           }
         ) });
       case "share":
@@ -310,28 +312,28 @@ const App = (props) => {
           }
         );
       case "performance":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.placeholder, children: "WIP..." });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: "WIP..." });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_App.default.shell} ${import_App.default.overrideArco}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_App2.default.shell} ${import_App2.default.overrideArco}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: import_App2.default.sidebar, children: NAV_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         type: "button",
-        className: `${import_App.default.tabItem} ${activePanel === item.key ? import_App.default.activeTab : ""}`,
+        className: `${import_App2.default.tabItem} ${activePanel === item.key ? import_App2.default.activeTab : ""}`,
         onClick: () => setActivePanel(item.key),
         children: item.label
       },
       item.key
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App.default.panel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App.default.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.headerTop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.branding, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.logo, children: "Module Federation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.subtitle, children: "DevTools Companion" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: import_App2.default.panel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: import_App2.default.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.headerTop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.branding, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.logo, children: "Module Federation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.subtitle, children: "DevTools Companion" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tooltip, { content: "重新同步当前页面的 Federation 信息", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_web_react.Button,
@@ -340,33 +342,33 @@ const App = (props) => {
               type: "primary",
               loading: refreshing,
               onClick: handleRefresh,
-              className: import_App.default.refresh,
+              className: import_App2.default.refresh,
               children: "Refresh"
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.meta, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.scope, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.scopeLabel, children: "Focus Tab" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.meta, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.scope, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.scopeLabel, children: "Focus Tab" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_web_react.Tag, { className: "common-tag", children: (inspectedTab == null ? void 0 : inspectedTab.title) || "Waiting for target" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.stats, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: moduleCount }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Modules" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.stats, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: moduleCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Modules" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: producer.length }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Remotes" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: producer.length }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Remotes" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App.default.statBlock, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statValue, children: consumerCount }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App.default.statLabel, children: "Consumers" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_App2.default.statBlock, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statValue, children: consumerCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_App2.default.statLabel, children: "Consumers" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App.default.content, children: renderContent() }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.content, children: renderContent() }) })
     ] })
   ] });
 };

package/dist/lib/component/Layout/index.js

@@ -217,12 +217,23 @@ const Layout = (props) => {
           } else {
             setCondition(import_constant.statusInfo.noProxy);
           }
+          setCondition(import_constant.statusInfo.noProxy);
           return;
         }
         if (!clipChanged && effectiveSignature === lastEffectiveRulesRef.current) {
+          if (hadPreviousEffective) {
+            setCondition(import_constant.statusInfo.success);
+          } else {
+            setCondition(import_constant.statusInfo.noProxy);
+          }
           return;
         }
         if (rawRules.every((rule) => !rule.value)) {
+          if (hadPreviousEffective) {
+            setCondition(import_constant.statusInfo.success);
+          } else {
+            setCondition(import_constant.statusInfo.noProxy);
+          }
           return;
         }
         const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(effectiveRules) : yield (0, import_utils.getModuleInfo)(effectiveRules);
@@ -323,6 +334,11 @@ const Layout = (props) => {
         if (overridesApplied) {
           (0, import_utils.setChromeStorage)(storeData);
         }
+        if (effectiveRules.length) {
+          setCondition(import_constant.statusInfo.success);
+        } else {
+          setCondition(import_constant.statusInfo.noProxy);
+        }
       }
     });
     hydrateForm();