@module-federation/devtools 0.22.0 → 0.23.0

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

@@ -18,9 +18,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { flushSync } from "react-dom";
 import {
   Checkbox,
   Button,
@@ -31,10 +30,12 @@ import {
   Select,
   Switch
 } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import {
   IconDelete,
   IconPlus,
-  IconInfoCircle
+  IconInfoCircle,
+  IconQuestionCircle
 } from "@arco-design/web-react/icon";
 import { defaultDataItem, proxyFormField } from "../../template/constant";
 import {
@@ -60,13 +61,20 @@ const FormComponent = (props) => {
     versionList,
     setVersionList,
     getVersion,
-    customValueValidate
+    customValueValidate,
+    enableClip,
+    onClipChange
   } = props;
-  const { moduleInfo } = window.__FEDERATION__;
+  const { t } = useTranslation();
+  const federation = window.__FEDERATION__ || {
+    moduleInfo: {},
+    originModuleInfo: {}
+  };
+  const { moduleInfo } = federation;
   let { producer } = separateType(moduleInfo);
   const filterDupMap = /* @__PURE__ */ new Map();
-  producer = producer.filter((t) => {
-    const [typeOrName, name] = t.split(":");
+  producer = producer.filter((tItem) => {
+    const [typeOrName, name] = tItem.split(":");
     const marked = filterDupMap.get(name || typeOrName);
     filterDupMap.set(name || typeOrName, true);
     return !marked;
@@ -113,12 +121,17 @@ const FormComponent = (props) => {
     }
     if (key) {
       statusSet[index].keyStatus = true;
-      flushSync(() => setFormStatus(statusSet));
-      return callback();
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
     }
     statusSet[index].keyStatus = false;
-    flushSync(() => setFormStatus(statusSet));
-    return callback("Module name can not be empty");
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleNameRequired"));
   };
   const validateValue = (value, callback, index) => {
     const status = getCheckStatus(index);
@@ -134,14 +147,17 @@ const FormComponent = (props) => {
     }
     if (validateCustom(value) || validateSemver(value) || validatePort(value) || (customValueValidate == null ? void 0 : customValueValidate(value))) {
       statusSet[index].valueStatus = true;
-      flushSync(() => setFormStatus(statusSet));
-      return callback();
+      setTimeout(() => {
+        setFormStatus(statusSet);
+        callback();
+      }, 0);
+      return;
     }
     statusSet[index].valueStatus = false;
-    flushSync(() => setFormStatus(statusSet));
-    return callback(
-      "The module information format is incorrect, check the format in the upper left corner"
-    );
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
+    return callback(t("form.validation.moduleInfoInvalid"));
   };
   const onAdd = (add) => {
     add(defaultDataItem);
@@ -158,6 +174,9 @@ const FormComponent = (props) => {
   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) {
@@ -166,120 +185,176 @@ const FormComponent = (props) => {
       setVersionList == null ? void 0 : setVersionList(list);
     }
   });
-  return /* @__PURE__ */ jsx(FormList, { field: proxyFormField, children: (fields, { add, remove }) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          content: /* @__PURE__ */ jsx("div", { children: "Example: Customize the remote module address, which should end with 「.json」, for example key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
-          children: /* @__PURE__ */ jsx(IconInfoCircle, {})
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: styles.title, children: "Module Proxy" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          icon: /* @__PURE__ */ jsx(IconPlus, {}),
-          shape: "circle",
-          className: styles.add,
-          onClick: () => onAdd(add),
-          "data-set-e2e": "e2eAdd"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: styles.status, children: [
-        /* @__PURE__ */ jsx(Badge, { color: condition.color, className: styles.badge }),
-        /* @__PURE__ */ jsx("span", { className: styles.message, children: condition.message }),
-        /* @__PURE__ */ jsxs("span", { className: styles.headerSlot, children: [
+  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: "Enable HMR",
-              uncheckedText: "Disable HMR",
+              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(Fragment, { children: fields.map((item, index) => {
+    fields.length ? /* @__PURE__ */ jsx("div", { className: styles.rules, children: fields.map((item, index) => {
       var _a, _b;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.container,
-          "data-set-e2e": "e2eProxyItem",
-          children: [
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              FormItem,
-              {
-                field: `${item.field}.checked`,
-                triggerPropName: "checked",
-                children: /* @__PURE__ */ jsx(Checkbox, { className: styles.checkBox })
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: styles.input, children: /* @__PURE__ */ jsx(
-              FormItem,
-              {
-                field: `${item.field}.key`,
-                rules: [
-                  {
-                    validator: (value, cb) => validateKey(value, cb, index)
-                  }
-                ],
-                children: /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    "data-set-e2e": "e2eProxyKey",
-                    placeholder: "Module Name",
-                    onChange: (key) => onKeyChange(key, index),
-                    allowClear: true,
-                    showSearch: true,
-                    children: formatProducer.map((item2) => /* @__PURE__ */ jsx(Option, { value: item2.value, children: item2.label }, item2.value))
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: styles.input, children: /* @__PURE__ */ jsx(
-              FormItem,
-              {
-                field: `${item.field}.value`,
-                rules: [
-                  {
-                    validator: (value, cb) => validateValue(value, cb, index)
+      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);
+                    }
                   }
-                ],
-                children: /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    "data-set-e2e": "e2eProxyValue",
-                    placeholder: "Custom Manifest URL",
-                    allowClear: true,
-                    showSearch: true,
-                    allowCreate: true,
-                    children: (_b = (_a = versionList || []) == null ? void 0 : _a[index]) == null ? void 0 : _b.map((version) => /* @__PURE__ */ jsx(Option, { value: version, children: version }, version))
+                }
+              ],
+              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);
+                    }
                   }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                icon: /* @__PURE__ */ jsx(IconDelete, {}),
-                shape: "circle",
-                status: "danger",
-                className: styles.delete,
-                "data-set-e2e": "e2eDelete",
-                onClick: () => onRemove(remove, index)
-              }
-            )
-          ]
-        },
-        item.field
-      );
-    }) }) : /* @__PURE__ */ jsx(Empty, {})
+                }
+              ],
+              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;

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

@@ -1,5 +1,5 @@
 import "./index_module.css";
-var index_module_default = { "container": "container_20b79", "checkBox": "checkBox_20b79", "input": "input_20b79", "delete": "delete_20b79", "header": "header_20b79", "add": "add_20b79", "title": "title_20b79", "status": "status_20b79", "message": "message_20b79", "switch": "switch_20b79", "headerSlot": "headerSlot_20b79", "badge": "badge_20b79" };
+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
 };