@module-federation/devtools 2.3.3 → 2.5.0

package/dist/lib/App.js

@@ -77,6 +77,7 @@ var import_Layout = __toESM(require("./component/Layout"));
 var import_DependencyGraph = __toESM(require("./component/DependencyGraph"));
 var import_ModuleInfo = __toESM(require("./component/ModuleInfo"));
 var import_SharedDepsExplorer = __toESM(require("./component/SharedDepsExplorer"));
+var import_LoadingTrace = __toESM(require("./component/LoadingTrace"));
 var import_LanguageSwitch = __toESM(require("./component/LanguageSwitch"));
 var import_ThemeToggle = __toESM(require("./component/ThemeToggle"));
 var import_utils = require("./utils");
@@ -145,6 +146,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";
@@ -177,6 +179,7 @@ const InnerApp = (props) => {
   const [inspectedTab, setInspectedTab] = (0, import_react.useState)(
     window.targetTab
   );
+  const [inspectedTabRefreshKey, setInspectedTabRefreshKey] = (0, import_react.useState)(0);
   const [activePanel, setActivePanel] = (0, import_react.useState)("proxy");
   const [selectedModuleId, setSelectedModuleId] = (0, import_react.useState)(null);
   const [refreshing, setRefreshing] = (0, import_react.useState)(false);
@@ -284,10 +287,14 @@ const InnerApp = (props) => {
     };
   }, [applyModuleUpdate]);
   (0, import_react.useEffect)(() => {
-    const updateActiveTab = (tabId) => __async(void 0, null, function* () {
+    const updateActiveTab = (tabId, options) => __async(void 0, null, function* () {
       var _a, _b;
       const tab = yield (0, import_utils.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));
       }
@@ -295,7 +302,7 @@ const InnerApp = (props) => {
     });
     const onMessage = (message, _sender, _sendResponse) => {
       if ((message == null ? void 0 : message.type) === import_messages.MESSAGE_ACTIVE_TAB_CHANGED) {
-        updateActiveTab(message.tabId);
+        updateActiveTab(message.tabId, { status: message.status });
       }
     };
     chrome.runtime.onMessage.addListener(onMessage);
@@ -423,6 +430,14 @@ const InnerApp = (props) => {
             )
           }
         );
+      case "loadingTrace":
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_LoadingTrace.default,
+          {
+            tabId: inspectedTab == null ? void 0 : inspectedTab.id,
+            resetKey: inspectedTabRefreshKey
+          }
+        );
       case "performance":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_App2.default.placeholder, children: t("app.performance.placeholder") });
       default:

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