@module-federation/devtools 2.4.0 → 2.5.1

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,6 +46,7 @@ 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 {
@@ -119,6 +120,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 +153,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 +261,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 +276,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 +404,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 {