@module-federation/devtools 0.0.0-next-20240425091022

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

@@ -0,0 +1,211 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 { FormID } from "../../template/constant";
+import { definePropertyGlobalVal } from "../sdk";
+export * from "./storage";
+const sleep = (num) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, num);
+  });
+};
+const injectPostMessage = (postMessageUrl) => {
+  const script = document.createElement("script");
+  script.src = postMessageUrl;
+  document.getElementsByTagName("head")[0].appendChild(script);
+};
+const TabInfo = {
+  currentTabId: 0
+};
+function getCurrentTabId() {
+  return TabInfo.currentTabId;
+}
+function getInspectWindowTabId() {
+  return new Promise((resolve, reject) => {
+    var _a;
+    if ((_a = chrome == null ? void 0 : chrome.devtools) == null ? void 0 : _a.inspectedWindow) {
+      if (chrome.isDevMode) {
+        resolve(0);
+      }
+      chrome.devtools.inspectedWindow.eval(
+        'typeof window.__FEDERATION__ !== "undefined" || typeof window.__VMOK__ !== "undefined"',
+        function(info, error) {
+          const { tabId } = chrome.devtools.inspectedWindow;
+          getTabs().then((tabs) => {
+            const target = tabs.find(
+              (tab) => tab.id === tabId
+            );
+            window.targetTab = target;
+          });
+          console.log(
+            "chrome.devtools.inspectedWindow.tabId",
+            chrome.devtools.inspectedWindow.tabId
+          );
+          TabInfo.currentTabId = tabId;
+          resolve(tabId);
+          if (error) {
+            reject(error);
+          }
+        }
+      );
+    } else {
+      if (window.targetTab && window.targetTab.id) {
+        const tabId = window.targetTab.id;
+        TabInfo.currentTabId = tabId;
+        resolve(tabId);
+      } else {
+        throw Error(`can't get active tab`);
+      }
+    }
+  });
+}
+const getGlobalModuleInfo = (callback) => __async(void 0, null, function* () {
+  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)
+      );
+      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
+          };
+        }
+      }
+      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);
+});
+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 injectScript = (excuteScript, world = false, ...args) => __async(void 0, null, function* () {
+  yield getInspectWindowTabId();
+  return chrome.scripting.executeScript({
+    target: {
+      tabId: getCurrentTabId()
+    },
+    func: excuteScript,
+    world: world ? "MAIN" : "ISOLATED",
+    args
+  }).then(() => {
+    console.log("InjectScript success, excuteScript:", args);
+  }).catch((e) => {
+    console.log(e, "InjectScript fail, excuteScript:", args);
+  });
+});
+const getUrl = (file) => {
+  try {
+    const pathSet = chrome.runtime.getURL(file).split("/");
+    const fileName = pathSet.pop();
+    pathSet.push("static", "js", fileName);
+    return pathSet.join("/");
+  } catch (e) {
+    return "";
+  }
+};
+const injectToast = (toastUtilUrl, e2eFlag) => {
+  const ele = document.querySelector(`[data-e2e=${e2eFlag}]`);
+  if (ele) {
+    return;
+  }
+  const scriptToast = document.createElement("script");
+  scriptToast.src = toastUtilUrl;
+  scriptToast.dataset.e2e = e2eFlag;
+  document.getElementsByTagName("head")[0].appendChild(scriptToast);
+};
+const setChromeStorage = (formData) => {
+  getScope().then((scope) => __async(void 0, null, function* () {
+    const data = yield chrome.storage.sync.get("FormID");
+    const storeData = data[FormID];
+    const scopes = Object.keys(storeData || {});
+    let filterOutDatedData = storeData || {};
+    const { length } = scopes;
+    if (length >= 10) {
+      filterOutDatedData = scopes.slice(0, length - 3).reduce((memo, cur) => {
+        memo[cur] = storeData[cur];
+        return memo;
+      }, {});
+    }
+    const existRules = storeData == null ? void 0 : storeData[scope];
+    chrome.storage.sync.set({
+      [FormID]: __spreadProps(__spreadValues({}, filterOutDatedData), {
+        [scope]: __spreadValues(__spreadValues({}, existRules), formData)
+      })
+    });
+  }));
+};
+export {
+  TabInfo,
+  getCurrentTabId,
+  getGlobalModuleInfo,
+  getInspectWindowTabId,
+  getScope,
+  getTabs,
+  getUrl,
+  injectPostMessage,
+  injectScript,
+  injectToast,
+  setChromeStorage
+};

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

@@ -0,0 +1,5 @@
+import { getUrl } from "./index";
+const postMessageUrl = getUrl("post-message.js");
+const script = document.createElement("script");
+script.src = postMessageUrl;
+document.getElementsByTagName("html")[0].appendChild(script);

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

