@module-federation/devtools 0.0.0-chore-bump-node-22-20260710161714

package/dist/es/component/LanguageSwitch.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, Dropdown, Menu } from "@arco-design/web-react";
+import { IconLanguage } from "@arco-design/web-react/icon";
+import { useTranslation } from "react-i18next";
+import { LANGUAGE_STORAGE_KEY } from "../i18n";
+import styles from "./ThemeToggle.module";
+const LANGUAGE_OPTIONS = [
+  { value: "zh-CN", label: "中文" },
+  { value: "en", label: "English" }
+];
+const persistLanguage = (lang) => {
+  var _a;
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(LANGUAGE_STORAGE_KEY, lang);
+    } catch (e) {
+    }
+    const { chrome } = window;
+    const storage = (_a = chrome == null ? void 0 : chrome.storage) == null ? void 0 : _a.local;
+    if (storage && typeof storage.set === "function") {
+      try {
+        storage.set({ [LANGUAGE_STORAGE_KEY]: lang });
+      } catch (e) {
+      }
+    }
+  }
+};
+const LanguageSwitch = () => {
+  var _a;
+  const { i18n } = useTranslation();
+  const current = ((_a = i18n.language) == null ? void 0 : _a.toLowerCase()) || "zh-cn";
+  const value = current.startsWith("en") ? "en" : "zh-CN";
+  const handleChange = (next) => {
+    i18n.changeLanguage(next);
+    persistLanguage(next);
+  };
+  const droplist = /* @__PURE__ */ jsx(Menu, { onClickMenuItem: handleChange, selectedKeys: [value], children: LANGUAGE_OPTIONS.map((option) => /* @__PURE__ */ jsx(Menu.Item, { children: option.label }, option.value)) });
+  return /* @__PURE__ */ jsx(Dropdown, { droplist, trigger: "click", position: "br", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconLanguage, {}),
+      size: "default",
+      className: styles.themeToggle
+    }
+  ) });
+};
+var LanguageSwitch_default = LanguageSwitch;
+export {
+  LanguageSwitch_default as default
+};

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

