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

package/dist/es/component/SharedDepsExplorer/share-utils.js

@@ -0,0 +1,206 @@
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function computeLoadedStatus(entry) {
+  if (entry.loaded === true) {
+    return "loaded";
+  }
+  if (entry.loading) {
+    return "loading";
+  }
+  return "not-loaded";
+}
+function computeReuseStatus(entry) {
+  const useIn = Array.isArray(entry.useIn) ? entry.useIn : [];
+  const { from } = entry;
+  const reused = useIn.some((consumer) => consumer && consumer !== from);
+  return reused;
+}
+function normalizeEntry({
+  provider,
+  scope,
+  packageName,
+  versionKey,
+  entry
+}) {
+  var _a;
+  if (!isRecord(entry)) {
+    return null;
+  }
+  const sharedEntry = entry;
+  const loadedStatus = computeLoadedStatus(sharedEntry);
+  const reuseStatus = computeReuseStatus(sharedEntry);
+  const useIn = Array.isArray(sharedEntry.useIn) ? sharedEntry.useIn : [];
+  return {
+    id: `${provider}::${scope}::${packageName}::${versionKey}`,
+    provider,
+    scope,
+    packageName,
+    version: sharedEntry.version || versionKey,
+    from: sharedEntry.from,
+    useIn,
+    shareConfig: (_a = sharedEntry.shareConfig) != null ? _a : {},
+    strategy: sharedEntry.strategy,
+    loaded: sharedEntry.loaded,
+    loading: sharedEntry.loading,
+    loadedStatus,
+    reuseStatus
+  };
+}
+function normalizeShareData(raw) {
+  if (!raw || !isRecord(raw)) {
+    return [];
+  }
+  const items = [];
+  Object.entries(raw).forEach(([topKey, topValue]) => {
+    if (!isRecord(topValue)) {
+      return;
+    }
+    if (topKey === "default") {
+      const provider2 = "default";
+      const scope = "default";
+      const packagesObj = topValue;
+      Object.entries(packagesObj).forEach(([pkgName, versions]) => {
+        if (pkgName === "version" || !isRecord(versions)) {
+          return;
+        }
+        Object.entries(versions).forEach(([versionKey, entry]) => {
+          const normalized = normalizeEntry({
+            provider: provider2,
+            scope,
+            packageName: pkgName,
+            versionKey,
+            entry
+          });
+          if (normalized) {
+            items.push(normalized);
+          }
+        });
+      });
+      return;
+    }
+    const provider = topKey;
+    const scopesObj = topValue;
+    Object.entries(scopesObj).forEach(([scopeName, scopeValue]) => {
+      if (scopeName === "version" || !isRecord(scopeValue)) {
+        return;
+      }
+      const packagesObj = scopeValue;
+      Object.entries(packagesObj).forEach(([pkgName, versions]) => {
+        if (pkgName === "version" || !isRecord(versions)) {
+          return;
+        }
+        Object.entries(versions).forEach(([versionKey, entry]) => {
+          const normalized = normalizeEntry({
+            provider,
+            scope: scopeName,
+            packageName: pkgName,
+            versionKey,
+            entry
+          });
+          if (normalized) {
+            items.push(normalized);
+          }
+        });
+      });
+    });
+  });
+  return items;
+}
+function computeShareStats(versions) {
+  const providerSet = /* @__PURE__ */ new Set();
+  const scopeSet = /* @__PURE__ */ new Set();
+  const packageSet = /* @__PURE__ */ new Set();
+  let loadedCount = 0;
+  let reusedCount = 0;
+  versions.forEach((v) => {
+    providerSet.add(v.provider);
+    scopeSet.add(v.scope);
+    packageSet.add(v.packageName);
+    if (v.loadedStatus === "loaded") {
+      loadedCount += 1;
+    }
+    if (v.reuseStatus) {
+      reusedCount += 1;
+    }
+  });
+  return {
+    totalProviders: providerSet.size,
+    totalScopes: scopeSet.size,
+    totalPackages: packageSet.size,
+    totalVersions: versions.length,
+    loadedCount,
+    reusedCount
+  };
+}
+function groupByProviderScopePackage(versions) {
+  const tree = {};
+  versions.forEach((v) => {
+    if (!tree[v.provider]) {
+      tree[v.provider] = {};
+    }
+    if (!tree[v.provider][v.scope]) {
+      tree[v.provider][v.scope] = {};
+    }
+    if (!tree[v.provider][v.scope][v.packageName]) {
+      tree[v.provider][v.scope][v.packageName] = [];
+    }
+    tree[v.provider][v.scope][v.packageName].push(v);
+  });
+  return tree;
+}
+function getFilterOptions(versions) {
+  const providerSet = /* @__PURE__ */ new Set();
+  const scopeSet = /* @__PURE__ */ new Set();
+  const packageSet = /* @__PURE__ */ new Set();
+  const versionSet = /* @__PURE__ */ new Set();
+  versions.forEach((v) => {
+    providerSet.add(v.provider);
+    scopeSet.add(v.scope);
+    packageSet.add(v.packageName);
+    versionSet.add(v.version);
+  });
+  return {
+    providers: Array.from(providerSet).sort(),
+    scopes: Array.from(scopeSet).sort(),
+    packages: Array.from(packageSet).sort(),
+    versions: Array.from(versionSet).sort()
+  };
+}
+function findPackageProvider(versions, packageName, version) {
+  var _a;
+  const candidates = versions.filter(
+    (v) => v.packageName === packageName && (!version || v.version === version)
+  );
+  if (!candidates.length) {
+    return null;
+  }
+  const providers = Array.from(new Set(candidates.map((v) => v.from))).sort();
+  const hasLoaded = candidates.some((v) => v.loadedStatus === "loaded");
+  const hasLoading = !hasLoaded && candidates.some((v) => v.loadedStatus === "loading");
+  let status = "not-loaded";
+  if (hasLoaded) {
+    status = "loaded";
+  } else if (hasLoading) {
+    status = "loading";
+  }
+  return {
+    packageName,
+    version: version || ((_a = candidates[0]) == null ? void 0 : _a.version),
+    providers,
+    status
+  };
+}
+function getReusedVersions(versions) {
+  return versions.filter((v) => v.reuseStatus === true);
+}
+export {
+  computeLoadedStatus,
+  computeReuseStatus,
+  computeShareStats,
+  findPackageProvider,
+  getFilterOptions,
+  getReusedVersions,
+  groupByProviderScopePackage,
+  normalizeShareData
+};

