@module-federation/devtools 2.4.0 → 2.5.1

package/dist/lib/i18n/index.js

@@ -45,6 +45,7 @@ const resources = {
           proxy: "Proxy",
           dependency: "Dependency graph",
           share: "Shared",
+          loadingTrace: "Loading trace",
           performance: "Performance"
         },
         header: {
@@ -263,6 +264,94 @@ const resources = {
         shared: "Shared",
         entry: "Entry",
         version: "Version"
+      },
+      loadingTrace: {
+        title: "Loading Trace",
+        empty: "No loading report yet",
+        emptyEnableChrome: "No observability plugin was detected on the page. Enable Chrome observability to start collecting loading reports.",
+        status: {
+          enabled: "Observability is enabled for the current page.",
+          disabled: "Observability is not enabled for the current page.",
+          unavailable: "Current page is unavailable.",
+          reloading: "Configuration saved. Reloading current page.",
+          synced: "Reports synced.",
+          noReports: "No report found on the current page.",
+          userPlugin: "Application observability plugin detected. Syncing existing reports."
+        },
+        confirm: {
+          observeTitle: "Start observability?",
+          updateTitle: "Update configuration?",
+          content: "The current tab will reload after the configuration is saved."
+        },
+        actions: {
+          observeNow: "Observe now",
+          updateConfig: "Update config",
+          config: "Configuration",
+          disable: "Disable",
+          refresh: "Sync",
+          export: "Export",
+          confirm: "Confirm",
+          cancel: "Cancel"
+        },
+        config: {
+          level: "Level",
+          levelTip: "Controls how much event detail is kept. Verbose keeps the full timeline, summary keeps key results, and error focuses on failures.",
+          verbose: "Verbose",
+          summary: "Summary",
+          error: "Error",
+          console: "Console hints",
+          consoleTip: "Prints lightweight hints in the inspected page console. Turn it off when the page console should stay clean."
+        },
+        stats: {
+          state: "State",
+          reports: "Reports",
+          events: "Events",
+          latest: "Latest outcome",
+          customTip: "Custom means the inspected page already registered its own observability plugin, so reports are read from the page instead of only from the Chrome collection plugin."
+        },
+        reports: {
+          search: "Filter reports",
+          noMatch: "No matching report",
+          success: "Success",
+          failed: "Failed",
+          pending: "Pending",
+          recovered: "Recovered",
+          eventRecovered: "Recovered",
+          limited: "Basic observability",
+          lowVersionTip: "The current MF runtime version is too low, so only basic loading events can be collected. Fine-grained remoteEntry, init, expose, factory, and shared phases may be missing. Upgrade to 2.5.0+ for the full loading trace.",
+          unknownVersionTip: "The current MF runtime version cannot be detected, so Chrome observability may only collect basic loading events. Fine-grained remoteEntry, init, expose, factory, and shared phases may be missing."
+        },
+        currentLoad: {
+          title: "Current loading",
+          remoteReport: "Remote",
+          sharedReport: "Shared dependency",
+          consumer: "Current consumer",
+          request: "Request",
+          producer: "Producer",
+          remoteName: "Remote name",
+          expose: "Expose",
+          shared: "Shared dependency",
+          provider: "Provider",
+          requiredVersion: "Required version",
+          selectedVersion: "Selected version",
+          availableVersions: "Available versions"
+        },
+        loadedBefore: {
+          title: "Other consumer loading records",
+          consumerCount: "{{count}} consumer(s)",
+          producerLoaded: "Same producer was loaded before",
+          exposeLoaded: "Current expose was loaded before",
+          exposeNotLoaded: "Current expose was not loaded before",
+          consumer: "Consumer",
+          status: "Status",
+          exposes: "Loaded exposes",
+          unknownConsumer: "Unknown consumer",
+          entryReady: "remoteEntry is available",
+          entryMissing: "remoteEntry is not available",
+          initReady: "container was initialized",
+          initMissing: "container was not initialized",
+          noExposes: "No expose record"
+        }
       }
     }
   },
