@module-federation/devtools 0.0.0-docs-remove-invalid-lark-link-20251205062649

package/dist/es/component/GraphItem/index_module.css

@@ -0,0 +1,61 @@
+.Wrapper_2fa4f {
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin: 0;
+  padding: 0;
+  width: 300px;
+  overflow: hidden;
+}
+.Wrapper_2fa4f .container_2fa4f {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.Wrapper_2fa4f .container_2fa4f .group_2fa4f {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3px;
+  width: 100%;
+  padding: 5px 0;
+}
+.Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
+  color: white;
+  text-align: center;
+  margin: 0 auto;
+}
+.Wrapper_2fa4f .container_2fa4f .info_2fa4f {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  margin: 0 4px 4px 4px;
+  padding: 10px;
+  border-radius: 0 0 5px 5px;
+  font-size: 12px;
+}
+.Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
+  display: flex;
+  margin-bottom: 5px;
+}
+.Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
+  font-weight: bold;
+  margin-right: 10px;
+}
+.Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
+  display: inline-block;
+  padding: 5px;
+  background: lightgray;
+  border-radius: 15px;
+  font-size: 8px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-weight: 300;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.Wrapper_2fa4f .container_2fa4f .message_2fa4f {
+  display: flex;
+}

package/dist/es/component/Layout/index.js

