@module-federation/devtools 0.0.0-next-20250926024003 → 0.0.0-perf-devtools-20260107043700

package/dist/lib/template/constant.js

@@ -2,21 +2,7 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,7 +20,9 @@ var constant_exports = {};
 __export(constant_exports, {
   BROWSER_ENV_KEY: () => BROWSER_ENV_KEY,
   ENABLEHMR: () => ENABLEHMR,
+  ENABLE_CLIP: () => ENABLE_CLIP,
   FormID: () => FormID,
+  __EAGER_SHARE__: () => __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__: () => __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__: () => __FEDERATION_DEVTOOLS__,
   defaultDataItem: () => defaultDataItem,
@@ -45,6 +33,7 @@ __export(constant_exports, {
 module.exports = __toCommonJS(constant_exports);
 const FormID = "FormID";
 const ENABLEHMR = "enableHMR";
+const ENABLE_CLIP = "enableClip";
 const proxyFormField = "proxyFormField";
 const defaultDataItem = {
   key: "",
@@ -52,9 +41,7 @@ const defaultDataItem = {
   checked: true
 };
 const defaultModuleData = {
-  proxyFormField: [
-    __spreadValues({}, defaultDataItem)
-  ]
+  proxyFormField: []
 };
 const statusInfo = {
   noProxy: {
@@ -79,13 +66,16 @@ const statusInfo = {
   }
 };
 const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+const __EAGER_SHARE__ = "eagerShare";
 const BROWSER_ENV_KEY = "MF_ENV";
 const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BROWSER_ENV_KEY,
   ENABLEHMR,
+  ENABLE_CLIP,
   FormID,
+  __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__,
   defaultDataItem,

package/dist/lib/utils/chrome/fast-refresh.js

@@ -50,8 +50,45 @@ var __async = (__this, __arguments, generator) => {
 var import_sdk = require("@module-federation/sdk");
 var import__ = require("../index");
 var import_sdk2 = require("../sdk");
-var import_template = require("../../template");
+var import_constant = require("../../template/constant");
 var _a;
+const SUPPORT_PKGS = ["react", "react-dom"];
+const fetchAndExecuteUmdSync = (url) => {
+  try {
+    const response = new XMLHttpRequest();
+    response.open("GET", url, false);
+    response.overrideMimeType("text/plain");
+    response.send();
+    if (response.status === 200) {
+      const scriptContent = response.responseText;
+      const moduleFunction = new Function(scriptContent);
+      return moduleFunction(window);
+    } else {
+      throw new Error(
+        `Failed to load module from ${url}: HTTP ${response.status}`
+      );
+    }
+  } catch (error) {
+    throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
+  }
+};
+const getDevtoolsMessage = () => {
+  const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
+  if (devtoolsMessageStr) {
+    try {
+      return JSON.parse(devtoolsMessageStr);
+    } catch (e) {
+      console.debug("Fast Refresh Plugin Error: ", e);
+    }
+  }
+  return null;
+};
+const devtoolsMessage = getDevtoolsMessage();
+if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && (devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__EAGER_SHARE__])) {
+  const [_name, version] = devtoolsMessage[import_constant.__EAGER_SHARE__];
+  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react", version));
+  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react-dom", version));
+}
 const fastRefreshPlugin = () => {
   return {
     name: "mf-fast-refresh-plugin",
@@ -59,17 +96,22 @@ const fastRefreshPlugin = () => {
       var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
       const shareInfo = userOptions.shared;
       const twinsShareInfo = args.shareInfo;
-      let enableFastRefresh;
-      let devtoolsMessage;
-      const devtoolsMessageStr = localStorage.getItem(import_template.__FEDERATION_DEVTOOLS__);
+      let enableFastRefresh = false;
+      let devtoolsMessage2 = {};
+      const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
       if (devtoolsMessageStr) {
         try {
-          devtoolsMessage = JSON.parse(devtoolsMessageStr);
-          enableFastRefresh = devtoolsMessage == null ? void 0 : devtoolsMessage.enableFastRefresh;
+          devtoolsMessage2 = JSON.parse(devtoolsMessageStr);
+          enableFastRefresh = devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__ENABLE_FAST_REFRESH__];
         } catch (e) {
           console.debug("Fast Refresh Plugin Error: ", e);
         }
       }
+      if (!enableFastRefresh) {
+        return __spreadValues({
+          userOptions
+        }, args);
+      }
       if (shareInfo && (0, import__.isObject)(shareInfo)) {
         let orderResolve;
         const orderPromise = new Promise((resolve) => {
@@ -82,10 +124,37 @@ const fastRefreshPlugin = () => {
             twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
           }
           sharedArr.forEach((shared, idx) => {
+            var _a3;
+            if (!SUPPORT_PKGS.includes(share)) {
+              return;
+            }
+            if ((_a3 = shared.shareConfig) == null ? void 0 : _a3.eager) {
+              if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
+                const eagerShare = [];
+                eagerShare.push(share, shared.version);
+                devtoolsMessage2[import_constant.__EAGER_SHARE__] = eagerShare;
+                localStorage.setItem(
+                  import_constant.__FEDERATION_DEVTOOLS__,
+                  JSON.stringify(devtoolsMessage2)
+                );
+                window.location.reload();
+              }
+              if (share === "react-dom") {
+                shared.lib = () => window.ReactDOM;
+              }
+              if (share === "react") {
+                shared.lib = () => window.React;
+              }
+              return;
+            }
             let get;
             if (share === "react") {
               get = () => (0, import_sdk.loadScript)((0, import__.getUnpkgUrl)(share, shared.version), {
-                attrs: { defer: true, async: false }
+                attrs: {
+                  defer: false,
+                  async: false,
+                  "data-mf-injected": "true"
+                }
               }).then(() => {
                 orderResolve();
               });
@@ -97,7 +166,7 @@ const fastRefreshPlugin = () => {
                 })
               );
             }
-            if (enableFastRefresh && typeof get === "function") {
+            if (typeof get === "function") {
               if (share === "react") {
                 shared.get = () => __async(this, null, function* () {
                   if (!window.React) {

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

@@ -66,7 +66,10 @@ __export(chrome_exports, {
   injectPostMessage: () => injectPostMessage,
   injectScript: () => injectScript,
   injectToast: () => injectToast,
-  setChromeStorage: () => setChromeStorage
+  refreshModuleInfo: () => refreshModuleInfo,
+  setChromeStorage: () => setChromeStorage,
+  setTargetTab: () => setTargetTab,
+  syncActiveTab: () => syncActiveTab
 });
 module.exports = __toCommonJS(chrome_exports);
 var import_constant = require("../../template/constant");
@@ -87,12 +90,37 @@ const injectPostMessage = (postMessageUrl) => {
 const TabInfo = {
   currentTabId: 0
 };
+const setTargetTab = (tab) => {
+  if (!tab || typeof tab.id !== "number") {
+    return;
+  }
+  window.targetTab = tab;
+  TabInfo.currentTabId = tab.id;
+};
+const syncActiveTab = (tabId) => __async(void 0, null, function* () {
+  try {
+    if (typeof tabId === "number") {
+      const tab = yield chrome.tabs.get(tabId);
+      setTargetTab(tab);
+      return tab;
+    }
+    const [activeTab] = yield getTabs({
+      active: true,
+      lastFocusedWindow: true
+    });
+    setTargetTab(activeTab);
+    return activeTab;
+  } catch (error) {
+    console.warn("[Module Federation Devtools] syncActiveTab failed", error);
+    return void 0;
+  }
+});
 function getCurrentTabId() {
   return TabInfo.currentTabId;
 }
 function getInspectWindowTabId() {
   return new Promise((resolve, reject) => {
-    var _a;
+    var _a, _b;
     if ((_a = chrome == null ? void 0 : chrome.devtools) == null ? void 0 : _a.inspectedWindow) {
       if (chrome.isDevMode) {
         resolve(0);
@@ -105,7 +133,7 @@ function getInspectWindowTabId() {
             const target = tabs.find(
               (tab) => tab.id === tabId
             );
-            window.targetTab = target;
+            setTargetTab(target);
           });
           console.log(
             "chrome.devtools.inspectedWindow.tabId",
@@ -119,7 +147,7 @@ function getInspectWindowTabId() {
         }
       );
     } else {
-      if (window.targetTab && window.targetTab.id) {
+      if ((_b = window.targetTab) == null ? void 0 : _b.id) {
         const tabId = window.targetTab.id;
         TabInfo.currentTabId = tabId;
         resolve(tabId);
@@ -129,48 +157,67 @@ function getInspectWindowTabId() {
     }
   });
 }
+const refreshModuleInfo = () => __async(void 0, null, function* () {
+  var _a;
+  if (typeof window !== "undefined" && ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo)) {
+  }
+  yield sleep(50);
+  const postMessageStartUrl = getUrl("post-message-start.js");
+  yield injectScript(injectPostMessage, false, postMessageStartUrl);
+});
 const getGlobalModuleInfo = (callback) => __async(void 0, null, function* () {
+  var _a, _b;
+  if (typeof window !== "undefined" && ((_a = window.__FEDERATION__) == null ? void 0 : _a.moduleInfo)) {
+    callback(
+      JSON.parse(
+        JSON.stringify((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo)
+      )
+    );
+  }
   yield sleep(300);
-  chrome.runtime.onMessage.addListener(
-    (message) => {
-      const { origin, data } = message;
-      if (!data || (data == null ? void 0 : data.appInfos)) {
-        return;
-      }
-      if (!(window == null ? void 0 : window.__FEDERATION__)) {
-        (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-        (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
-      }
-      window.__FEDERATION__.originModuleInfo = JSON.parse(
-        JSON.stringify(data == null ? void 0 : data.moduleInfo)
+  const listener = (message) => {
+    const { data } = message;
+    if (!data || (data == null ? void 0 : data.appInfos)) {
+      return;
+    }
+    if (!(window == null ? void 0 : window.__FEDERATION__)) {
+      (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
+      (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
+    }
+    window.__FEDERATION__.originModuleInfo = JSON.parse(
+      JSON.stringify(data == null ? void 0 : data.moduleInfo)
+    );
+    if (data == null ? void 0 : data.updateModule) {
+      const moduleIds = Object.keys(window.__FEDERATION__.originModuleInfo);
+      const shouldUpdate = !moduleIds.some(
+        (id) => id.includes(data.updateModule.name)
       );
-      if (data == null ? void 0 : data.updateModule) {
-        const moduleIds = Object.keys(window.__FEDERATION__.originModuleInfo);
-        const shouldUpdate = !moduleIds.some(
-          (id) => id.includes(data.updateModule.name)
-        );
-        if (shouldUpdate) {
-          const destination = data.updateModule.entry || data.updateModule.version;
-          window.__FEDERATION__.originModuleInfo[`${data.updateModule.name}:${destination}`] = {
-            remoteEntry: destination,
-            version: destination
-          };
-        }
+      if (shouldUpdate) {
+        const destination = data.updateModule.entry || data.updateModule.version;
+        window.__FEDERATION__.originModuleInfo[`${data.updateModule.name}:${destination}`] = {
+          remoteEntry: destination,
+          version: destination
+        };
       }
-      window.__FEDERATION__.moduleInfo = JSON.parse(
-        JSON.stringify(window.__FEDERATION__.originModuleInfo)
-      );
-      callback(window.__FEDERATION__.moduleInfo);
     }
-  );
-  const postMessageStartUrl = getUrl("post-message-start.js");
-  yield injectScript(injectPostMessage, false, postMessageStartUrl);
+    if (data == null ? void 0 : data.share) {
+      window.__FEDERATION__.__SHARE__ = data.share;
+    }
+    window.__FEDERATION__.moduleInfo = JSON.parse(
+      JSON.stringify(window.__FEDERATION__.originModuleInfo)
+    );
+    console.log("getGlobalModuleInfo window", window.__FEDERATION__);
+    callback(window.__FEDERATION__.moduleInfo);
+  };
+  chrome.runtime.onMessage.addListener(listener);
+  yield refreshModuleInfo();
+  return () => chrome.runtime.onMessage.removeListener(listener);
 });
 const getTabs = (queryOptions = {}) => chrome.tabs.query(queryOptions);
 const getScope = () => __async(void 0, null, function* () {
   const activeTab = window.targetTab;
-  const favIconUrl = activeTab == null ? void 0 : activeTab.favIconUrl;
-  return favIconUrl || "noScope";
+  const tabId = activeTab == null ? void 0 : activeTab.id;
+  return tabId ? String(tabId) : "noScope";
 });
 const injectScript = (excuteScript, world = false, ...args) => __async(void 0, null, function* () {
   yield getInspectWindowTabId();
@@ -181,10 +228,16 @@ const injectScript = (excuteScript, world = false, ...args) => __async(void 0, n
     func: excuteScript,
     world: world ? "MAIN" : "ISOLATED",
     args
-  }).then(() => {
+  }).then((results) => {
+    var _a;
     console.log("InjectScript success, excuteScript:", args);
+    if (Array.isArray(results) && results.length) {
+      return (_a = results[0]) == null ? void 0 : _a.result;
+    }
+    return void 0;
   }).catch((e) => {
     console.log(e, "InjectScript fail, excuteScript:", args);
+    return void 0;
   });
 });
 const getUrl = (file) => {
@@ -240,6 +293,9 @@ const setChromeStorage = (formData) => {
   injectPostMessage,
   injectScript,
   injectToast,
+  refreshModuleInfo,
   setChromeStorage,
+  setTargetTab,
+  syncActiveTab,
   ...require("./storage")
 });

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

@@ -0,0 +1,31 @@
+"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 messages_exports = {};
+__export(messages_exports, {
+  MESSAGE_ACTIVE_TAB_CHANGED: () => MESSAGE_ACTIVE_TAB_CHANGED,
+  MESSAGE_OPEN_SIDE_PANEL: () => MESSAGE_OPEN_SIDE_PANEL
+});
+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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MESSAGE_ACTIVE_TAB_CHANGED,
+  MESSAGE_OPEN_SIDE_PANEL
+});

package/dist/lib/utils/chrome/post-message-listener.js

@@ -11,7 +11,8 @@ if (window.moduleHandler) {
       origin,
       data: {
         moduleInfo: data.moduleInfo,
-        updateModule: data.updateModule
+        updateModule: data.updateModule,
+        share: data.share
       }
     }).catch(() => {
       return false;

package/dist/lib/utils/chrome/post-message-start.js

@@ -1,9 +1,17 @@
 "use strict";
-var _a;
+var _a, _b;
 const moduleInfo = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.moduleInfo;
 window.postMessage(
   {
-    moduleInfo
+    moduleInfo,
+    share: JSON.parse(
+      JSON.stringify((_b = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _b.__SHARE__, (_key, value) => {
+        if (typeof value === "function") {
+          return "Function";
+        }
+        return value;
+      })
+    )
   },
   "*"
 );

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

@@ -38,6 +38,7 @@ var __async = (__this, __arguments, generator) => {
 };
 var storage_exports = {};
 __export(storage_exports, {
+  getStorageValue: () => getStorageValue,
   mergeStorage: () => mergeStorage,
   removeStorage: () => removeStorage,
   removeStorageKey: () => removeStorageKey,
@@ -58,8 +59,12 @@ const removeStorage = (...args) => __async(void 0, null, function* () {
 const setStorage = (...args) => __async(void 0, null, function* () {
   return (0, import_index.injectScript)(import_sdk.setLocalStorage, false, ...args);
 });
+const getStorageValue = (...args) => __async(void 0, null, function* () {
+  return (0, import_index.injectScript)(import_sdk.getLocalStorage, false, ...args);
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getStorageValue,
   mergeStorage,
   removeStorage,
   removeStorageKey,

package/dist/lib/utils/sdk/graph.js

@@ -88,8 +88,8 @@ class DependencyGraph {
     if (!remotesInfo) {
       return;
     }
-    Object.keys(remotesInfo).forEach((dep) => {
-      const { matchedVersion } = remotesInfo[dep];
+    Object.entries(remotesInfo).forEach(([dep, remoteInfo]) => {
+      const { matchedVersion } = remoteInfo;
       let childId = dep;
       if (matchedVersion && matchedVersion !== "") {
         childId = `${childId}:${matchedVersion}`;
@@ -130,7 +130,7 @@ class DependencyGraph {
       type
     });
   }
-  run(targetGraph, target = this.initTarget, type, id = this.initTarget) {
+  run(targetGraph, target = this.initTarget, type, id = this.initTarget, depth = 0, maxDepth = Infinity) {
     var _a;
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
@@ -154,12 +154,17 @@ class DependencyGraph {
       targetGraph[targetWithoutType] || targetGraph[target] || {}
     );
     graphChilden.forEach((dep) => {
+      if (depth + 1 > maxDepth) {
+        return;
+      }
       this.addEdge(id + dep, id, id + dep);
       this.run(
         targetGraph[targetWithoutType] || targetGraph[target],
         dep,
         type,
-        id + dep
+        id + dep,
+        depth + 1,
+        maxDepth
       );
     });
   }
@@ -170,6 +175,22 @@ class DependencyGraph {
     const color = `rgba(${r},${g},${b},0.8)`;
     return color;
   }
+  calculateDepth(target = this.initTarget, visited = /* @__PURE__ */ new Set()) {
+    if (visited.has(target)) {
+      return 0;
+    }
+    visited.add(target);
+    const children = this.graph[target] ? Object.keys(this.graph[target]) : [];
+    if (children.length === 0) {
+      visited.delete(target);
+      return 0;
+    }
+    const maxChildDepth = Math.max(
+      ...children.map((child) => this.calculateDepth(child, visited))
+    );
+    visited.delete(target);
+    return 1 + maxChildDepth;
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var sdk_exports = {};
 __export(sdk_exports, {
   definePropertyGlobalVal: () => definePropertyGlobalVal,
+  getLocalStorage: () => getLocalStorage,
   getUnpkgUrl: () => getUnpkgUrl,
   isObject: () => isObject,
   mergeLocalStorage: () => mergeLocalStorage,
@@ -34,6 +35,14 @@ __reExport(sdk_exports, require("./graph"), module.exports);
 const setLocalStorage = (key, value) => {
   localStorage.setItem(key, value);
 };
+const getLocalStorage = (key) => {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.warn("[MF Devtools] getLocalStorage failed", error);
+    return null;
+  }
+};
 const removeLocalStorage = (key) => {
   const data = localStorage.getItem(key);
   if (data) {
@@ -83,6 +92,7 @@ const definePropertyGlobalVal = (target, key, val) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   definePropertyGlobalVal,
+  getLocalStorage,
   getUnpkgUrl,
   isObject,
   mergeLocalStorage,