@module-federation/devtools 2.9.0 → 2.9.1

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

@@ -211,7 +211,8 @@ const Layout = (props) => {
           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.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, "overrides", {});
+            yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, "proxyRules", rawRules);
             yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
             setCondition(import_constant.statusInfo.noProxy);
             lastEffectiveRulesRef.current = "";
@@ -257,6 +258,8 @@ const Layout = (props) => {
         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.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, "proxyRules", rawRules);
+        yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.ENABLE_CLIP, enableClip);
         yield (0, import_utils.injectScript)(import_utils.reloadPage, false);
         window.__FEDERATION__.moduleInfo = moduleInfo2;
         onModuleInfoChange == null ? void 0 : onModuleInfoChange(moduleInfo2);
@@ -299,6 +302,10 @@ const Layout = (props) => {
         if (typeof overridesState === "string" && overridesState) {
           const parsedState = JSON.parse(overridesState);
           const overrides = parsedState == null ? void 0 : parsedState.overrides;
+          setEnableClip(Boolean(parsedState == null ? void 0 : parsedState[import_constant.ENABLE_CLIP]));
+          setEnalbeHMR(
+            (parsedState == null ? void 0 : parsedState[import_constant.__ENABLE_FAST_REFRESH__]) ? "enable" : "disable"
+          );
           if ((0, import_utils.isObject)(overrides)) {
             const overrideRules = Object.entries(overrides).map(([key, value]) => ({
               key,
@@ -308,12 +315,10 @@ const Layout = (props) => {
               (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;
-            }
+            storeData = __spreadProps(__spreadValues({}, storeData), {
+              [import_constant.proxyFormField]: Array.isArray(parsedState.proxyRules) ? parsedState.proxyRules : filteredRules
+            });
+            overridesApplied = true;
           }
         }
       } catch (error) {
@@ -351,15 +356,25 @@ const Layout = (props) => {
     return () => {
       cancelled = true;
     };
-  }, [moduleInfo, producerKey, form]);
+  }, [moduleInfo, producerKey, form, tabId]);
   (0, import_react.useEffect)(() => {
-    chrome.storage.sync.get([import_constant.ENABLEHMR]).then((data) => {
-      const enable = data[import_constant.ENABLEHMR];
-      if (typeof enable === "boolean") {
-        onHMRChange(enable);
+    let cancelled = false;
+    (0, import_utils.getStorageValue)(import_constant.__FEDERATION_DEVTOOLS__).then((raw) => {
+      try {
+        const config = typeof raw === "string" ? JSON.parse(raw) : {};
+        if (!cancelled) {
+          setEnalbeHMR(
+            (config == null ? void 0 : config[import_constant.__ENABLE_FAST_REFRESH__]) ? "enable" : "disable"
+          );
+          setEnableClip(Boolean(config == null ? void 0 : config[import_constant.ENABLE_CLIP]));
+        }
+      } catch (e) {
       }
     });
-  }, []);
+    return () => {
+      cancelled = true;
+    };
+  }, [tabId]);
   (0, import_react.useEffect)(() => {
     validateForm(form);
   }, []);
@@ -400,20 +415,22 @@ const Layout = (props) => {
     (0, import_utils.setChromeStorage)(formData);
     run(formData);
   };
-  const onHMRChange = (on) => {
+  const onHMRChange = (on) => __async(void 0, null, function* () {
     setEnalbeHMR(on ? "enable" : "disable");
-    chrome.storage.sync.set({
+    yield chrome.storage.sync.set({
       [import_constant.ENABLEHMR]: on
     });
     if (on) {
-      (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__, on);
+      yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__, on);
     } else {
-      (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__);
-      (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__EAGER_SHARE__);
+      yield (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__ENABLE_FAST_REFRESH__);
+      yield (0, import_utils.removeStorageKey)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.__EAGER_SHARE__);
     }
     (0, import_utils.injectScript)(import_utils.reloadPage, false);
-  };
-  const onClipChange = (on) => {
+  });
+  const onClipChange = (on) => __async(void 0, null, function* () {
+    yield (0, import_utils.mergeStorage)(import_constant.__FEDERATION_DEVTOOLS__, import_constant.ENABLE_CLIP, on);
+    lastFormSignatureRef.current = "";
     setEnableClip(on);
     try {
       if (tabId) {
@@ -423,7 +440,7 @@ const Layout = (props) => {
       console.error(e);
     }
     run(form.getFieldsValue());
-  };
+  });
   const remotePreview = producer.map((id) => {
     const [, name] = id.split(":");
     return name || id;

package/dist/lib/component/Layout/index_module.css

@@ -65,4 +65,34 @@
   padding: 22px 24px;
   border: 1px solid rgba(228, 228, 231, 0.5);
   background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+}
+
+html[data-devtools-view="popup"] .wrapper_084ab {
+  gap: 10px;
+}
+html[data-devtools-view="popup"] .summaryCard_084ab {
+  padding: 10px;
+  min-height: 0;
+  gap: 6px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+html[data-devtools-view="popup"] .summaryHeader_084ab {
+  flex: 1 1 100%;
+}
+html[data-devtools-view="popup"] .summaryTitle_084ab {
+  font-size: 13px;
+}
+html[data-devtools-view="popup"] .summaryHint_084ab {
+  display: none;
+}
+html[data-devtools-view="popup"] .chip_084ab,
+html[data-devtools-view="popup"] .moreChip_084ab,
+html[data-devtools-view="popup"] .chipPlaceholder_084ab {
+  padding: 3px 7px;
+  border-radius: 4px;
+}
+html[data-devtools-view="popup"] .formSection_084ab {
+  padding: 10px;
 }

package/dist/lib/utils/chrome/fast-refresh.js

@@ -200,6 +200,25 @@ const getDevtoolsMessage = () => {
   return null;
 };
 const devtoolsMessage = getDevtoolsMessage();
+if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && !window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+  let nextId = 0;
+  const renderers = /* @__PURE__ */ new Map();
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+    supportsFiber: true,
+    renderers,
+    inject(renderer) {
+      const id = nextId++;
+      renderers.set(id, renderer);
+      return id;
+    },
+    onScheduleFiberRoot() {
+    },
+    onCommitFiberRoot() {
+    },
+    onCommitFiberUnmount() {
+    }
+  };
+}
 const eagerShareInfo = getEagerShareInfo(devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__EAGER_SHARE__]);
 if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && eagerShareInfo) {
   const { version, scopes } = eagerShareInfo;
@@ -211,6 +230,43 @@ if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE
   );
 }
 const fastRefreshPlugin = () => {
+  const react19Pending = /* @__PURE__ */ new Map();
+  const loadReact19 = (pkg, scopes, sync = false) => {
+    const existing = getScopeGlobal(pkg, scopes);
+    if ((existing == null ? void 0 : existing.version) === import__.REACT_19_DEV_VERSION) {
+      return setScopeGlobals(pkg, scopes, existing);
+    }
+    const save = (library) => {
+      const cached = getScopeGlobal(pkg, scopes);
+      if ((cached == null ? void 0 : cached.version) === import__.REACT_19_DEV_VERSION)
+        return setScopeGlobals(pkg, scopes, cached);
+      if ((library == null ? void 0 : library.version) !== import__.REACT_19_DEV_VERSION)
+        throw new Error(`Expected development ${pkg}@${import__.REACT_19_DEV_VERSION}.`);
+      if (pkg === "react" && (typeof library.createElement !== "function" || !Object.isFrozen(library.createElement("div"))))
+        throw new Error("React provider is not a development build.");
+      return setScopeGlobals(pkg, scopes, library);
+    };
+    if (sync) {
+      if (pkg === "react-dom")
+        loadReact19("react", scopes, true);
+      return save(loadUmdModuleSync(pkg, import__.REACT_19_DEV_VERSION, scopes));
+    }
+    const key = `${pkg}:${JSON.stringify([...scopes].sort())}`;
+    let pending = react19Pending.get(key);
+    if (!pending) {
+      pending = (() => __async(exports, null, function* () {
+        if (pkg === "react-dom")
+          yield loadReact19("react", scopes);
+        const cached = getScopeGlobal(pkg, scopes);
+        if ((cached == null ? void 0 : cached.version) === import__.REACT_19_DEV_VERSION)
+          return setScopeGlobals(pkg, scopes, cached);
+        return save(yield loadUmdModule(pkg, import__.REACT_19_DEV_VERSION, scopes));
+      }))();
+      react19Pending.set(key, pending);
+      void pending.catch(() => react19Pending.delete(key));
+    }
+    return pending;
+  };
   let orderResolve;
   const orderPromise = new Promise((resolve) => {
     orderResolve = resolve;
@@ -218,12 +274,13 @@ const fastRefreshPlugin = () => {
   return {
     name: "mf-fast-refresh-plugin",
     beforeRegisterShare(args) {
-      var _a2;
+      var _a2, _b;
       const { pkgName, shared } = args;
-      if (!SUPPORT_PKGS.includes(pkgName)) {
+      const isReact19 = /^19\./.test(shared.version);
+      if (!SUPPORT_PKGS.includes(pkgName) && !(isReact19 && pkgName === "react-dom/client")) {
         return args;
       }
-      const supportPkgName = pkgName;
+      const supportPkgName = pkgName === "react-dom/client" ? "react-dom" : pkgName;
       const shareScopes = getShareScopes(shared.scope);
       let enableFastRefresh = false;
       let devtoolsMessage2 = {};
@@ -239,7 +296,29 @@ const fastRefreshPlugin = () => {
       if (!enableFastRefresh) {
         return args;
       }
-      if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+      if (isReact19) {
+        shared.version = import__.REACT_19_DEV_VERSION;
+        shared.get = () => __async(this, null, function* () {
+          const library = yield loadReact19(supportPkgName, shareScopes);
+          return () => library;
+        });
+        if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+          const library = loadReact19(supportPkgName, shareScopes, true);
+          shared.lib = () => library;
+          updateEagerShareInfo(
+            devtoolsMessage2,
+            pkgName,
+            import__.REACT_19_DEV_VERSION,
+            shareScopes
+          );
+          localStorage.setItem(
+            import_constant.__FEDERATION_DEVTOOLS__,
+            JSON.stringify(devtoolsMessage2)
+          );
+        }
+        return args;
+      }
+      if (((_b = shared.shareConfig) == null ? void 0 : _b.eager) || shared.lib) {
         if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
           const eagerShareInfo2 = updateEagerShareInfo(
             devtoolsMessage2,

package/dist/lib/utils/chrome/index.js

@@ -188,7 +188,10 @@ const getGlobalModuleInfo = (callback) => __async(void 0, null, function* () {
     callback(normalizeModuleInfoPayload((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
   }
   yield sleep(300);
-  const listener = (message) => {
+  const listener = (message, sender) => {
+    var _a2;
+    if (((_a2 = sender == null ? void 0 : sender.tab) == null ? void 0 : _a2.id) !== void 0 && sender.tab.id !== getCurrentTabId())
+      return;
     const { data } = message;
     if (!isModuleInfoSyncMessage(data) || (data == null ? void 0 : data.appInfos)) {
       return;

package/dist/lib/utils/chrome/observability.js

@@ -43,6 +43,7 @@ __export(observability_exports, {
   mergeObservabilityReports: () => mergeObservabilityReports,
   readObservabilityConfig: () => readObservabilityConfig,
   readObservabilitySnapshot: () => readObservabilitySnapshot,
+  readSnapshotFromPage: () => readSnapshotFromPage,
   reloadInspectedPage: () => reloadInspectedPage
 });
 module.exports = __toCommonJS(observability_exports);
@@ -229,5 +230,6 @@ const getObservabilityReportScopeLabel = (report) => {
   mergeObservabilityReports,
   readObservabilityConfig,
   readObservabilitySnapshot,
+  readSnapshotFromPage,
   reloadInspectedPage
 });

package/dist/lib/utils/chrome/webmcp-entry.js

@@ -0,0 +1,2 @@
+var import_webmcp = require("./webmcp");
+(0, import_webmcp.startDevtoolsWebMCP)();