@@ -0,0 +1,20 @@
+if (window.moduleHandler) {
+  window.removeEventListener("message", window.moduleHandler);
+} else {
+  window.moduleHandler = (event) => {
+    const { origin, data } = event;
+    if (!data.moduleInfo) {
+      return;
+    }
+    chrome.runtime.sendMessage({
+      origin,
+      data: {
+        moduleInfo: data.moduleInfo,
+        updateModule: data.updateModule
+      }
+    }).catch(() => {
+      return false;
+    });
+  };
+}
+window.addEventListener("message", window.moduleHandler);

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

@@ -0,0 +1,8 @@
+var _a;
+const moduleInfo = (_a = window == null ? void 0 : window.__FEDERATION__) == null ? void 0 : _a.moduleInfo;
+window.postMessage(
+  {
+    moduleInfo
+  },
+  "*"
+);

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

@@ -0,0 +1,62 @@
+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;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var _a;
+import helpers from "@module-federation/runtime/helpers";
+import { definePropertyGlobalVal } from "../sdk";
+const getModuleInfo = () => {
+  return {
+    name: "mf-devtool-getModuleInfo-plugin",
+    loadRemoteSnapshot(_a2) {
+      var _b = _a2, { options, moduleInfo, remoteSnapshot } = _b, res = __objRest(_b, ["options", "moduleInfo", "remoteSnapshot"]);
+      const globalSnapshot = helpers.global.getGlobalSnapshot();
+      if (options.inBrowser) {
+        window.postMessage(
+          {
+            moduleInfo: globalSnapshot,
+            updateModule: moduleInfo
+          },
+          "*"
+        );
+      }
+      return __spreadValues({
+        options,
+        moduleInfo,
+        remoteSnapshot
+      }, res);
+    }
+  };
+};
+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(getModuleInfo());

package/dist/es/utils/chrome/snapshot-plugin-init.js

@@ -0,0 +1,5 @@
+import { getUrl } from "./index";
+const fastRefreshMessageUrl = getUrl("snapshot-plugin.js");
+const script = document.createElement("script");
+script.src = fastRefreshMessageUrl;
+document.getElementsByTagName("html")[0].appendChild(script);

package/dist/es/utils/chrome/snapshot-plugin.js

@@ -0,0 +1,36 @@
+var _a;
+import { MODULE_DEVTOOL_IDENTIFIER } from "@module-federation/sdk";
+import runtimeHelpers from "@module-federation/runtime/helpers";
+import { definePropertyGlobalVal } from "../sdk";
+const chromeDevtoolsPlugin = function() {
+  return {
+    name: "mf-chrome-devtools-inject-snapshot-plugin",
+    beforeLoadRemoteSnapshot({ options }) {
+      const { nativeGlobal } = runtimeHelpers.global;
+      if (options.inBrowser) {
+        const realLocalStorage = nativeGlobal.localStorage || localStorage;
+        const debugModuleInfoStr = realLocalStorage.getItem(
+          MODULE_DEVTOOL_IDENTIFIER
+        );
+        if (debugModuleInfoStr && !nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__) {
+          const chromeDevtoolSnapshot = JSON.parse(debugModuleInfoStr);
+          if (chromeDevtoolSnapshot) {
+            runtimeHelpers.global.addGlobalSnapshot(chromeDevtoolSnapshot);
+            nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__ = true;
+            console.warn(
+              "[Module Federation Devtools]: You are using the chrome devtool to proxy online module"
+            );
+          }
+        }
+      }
+    }
+  };
+};
+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(chromeDevtoolsPlugin());

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

@@ -0,0 +1,45 @@
+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 {
+  mergeLocalStorage,
+  removeLocalStorageKey,
+  removeLocalStorage,
+  setLocalStorage
+} from "../sdk";
+import { injectScript } from "./index";
+const mergeStorage = (...args) => __async(void 0, null, function* () {
+  return injectScript(mergeLocalStorage, false, ...args);
+});
+const removeStorageKey = (...args) => __async(void 0, null, function* () {
+  return injectScript(removeLocalStorageKey, false, ...args);
+});
+const removeStorage = (...args) => __async(void 0, null, function* () {
+  return injectScript(removeLocalStorage, false, ...args);
+});
+const setStorage = (...args) => __async(void 0, null, function* () {
+  return injectScript(setLocalStorage, false, ...args);
+});
+export {
+  mergeStorage,
+  removeStorage,
+  removeStorageKey,
+  setStorage
+};

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

