@module-federation/devtools 0.22.0 → 0.22.1

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/override-remote.js

@@ -0,0 +1,42 @@
+var _a;
+import runtimeHelpers from "@module-federation/runtime/helpers";
+import { definePropertyGlobalVal } from "../sdk";
+import { __FEDERATION_DEVTOOLS__ } from "../../template";
+const chromeOverrideRemotesPlugin = function() {
+  return {
+    name: "mf-chrome-devtools-override-remotes-plugin",
+    beforeRegisterRemote(args) {
+      try {
+        const { remote } = args;
+        const overrideRemote = runtimeHelpers.global.nativeGlobal.localStorage.getItem(
+          __FEDERATION_DEVTOOLS__
+        );
+        if (!overrideRemote) {
+          return args;
+        }
+        const parsedOverrideRemote = JSON.parse(overrideRemote);
+        const overrideEntryOrVersion = parsedOverrideRemote[remote.name];
+        if (overrideEntryOrVersion) {
+          if (overrideEntryOrVersion.startsWith("http")) {
+            delete remote.version;
+            remote.entry = overrideEntryOrVersion;
+          } else {
+            delete remote.entry;
+            remote.version = overrideEntryOrVersion;
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+      return args;
+    }
+  };
+};
+if (!(window == null ? void 0 : window.__FEDERATION__)) {
+  definePropertyGlobalVal(window, "__FEDERATION__", {});
+  definePropertyGlobalVal(window, "__VMOK__", window.__FEDERATION__);
+}
+if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
+  window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
+}
+(_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(chromeOverrideRemotesPlugin());

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,

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

@@ -65,8 +65,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}`;
@@ -107,7 +107,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;
@@ -131,12 +131,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
       );
     });
   }
@@ -147,6 +152,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;
+  }
 }
 export {
   DependencyGraph,

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

@@ -2,6 +2,14 @@ export * from "./graph";
 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) {
@@ -50,6 +58,7 @@ const definePropertyGlobalVal = (target, key, val) => {
 };
 export {
   definePropertyGlobalVal,
+  getLocalStorage,
   getUnpkgUrl,
   isObject,
   mergeLocalStorage,

package/dist/es/worker/index.js

@@ -1 +1,168 @@
-console.log("Module Federation Worker");
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import {
+  MESSAGE_ACTIVE_TAB_CHANGED,
+  MESSAGE_OPEN_SIDE_PANEL
+} from "../utils/chrome/messages";
+var require_worker = __commonJS({
+  "src/worker/index.ts"(exports) {
+    const SIDE_PANEL_PATH = "html/main/index.html";
+    const getSidePanel = () => chrome == null ? void 0 : chrome.sidePanel;
+    const resolveTabId = (tabId) => __async(exports, null, function* () {
+      if (typeof tabId === "number") {
+        return tabId;
+      }
+      const [activeTab] = yield chrome.tabs.query({
+        active: true,
+        lastFocusedWindow: true
+      });
+      return activeTab == null ? void 0 : activeTab.id;
+    });
+    const broadcastActiveTab = (tabId) => {
+      try {
+        chrome.runtime.sendMessage({
+          type: MESSAGE_ACTIVE_TAB_CHANGED,
+          tabId
+        });
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to broadcast active tab",
+          error
+        );
+      }
+    };
+    const openSidePanel = (tabId) => __async(exports, null, function* () {
+      const sidePanel = getSidePanel();
+      if (!sidePanel) {
+        throw new Error("sidePanel api not available");
+      }
+      const targetTabId = yield resolveTabId(tabId);
+      if (typeof targetTabId !== "number") {
+        throw new Error("No active tab available");
+      }
+      yield sidePanel.setOptions({
+        tabId: targetTabId,
+        path: SIDE_PANEL_PATH,
+        enabled: true
+      });
+      if (sidePanel.open) {
+        yield sidePanel.open({ tabId: targetTabId });
+      }
+      broadcastActiveTab(targetTabId);
+      if (sidePanel.getOptions) {
+        try {
+          const options = yield sidePanel.getOptions({ tabId: targetTabId });
+          broadcastActiveTab(targetTabId);
+          return options;
+        } catch (error) {
+          console.warn("[Module Federation Devtools] getOptions failed", error);
+        }
+      }
+      return {
+        path: SIDE_PANEL_PATH,
+        enabled: true
+      };
+    });
+    chrome.runtime.onInstalled.addListener(() => {
+      const sidePanel = getSidePanel();
+      if (sidePanel == null ? void 0 : sidePanel.setPanelBehavior) {
+        sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch((error) => {
+          console.warn(
+            "[Module Federation Devtools] setPanelBehavior failed",
+            error
+          );
+        });
+      }
+    });
+    chrome.action.onClicked.addListener((tab) => __async(exports, null, function* () {
+      try {
+        yield openSidePanel(tab.id);
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to open side panel",
+          error
+        );
+      }
+    }));
+    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+      if ((message == null ? void 0 : message.type) === MESSAGE_OPEN_SIDE_PANEL) {
+        openSidePanel(message.tabId).then((options) => sendResponse({ ok: true, options })).catch(
+          (error) => sendResponse({ ok: false, message: String(error) })
+        );
+        return true;
+      }
+      return void 0;
+    });
+    chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, function* () {
+      const tabId = activeInfo == null ? void 0 : activeInfo.tabId;
+      if (typeof tabId !== "number") {
+        return;
+      }
+      try {
+        broadcastActiveTab(tabId);
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to handle tab activation",
+          error
+        );
+      }
+    }));
+    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+      if (changeInfo.status !== "complete") {
+        return;
+      }
+      if (tab == null ? void 0 : tab.active) {
+        try {
+          broadcastActiveTab(tabId);
+        } catch (error) {
+          console.warn(
+            "[Module Federation Devtools] Failed to handle tab update",
+            error
+          );
+        }
+      }
+    });
+    chrome.tabs.onRemoved.addListener((tabId) => __async(exports, null, function* () {
+      try {
+        const FormID = "FormID";
+        const data = yield chrome.storage.sync.get(FormID);
+        const storeData = data[FormID];
+        if (storeData == null ? void 0 : storeData[String(tabId)]) {
+          delete storeData[String(tabId)];
+          yield chrome.storage.sync.set({
+            [FormID]: storeData
+          });
+        }
+      } catch (error) {
+        console.warn(
+          "[Module Federation Devtools] Failed to handle tab removal",
+          error
+        );
+      }
+    }));
+    console.log("Module Federation Worker ready");
+  }
+});
+export default require_worker();

package/dist/lib/App.css

@@ -0,0 +1,12 @@
+.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;
+}