@@ -0,0 +1,470 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { useDebounceFn, useUpdateEffect } from "ahooks";
+import { Form } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
+import {
+  MODULE_DEVTOOL_IDENTIFIER
+} from "@module-federation/sdk";
+import FormComponent from "../Form";
+import {
+  getModuleInfo,
+  getScope,
+  injectScript,
+  isObject,
+  separateType,
+  reloadPage,
+  setChromeStorage,
+  getStorageValue,
+  mergeStorage,
+  removeStorageKey,
+  removeStorage,
+  setStorage
+} from "../../utils";
+import {
+  defaultModuleData,
+  proxyFormField,
+  FormID,
+  statusInfo,
+  ENABLEHMR,
+  ENABLE_CLIP,
+  __ENABLE_FAST_REFRESH__,
+  BROWSER_ENV_KEY,
+  __FEDERATION_DEVTOOLS__,
+  __EAGER_SHARE__
+} from "../../template/constant";
+import styles from "./index.module";
+const sortRulesForSignature = (rules) => [...rules].sort((a, b) => {
+  const keyCompare = (a.key || "").localeCompare(b.key || "");
+  if (keyCompare !== 0) {
+    return keyCompare;
+  }
+  return (a.value || "").localeCompare(b.value || "");
+}).map((rule) => ({
+  key: rule.key || "",
+  value: rule.value || "",
+  checked: Boolean(rule.checked)
+}));
+const getEffectiveSignature = (rules) => rules.length ? JSON.stringify(sortRulesForSignature(rules)) : "";
+const Layout = (props) => {
+  const {
+    moduleInfo,
+    handleSnapshot,
+    versionList,
+    setVersionList,
+    getVersion,
+    handleProxyAddress,
+    customValueValidate,
+    headerSlot,
+    onModuleInfoChange,
+    onModuleInfoReset,
+    tabId
+  } = props;
+  const { t } = useTranslation();
+  const { producer } = separateType(moduleInfo);
+  const producerKey = useMemo(() => producer.join("|"), [producer]);
+  const [condition, setCondition] = useState(statusInfo.processing);
+  const [formStatus, setFormStatus] = useState([]);
+  const [form] = Form.useForm();
+  const [enableHMR, setEnalbeHMR] = useState("disable");
+  const [enableClip, setEnableClip] = useState(() => {
+    try {
+      if (tabId) {
+        return localStorage.getItem(`${ENABLE_CLIP}_${tabId}`) === "true";
+      }
+      return false;
+    } catch (e) {
+      return false;
+    }
+  });
+  const lastFormSignatureRef = useRef("");
+  const lastEffectiveRulesRef = useRef("");
+  const lastRawRulesRef = useRef([]);
+  const lastEnableClipRef = useRef(enableClip);
+  const ensureFederationContext = () => {
+    if (!window.__FEDERATION__) {
+      window.__FEDERATION__ = {
+        __GLOBAL_PLUGIN__: [],
+        __INSTANCES__: [],
+        __SHARE__: {},
+        __MANIFEST_LOADING__: {},
+        __PRELOADED_MAP__: /* @__PURE__ */ new Map(),
+        originModuleInfo: moduleInfo || {},
+        moduleInfo: moduleInfo || {}
+      };
+    }
+    if (!window.__FEDERATION__.originModuleInfo) {
+      window.__FEDERATION__.originModuleInfo = moduleInfo || {};
+    }
+    if (!window.__FEDERATION__.moduleInfo) {
+      window.__FEDERATION__.moduleInfo = moduleInfo || {};
+    }
+  };
+  useEffect(() => {
+    ensureFederationContext();
+    window.__FEDERATION__.moduleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    window.__FEDERATION__.originModuleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    const rawRules = form.getFieldValue(proxyFormField) || [];
+    lastRawRulesRef.current = JSON.parse(JSON.stringify(rawRules));
+  }, [moduleInfo, form]);
+  const collectEffectiveRules = (rules, statusList) => {
+    return rules.reduce((memo, current, idx) => {
+      if (!(current == null ? void 0 : current.checked)) {
+        return memo;
+      }
+      const status = statusList[idx];
+      const keyValid = status ? status.keyStatus : Boolean(current.key);
+      const valueValid = status ? status.valueStatus : Boolean(current.value);
+      if (!keyValid || !valueValid) {
+        return memo;
+      }
+      const duplicate = JSON.parse(JSON.stringify(current));
+      if (handleProxyAddress) {
+        duplicate.value = handleProxyAddress(duplicate.value);
+      }
+      memo.push(duplicate);
+      return memo;
+    }, []);
+  };
+  const hasPendingRule = (rules, statusList) => {
+    return rules.some((rule, idx) => {
+      if (!(rule == null ? void 0 : rule.checked)) {
+        return false;
+      }
+      const status = statusList[idx];
+      if (!status) {
+        return Boolean(rule.key) && !rule.value;
+      }
+      return Boolean(status.keyStatus) && !status.valueStatus;
+    });
+  };
+  const { run } = useDebounceFn(
+    (formData) => __async(void 0, null, function* () {
+      ensureFederationContext();
+      window.__FEDERATION__.moduleInfo = JSON.parse(
+        JSON.stringify(window.__FEDERATION__.originModuleInfo)
+      );
+      const rawRules = formData[proxyFormField] || [];
+      const rawSignature = JSON.stringify(rawRules);
+      if (rawSignature === lastFormSignatureRef.current) {
+        return;
+      }
+      const effectiveRules = collectEffectiveRules(rawRules, formStatus);
+      const effectiveSignature = getEffectiveSignature(effectiveRules);
+      const pendingRule = hasPendingRule(rawRules, formStatus);
+      const hadPreviousEffective = lastEffectiveRulesRef.current !== "" && lastEffectiveRulesRef.current !== "[]";
+      const clipChanged = enableClip !== lastEnableClipRef.current;
+      lastEnableClipRef.current = enableClip;
+      try {
+        setCondition(statusInfo.processing);
+        if (!effectiveRules.length) {
+          if (pendingRule) {
+            return;
+          }
+          if (hadPreviousEffective) {
+            yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
+            yield removeStorage(BROWSER_ENV_KEY);
+            yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
+            yield injectScript(reloadPage, false);
+            setCondition(statusInfo.noProxy);
+            lastEffectiveRulesRef.current = "";
+            if (typeof onModuleInfoReset === "function") {
+              onModuleInfoReset();
+            } else {
+              onModuleInfoChange == null ? void 0 : onModuleInfoChange(window.__FEDERATION__.originModuleInfo);
+            }
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
+          setCondition(statusInfo.noProxy);
+          return;
+        }
+        if (!clipChanged && effectiveSignature === lastEffectiveRulesRef.current) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
+          return;
+        }
+        if (rawRules.every((rule) => !rule.value)) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(effectiveRules) : yield getModuleInfo(effectiveRules);
+        if (enableClip) {
+          Object.values(moduleInfo2).forEach((val) => {
+            if (val.modules) {
+              val.modules = [];
+            }
+            if (val.shared) {
+              val.shared = [];
+            }
+          });
+        }
+        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;
+        onModuleInfoChange == null ? void 0 : onModuleInfoChange(moduleInfo2);
+        setCondition(statusInfo[status]);
+        lastEffectiveRulesRef.current = effectiveSignature;
+      } catch (e) {
+        console.log(e);
+        setCondition(statusInfo.error);
+      }
+    }),
+    {
+      wait: 700
+    }
+  );
+  useEffect(() => {
+    ensureFederationContext();
+    let cancelled = false;
+    const hydrateForm = () => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const scope = yield getScope();
+      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));
+        if (producer.length) {
+          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 = JSON.parse(JSON.stringify(defaultModuleData));
+          }
+        }
+      } else {
+        storeData = JSON.parse(JSON.stringify(defaultModuleData));
+      }
+      let overridesApplied = false;
+      try {
+        const overridesState = yield getStorageValue(__FEDERATION_DEVTOOLS__);
+        if (typeof overridesState === "string" && overridesState) {
+          const parsedState = JSON.parse(overridesState);
+          const overrides = parsedState == null ? void 0 : parsedState.overrides;
+          if (isObject(overrides)) {
+            const overrideRules = Object.entries(overrides).map(([key, value]) => ({
+              key,
+              value: typeof value === "string" ? value : "",
+              checked: true
+            })).filter(
+              (rule) => Boolean(rule.key) && Boolean(rule.value)
+            );
+            const filteredRules = producer.length ? overrideRules.filter((rule) => producer.includes(rule.key)) : overrideRules;
+            if (filteredRules.length) {
+              storeData = __spreadProps(__spreadValues({}, storeData), {
+                [proxyFormField]: filteredRules
+              });
+              overridesApplied = true;
+            }
+          }
+        }
+      } catch (error) {
+        console.warn(
+          "[MF Devtools] hydrate overrides from localStorage failed",
+          error
+        );
+      }
+      if (!cancelled) {
+        form.setFieldsValue(storeData);
+        lastFormSignatureRef.current = JSON.stringify(storeData);
+        const rules = Array.isArray(
+          storeData[proxyFormField]
+        ) ? storeData[proxyFormField] : [];
+        const effectiveRules = collectEffectiveRules(rules, []);
+        lastEffectiveRulesRef.current = getEffectiveSignature(effectiveRules);
+        lastRawRulesRef.current = JSON.parse(JSON.stringify(rules));
+        setFormStatus(
+          rules.map((rule) => ({
+            keyStatus: Boolean(rule == null ? void 0 : rule.key),
+            valueStatus: Boolean(rule == null ? void 0 : rule.value)
+          }))
+        );
+        if (overridesApplied) {
+          setChromeStorage(storeData);
+        }
+        if (effectiveRules.length) {
+          setCondition(statusInfo.success);
+        } else {
+          setCondition(statusInfo.noProxy);
+        }
+      }
+    });
+    hydrateForm();
+    return () => {
+      cancelled = true;
+    };
+  }, [moduleInfo, producerKey, form]);
+  useEffect(() => {
+    chrome.storage.sync.get([ENABLEHMR]).then((data) => {
+      const enable = data[ENABLEHMR];
+      if (typeof enable === "boolean") {
+        onHMRChange(enable);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    validateForm(form);
+  }, []);
+  useUpdateEffect(() => {
+    if (!producer.length) {
+      return;
+    }
+    const formData = form.getFieldsValue();
+    const signature = JSON.stringify(formData);
+    if (signature === lastFormSignatureRef.current) {
+      return;
+    }
+    lastFormSignatureRef.current = signature;
+    const effectiveRules = collectEffectiveRules(
+      formData[proxyFormField] || [],
+      formStatus
+    );
+    const effectiveSignature = getEffectiveSignature(effectiveRules);
+    if (effectiveSignature === lastEffectiveRulesRef.current) {
+      return;
+    }
+    run(formData);
+  }, [producerKey, formStatus]);
+  const validateForm = (form2) => {
+    setTimeout(() => {
+      form2.validate().catch(() => {
+        console.log("Invalid proxy rules");
+      });
+    }, 50);
+  };
+  const onValuesChange = (target, formData) => {
+    validateForm(form);
+    const signature = JSON.stringify(formData);
+    if (signature === lastFormSignatureRef.current) {
+      return;
+    }
+    lastFormSignatureRef.current = signature;
+    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);
+  };
+  const onClipChange = (on) => {
+    setEnableClip(on);
+    try {
+      if (tabId) {
+        localStorage.setItem(`${ENABLE_CLIP}_${tabId}`, String(on));
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    run(form.getFieldsValue());
+  };
+  const remotePreview = producer.map((id) => {
+    const [, name] = id.split(":");
+    return name || id;
+  }).filter(Boolean);
+  const previewList = remotePreview.slice(0, 4);
+  const extraCount = remotePreview.length > previewList.length ? remotePreview.length - previewList.length : 0;
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.summaryCard, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.summaryHeader, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.summaryTitle, children: t("layout.summary.title") }),
+        /* @__PURE__ */ jsx("span", { className: styles.summaryHint, children: t("layout.summary.hint") })
+      ] }),
+      previewList.length ? previewList.map((name) => /* @__PURE__ */ jsx("span", { className: styles.chip, children: name }, name)) : /* @__PURE__ */ jsx("span", { className: styles.chipPlaceholder, children: t("layout.summary.placeholder") }),
+      extraCount > 0 && /* @__PURE__ */ jsx("span", { className: styles.moreChip, children: t("layout.summary.more", { count: extraCount }) })
+    ] }),
+    /* @__PURE__ */ jsx("section", { className: styles.formSection, 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,
+            enableClip,
+            onClipChange,
+            versionList,
+            setVersionList,
+            getVersion,
+            customValueValidate,
+            headerSlot
+          }
+        )
+      }
+    ) })
+  ] });
+};
+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 = { "wrapper": "wrapper_084ab", "summaryCard": "summaryCard_084ab", "summaryHeader": "summaryHeader_084ab", "summaryTitle": "summaryTitle_084ab", "summaryHint": "summaryHint_084ab", "chipGroup": "chipGroup_084ab", "chip": "chip_084ab", "moreChip": "moreChip_084ab", "chipPlaceholder": "chipPlaceholder_084ab", "formSection": "formSection_084ab" };
+export {
+  index_module_default as default
+};

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

@@ -0,0 +1,68 @@
+.wrapper_084ab {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex: 1 1;
+}
+
+.summaryCard_084ab {
+  padding: 18px 20px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 110px;
+}
+
+.summaryHeader_084ab {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.summaryTitle_084ab {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1, #1f2937);
+}
+
+.summaryHint_084ab {
+  font-size: 12px;
+  color: var(--color-text-2, #4b5563);
+}
+
+.chipGroup_084ab {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip_084ab,
+.moreChip_084ab,
+.chipPlaceholder_084ab {
+  padding: 6px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+  font-size: 12px;
+  color: var(--color-text-1, #1f2937);
+  letter-spacing: 0.02em;
+}
+
+.chipPlaceholder_084ab {
+  border-style: dashed;
+  color: var(--color-text-2, #4b5563);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+}
+
+.moreChip_084ab {
+  background: rgba(243, 244, 246, 0.4);
+  border-color: rgba(228, 228, 231, 0.5);
+}
+
+.formSection_084ab {
+  padding: 22px 24px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+}