@@ -0,0 +1,218 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useDebounceFn, useUpdateEffect } from "ahooks";
+import { Form } from "@arco-design/web-react";
+import {
+  MODULE_DEVTOOL_IDENTIFIER
+} from "@module-federation/sdk";
+import FormComponent from "../Form";
+import Dependency from "../Graph";
+import {
+  getModuleInfo,
+  getScope,
+  injectScript,
+  isObject,
+  separateType,
+  reloadPage,
+  setChromeStorage,
+  mergeStorage,
+  removeStorageKey,
+  removeStorage,
+  setStorage
+} from "../../utils";
+import {
+  defaultModuleData,
+  proxyFormField,
+  FormID,
+  statusInfo,
+  ENABLEHMR,
+  __ENABLE_FAST_REFRESH__,
+  BROWSER_ENV_KEY,
+  __FEDERATION_DEVTOOLS__,
+  __EAGER_SHARE__
+} from "../../template/constant";
+const Layout = (props) => {
+  const {
+    moduleInfo,
+    handleSnapshot,
+    versionList,
+    setVersionList,
+    getVersion,
+    handleProxyAddress,
+    customValueValidate,
+    headerSlot
+  } = props;
+  const { producer } = separateType(moduleInfo);
+  const [condition, setCondition] = useState(statusInfo.processing);
+  const [formStatus, setFormStatus] = useState([]);
+  const [snapshot, setSnapshot] = useState(moduleInfo);
+  const [form] = Form.useForm();
+  const [enableHMR, setEnalbeHMR] = useState("disable");
+  const { run } = useDebounceFn(
+    (formData) => __async(void 0, null, function* () {
+      window.__FEDERATION__.moduleInfo = JSON.parse(
+        JSON.stringify(window.__FEDERATION__.originModuleInfo)
+      );
+      const filterFormData = formData[proxyFormField].reduce(
+        (memo, current, idx) => {
+          if (!formStatus[idx]) {
+            return memo;
+          }
+          const { keyStatus, valueStatus } = formStatus[idx];
+          if (!keyStatus || !valueStatus || !current.checked) {
+            return memo;
+          }
+          const duplicate = JSON.parse(JSON.stringify(current));
+          if (handleProxyAddress) {
+            const value = handleProxyAddress(duplicate.value);
+            duplicate.value = value;
+          }
+          return [...memo, duplicate];
+        },
+        []
+      );
+      try {
+        setCondition(statusInfo.processing);
+        if (!filterFormData.length) {
+          yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
+          yield removeStorage(BROWSER_ENV_KEY);
+          yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
+          yield injectScript(reloadPage, false);
+          setCondition(statusInfo.noProxy);
+          setSnapshot(window.__FEDERATION__.originModuleInfo);
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(filterFormData) : yield getModuleInfo(filterFormData);
+        const snapshotJson = JSON.stringify(moduleInfo2);
+        yield setStorage(MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
+        yield setStorage(BROWSER_ENV_KEY);
+        yield mergeStorage(__FEDERATION_DEVTOOLS__, "overrides", overrides);
+        yield injectScript(reloadPage, false);
+        window.__FEDERATION__.moduleInfo = moduleInfo2;
+        setSnapshot(moduleInfo2);
+        setCondition(statusInfo[status]);
+      } catch (e) {
+        console.log(e);
+        setCondition(statusInfo.error);
+      }
+    }),
+    {
+      wait: 700
+    }
+  );
+  useEffect(() => {
+    setSnapshot(moduleInfo);
+  }, [moduleInfo]);
+  useEffect(() => {
+    getScope().then((scope) => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const data = yield chrome.storage.sync.get([FormID]);
+      const config = (_a = data == null ? void 0 : data[FormID]) == null ? void 0 : _a[scope];
+      let storeData;
+      if (isObject(config)) {
+        storeData = JSON.parse(JSON.stringify(config));
+        storeData[proxyFormField] = (_b = storeData[proxyFormField]) == null ? void 0 : _b.filter(
+          (item) => producer.includes(item.key)
+        );
+        if (!((_c = storeData[proxyFormField]) == null ? void 0 : _c.length)) {
+          storeData = defaultModuleData;
+        }
+      } else {
+        storeData = defaultModuleData;
+      }
+      form.setFieldsValue(storeData);
+    }));
+  }, []);
+  useEffect(() => {
+    chrome.storage.sync.get([ENABLEHMR]).then((data) => {
+      const enable = data[ENABLEHMR];
+      if (typeof enable === "boolean") {
+        onHMRChange(enable);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    validateForm(form);
+  }, []);
+  useUpdateEffect(() => {
+    const formData = form.getFieldsValue();
+    run(formData);
+  }, []);
+  const validateForm = (form2) => {
+    setTimeout(() => {
+      form2.validate().catch(() => {
+        console.log("Invalid proxy rules");
+      });
+    }, 50);
+  };
+  const onValuesChange = (target, formData) => {
+    validateForm(form);
+    setChromeStorage(formData);
+    run(formData);
+  };
+  const onHMRChange = (on) => {
+    setEnalbeHMR(on ? "enable" : "disable");
+    chrome.storage.sync.set({
+      [ENABLEHMR]: on
+    });
+    if (on) {
+      mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__, on);
+    } else {
+      removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__);
+      removeStorageKey(__FEDERATION_DEVTOOLS__, __EAGER_SHARE__);
+    }
+    injectScript(reloadPage, false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Form,
+      {
+        form,
+        onValuesChange: (value, formData) => onValuesChange(value, formData),
+        initialValues: defaultModuleData,
+        children: /* @__PURE__ */ jsx(
+          FormComponent,
+          {
+            form,
+            condition,
+            formStatus,
+            setFormStatus,
+            validateForm: () => validateForm(form),
+            enableHMR,
+            onHMRChange,
+            versionList,
+            setVersionList,
+            getVersion,
+            customValueValidate,
+            headerSlot
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Dependency, { snapshot })
+  ] });
+};
+var Layout_default = Layout;
+export {
+  Layout_default as default
+};

package/dist/es/component/Layout/index.module.js

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "select": "select_084ab", "card": "card_084ab", "appName": "appName_084ab", "tagContainer": "tagContainer_084ab", "tag": "tag_084ab", "header": "header_084ab", "add": "add_084ab", "title": "title_084ab", "status": "status_084ab", "switch": "switch_084ab", "badge": "badge_084ab" };
+export {
+  index_module_default as default
+};

package/dist/es/component/Layout/index_module.css

@@ -0,0 +1,48 @@
+.select_084ab {
+  margin-top: 1vh;
+}
+
+.card_084ab {
+  display: flex;
+  height: 4vh;
+  align-items: center;
+}
+.card_084ab .appName_084ab {
+  margin: 1vh 0;
+}
+
+.tagContainer_084ab {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1vh;
+  color: rgb(78, 89, 105);
+}
+.tagContainer_084ab .tag_084ab {
+  margin-left: 1vw;
+}
+
+.header_084ab {
+  display: flex;
+  align-items: center;
+  margin: 1vh 0;
+}
+.header_084ab .add_084ab {
+  margin: 0 0.5vw;
+}
+.header_084ab .title_084ab {
+  margin: 0 0.5vw;
+}
+.header_084ab .status_084ab {
+  display: flex;
+  flex: 1 1;
+  justify-content: flex-end;
+  align-items: center;
+}
+.header_084ab .status_084ab .switch_084ab {
+  margin-left: 0.5vw;
+}
+.header_084ab .badge_084ab {
+  display: flex;
+  transform: scale(1.6);
+  margin: 0 0.6vw;
+}

package/dist/es/init.js

@@ -0,0 +1,8 @@
+if (process.env.NODE_ENV === "development") {
+  const createProxy = () => new Proxy(() => Promise.resolve({}), {
+    get: () => {
+      return createProxy();
+    }
+  });
+  window.chrome = createProxy();
+}

package/dist/es/template/constant.js

@@ -0,0 +1,67 @@
+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 proxyFormField = "proxyFormField";
+const defaultDataItem = {
+  key: "",
+  value: "",
+  checked: true
+};
+const defaultModuleData = {
+  proxyFormField: [
+    __spreadValues({}, defaultDataItem)
+  ]
+};
+const statusInfo = {
+  noProxy: {
+    status: "noProxy",
+    message: "Modules are not currently proxied",
+    color: "#698cee"
+  },
+  processing: {
+    status: "processing",
+    message: "Obtaining remote module information",
+    color: "#FF7D00"
+  },
+  success: {
+    status: "success",
+    message: "The proxy configuration has taken effect and the corresponding page has been automatically refreshed.",
+    color: "#50b042"
+  },
+  error: {
+    status: "error",
+    message: "Calculating Snapshot failed, please confirm whether the package information is correct",
+    color: "#F53F3F"
+  }
+};
+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,
+  FormID,
+  __EAGER_SHARE__,
+  __ENABLE_FAST_REFRESH__,
+  __FEDERATION_DEVTOOLS__,
+  defaultDataItem,
+  defaultModuleData,
+  proxyFormField,
+  statusInfo
+};