@@ -274,6 +363,7 @@ const resources = {
           proxy: "代理配置",
           dependency: "依赖关系图",
           share: "共享依赖",
+          loadingTrace: "加载追踪",
           performance: "性能"
         },
         header: {
@@ -492,6 +582,94 @@ const resources = {
         shared: "共享依赖",
         entry: "入口",
         version: "版本"
+      },
+      loadingTrace: {
+        title: "加载追踪",
+        empty: "暂无加载报告",
+        emptyEnableChrome: "当前页面未检测到观测插件。可以开启 Chrome 采集来收集加载报告。",
+        status: {
+          enabled: "当前页面已开启加载追踪。",
+          disabled: "当前页面未开启加载追踪。",
+          unavailable: "当前页面暂不可用。",
+          reloading: "配置已保存，正在刷新当前页面。",
+          synced: "报告已同步。",
+          noReports: "当前页面还没有报告。",
+          userPlugin: "已检测到页面自带观测插件，正在同步已有报告。"
+        },
+        confirm: {
+          observeTitle: "开启加载追踪？",
+          updateTitle: "更新配置？",
+          content: "保存配置后会刷新当前标签页。"
+        },
+        actions: {
+          observeNow: "开启采集",
+          updateConfig: "更新配置",
+          config: "配置",
+          disable: "关闭",
+          refresh: "同步",
+          export: "导出",
+          confirm: "确认",
+          cancel: "取消"
+        },
+        config: {
+          level: "记录级别",
+          levelTip: "控制保留多少事件细节。完整会保留完整链路，摘要只保留关键结果，错误只关注失败。",
+          verbose: "完整",
+          summary: "摘要",
+          error: "错误",
+          console: "控制台提示",
+          consoleTip: "在被调试页面的控制台打印轻量提示。如果想保持页面控制台干净，可以关闭。"
+        },
+        stats: {
+          state: "状态",
+          reports: "报告",
+          events: "事件",
+          latest: "最新结果",
+          customTip: "Custom 表示当前页面已经自己注册了观测插件，报告会从页面已有插件中读取，不只依赖 Chrome 插件注入采集。"
+        },
+        reports: {
+          search: "过滤报告",
+          noMatch: "没有匹配的报告",
+          success: "成功",
+          failed: "失败",
+          pending: "进行中",
+          recovered: "兜底成功",
+          eventRecovered: "兜底",
+          limited: "基础观测",
+          lowVersionTip: "当前 MF 运行时版本较低，只能采集基础加载事件。remoteEntry、init、expose、factory、shared 等细阶段可能缺失。升级到 2.5.0+ 后可获得完整链路。",
+          unknownVersionTip: "当前 MF 运行时版本无法识别，Chrome 观测可能只能采集基础加载事件。remoteEntry、init、expose、factory、shared 等细阶段可能缺失。"
+        },
+        currentLoad: {
+          title: "当前加载",
+          remoteReport: "远程模块",
+          sharedReport: "共享依赖",
+          consumer: "当前消费方",
+          request: "请求",
+          producer: "生产者",
+          remoteName: "生产者名称",
+          expose: "Expose",
+          shared: "共享依赖",
+          provider: "提供方",
+          requiredVersion: "要求版本",
+          selectedVersion: "实际版本",
+          availableVersions: "可用版本"
+        },
+        loadedBefore: {
+          title: "其他消费方加载记录",
+          consumerCount: "{{count}} 个消费方",
+          producerLoaded: "同一生产者之前已被加载",
+          exposeLoaded: "当前 expose 之前已被加载",
+          exposeNotLoaded: "当前 expose 之前未被加载",
+          consumer: "消费方",
+          status: "状态",
+          exposes: "已加载 expose",
+          unknownConsumer: "未知消费方",
+          entryReady: "remoteEntry 已拿到",
+          entryMissing: "remoteEntry 未拿到",
+          initReady: "容器已初始化",
+          initMissing: "容器未初始化",
+          noExposes: "暂无导出记录"
+        }
       }
     }
   }

package/dist/lib/utils/chrome/index.js

