@module-federation/devtools 0.22.0 → 0.23.0

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

@@ -1,3 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -18,15 +37,15 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useRef } from "react";
 import { useDebounceFn, useUpdateEffect } from "ahooks";
 import { Form } from "@arco-design/web-react";
+import { useTranslation } from "react-i18next";
 import {
   MODULE_DEVTOOL_IDENTIFIER
 } from "@module-federation/sdk";
 import FormComponent from "../Form";
-import Dependency from "../Graph";
 import {
   getModuleInfo,
   getScope,
@@ -35,6 +54,7 @@ import {
   separateType,
   reloadPage,
   setChromeStorage,
+  getStorageValue,
   mergeStorage,
   removeStorageKey,
   removeStorage,
@@ -46,11 +66,25 @@ import {
   FormID,
   statusInfo,
   ENABLEHMR,
+  ENABLE_CLIP,
   __ENABLE_FAST_REFRESH__,
   BROWSER_ENV_KEY,
   __FEDERATION_DEVTOOLS__,
   __EAGER_SHARE__
 } from "../../template/constant";
+import styles from "./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,
@@ -60,57 +94,165 @@ const Layout = (props) => {
     getVersion,
     handleProxyAddress,
     customValueValidate,
-    headerSlot
+    headerSlot,
+    onModuleInfoChange,
+    onModuleInfoReset,
+    tabId
   } = props;
+  const { t } = useTranslation();
   const { producer } = separateType(moduleInfo);
+  const producerKey = useMemo(() => producer.join("|"), [producer]);
   const [condition, setCondition] = useState(statusInfo.processing);
   const [formStatus, setFormStatus] = useState([]);
-  const [snapshot, setSnapshot] = useState(moduleInfo);
   const [form] = Form.useForm();
   const [enableHMR, setEnalbeHMR] = useState("disable");
+  const [enableClip, setEnableClip] = useState(() => {
+    try {
+      if (tabId) {
+        return localStorage.getItem(`${ENABLE_CLIP}_${tabId}`) === "true";
+      }
+      return false;
+    } catch (e) {
+      return false;
+    }
+  });
+  const lastFormSignatureRef = useRef("");
+  const lastEffectiveRulesRef = useRef("");
+  const lastRawRulesRef = useRef([]);
+  const lastEnableClipRef = 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 || {};
+    }
+  };
+  useEffect(() => {
+    ensureFederationContext();
+    window.__FEDERATION__.moduleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    window.__FEDERATION__.originModuleInfo = JSON.parse(
+      JSON.stringify(moduleInfo || {})
+    );
+    const rawRules = form.getFieldValue(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 } = useDebounceFn(
     (formData) => __async(void 0, null, function* () {
+      ensureFederationContext();
       window.__FEDERATION__.moduleInfo = JSON.parse(
         JSON.stringify(window.__FEDERATION__.originModuleInfo)
       );
-      const filterFormData = formData[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[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(statusInfo.processing);
-        if (!filterFormData.length) {
-          yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
-          yield removeStorage(BROWSER_ENV_KEY);
-          yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
-          yield injectScript(reloadPage, false);
+        if (!effectiveRules.length) {
+          if (pendingRule) {
+            return;
+          }
+          if (hadPreviousEffective) {
+            yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
+            yield removeStorage(BROWSER_ENV_KEY);
+            yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
+            yield injectScript(reloadPage, false);
+            setCondition(statusInfo.noProxy);
+            lastEffectiveRulesRef.current = "";
+            if (typeof onModuleInfoReset === "function") {
+              onModuleInfoReset();
+            } else {
+              onModuleInfoChange == null ? void 0 : onModuleInfoChange(window.__FEDERATION__.originModuleInfo);
+            }
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
           setCondition(statusInfo.noProxy);
-          setSnapshot(window.__FEDERATION__.originModuleInfo);
           return;
         }
-        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(filterFormData) : yield getModuleInfo(filterFormData);
+        if (!clipChanged && effectiveSignature === lastEffectiveRulesRef.current) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
+          return;
+        }
+        if (rawRules.every((rule) => !rule.value)) {
+          if (hadPreviousEffective) {
+            setCondition(statusInfo.success);
+          } else {
+            setCondition(statusInfo.noProxy);
+          }
+          return;
+        }
+        const { moduleInfo: moduleInfo2, status, overrides } = handleSnapshot ? yield handleSnapshot(effectiveRules) : yield 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 setStorage(MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
         yield setStorage(BROWSER_ENV_KEY);
         yield mergeStorage(__FEDERATION_DEVTOOLS__, "overrides", overrides);
         yield injectScript(reloadPage, false);
         window.__FEDERATION__.moduleInfo = moduleInfo2;
-        setSnapshot(moduleInfo2);
+        onModuleInfoChange == null ? void 0 : onModuleInfoChange(moduleInfo2);
         setCondition(statusInfo[status]);
+        lastEffectiveRulesRef.current = effectiveSignature;
       } catch (e) {
         console.log(e);
         setCondition(statusInfo.error);
@@ -121,28 +263,86 @@ const Layout = (props) => {
     }
   );
   useEffect(() => {
-    setSnapshot(moduleInfo);
-  }, [moduleInfo]);
-  useEffect(() => {
-    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 getScope();
       const data = yield chrome.storage.sync.get([FormID]);
       const config = (_a = data == null ? void 0 : data[FormID]) == null ? void 0 : _a[scope];
       let storeData;
       if (isObject(config)) {
         storeData = JSON.parse(JSON.stringify(config));
-        storeData[proxyFormField] = (_b = storeData[proxyFormField]) == null ? void 0 : _b.filter(
-          (item) => producer.includes(item.key)
-        );
-        if (!((_c = storeData[proxyFormField]) == null ? void 0 : _c.length)) {
-          storeData = defaultModuleData;
+        if (producer.length) {
+          storeData[proxyFormField] = (_b = storeData[proxyFormField]) == null ? void 0 : _b.filter(
+            (item) => producer.includes(item.key)
+          );
+          if (!((_c = storeData[proxyFormField]) == null ? void 0 : _c.length)) {
+            storeData = JSON.parse(JSON.stringify(defaultModuleData));
+          }
         }
       } else {
-        storeData = defaultModuleData;
+        storeData = JSON.parse(JSON.stringify(defaultModuleData));
       }
-      form.setFieldsValue(storeData);
-    }));
-  }, []);
+      let overridesApplied = false;
+      try {
+        const overridesState = yield getStorageValue(__FEDERATION_DEVTOOLS__);
+        if (typeof overridesState === "string" && overridesState) {
+          const parsedState = JSON.parse(overridesState);
+          const overrides = parsedState == null ? void 0 : parsedState.overrides;
+          if (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), {
+                [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[proxyFormField]
+        ) ? storeData[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) {
+          setChromeStorage(storeData);
+        }
+        if (effectiveRules.length) {
+          setCondition(statusInfo.success);
+        } else {
+          setCondition(statusInfo.noProxy);
+        }
+      }
+    });
+    hydrateForm();
+    return () => {
+      cancelled = true;
+    };
+  }, [moduleInfo, producerKey, form]);
   useEffect(() => {
     chrome.storage.sync.get([ENABLEHMR]).then((data) => {
       const enable = data[ENABLEHMR];
@@ -155,9 +355,25 @@ const Layout = (props) => {
     validateForm(form);
   }, []);
   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[proxyFormField] || [],
+      formStatus
+    );
+    const effectiveSignature = getEffectiveSignature(effectiveRules);
+    if (effectiveSignature === lastEffectiveRulesRef.current) {
+      return;
+    }
     run(formData);
-  }, []);
+  }, [producerKey, formStatus]);
   const validateForm = (form2) => {
     setTimeout(() => {
       form2.validate().catch(() => {
@@ -167,6 +383,11 @@ const Layout = (props) => {
   };
   const onValuesChange = (target, formData) => {
     validateForm(form);
+    const signature = JSON.stringify(formData);
+    if (signature === lastFormSignatureRef.current) {
+      return;
+    }
+    lastFormSignatureRef.current = signature;
     setChromeStorage(formData);
     run(formData);
   };
@@ -183,8 +404,33 @@ const Layout = (props) => {
     }
     injectScript(reloadPage, false);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  const onClipChange = (on) => {
+    setEnableClip(on);
+    try {
+      if (tabId) {
+        localStorage.setItem(`${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__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.summaryCard, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.summaryHeader, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.summaryTitle, children: t("layout.summary.title") }),
+        /* @__PURE__ */ jsx("span", { className: styles.summaryHint, children: t("layout.summary.hint") })
+      ] }),
+      previewList.length ? previewList.map((name) => /* @__PURE__ */ jsx("span", { className: styles.chip, children: name }, name)) : /* @__PURE__ */ jsx("span", { className: styles.chipPlaceholder, children: t("layout.summary.placeholder") }),
+      extraCount > 0 && /* @__PURE__ */ jsx("span", { className: styles.moreChip, children: t("layout.summary.more", { count: extraCount }) })
+    ] }),
+    /* @__PURE__ */ jsx("section", { className: styles.formSection, children: /* @__PURE__ */ jsx(
       Form,
       {
         form,
@@ -200,6 +446,8 @@ const Layout = (props) => {
             validateForm: () => validateForm(form),
             enableHMR,
             onHMRChange,
+            enableClip,
+            onClipChange,
             versionList,
             setVersionList,
             getVersion,
@@ -208,8 +456,7 @@ const Layout = (props) => {
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx(Dependency, { snapshot })
+    ) })
   ] });
 };
 var Layout_default = Layout;

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

@@ -1,5 +1,5 @@
 import "./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" };
 export {
   index_module_default as default
 };

package/dist/es/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: var(--color-text-1, #1f2937);
+}
+
+.summaryHint_084ab {
+  font-size: 12px;
+  color: var(--color-text-2, #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: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+  font-size: 12px;
+  color: var(--color-text-1, #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: var(--color-text-2, #4b5563);
+  background: var(--color-bg-1, 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: var(--color-bg-1, rgba(255, 255, 255, 0.9));
 }