package/dist/es/template/index.js

@@ -0,0 +1 @@
+export * from "./constant";

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

@@ -0,0 +1,218 @@
+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 __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());
+  });
+};
+var _a;
+import { loadScript } from "@module-federation/sdk";
+import { isObject, getUnpkgUrl } from "../index";
+import { definePropertyGlobalVal } from "../sdk";
+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",
+    beforeInit(_a2) {
+      var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
+      const shareInfo = userOptions.shared;
+      const twinsShareInfo = args.shareInfo;
+      let enableFastRefresh = false;
+      let devtoolsMessage2 = {};
+      const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
+      if (devtoolsMessageStr) {
+        try {
+          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) => {
+          orderResolve = resolve;
+        });
+        Object.keys(shareInfo).forEach((share) => __async(this, null, function* () {
+          const sharedArr = Array.isArray(shareInfo[share]) ? shareInfo[share] : [shareInfo[share]];
+          let twinsSharedArr;
+          if (twinsShareInfo) {
+            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: false,
+                  async: false,
+                  "data-mf-injected": "true"
+                }
+              }).then(() => {
+                orderResolve();
+              });
+            }
+            if (share === "react-dom") {
+              get = () => orderPromise.then(
+                () => loadScript(getUnpkgUrl(share, shared.version), {
+                  attrs: { defer: true, async: false }
+                })
+              );
+            }
+            if (typeof get === "function") {
+              if (share === "react") {
+                shared.get = () => __async(this, null, function* () {
+                  if (!window.React) {
+                    yield get();
+                    console.warn(
+                      "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
+                    );
+                  }
+                  shared.lib = () => window.React;
+                  return () => window.React;
+                });
+              }
+              if (share === "react-dom") {
+                shared.get = () => __async(this, null, function* () {
+                  if (!window.ReactDOM) {
+                    yield get();
+                  }
+                  shared.lib = () => window.ReactDOM;
+                  return () => window.ReactDOM;
+                });
+              }
+              if (twinsShareInfo) {
+                twinsSharedArr[idx].get = shared.get;
+              }
+            }
+          });
+        }));
+        return __spreadValues({
+          userOptions
+        }, args);
+      } else {
+        return __spreadValues({
+          userOptions
+        }, 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(fastRefreshPlugin());