@@ -105,10 +105,11 @@ const syncActiveTab = (tabId) => __async(void 0, null, function* () {
       setTargetTab(tab);
       return tab;
     }
-    const [activeTab] = yield getTabs({
+    const tabs = yield getTabs({
       active: true,
       lastFocusedWindow: true
     });
+    const activeTab = Array.isArray(tabs) ? tabs[0] : void 0;
     setTargetTab(activeTab);
     return activeTab;
   } catch (error) {
@@ -131,9 +132,7 @@ function getInspectWindowTabId() {
         function(info, error) {
           const { tabId } = chrome.devtools.inspectedWindow;
           getTabs().then((tabs) => {
-            const target = tabs.find(
-              (tab) => tab.id === tabId
-            );
+            const target = Array.isArray(tabs) ? tabs.find((tab) => tab.id === tabId) : void 0;
             setTargetTab(target);
           });
           console.log(

package/dist/lib/utils/chrome/messages.js

@@ -19,13 +19,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var messages_exports = {};
 __export(messages_exports, {
   MESSAGE_ACTIVE_TAB_CHANGED: () => MESSAGE_ACTIVE_TAB_CHANGED,
-  MESSAGE_OPEN_SIDE_PANEL: () => MESSAGE_OPEN_SIDE_PANEL
+  MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT: () => MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT,
+  MESSAGE_OPEN_SIDE_PANEL: () => MESSAGE_OPEN_SIDE_PANEL,
+  OBSERVABILITY_DEVTOOLS_SOURCE: () => OBSERVABILITY_DEVTOOLS_SOURCE,
+  OBSERVABILITY_DEVTOOLS_STORAGE_KEY: () => OBSERVABILITY_DEVTOOLS_STORAGE_KEY
 });
 module.exports = __toCommonJS(messages_exports);
 const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
 const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";
+const MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT = "mf-devtools/observability-event";
+const OBSERVABILITY_DEVTOOLS_SOURCE = "module-federation/observability";
+const OBSERVABILITY_DEVTOOLS_STORAGE_KEY = "__MF_DEVTOOLS_OBSERVABILITY_CONFIG__";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MESSAGE_ACTIVE_TAB_CHANGED,
-  MESSAGE_OPEN_SIDE_PANEL
+  MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT,
+  MESSAGE_OPEN_SIDE_PANEL,
+  OBSERVABILITY_DEVTOOLS_SOURCE,
+  OBSERVABILITY_DEVTOOLS_STORAGE_KEY
 });

package/dist/lib/utils/chrome/observability-plugin.js

@@ -0,0 +1,86 @@
+"use strict";
+var import_chrome_devtool = require("@module-federation/observability-plugin/chrome-devtool");
+var import_messages = require("./messages");
+var import_observability_shared = require("./observability-shared");
+const DEVTOOLS_PLUGIN_NAME = "observability-plugin:chrome-extension";
+const LEGACY_DEVTOOLS_PLUGIN_NAME = "observability-plugin-devtools";
+const getFederationWindow = () => window;
+const safeReadStoredConfig = () => {
+  var _a;
+  try {
+    const raw = (_a = window.localStorage) == null ? void 0 : _a.getItem(
+      import_messages.OBSERVABILITY_DEVTOOLS_STORAGE_KEY
+    );
+    if (!raw) {
+      return void 0;
+    }
+    return (0, import_observability_shared.normalizeObservabilityDevtoolsConfig)(JSON.parse(raw));
+  } catch (e) {
+    return void 0;
+  }
+};
+const defineWritableGlobal = (key, value) => {
+  const targetWindow = getFederationWindow();
+  try {
+    Object.defineProperty(targetWindow, key, {
+      value,
+      configurable: true,
+      writable: true
+    });
+  } catch (e) {
+    targetWindow[key] = value;
+  }
+};
+const ensureFederationGlobal = () => {
+  var _a;
+  const targetWindow = getFederationWindow();
+  const federation = targetWindow.__FEDERATION__ || targetWindow.__VMOK__ || {};
+  if (!targetWindow.__FEDERATION__) {
+    defineWritableGlobal("__FEDERATION__", federation);
+  }
+  if (!targetWindow.__VMOK__) {
+    defineWritableGlobal("__VMOK__", targetWindow.__FEDERATION__);
+  }
+  if (!((_a = targetWindow.__FEDERATION__) == null ? void 0 : _a.__GLOBAL_PLUGIN__)) {
+    targetWindow.__FEDERATION__ = targetWindow.__FEDERATION__ || federation;
+    targetWindow.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
+  }
+  return targetWindow.__FEDERATION__;
+};
+const notifyInstalled = (status, reason, config) => {
+  try {
+    window.postMessage(
+      {
+        schemaVersion: 1,
+        source: import_messages.OBSERVABILITY_DEVTOOLS_SOURCE,
+        kind: status,
+        reason,
+        config,
+        createdAt: Date.now()
+      },
+      "*"
+    );
+  } catch (e) {
+  }
+};
+const install = () => {
+  const config = safeReadStoredConfig();
+  if (!(config == null ? void 0 : config.enabled)) {
+    return;
+  }
+  const federation = ensureFederationGlobal();
+  const globalPlugins = (federation == null ? void 0 : federation.__GLOBAL_PLUGIN__) || [];
+  if (globalPlugins.some(
+    (plugin2) => (plugin2 == null ? void 0 : plugin2.name) === DEVTOOLS_PLUGIN_NAME || (plugin2 == null ? void 0 : plugin2.name) === LEGACY_DEVTOOLS_PLUGIN_NAME
+  )) {
+    notifyInstalled("skipped", "already-installed", config);
+    return;
+  }
+  const plugin = (0, import_chrome_devtool.ChromeObservabilityPlugin)(
+    (0, import_observability_shared.createObservabilityPluginOptions)(config)
+  );
+  globalPlugins.push(plugin);
+  federation.__GLOBAL_PLUGIN__ = globalPlugins;
+  notifyInstalled("installed", void 0, config);
+};
+install();

package/dist/lib/utils/chrome/observability-shared.js

@@ -0,0 +1,126 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var observability_shared_exports = {};
+__export(observability_shared_exports, {
+  CHROME_OBSERVABILITY_SCOPE: () => CHROME_OBSERVABILITY_SCOPE,
+  DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG: () => DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG,
+  createObservabilityPluginOptions: () => createObservabilityPluginOptions,
+  normalizeObservabilityDevtoolsConfig: () => normalizeObservabilityDevtoolsConfig
+});
+module.exports = __toCommonJS(observability_shared_exports);
+var import_messages = require("./messages");
+const CHROME_OBSERVABILITY_SCOPE = "chrome_extension";
+const MIN_EVENTS = 10;
+const MAX_EVENTS = 1e3;
+const DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG = {
+  enabled: true,
+  level: "verbose",
+  maxEvents: 300,
+  console: true,
+  browser: {
+    enabled: true,
+    scope: CHROME_OBSERVABILITY_SCOPE,
+    mode: "development"
+  },
+  trace: {
+    printStart: true
+  },
+  react: {
+    injectLoadedCallback: false,
+    remoteIds: []
+  }
+};
+const isObject = (value) => typeof value === "object" && value !== null;
+const normalizeBoolean = (value, fallback) => typeof value === "boolean" ? value : fallback;
+const normalizeLevel = (value) => value === "error" || value === "summary" || value === "verbose" ? value : DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.level;
+const normalizeMode = (value) => value === "production" || value === "development" ? value : DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.browser.mode;
+const normalizeMaxEvents = (value) => {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.maxEvents;
+  }
+  return Math.max(MIN_EVENTS, Math.min(MAX_EVENTS, Math.floor(parsed)));
+};
+const normalizeScope = (value) => {
+  if (typeof value !== "string") {
+    return CHROME_OBSERVABILITY_SCOPE;
+  }
+  const trimmed = value.trim().replace(/[^\w:@.-]+/g, "-");
+  return trimmed || CHROME_OBSERVABILITY_SCOPE;
+};
+const normalizeObservabilityDevtoolsConfig = (value) => {
+  const source = isObject(value) ? value : {};
+  const browser = isObject(source.browser) ? source.browser : {};
+  const trace = isObject(source.trace) ? source.trace : {};
+  return {
+    enabled: normalizeBoolean(
+      source.enabled,
+      DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.enabled
+    ),
+    level: normalizeLevel(source.level),
+    maxEvents: normalizeMaxEvents(source.maxEvents),
+    console: normalizeBoolean(
+      source.console,
+      DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.console
+    ),
+    browser: {
+      enabled: normalizeBoolean(
+        browser.enabled,
+        DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.browser.enabled
+      ),
+      scope: normalizeScope(browser.scope),
+      mode: normalizeMode(browser.mode)
+    },
+    trace: {
+      printStart: normalizeBoolean(
+        trace.printStart,
+        DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG.trace.printStart
+      )
+    },
+    react: {
+      injectLoadedCallback: false,
+      remoteIds: []
+    }
+  };
+};
+const createObservabilityPluginOptions = (config) => ({
+  enabled: config.enabled,
+  level: config.level,
+  maxEvents: config.maxEvents,
+  console: config.console,
+  browser: {
+    enabled: config.browser.enabled,
+    scope: config.browser.scope,
+    mode: config.browser.mode
+  },
+  trace: {
+    printStart: config.trace.printStart
+  },
+  devtools: {
+    enabled: true,
+    source: import_messages.OBSERVABILITY_DEVTOOLS_SOURCE
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CHROME_OBSERVABILITY_SCOPE,
+  DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG,
+  createObservabilityPluginOptions,
+  normalizeObservabilityDevtoolsConfig
+});