@module-federation/devtools 0.22.0 → 0.22.1

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

@@ -1,10 +1,27 @@
 "use strict";
 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 });
@@ -57,9 +74,21 @@ var import_ahooks = require("ahooks");
 var import_web_react = require("@arco-design/web-react");
 var import_sdk = require("@module-federation/sdk");
 var import_Form = __toESM(require("../Form"));
-var import_Graph = __toESM(require("../Graph"));
 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,
@@ -69,57 +98,164 @@ const Layout = (props) => {
     getVersion,
     handleProxyAddress,
     customValueValidate,
-    headerSlot
+    headerSlot,
+    onModuleInfoChange,
+    onModuleInfoReset,
+    tabId
   } = props;
   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 [snapshot, setSnapshot] = (0, import_react.useState)(moduleInfo);
   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__ = {
+        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 filterFormData = formData[import_constant.proxyFormField].reduce(
-        (memo, current, idx) => {
-          if (!formStatus[idx]) {
-            return memo;
-          }
-          const { keyStatus, valueStatus } = formStatus[idx];
-          if (!keyStatus || !valueStatus || !current.checked) {
-            return memo;
-          }
-          const duplicate = JSON.parse(JSON.stringify(current));
-          if (handleProxyAddress) {
-            const value = handleProxyAddress(duplicate.value);
-            duplicate.value = value;
-          }
-          return [...memo, duplicate];
-        },
-        []
-      );
+      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 (!filterFormData.length) {
-          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);
+        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);
-          setSnapshot(window.__FEDERATION__.originModuleInfo);
           return;
         }
-        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(filterFormData) : yield (0, import_utils.getModuleInfo)(filterFormData);
+        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;
-        setSnapshot(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);
@@ -130,28 +266,86 @@ const Layout = (props) => {
     }
   );
   (0, import_react.useEffect)(() => {
-    setSnapshot(moduleInfo);
-  }, [moduleInfo]);
-  (0, import_react.useEffect)(() => {
-    (0, import_utils.getScope)().then((scope) => __async(void 0, null, function* () {
+    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));
-        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 = import_constant.defaultModuleData;
+        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 = import_constant.defaultModuleData;
+        storeData = JSON.parse(JSON.stringify(import_constant.defaultModuleData));
       }
-      form.setFieldsValue(storeData);
-    }));
-  }, []);
+      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];
@@ -164,9 +358,25 @@ const Layout = (props) => {
     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(() => {
@@ -176,6 +386,11 @@ const Layout = (props) => {
   };
   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);
   };
@@ -192,8 +407,39 @@ const Layout = (props) => {
     }
     (0, import_utils.injectScript)(import_utils.reloadPage, false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  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: "Remotes in scope" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_index.default.summaryHint, children: "Override manifests to verify integration without redeploying." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_index.default.chipGroup, children: [
+        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: "Waiting for module map" }),
+        extraCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: import_index.default.moreChip, children: [
+          "+",
+          extraCount,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: import_index.default.formSection, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_web_react.Form,
       {
         form,
@@ -209,6 +455,8 @@ const Layout = (props) => {
             validateForm: () => validateForm(form),
             enableHMR,
             onHMRChange,
+            enableClip,
+            onClipChange,
             versionList,
             setVersionList,
             getVersion,
@@ -217,8 +465,7 @@ const Layout = (props) => {
           }
         )
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Graph.default, { snapshot })
+    ) })
   ] });
 };
 var Layout_default = Layout;

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

@@ -22,4 +22,4 @@ __export(index_module_exports, {
 });
 module.exports = __toCommonJS(index_module_exports);
 var import_index_module = require("./index_module.css");
-var index_module_default = { "select": "select_084ab", "card": "card_084ab", "appName": "appName_084ab", "tagContainer": "tagContainer_084ab", "tag": "tag_084ab", "header": "header_084ab", "add": "add_084ab", "title": "title_084ab", "status": "status_084ab", "switch": "switch_084ab", "badge": "badge_084ab" };
+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/lib/component/Layout/index_module.css

@@ -1,48 +1,68 @@
-.select_084ab {
-  margin-top: 1vh;
+.wrapper_084ab {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex: 1 1;
 }
 
-.card_084ab {
+.summaryCard_084ab {
+  padding: 18px 20px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
   display: flex;
-  height: 4vh;
-  align-items: center;
-}
-.card_084ab .appName_084ab {
-  margin: 1vh 0;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 110px;
 }
 
-.tagContainer_084ab {
+.summaryHeader_084ab {
   display: flex;
-  align-items: center;
-  margin-bottom: 1vh;
-  color: rgb(78, 89, 105);
+  flex-direction: column;
+  gap: 6px;
 }
-.tagContainer_084ab .tag_084ab {
-  margin-left: 1vw;
+
+.summaryTitle_084ab {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.summaryHint_084ab {
+  font-size: 12px;
+  color: #4b5563;
 }
 
-.header_084ab {
+.chipGroup_084ab {
   display: flex;
   align-items: center;
-  margin: 1vh 0;
-}
-.header_084ab .add_084ab {
-  margin: 0 0.5vw;
+  flex-wrap: wrap;
+  gap: 8px;
 }
-.header_084ab .title_084ab {
-  margin: 0 0.5vw;
+
+.chip_084ab,
+.moreChip_084ab,
+.chipPlaceholder_084ab {
+  padding: 6px 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  color: #1f2937;
+  letter-spacing: 0.02em;
 }
-.header_084ab .status_084ab {
-  display: flex;
-  flex: 1 1;
-  justify-content: flex-end;
-  align-items: center;
+
+.chipPlaceholder_084ab {
+  border-style: dashed;
+  color: #4b5563;
+  background: rgba(255, 255, 255, 0.9);
 }
-.header_084ab .status_084ab .switch_084ab {
-  margin-left: 0.5vw;
+
+.moreChip_084ab {
+  background: rgba(243, 244, 246, 0.4);
+  border-color: rgba(228, 228, 231, 0.5);
 }
-.header_084ab .badge_084ab {
-  display: flex;
-  transform: scale(1.6);
-  margin: 0 0.6vw;
+
+.formSection_084ab {
+  padding: 22px 24px;
+  border: 1px solid rgba(228, 228, 231, 0.5);
+  background: rgba(255, 255, 255, 0.9);
 }