@module-federation/devtools 2.7.0 → 2.8.0

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

@@ -0,0 +1,471 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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 Layout_exports = {};
+__export(Layout_exports, {
+  default: () => Layout_default
+});
+module.exports = __toCommonJS(Layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+var import_web_react = require("@arco-design/web-react");
+var import_react_i18next = require("react-i18next");
+var import_sdk = require("@module-federation/sdk");
+var import_Form = __toESM(require("../Form"));
+var import_utils = require("../../utils");
+var import_constant = require("../../template/constant");
+var import_index = __toESM(require("./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 } = (0, import_react_i18next.useTranslation)();
+  const { producer } = (0, import_utils.separateType)(moduleInfo);
+  const producerKey = (0, import_react.useMemo)(() => producer.join("|"), [producer]);
+  const [condition, setCondition] = (0, import_react.useState)(import_constant.statusInfo.processing);
+  const [formStatus, setFormStatus] = (0, import_react.useState)([]);
+  const [form] = import_web_react.Form.useForm();
+  const [enableHMR, setEnalbeHMR] = (0, import_react.useState)("disable");
+  const [enableClip, setEnableClip] = (0, import_react.useState)(() => {
+    try {
+      if (tabId) {
+        return localStorage.getItem(`${import_constant.ENABLE_CLIP}_${tabId}`) === "true";
+      }
+      return false;
+    } catch (e) {
+      return false;
+    }
+  });
+  const lastFormSignatureRef = (0, import_react.useRef)("");
+  const lastEffectiveRulesRef = (0, import_react.useRef)("");
+  const lastRawRulesRef = (0, import_react.useRef)([]);
+  const lastEnableClipRef = (0, import_react.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 || {};
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    ensureFederationContext();
+    window.__FEDERATION__.moduleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    window.__FEDERATION__.originModuleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    const rawRules = form.getFieldValue(import_constant.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 } = (0, import_ahooks.useDebounceFn)(
+    (formData) => __async(void 0, null, function* () {
+      ensureFederationContext();
+      window.__FEDERATION__.moduleInfo = JSON.parse(
+        JSON.stringify(window.__FEDERATION__.originModuleInfo)
+      );
+      const rawRules = formData[import_constant.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(import_constant.statusInfo.processing);
+        if (!effectiveRules.length) {
+          if (pendingRule) {
+            return;
+          }
+          if (hadPreviousEffective) {
+            yield (0, import_utils.removeStorage)(import_sdk.MODULE_DEVTOOL_IDENTIFIER);
+            yield (0, import_utils.removeStorage)(import_constant.BROWSER_ENV_KEY);
+            yield (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, "overrides");
+            yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
+            setCondition(import_constant.statusInfo.noProxy);
+            lastEffectiveRulesRef.current = "";
+            if (typeof onModuleInfoReset === "function") {
+              onModuleInfoReset();
+            } else {
+              onModuleInfoChange == null ? void 0 : onModuleInfoChange(window.__FEDERATION__.originModuleInfo);
+            }
+          } else {
+            setCondition(import_constant.statusInfo.noProxy);
+          }
+          setCondition(import_constant.statusInfo.noProxy);
+          return;
+        }
+        if (!clipChanged && effectiveSignature === lastEffectiveRulesRef.current) {
+          if (hadPreviousEffective) {
+            setCondition(import_constant.statusInfo.success);
+          } else {
+            setCondition(import_constant.statusInfo.noProxy);
+          }
+          return;
+        }
+        if (rawRules.every((rule) => !rule.value)) {
+          if (hadPreviousEffective) {
+            setCondition(import_constant.statusInfo.success);
+          } else {
+            setCondition(import_constant.statusInfo.noProxy);
+          }
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(effectiveRules) : yield (0, import_utils.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 (0, import_utils.setStorage)(import_sdk.MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
+        yield (0, import_utils.setStorage)(import_constant.BROWSER_ENV_KEY);
+        yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, "overrides", overrides);
+        yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
+        window.__FEDERATION__.moduleInfo = moduleInfo2;
+        onModuleInfoChange == null ? void 0 : onModuleInfoChange(moduleInfo2);
+        setCondition(import_constant.statusInfo[status]);
+        lastEffectiveRulesRef.current = effectiveSignature;
+      } catch (e) {
+        console.log(e);
+        setCondition(import_constant.statusInfo.error);
+      }
+    }),
+    {
+      wait: 700
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    ensureFederationContext();
+    let cancelled = false;
+    const hydrateForm = () => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      const scope = yield (0, import_utils.getScope)();
+      const data = yield chrome.storage.sync.get([import_constant.FormID]);
+      const config = (_a = data == null ? void 0 : data[import_constant.FormID]) == null ? void 0 : _a[scope];
+      let storeData;
+      if ((0, import_utils.isObject)(config)) {
+        storeData = JSON.parse(JSON.stringify(config));
+        if (producer.length) {
+          storeData[import_constant.proxyFormField] = (_b = storeData[import_constant.proxyFormField]) == null ? void 0 : _b.filter(
+            (item) => producer.includes(item.key)
+          );
+          if (!((_c = storeData[import_constant.proxyFormField]) == null ? void 0 : _c.length)) {
+            storeData = JSON.parse(JSON.stringify(import_constant.defaultModuleData));
+          }
+        }
+      } else {
+        storeData = JSON.parse(JSON.stringify(import_constant.defaultModuleData));
+      }
+      let overridesApplied = false;
+      try {
+        const overridesState = yield (0, import_utils.getStorageValue)(import_constant.__FEDERATION_DEVTOOLS__);
+        if (typeof overridesState === "string" && overridesState) {
+          const parsedState = JSON.parse(overridesState);
+          const overrides = parsedState == null ? void 0 : parsedState.overrides;
+          if ((0, import_utils.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), {
+                [import_constant.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[import_constant.proxyFormField]
+        ) ? storeData[import_constant.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) {
+          (0, import_utils.setChromeStorage)(storeData);
+        }
+        if (effectiveRules.length) {
+          setCondition(import_constant.statusInfo.success);
+        } else {
+          setCondition(import_constant.statusInfo.noProxy);
+        }
+      }
+    });
+    hydrateForm();
+    return () => {
+      cancelled = true;
+    };
+  }, [moduleInfo, producerKey, form]);
+  (0, import_react.useEffect)(() => {
+    chrome.storage.sync.get([import_constant.ENABLEHMR]).then((data) => {
+      const enable = data[import_constant.ENABLEHMR];
+      if (typeof enable === "boolean") {
+        onHMRChange(enable);
+      }
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    validateForm(form);
+  }, []);
+  (0, import_ahooks.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[import_constant.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;
+    (0, import_utils.setChromeStorage)(formData);
+    run(formData);
+  };
+  const onHMRChange = (on) => {
+    setEnalbeHMR(on ? "enable" : "disable");
+    chrome.storage.sync.set({
+      [import_constant.ENABLEHMR]: on
+    });
+    if (on) {
+      (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__, on);
+    } else {
+      (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__);
+      (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__EAGER_SHARE__);
+    }
+    (0, import_utils.injectScript)(import_utils.reloadPage, false);
+  };
+  const onClipChange = (on) => {
+    setEnableClip(on);
+    try {
+      if (tabId) {
+        localStorage.setItem(`${import_constant.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.summaryCard, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.summaryHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryTitle, children: t("layout.summary.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryHint, children: t("layout.summary.hint") })
+      ] }),
+      previewList.length ? previewList.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chip, children: name }, name)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.chipPlaceholder, children: t("layout.summary.placeholder") }),
+      extraCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.moreChip, children: t("layout.summary.more", { count: extraCount }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: import_index.default.formSection, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_web_react.Form,
+      {
+        form,
+        onValuesChange: (value, formData) => onValuesChange(value, formData),
+        initialValues: import_constant.defaultModuleData,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Form.default,
+          {
+            form,
+            condition,
+            formStatus,
+            setFormStatus,
+            validateForm: () => validateForm(form),
+            enableHMR,
+            onHMRChange,
+            enableClip,
+            onClipChange,
+            versionList,
+            setVersionList,
+            getVersion,
+            customValueValidate,
+            headerSlot
+          }
+        )
+      }
+    ) })
+  ] });
+};
+var Layout_default = Layout;

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

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_module_exports = {};
+__export(index_module_exports, {
+  default: () => index_module_default
+});
+module.exports = __toCommonJS(index_module_exports);
+var import_index_module = require("./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" };

package/dist/types/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));
+}