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

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "Wrapper": "Wrapper_d8079", "container": "container_d8079", "group": "group_d8079", "name": "name_d8079", "info": "info_d8079", "expose-container": "expose-container_d8079", "type": "type_d8079", "item": "item_d8079", "message": "message_d8079" };
+export {
+  index_module_default as default
+};

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

@@ -0,0 +1,95 @@
+.Wrapper_d8079 {
+  display: flex;
+  width: 320px;
+  border-radius: 18px;
+  border: 1px solid var(--color-border-1, rgba(96, 165, 250, 0.3));
+  overflow: hidden;
+  box-shadow: 0 18px 32px rgba(8, 11, 25, 0.35);
+  background: linear-gradient(140deg, var(--mf-accent, rgba(243, 244, 246, 0.9)) 0%, rgba(229, 231, 235, 0.7) 45%, rgba(255, 255, 255, 0.95) 100%), var(--color-bg-2, rgba(255, 255, 255, 0.9));
+  color: var(--color-text-1, #1f2937);
+  backdrop-filter: blur(4px);
+}
+.Wrapper_d8079 .react-flow__handle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid rgba(96, 165, 250, 0.3);
+  background: rgba(243, 244, 246, 0.9);
+  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
+}
+.Wrapper_d8079 .container_d8079 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 8px;
+}
+.Wrapper_d8079 .group_d8079 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  background: var(--mf-accent, rgba(243, 244, 246, 0.9));
+}
+.Wrapper_d8079 .name_d8079 {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: white;
+}
+.Wrapper_d8079 .info_d8079 {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0 12px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(243, 244, 246, 0.4);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+  font-size: 11px;
+}
+.Wrapper_d8079 .expose-container_d8079 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.Wrapper_d8079 .expose-container_d8079 div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.Wrapper_d8079 .type_d8079 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-2, #4b5563);
+}
+.Wrapper_d8079 .item_d8079 {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(243, 244, 246, 0.6);
+  color: var(--color-text-1, #1f2937);
+  font-size: 10px;
+  font-weight: 500;
+  margin-right: 6px;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(8, 11, 25, 0.45);
+}
+.Wrapper_d8079 .message_d8079 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--color-text-2, #4b5563);
+}
+.Wrapper_d8079 .message_d8079 .item_d8079 {
+  margin-right: 0;
+  padding: 4px 10px;
+  background: rgba(243, 244, 246, 0.6);
+  color: var(--color-text-1, #1f2937);
+}

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

@@ -0,0 +1,363 @@
+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 } from "react";
+import {
+  Checkbox,
+  Button,
+  Empty,
+  Tooltip,
+  Badge,
+  Form,
+  Select,
+  Switch
+} from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
+import {
+  IconDelete,
+  IconPlus,
+  IconInfoCircle,
+  IconQuestionCircle
+} from "@arco-design/web-react/icon";
+import { defaultDataItem, proxyFormField } from "../../template/constant";
+import {
+  validateCustom,
+  validateSemver,
+  validatePort,
+  isObject,
+  separateType
+} from "../../utils";
+import styles from "./index.module";
+const FormItem = Form.Item;
+const FormList = Form.List;
+const { Option } = Select;
+const FormComponent = (props) => {
+  const {
+    form,
+    condition,
+    formStatus,
+    setFormStatus,
+    validateForm,
+    enableHMR,
+    onHMRChange,
+    versionList,
+    setVersionList,
+    getVersion,
+    customValueValidate,
+    enableClip,
+    onClipChange
+  } = props;
+  const { t } = useTranslation();
+  const federation = window.__FEDERATION__ || {
+    moduleInfo: {},
+    originModuleInfo: {}
+  };
+  const { moduleInfo } = federation;
+  let { producer } = separateType(moduleInfo);
+  const filterDupMap = /* @__PURE__ */ new Map();
+  producer = producer.filter((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
+    const marked = filterDupMap.get(name || typeOrName);
+    filterDupMap.set(name || typeOrName, true);
+    return !marked;
+  });
+  const formatProducer = producer.map((id) => {
+    const hasType = id.includes(":");
+    if (hasType) {
+      return {
+        label: id.split(":")[1],
+        value: id
+      };
+    } else {
+      return {
+        label: id,
+        value: id
+      };
+    }
+  });
+  useEffect(() => {
+    producer.forEach((target) => __async(void 0, null, function* () {
+      const version = yield getVersion == null ? void 0 : getVersion(target);
+      const list = [...versionList || []];
+      if (version) {
+        list.push(version);
+      }
+      setVersionList == null ? void 0 : setVersionList(list);
+    }));
+  }, []);
+  const getCheckStatus = (index) => {
+    const formData = form.getFieldsValue();
+    return formData[proxyFormField][index].checked;
+  };
+  const validateKey = (key, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!isObject(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (key) {
+      statusSet[index].keyStatus = true;
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
+    }
+    statusSet[index].keyStatus = false;
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleNameRequired"));
+  };
+  const validateValue = (value, callback, index) => {
+    const status = getCheckStatus(index);
+    if (!status) {
+      return callback();
+    }
+    const statusSet = [...formStatus];
+    if (!isObject(statusSet[index])) {
+      statusSet[index] = {
+        keyStatus: false,
+        valueStatus: false
+      };
+    }
+    if (validateCustom(value) || validateSemver(value) || validatePort(value) || (customValueValidate == null ? void 0 : customValueValidate(value))) {
+      statusSet[index].valueStatus = true;
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
+    }
+    statusSet[index].valueStatus = false;
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleInfoInvalid"));
+  };
+  const onAdd = (add) => {
+    add(defaultDataItem);
+    setVersionList == null ? void 0 : setVersionList([...versionList || [], []]);
+    validateForm();
+  };
+  const onRemove = (remove, index) => {
+    if (Array.isArray(versionList)) {
+      versionList.splice(index, 1);
+      setVersionList == null ? void 0 : setVersionList(versionList);
+    }
+    remove(index);
+  };
+  const hmrChange = (on) => {
+    onHMRChange(on);
+  };
+  const handleSwitchChange = (on) => {
+    onClipChange(on);
+  };
+  const onKeyChange = (key, index) => __async(void 0, null, function* () {
+    const version = yield getVersion == null ? void 0 : getVersion(key);
+    if (version) {
+      const list = [...versionList || []];
+      list.splice(index, 1, version);
+      setVersionList == null ? void 0 : setVersionList(list);
+    }
+  });
+  return /* @__PURE__ */ jsx(FormList, { field: proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.sectionHeader, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.heading, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx("div", { children: t("form.tooltip.proxyExample") }), children: /* @__PURE__ */ jsx(IconInfoCircle, {}) }),
+          /* @__PURE__ */ jsx("span", { className: styles.title, children: t("form.title") }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: styles.statusMessage,
+              style: { marginLeft: 8 },
+              children: [
+                /* @__PURE__ */ jsx(Badge, { color: condition.color, className: styles.badge }),
+                condition.message
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: t("form.subtitle") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.hmrArea, children: [
+          props.headerSlot,
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enableClip,
+              checkedText: t("form.clip.enable"),
+              uncheckedText: t("form.clip.disable"),
+              onChange: handleSwitchChange,
+              className: styles.switch
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: t("form.clip.tooltip"), children: /* @__PURE__ */ jsx(
+            IconQuestionCircle,
+            {
+              style: { marginLeft: 5, cursor: "pointer" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.divider }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enableHMR === "enable",
+              checkedText: t("form.hmr.enable"),
+              uncheckedText: t("form.hmr.disable"),
+              onChange: hmrChange,
+              className: styles.switch
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(IconPlus, {}),
+            shape: "circle",
+            className: styles.add,
+            onClick: () => onAdd(add),
+            "data-set-e2e": "e2eAdd"
+          }
+        )
+      ] })
+    ] }),
+    fields.length ? /* @__PURE__ */ jsx("div", { className: styles.rules, children: fields.map((item, index) => {
+      var _a, _b;
+      return /* @__PURE__ */ jsxs("div", { className: styles.ruleCard, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.ruleHeader, children: [
+          /* @__PURE__ */ jsx(
+            FormItem,
+            {
+              field: `${item.field}.checked`,
+              triggerPropName: "checked",
+              children: /* @__PURE__ */ jsx(Checkbox, { className: styles.toggle })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: /* @__PURE__ */ jsx(IconDelete, {}),
+              shape: "circle",
+              status: "danger",
+              className: styles.delete,
+              "data-set-e2e": "e2eDelete",
+              onClick: () => onRemove(remove, index)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.inputs, "data-set-e2e": "e2eProxyItem", children: [
+          /* @__PURE__ */ jsx(
+            FormItem,
+            {
+              field: `${item.field}.key`,
+              rules: [
+                {
+                  validator: (value, cb) => {
+                    const isValid = Boolean(value);
+                    if (isValid) {
+                      cb();
+                      validateKey(value, () => {
+                      }, index);
+                    } else {
+                      cb(t("form.validation.moduleNameRequired"));
+                      validateKey(value, () => {
+                      }, index);
+                    }
+                  }
+                }
+              ],
+              className: styles.field,
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  "data-set-e2e": "e2eProxyKey",
+                  placeholder: t("form.fields.moduleName.placeholder"),
+                  onChange: (key) => onKeyChange(key, index),
+                  allowClear: true,
+                  showSearch: true,
+                  dropdownMenuClassName: styles.dropdown,
+                  children: formatProducer.map((option) => /* @__PURE__ */ jsx(Option, { value: option.value, children: option.label }, option.value))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormItem,
+            {
+              field: `${item.field}.value`,
+              rules: [
+                {
+                  validator: (value, cb) => {
+                    const isValid = validateCustom(value) || validateSemver(value) || validatePort(value) || (customValueValidate == null ? void 0 : customValueValidate(value));
+                    if (isValid) {
+                      cb();
+                      validateValue(value, () => {
+                      }, index);
+                    } else {
+                      cb(t("form.validation.moduleInfoInvalid"));
+                      validateValue(value, () => {
+                      }, index);
+                    }
+                  }
+                }
+              ],
+              className: styles.field,
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  "data-set-e2e": "e2eProxyValue",
+                  placeholder: t(
+                    "form.fields.customManifest.placeholder"
+                  ),
+                  allowClear: true,
+                  showSearch: true,
+                  allowCreate: true,
+                  dropdownMenuClassName: styles.dropdown,
+                  children: (_b = (_a = versionList || []) == null ? void 0 : _a[index]) == null ? void 0 : _b.map((version) => /* @__PURE__ */ jsx(Option, { value: version, children: version }, version))
+                }
+              )
+            }
+          )
+        ] })
+      ] }, item.field);
+    }) }) : /* @__PURE__ */ jsx("div", { className: styles.emptyWrapper, children: /* @__PURE__ */ jsx(
+      Empty,
+      {
+        description: t("form.empty.description"),
+        className: styles.empty
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.footerHint, children: t("form.footer.hint") })
+  ] }) });
+};
+var Form_default = FormComponent;
+export {
+  Form_default as default
+};

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

