@module-federation/devtools 0.21.6 → 0.22.1

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,
@@ -34,7 +33,8 @@ import {
 import {
   IconDelete,
   IconPlus,
-  IconInfoCircle
+  IconInfoCircle,
+  IconQuestionCircle
 } from "@arco-design/web-react/icon";
 import { defaultDataItem, proxyFormField } from "../../template/constant";
 import {
@@ -60,9 +60,15 @@ const FormComponent = (props) => {
     versionList,
     setVersionList,
     getVersion,
-    customValueValidate
+    customValueValidate,
+    enableClip,
+    onClipChange
   } = props;
-  const { moduleInfo } = window.__FEDERATION__;
+  const federation = window.__FEDERATION__ || {
+    moduleInfo: {},
+    originModuleInfo: {}
+  };
+  const { moduleInfo } = federation;
   let { producer } = separateType(moduleInfo);
   const filterDupMap = /* @__PURE__ */ new Map();
   producer = producer.filter((t) => {
@@ -113,11 +119,16 @@ 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));
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
     return callback("Module name can not be empty");
   };
   const validateValue = (value, callback, index) => {
@@ -134,11 +145,16 @@ 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));
+    setTimeout(() => {
+      setFormStatus(statusSet);
+    }, 0);
     return callback(
       "The module information format is incorrect, check the format in the upper left corner"
     );
@@ -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,31 +185,52 @@ 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: "Example: Customise the remote module address ending with 「.json」. For instance key: @module-federation/button, value: http://localhost:3000/mf-manifest.json" }),
+              children: /* @__PURE__ */ jsx(IconInfoCircle, {})
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.title, children: "Proxy Overrides" }),
+          /* @__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: "Point consumers to specific remote bundles or manifests for quicker validation." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.hmrArea, children: [
           props.headerSlot,
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enableClip,
+              checkedText: "Enable Clip",
+              uncheckedText: "Disable Clip",
+              onChange: handleSwitchChange,
+              className: styles.switch
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: "After enabling data clipping, snapshot modules and shared information will be removed, affecting preloading logic.", children: /* @__PURE__ */ jsx(
+            IconQuestionCircle,
+            {
+              style: { marginLeft: 5, cursor: "pointer" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.divider }),
           /* @__PURE__ */ jsx(
             Switch,
             {
@@ -201,85 +241,127 @@ const FormComponent = (props) => {
               className: styles.switch
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(IconPlus, {}),
+            shape: "circle",
+            className: styles.add,
+            onClick: () => onAdd(add),
+            "data-set-e2e": "e2eAdd",
+            type: "primary"
+          }
+        )
       ] })
     ] }),
-    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("Module name can not be empty");
+                      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: "Module Name",
+                  onChange: (key) => onKeyChange(key, index),
+                  allowClear: true,
+                  showSearch: true,
+                  dropdownMenuClassName: styles.dropdown,
+                  children: formatProducer.map((item2) => /* @__PURE__ */ jsx(Option, { value: item2.value, children: item2.label }, item2.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(
+                        "The module information format is incorrect, check the format in the upper left corner"
+                      );
+                      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: "Custom Manifest URL",
+                  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: "Add your first override to begin redirecting remotes.",
+        className: styles.empty
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.footerHint, children: "Changes persist per domain and refresh the inspected tab when valid." })
   ] }) });
 };
 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", "add": "add_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

@@ -1,47 +1,201 @@
-.container_20b79 {
+.wrapper_20b79 {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 18px;
+  color: #1f2937;
 }
-.container_20b79 .checkBox_20b79 {
-  transform: scale(1.25);
+
+.sectionHeader_20b79 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 12px 16px;
+  background: rgba(228, 228, 231, 0.5);
+  border: 1px solid rgba(228, 228, 231, 0.5);
 }
-.container_20b79 .input_20b79 {
-  margin: 0 1vw 0 0;
+
+.heading_20b79 {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   flex: 1 1;
 }
-.container_20b79 .delete_20b79 {
-  margin: 0 0 0 1vw;
+
+.titleRow_20b79 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+.titleRow_20b79 .arco-icon {
+  color: rgba(23, 75, 180, 0.9);
+  font-size: 18px;
+}
+
+.title_20b79 {
+  letter-spacing: 0.02em;
 }
 
-.header_20b79 {
+.subtitle_20b79 {
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 1.5;
+}
+
+.headerActions_20b79 {
   display: flex;
   align-items: center;
-  margin: 1vh 0;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.headerActions_20b79 .add_20b79 {
+  box-shadow: 0 8px 16px rgba(243, 244, 246, 0.9);
 }
-.header_20b79 .add_20b79 {
-  margin: 0 0.5vw;
+
+.badge_20b79 {
+  transform: scale(1.4);
+  margin-right: 6px;
+}
+
+.statusMessage_20b79 {
+  font-size: 12px;
+  color: #4b5563;
+  max-width: 260px;
+  line-height: 1.4;
 }
-.header_20b79 .title_20b79 {
-  margin: 0 0.5vw;
+
+.divider_20b79 {
+  width: 1px;
+  height: 1px;
+  background: rgba(96, 165, 250, 0.3);
 }
-.header_20b79 .status_20b79 {
+
+.hmrArea_20b79 {
   display: flex;
-  flex: 1 1;
-  justify-content: flex-end;
   align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #4b5563;
 }
-.header_20b79 .status_20b79 .message_20b79 {
-  flex: 1 1;
+
+.switch_20b79 .arco-switch {
+  background: rgba(243, 244, 246, 0.9);
+  border-color: rgba(96, 165, 250, 0.35);
+  color: #4b5563;
 }
-.header_20b79 .status_20b79 .switch_20b79 {
-  margin-left: 0.5vw;
+.switch_20b79 .arco-switch-checked {
+  background: rgba(243, 244, 246, 0.9);
+  border-color: rgba(96, 165, 250, 0.35);
 }
-.header_20b79 .headerSlot_20b79 {
+
+.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: 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;
 }
-.header_20b79 .badge_20b79 {
+
+.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, 0.9);
+}
+.toggle_20b79 .arco-checkbox-checked .arco-checkbox-icon {
+  background: rgba(243, 244, 246, 0.9);
+  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, 0.9);
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  border-radius: 14px;
+  color: #1f2937;
+  min-height: 42px;
+  padding: 6px 12px;
+}
+.field_20b79 .arco-select-view-input {
+  color: #4b5563;
+}
+.field_20b79 .arco-select-view-placeholder {
+  color: #4b5563;
+}
+
+.dropdown_20b79 {
+  background: 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: #4b5563;
+}
+.dropdown_20b79 .arco-select-option:hover,
+.dropdown_20b79 .arco-select-option.arco-select-option-selected {
+  background: rgba(243, 244, 246, 0.9);
+}
+
+.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: rgba(255, 255, 255, 0.9);
+  display: flex;
+  justify-content: center;
+}
+
+.empty_20b79 .arco-empty-description {
+  color: #4b5563;
+}
+
+.footerHint_20b79 {
+  font-size: 11px;
+  color: #4b5563;
+  text-align: right;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  align-items: center;
+  justify-content: center;
   display: flex;
-  transform: scale(1.6);
-  margin: 0 0.6vw;
 }