@@ -0,0 +1,79 @@
+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 { calculateSnapshot, calculateMicroAppSnapshot } from "./snapshot";
+const separateType = (moduleInfo) => {
+  const consumers = {};
+  const producer = [];
+  Object.keys(moduleInfo).forEach((key) => {
+    var _a;
+    const remotesInfo = (_a = moduleInfo[key]) == null ? void 0 : _a.remotesInfo;
+    if (remotesInfo) {
+      const moduleIds = Object.keys(remotesInfo);
+      if (moduleIds.length) {
+        moduleIds.forEach((id) => {
+          let formatId = id;
+          if (id.includes(":")) {
+            formatId = id.split(":").pop();
+          }
+          const hasBeenAdded = producer.includes(formatId);
+          if (!hasBeenAdded) {
+            producer.push(id);
+          }
+        });
+        consumers[key] = moduleInfo[key];
+      }
+    }
+  });
+  return {
+    consumers,
+    producer
+  };
+};
+const getModuleInfo = (proxyRules) => __async(void 0, null, function* () {
+  let freshModuleInfo;
+  const { moduleInfo } = window.__FEDERATION__;
+  const { consumers } = separateType(moduleInfo);
+  const overrides = {};
+  const isMicroMode = Object.keys(consumers).some((moduleId) => {
+    const subApps = consumers[moduleId].consumerList;
+    return Array.isArray(subApps) && subApps.length;
+  });
+  proxyRules.forEach((rule) => {
+    const { key, value } = rule;
+    overrides[key] = value;
+  });
+  if (isMicroMode) {
+    freshModuleInfo = calculateMicroAppSnapshot(moduleInfo, overrides);
+  } else {
+    freshModuleInfo = calculateSnapshot(moduleInfo, overrides);
+  }
+  console.debug("New Snapshot: ", freshModuleInfo);
+  return {
+    status: "success",
+    moduleInfo: freshModuleInfo,
+    overrides
+  };
+});
+export * from "./snapshot";
+export {
+  getModuleInfo,
+  separateType
+};

package/dist/es/utils/data/snapshot.js

@@ -0,0 +1,82 @@
+const calculateSnapshot = (originSnapshot, overrides) => {
+  const overridesWithoutType = Object.keys(overrides).reduce(
+    (memo, current) => {
+      if (current.includes(":")) {
+        const [, moduleId] = current.split(":");
+        memo[moduleId] = overrides[current];
+      }
+      return memo;
+    },
+    {}
+  );
+  const newSnapshot = JSON.parse(JSON.stringify(originSnapshot));
+  const moduleIds = Object.keys(originSnapshot);
+  moduleIds.forEach((moduleId) => {
+    const module = originSnapshot[moduleId];
+    if ("remotesInfo" in module) {
+      const remoteIds = Object.keys(module.remotesInfo);
+      remoteIds.forEach((id) => {
+        const [, splitId] = id.split(":");
+        const entry = overrides[id] || overridesWithoutType[id] || overrides[splitId] || overridesWithoutType[splitId];
+        if (entry) {
+          newSnapshot[moduleId].remotesInfo[id].matchedVersion = entry;
+          const customEntryId = `${id}:${entry}`;
+          newSnapshot[customEntryId] = {
+            remoteEntry: entry,
+            version: entry
+          };
+        }
+      });
+    }
+  });
+  return newSnapshot;
+};
+const calculateMicroAppSnapshot = (originSnapshot, overrides) => {
+  let masterApp = null;
+  const newSnapshot = JSON.parse(JSON.stringify(originSnapshot));
+  const moduleIds = Object.keys(originSnapshot);
+  moduleIds.forEach((moduleId) => {
+    const module = newSnapshot[moduleId];
+    if ("consumerList" in module && Array.isArray(module.consumerList) && module.consumerList.length > 0) {
+      masterApp = module;
+    }
+  });
+  if (!masterApp) {
+    return newSnapshot;
+  }
+  const microApps = masterApp.consumerList;
+  const microAppsCount = microApps.length;
+  for (let i = 0; i < microAppsCount; i++) {
+    let overrideTarget = "";
+    const microApp = microApps[i];
+    const idWithVersion = Object.keys(overrides).find((id) => {
+      let target = id;
+      if (id.includes(":")) {
+        const [, name] = id.split(":");
+        target = name;
+      }
+      if (microApp.includes(target)) {
+        overrideTarget = id;
+        return true;
+      }
+      return false;
+    });
+    if (idWithVersion) {
+      const entry = overrides[overrideTarget];
+      const idArray = microApp.split(":");
+      idArray[idArray.length - 1] = entry;
+      microApps[i] = idArray.join(":");
+      const customEntryId = `${overrideTarget}:${entry}`;
+      newSnapshot[customEntryId] = {
+        remoteEntry: entry,
+        version: entry
+      };
+    }
+  }
+  const snapshot = calculateSnapshot(newSnapshot, overrides);
+  return snapshot;
+};
+export {
+  calculateMicroAppSnapshot,
+  calculateSnapshot
+};

package/dist/es/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./chrome";
+export * from "./sdk";
+export * from "./data";
+export * from "./types";