@@ -0,0 +1,5 @@
+import "./index_module.css";
+var index_module_default = { "wrapper": "wrapper_20b79", "sectionHeader": "sectionHeader_20b79", "heading": "heading_20b79", "titleRow": "titleRow_20b79", "title": "title_20b79", "subtitle": "subtitle_20b79", "headerActions": "headerActions_20b79", "badge": "badge_20b79", "statusMessage": "statusMessage_20b79", "divider": "divider_20b79", "hmrArea": "hmrArea_20b79", "switch": "switch_20b79", "rules": "rules_20b79", "ruleCard": "ruleCard_20b79", "ruleHeader": "ruleHeader_20b79", "toggle": "toggle_20b79", "inputs": "inputs_20b79", "field": "field_20b79", "dropdown": "dropdown_20b79", "delete": "delete_20b79", "emptyWrapper": "emptyWrapper_20b79", "empty": "empty_20b79", "footerHint": "footerHint_20b79" };
+export {
+  index_module_default as default
+};

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

@@ -0,0 +1,198 @@
+.wrapper_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  color: var(--color-text-1, #1f2937);
+}
+
+.sectionHeader_20b79 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 12px 16px;
+  background: rgba(228, 228, 231, 0.1);
+  border: 1px solid rgba(228, 228, 231, 0.5);
+}
+
+.heading_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1;
+}
+
+.titleRow_20b79 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1, #1f2937);
+}
+.titleRow_20b79 .arco-icon {
+  color: rgba(23, 75, 180, 0.9);
+  font-size: 18px;
+}
+
+.title_20b79 {
+  letter-spacing: 0.02em;
+}
+
+.subtitle_20b79 {
+  font-size: 12px;
+  color: var(--color-text-2, #4b5563);
+  line-height: 1.5;
+}
+
+.headerActions_20b79 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.badge_20b79 {
+  transform: scale(1.4);
+  margin-right: 6px;
+}
+
+.statusMessage_20b79 {
+  font-size: 12px;
+  color: var(--color-text-2, #4b5563);
+  max-width: 260px;
+  line-height: 1.4;
+}
+
+.divider_20b79 {
+  width: 1px;
+  height: 1px;
+  background: rgba(96, 165, 250, 0.3);
+}
+
+.hmrArea_20b79 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-text-2, #4b5563);
+}
+
+.switch_20b79 .arco-switch {
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
+  border-color: rgba(96, 165, 250, 0.35);
+  color: var(--color-text-2, #4b5563);
+}
+.switch_20b79 .arco-switch-checked {
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.9));
+  border-color: rgba(96, 165, 250, 0.35);
+}
+
+.rules_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ruleCard_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px;
+  border-radius: 18px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+  box-shadow: 0 15px 32px rgba(8, 11, 25, 0.45);
+}
+
+.ruleHeader_20b79 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.toggle_20b79 .arco-checkbox {
+  transform: scale(1.4);
+}
+.toggle_20b79 .arco-checkbox-icon {
+  border-radius: 6px;
+  border-color: rgba(228, 228, 231, 0.5);
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
+}
+.toggle_20b79 .arco-checkbox-checked .arco-checkbox-icon {
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
+  border-color: rgba(228, 228, 231, 0.5);
+}
+
+.inputs_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+@media (min-width: 520px) {
+  .inputs_20b79 {
+    flex-direction: row;
+  }
+}
+.field_20b79 {
+  flex: 1 1;
+}
+.field_20b79 .arco-form-item-content {
+  width: 100%;
+}
+.field_20b79 .arco-select-view {
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  border-radius: 14px;
+  color: var(--color-text-1, #1f2937);
+  min-height: 42px;
+  padding: 6px 12px;
+}
+.field_20b79 .arco-select-view-input {
+  color: var(--color-text-2, #4b5563);
+}
+.field_20b79 .arco-select-view-placeholder {
+  color: var(--color-text-2, #4b5563);
+}
+
+.dropdown_20b79 {
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  box-shadow: 0 16px 30px rgba(8, 11, 25, 0.45);
+}
+.dropdown_20b79 .arco-select-option {
+  color: var(--color-text-2, #4b5563);
+}
+.dropdown_20b79 .arco-select-option:hover,
+.dropdown_20b79 .arco-select-option.arco-select-option-selected {
+  background: rgba(243, 244, 246, var(--form-control-alpha, 0.1));
+}
+
+.delete_20b79 {
+  box-shadow: 0 8px 16px rgba(248, 113, 113, 0.18);
+}
+
+.emptyWrapper_20b79 {
+  border-radius: 16px;
+  border: 1px dashed rgba(228, 228, 231, 0.5);
+  padding: 28px 16px;
+  background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+  display: flex;
+  justify-content: center;
+}
+
+.empty_20b79 .arco-empty-description {
+  color: var(--color-text-2, #4b5563);
+}
+
+.footerHint_20b79 {
+  font-size: 11px;
+  color: var(--color-text-2, #4b5563);
+  text-align: right;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}