@module-federation/devtools 0.0.0-main-20260508022256 → 0.0.0-main-20260720131707

package/README.md

@@ -4,5 +4,8 @@
 
 - Proxy online Module Federation remote module to local
 - Let proxied remote module get hmr
+- Inject the Chrome-specific observability runtime plugin from the Loading Trace
+  tab, receive page events through `window.postMessage`, and export collected
+  loading reports
 
 https://module-federation.io/

package/dist/es/App.js

@@ -46,10 +46,12 @@ import ProxyLayout from "./component/Layout";
 import Dependency from "./component/DependencyGraph";
 import ModuleInfo from "./component/ModuleInfo";
 import SharedDepsExplorer from "./component/SharedDepsExplorer";
+import LoadingTrace from "./component/LoadingTrace";
 import LanguageSwitch from "./component/LanguageSwitch";
 import ThemeToggle from "./component/ThemeToggle";
 import {
   getGlobalModuleInfo,
+  normalizeModuleInfoPayload,
   refreshModuleInfo,
   separateType,
   syncActiveTab
@@ -62,10 +64,10 @@ import styles from "./App.module";
 import btnStyles from "./component/ThemeToggle.module";
 const cloneModuleInfo = (info) => {
   try {
-    return JSON.parse(JSON.stringify(info || {}));
+    return normalizeModuleInfoPayload(info);
   } catch (error) {
     console.warn("[MF Devtools] cloneModuleInfo failed", error);
-    return info || {};
+    return {};
   }
 };
 const normalizeShareValue = (target, seen = /* @__PURE__ */ new WeakSet()) => {
@@ -119,6 +121,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";
@@ -151,6 +154,7 @@ const InnerApp = (props) => {
   const [inspectedTab, setInspectedTab] = useState(
     window.targetTab
   );
+  const [inspectedTabRefreshKey, setInspectedTabRefreshKey] = useState(0);
   const [activePanel, setActivePanel] = useState("proxy");
   const [selectedModuleId, setSelectedModuleId] = useState(null);
   const [refreshing, setRefreshing] = useState(false);
@@ -258,10 +262,14 @@ const InnerApp = (props) => {
     };
   }, [applyModuleUpdate]);
   useEffect(() => {
-    const updateActiveTab = (tabId) => __async(void 0, null, function* () {
+    const updateActiveTab = (tabId, options) => __async(void 0, null, function* () {
       var _a, _b;
       const tab = yield 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));
       }
@@ -269,7 +277,7 @@ const InnerApp = (props) => {
     });
     const onMessage = (message, _sender, _sendResponse) => {
       if ((message == null ? void 0 : message.type) === MESSAGE_ACTIVE_TAB_CHANGED) {
-        updateActiveTab(message.tabId);
+        updateActiveTab(message.tabId, { status: message.status });
       }
     };
     chrome.runtime.onMessage.addListener(onMessage);
@@ -397,6 +405,14 @@ const InnerApp = (props) => {
             )
           }
         );
+      case "loadingTrace":
+        return /* @__PURE__ */ jsx(
+          LoadingTrace,
+          {
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id,
+            resetKey: inspectedTabRefreshKey
+          }
+        );
       case "performance":
         return /* @__PURE__ */ jsx("div", { className: styles.placeholder, children: t("app.performance.placeholder") });
       default:

package/dist/es/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 {

package/dist/es/component/DependencyGraphItem/index.js

@@ -4,6 +4,23 @@ import { Handle, Position } from "reactflow";
 import { useTranslation } from "react-i18next";
 import styles from "./index.module";
 import "reactflow/dist/style.css";
+const parseInfo = (info) => {
+  const array = info.split(":");
+  const [fallbackName, fallbackVersion = ""] = array;
+  const idx = array.findIndex((item, index) => {
+    return index > 0 && (item.startsWith("http") || item.startsWith("//"));
+  });
+  if (idx > 0) {
+    return {
+      name: array.slice(0, idx).join(":"),
+      version: array.slice(idx).join(":")
+    };
+  }
+  return {
+    name: fallbackName,
+    version: fallbackVersion
+  };
+};
 const GraphItem = (props) => {
   const [shareds, setShareds] = useState([]);
   const [exposes, setExposes] = useState([]);
@@ -11,13 +28,7 @@ const GraphItem = (props) => {
   let name;
   let version;
   const { info = "", color, remote } = props.data;
-  const infoArray = info.split(":");
-  if (info.endsWith(".json") || info.endsWith(".js")) {
-    name = infoArray.shift();
-    version = infoArray.join(":");
-  } else {
-    [name, version] = infoArray;
-  }
+  ({ name, version } = parseInfo(info));
   const isEntryType = (version == null ? void 0 : version.startsWith("http")) || (version == null ? void 0 : version.startsWith("//"));
   useEffect(() => {
     var _a, _b;