package/dist/es/index.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.loaded-status-tag {
+  color: white !important;
+  background-color: black !important;
+}
+.reused-status-tag {
+  background-color: greenyellow !important;
+}
+.common-tag {
+  color: rgb(113 113 122 / var(--tw-text-opacity)) !important;
+  background-color: #fff !important;
+  border-color: rgba(228, 228, 231, 0.5) !important;
+}

package/dist/es/template/constant.js

@@ -1,21 +1,6 @@
-var __defProp = Object.defineProperty;
-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;
-};
 const FormID = "FormID";
 const ENABLEHMR = "enableHMR";
+const ENABLE_CLIP = "enableClip";
 const proxyFormField = "proxyFormField";
 const defaultDataItem = {
   key: "",
@@ -23,9 +8,7 @@ const defaultDataItem = {
   checked: true
 };
 const defaultModuleData = {
-  proxyFormField: [
-    __spreadValues({}, defaultDataItem)
-  ]
+  proxyFormField: []
 };
 const statusInfo = {
   noProxy: {
@@ -50,12 +33,15 @@ const statusInfo = {
   }
 };
 const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+const __EAGER_SHARE__ = "eagerShare";
 const BROWSER_ENV_KEY = "MF_ENV";
 const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
 export {
   BROWSER_ENV_KEY,
   ENABLEHMR,
+  ENABLE_CLIP,
   FormID,
+  __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__,
   defaultDataItem,

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

@@ -50,7 +50,48 @@ var _a;
 import { loadScript } from "@module-federation/sdk";
 import { isObject, getUnpkgUrl } from "../index";
 import { definePropertyGlobalVal } from "../sdk";
-import { __FEDERATION_DEVTOOLS__ } from "../../template";
+import {
+  __FEDERATION_DEVTOOLS__,
+  __EAGER_SHARE__,
+  __ENABLE_FAST_REFRESH__
+} from "../../template/constant";
+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(__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[__ENABLE_FAST_REFRESH__]) && (devtoolsMessage == null ? void 0 : devtoolsMessage[__EAGER_SHARE__])) {
+  const [_name, version] = devtoolsMessage[__EAGER_SHARE__];
+  fetchAndExecuteUmdSync(getUnpkgUrl("react", version));
+  fetchAndExecuteUmdSync(getUnpkgUrl("react-dom", version));
+}
 const fastRefreshPlugin = () => {
   return {
     name: "mf-fast-refresh-plugin",
@@ -58,17 +99,22 @@ const fastRefreshPlugin = () => {
       var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
       const shareInfo = userOptions.shared;
       const twinsShareInfo = args.shareInfo;
-      let enableFastRefresh;
-      let devtoolsMessage;
+      let enableFastRefresh = false;
+      let devtoolsMessage2 = {};
       const devtoolsMessageStr = localStorage.getItem(__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[__ENABLE_FAST_REFRESH__];
         } catch (e) {
           console.debug("Fast Refresh Plugin Error: ", e);
         }
       }
+      if (!enableFastRefresh) {
+        return __spreadValues({
+          userOptions
+        }, args);
+      }
       if (shareInfo && isObject(shareInfo)) {
         let orderResolve;
         const orderPromise = new Promise((resolve) => {
@@ -81,10 +127,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[__EAGER_SHARE__])) {
+                const eagerShare = [];
+                eagerShare.push(share, shared.version);
+                devtoolsMessage2[__EAGER_SHARE__] = eagerShare;
+                localStorage.setItem(
+                  __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 = () => loadScript(getUnpkgUrl(share, shared.version), {
-                attrs: { defer: true, async: false }
+                attrs: {
+                  defer: false,
+                  async: false,
+                  "data-mf-injected": "true"
+                }
               }).then(() => {
                 orderResolve();
               });
@@ -96,7 +169,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/es/utils/chrome/index.js

@@ -55,12 +55,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);
@@ -73,7 +98,7 @@ function getInspectWindowTabId() {
             const target = tabs.find(
               (tab) => tab.id === tabId
             );
-            window.targetTab = target;
+            setTargetTab(target);
           });
           console.log(
             "chrome.devtools.inspectedWindow.tabId",
@@ -87,7 +112,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);
@@ -97,48 +122,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__)) {
-        definePropertyGlobalVal(window, "__FEDERATION__", {});
-        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__)) {
+      definePropertyGlobalVal(window, "__FEDERATION__", {});
+      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();
@@ -149,10 +193,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) => {
@@ -207,5 +257,8 @@ export {
   injectPostMessage,
   injectScript,
   injectToast,
-  setChromeStorage
+  refreshModuleInfo,
+  setChromeStorage,
+  setTargetTab,
+  syncActiveTab
 };

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

@@ -0,0 +1,6 @@
+const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
+const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";
+export {
+  MESSAGE_ACTIVE_TAB_CHANGED,
+  MESSAGE_OPEN_SIDE_PANEL
+};

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

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

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

@@ -1,8 +1,16 @@
-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/es/utils/chrome/storage.js

@@ -22,7 +22,8 @@ import {
   mergeLocalStorage,
   removeLocalStorageKey,
   removeLocalStorage,
-  setLocalStorage
+  setLocalStorage,
+  getLocalStorage
 } from "../sdk";
 import { injectScript } from "./index";
 const mergeStorage = (...args) => __async(void 0, null, function* () {
@@ -37,7 +38,11 @@ const removeStorage = (...args) => __async(void 0, null, function* () {
 const setStorage = (...args) => __async(void 0, null, function* () {
   return injectScript(setLocalStorage, false, ...args);
 });
+const getStorageValue = (...args) => __async(void 0, null, function* () {
+  return injectScript(getLocalStorage, false, ...args);
+});
 export {
+  getStorageValue,
   mergeStorage,
   removeStorage,
   removeStorageKey,