npm - @module-federation/devtools - Versions diffs - 2.3.2 → 2.4.0 - Mend

@module-federation/devtools 2.3.2 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/es/utils/chrome/fast-refresh.js +297 -173
package/dist/es/utils/chrome/override-remote.js +2 -2
package/dist/lib/utils/chrome/fast-refresh.js +250 -135
package/dist/lib/utils/chrome/override-remote.js +5 -5
package/package.json +3 -3

package/dist/es/utils/chrome/fast-refresh.js CHANGED Viewed

@@ -1,30 +1,6 @@
-var __defProp = Object.defineProperty;
-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 __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -46,173 +22,321 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var _a;
-import { loadScript } from "@module-federation/sdk";
-import { isObject, getUnpkgUrl } from "../index";
+import { getUnpkgUrl } from "../index";
 import { definePropertyGlobalVal } from "../sdk";
 import {
   __FEDERATION_DEVTOOLS__,
   __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__
 } from "../../template/constant";
-const SUPPORT_PKGS = ["react", "react-dom"];
-const fetchAndExecuteUmdSync = (url) => {
-  try {
-    const response = new XMLHttpRequest();
-    response.open("GET", url, false);
-    response.overrideMimeType("text/plain");
-    response.send();
-    if (response.status === 200) {
-      const scriptContent = response.responseText;
-      const moduleFunction = new Function(scriptContent);
-      return moduleFunction(window);
-    } else {
-      throw new Error(
-        `Failed to load module from ${url}: HTTP ${response.status}`
+var require_fast_refresh = __commonJS({
+  "src/utils/chrome/fast-refresh.ts"(exports) {
+    var _a;
+    const SUPPORT_PKGS = ["react", "react-dom"];
+    const DEFAULT_SHARE_SCOPE = "default";
+    const DEFAULT_GLOBAL_KEY_MAP = {
+      react: "React",
+      "react-dom": "ReactDOM"
+    };
+    const sanitizeWindowKey = (value) => value.replace(/[^a-zA-Z0-9_$]/g, "_");
+    const getShareScopes = (scope) => Array.isArray(scope) && scope.length ? scope : [DEFAULT_SHARE_SCOPE];
+    const getDefaultGlobalKey = (pkgName) => DEFAULT_GLOBAL_KEY_MAP[pkgName];
+    const getScopedGlobalKey = (scope, pkgName) => `${sanitizeWindowKey(scope)}_${sanitizeWindowKey(pkgName)}`;
+    const getWindowValue = (key) => window[key];
+    const setWindowValue = (key, value) => {
+      window[key] = value;
+    };
+    const setScopeGlobals = (pkgName, scopes, source) => {
+      if (!source) {
+        return source;
+      }
+      scopes.forEach((scope) => {
+        setWindowValue(getScopedGlobalKey(scope, pkgName), source);
+      });
+      return source;
+    };
+    const getScopeGlobal = (pkgName, scopes) => {
+      for (const scope of scopes) {
+        const scopeGlobal = getWindowValue(getScopedGlobalKey(scope, pkgName));
+        if (scopeGlobal) {
+          return scopeGlobal;
+        }
+      }
+      return void 0;
+    };
+    const getEagerShareInfo = (eagerShare) => {
+      if (!Array.isArray(eagerShare) || eagerShare.length < 2) {
+        return null;
+      }
+      const [, version, scopes] = eagerShare;
+      if (typeof version !== "string") {
+        return null;
+      }
+      return {
+        version,
+        scopes: getShareScopes(scopes)
+      };
+    };
+    const updateEagerShareInfo = (devtoolsMessage2, pkgName, version, scopes) => {
+      const existing = getEagerShareInfo(devtoolsMessage2[__EAGER_SHARE__]);
+      const mergedScopes = Array.from(
+        /* @__PURE__ */ new Set([...(existing == null ? void 0 : existing.scopes) || [], ...scopes])
       );
-    }
-  } catch (error) {
-    throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
-  }
-};
-const getDevtoolsMessage = () => {
-  const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
-  if (devtoolsMessageStr) {
-    try {
-      return JSON.parse(devtoolsMessageStr);
-    } catch (e) {
-      console.debug("Fast Refresh Plugin Error: ", e);
-    }
-  }
-  return null;
-};
-const devtoolsMessage = getDevtoolsMessage();
-if ((devtoolsMessage == null ? void 0 : devtoolsMessage[__ENABLE_FAST_REFRESH__]) && (devtoolsMessage == null ? void 0 : devtoolsMessage[__EAGER_SHARE__])) {
-  const [_name, version] = devtoolsMessage[__EAGER_SHARE__];
-  fetchAndExecuteUmdSync(getUnpkgUrl("react", version));
-  fetchAndExecuteUmdSync(getUnpkgUrl("react-dom", version));
-}
-const fastRefreshPlugin = () => {
-  return {
-    name: "mf-fast-refresh-plugin",
-    beforeInit(_a2) {
-      var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
-      const shareInfo = userOptions.shared;
-      const twinsShareInfo = args.shareInfo;
-      let enableFastRefresh = false;
-      let devtoolsMessage2 = {};
+      devtoolsMessage2[__EAGER_SHARE__] = [pkgName, version, mergedScopes];
+      return {
+        shouldReload: !existing || existing.version !== version
+      };
+    };
+    const requestUmdSourceSync = (url) => {
+      try {
+        const response = new XMLHttpRequest();
+        response.open("GET", url, false);
+        response.overrideMimeType("text/plain");
+        response.send();
+        if (response.status === 200) {
+          return response.responseText;
+        }
+        throw new Error(
+          `Failed to load module from ${url}: HTTP ${response.status}`
+        );
+      } catch (error) {
+        throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
+      }
+    };
+    const requestUmdSource = (url) => new Promise((resolve, reject) => {
+      try {
+        const response = new XMLHttpRequest();
+        response.open("GET", url, true);
+        response.overrideMimeType("text/plain");
+        response.onload = () => {
+          if (response.status === 200) {
+            resolve(response.responseText);
+            return;
+          }
+          reject(
+            new Error(
+              `Failed to load module from ${url}: HTTP ${response.status}`
+            )
+          );
+        };
+        response.onerror = () => {
+          reject(new Error(`Failed to fetch module from ${url}`));
+        };
+        response.send();
+      } catch (error) {
+        reject(new Error(`Failed to fetch module from ${url}: ${error.message}`));
+      }
+    });
+    const createUmdSandbox = (pkgName, scopes) => {
+      const sandboxTarget = /* @__PURE__ */ Object.create(null);
+      const sandbox = new Proxy(sandboxTarget, {
+        get(target, key) {
+          if (typeof key === "symbol") {
+            return Reflect.get(target, key);
+          }
+          if (key in target) {
+            return target[key];
+          }
+          const value = window[key];
+          return typeof value === "function" ? value.bind(window) : value;
+        },
+        set(target, key, value) {
+          target[key] = value;
+          return true;
+        },
+        has(target, key) {
+          return key in target || key in window;
+        }
+      });
+      sandboxTarget.window = sandbox;
+      sandboxTarget.self = sandbox;
+      sandboxTarget.globalThis = sandbox;
+      sandboxTarget.global = sandbox;
+      sandboxTarget.document = window.document;
+      if (pkgName === "react-dom") {
+        sandboxTarget.React = getScopeGlobal("react", scopes);
+      }
+      return sandbox;
+    };
+    const executeUmdModule = (scriptContent, pkgName, scopes) => {
+      const sandbox = createUmdSandbox(pkgName, scopes);
+      const moduleFunction = new Function(
+        "window",
+        "self",
+        "globalThis",
+        "global",
+        "document",
+        "exports",
+        "module",
+        "define",
+        "require",
+        scriptContent
+      );
+      moduleFunction.call(
+        sandbox,
+        sandbox,
+        sandbox,
+        sandbox,
+        sandbox,
+        sandbox.document,
+        void 0,
+        void 0,
+        void 0,
+        void 0
+      );
+      return sandbox[getDefaultGlobalKey(pkgName)];
+    };
+    const loadUmdModuleSync = (pkgName, version, scopes) => executeUmdModule(
+      requestUmdSourceSync(getUnpkgUrl(pkgName, version)),
+      pkgName,
+      scopes
+    );
+    const loadUmdModule = (pkgName, version, scopes) => __async(exports, null, function* () {
+      return executeUmdModule(
+        yield requestUmdSource(getUnpkgUrl(pkgName, version)),
+        pkgName,
+        scopes
+      );
+    });
+    const getDevtoolsMessage = () => {
       const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
       if (devtoolsMessageStr) {
         try {
-          devtoolsMessage2 = JSON.parse(devtoolsMessageStr);
-          enableFastRefresh = devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__ENABLE_FAST_REFRESH__];
+          return JSON.parse(devtoolsMessageStr);
         } catch (e) {
           console.debug("Fast Refresh Plugin Error: ", e);
         }
       }
-      if (!enableFastRefresh) {
-        return __spreadValues({
-          userOptions
-        }, args);
-      }
-      if (shareInfo && isObject(shareInfo)) {
-        let orderResolve;
-        const orderPromise = new Promise((resolve) => {
-          orderResolve = resolve;
-        });
-        Object.keys(shareInfo).forEach((share) => __async(this, null, function* () {
-          const sharedArr = Array.isArray(shareInfo[share]) ? shareInfo[share] : [shareInfo[share]];
-          let twinsSharedArr;
-          if (twinsShareInfo) {
-            twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
+      return null;
+    };
+    const devtoolsMessage = getDevtoolsMessage();
+    const eagerShareInfo = getEagerShareInfo(devtoolsMessage == null ? void 0 : devtoolsMessage[__EAGER_SHARE__]);
+    if ((devtoolsMessage == null ? void 0 : devtoolsMessage[__ENABLE_FAST_REFRESH__]) && eagerShareInfo) {
+      const { version, scopes } = eagerShareInfo;
+      setScopeGlobals("react", scopes, loadUmdModuleSync("react", version, scopes));
+      setScopeGlobals(
+        "react-dom",
+        scopes,
+        loadUmdModuleSync("react-dom", version, scopes)
+      );
+    }
+    const fastRefreshPlugin = () => {
+      let orderResolve;
+      const orderPromise = new Promise((resolve) => {
+        orderResolve = resolve;
+      });
+      return {
+        name: "mf-fast-refresh-plugin",
+        beforeRegisterShare(args) {
+          var _a2;
+          const { pkgName, shared } = args;
+          if (!SUPPORT_PKGS.includes(pkgName)) {
+            return args;
           }
-          sharedArr.forEach((shared, idx) => {
-            var _a3;
-            if (!SUPPORT_PKGS.includes(share)) {
-              return;
+          const supportPkgName = pkgName;
+          const shareScopes = getShareScopes(shared.scope);
+          let enableFastRefresh = false;
+          let devtoolsMessage2 = {};
+          const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
+          if (devtoolsMessageStr) {
+            try {
+              devtoolsMessage2 = JSON.parse(devtoolsMessageStr);
+              enableFastRefresh = devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__ENABLE_FAST_REFRESH__];
+            } catch (e) {
+              console.debug("Fast Refresh Plugin Error: ", e);
             }
-            if ((_a3 = shared.shareConfig) == null ? void 0 : _a3.eager) {
-              if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__EAGER_SHARE__])) {
-                const eagerShare = [];
-                eagerShare.push(share, shared.version);
-                devtoolsMessage2[__EAGER_SHARE__] = eagerShare;
-                localStorage.setItem(
-                  __FEDERATION_DEVTOOLS__,
-                  JSON.stringify(devtoolsMessage2)
-                );
+          }
+          if (!enableFastRefresh) {
+            return args;
+          }
+          if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+            if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__EAGER_SHARE__])) {
+              const eagerShareInfo2 = updateEagerShareInfo(
+                devtoolsMessage2,
+                pkgName,
+                shared.version,
+                shareScopes
+              );
+              localStorage.setItem(
+                __FEDERATION_DEVTOOLS__,
+                JSON.stringify(devtoolsMessage2)
+              );
+              if (eagerShareInfo2.shouldReload) {
                 window.location.reload();
               }
-              if (share === "react-dom") {
-                shared.lib = () => window.ReactDOM;
-              }
-              if (share === "react") {
-                shared.lib = () => window.React;
-              }
-              return;
+            } else {
+              updateEagerShareInfo(
+                devtoolsMessage2,
+                pkgName,
+                shared.version,
+                shareScopes
+              );
+              localStorage.setItem(
+                __FEDERATION_DEVTOOLS__,
+                JSON.stringify(devtoolsMessage2)
+              );
+            }
+            if (pkgName === "react-dom") {
+              shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
             }
-            let get;
-            if (share === "react") {
-              get = () => loadScript(getUnpkgUrl(share, shared.version), {
-                attrs: {
-                  defer: false,
-                  async: false,
-                  "data-mf-injected": "true"
+            if (pkgName === "react") {
+              shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+            }
+            return args;
+          }
+          let get;
+          if (pkgName === "react") {
+            get = () => loadUmdModule(supportPkgName, shared.version, shareScopes).then((moduleValue) => {
+              setScopeGlobals(supportPkgName, shareScopes, moduleValue);
+              return moduleValue;
+            }).then(() => {
+              orderResolve();
+            });
+          }
+          if (pkgName === "react-dom") {
+            get = () => orderPromise.then(
+              () => loadUmdModule(supportPkgName, shared.version, shareScopes)
+            ).then((result) => {
+              setScopeGlobals(supportPkgName, shareScopes, result);
+              return result;
+            });
+          }
+          if (typeof get === "function") {
+            const finalGet = get;
+            if (pkgName === "react") {
+              shared.get = () => __async(this, null, function* () {
+                if (!getScopeGlobal(supportPkgName, shareScopes)) {
+                  yield finalGet();
+                  console.warn(
+                    "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
+                  );
                 }
-              }).then(() => {
-                orderResolve();
+                shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+                return () => getScopeGlobal(supportPkgName, shareScopes);
               });
             }
-            if (share === "react-dom") {
-              get = () => orderPromise.then(
-                () => loadScript(getUnpkgUrl(share, shared.version), {
-                  attrs: { defer: true, async: false }
-                })
-              );
-            }
-            if (typeof get === "function") {
-              if (share === "react") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.React) {
-                    yield get();
-                    console.warn(
-                      "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
-                    );
-                  }
-                  shared.lib = () => window.React;
-                  return () => window.React;
-                });
-              }
-              if (share === "react-dom") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.ReactDOM) {
-                    yield get();
-                  }
-                  shared.lib = () => window.ReactDOM;
-                  return () => window.ReactDOM;
-                });
-              }
-              if (twinsShareInfo) {
-                twinsSharedArr[idx].get = shared.get;
-              }
+            if (pkgName === "react-dom") {
+              shared.get = () => __async(this, null, function* () {
+                if (!getScopeGlobal(supportPkgName, shareScopes)) {
+                  yield finalGet();
+                }
+                shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+                return () => getScopeGlobal(supportPkgName, shareScopes);
+              });
             }
-          });
-        }));
-        return __spreadValues({
-          userOptions
-        }, args);
-      } else {
-        return __spreadValues({
-          userOptions
-        }, args);
-      }
+          }
+          return args;
+        }
+      };
+    };
+    if (!(window == null ? void 0 : window.__FEDERATION__)) {
+      definePropertyGlobalVal(window, "__FEDERATION__", {});
+      definePropertyGlobalVal(window, "__VMOK__", window.__FEDERATION__);
     }
-  };
-};
-if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  definePropertyGlobalVal(window, "__FEDERATION__", {});
-  definePropertyGlobalVal(window, "__VMOK__", window.__FEDERATION__);
-}
-if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
-  window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
-}
-(_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(fastRefreshPlugin());
+    if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
+      window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
+    }
+    (_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(fastRefreshPlugin());
+  }
+});
+export default require_fast_refresh();

package/dist/es/utils/chrome/override-remote.js CHANGED Viewed

@@ -1,7 +1,7 @@
 var _a;
 import runtimeHelpers from "@module-federation/runtime/helpers";
+import { MODULE_DEVTOOL_IDENTIFIER } from "@module-federation/sdk";
 import { definePropertyGlobalVal } from "../sdk";
-import { __FEDERATION_DEVTOOLS__ } from "../../template";
 const chromeOverrideRemotesPlugin = function() {
   return {
     name: "mf-chrome-devtools-override-remotes-plugin",
@@ -9,7 +9,7 @@ const chromeOverrideRemotesPlugin = function() {
       try {
         const { remote } = args;
         const overrideRemote = runtimeHelpers.global.nativeGlobal.localStorage.getItem(
-          __FEDERATION_DEVTOOLS__
+          MODULE_DEVTOOL_IDENTIFIER
         );
         if (!overrideRemote) {
           return args;

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

@@ -1,32 +1,4 @@
 "use strict";
-var __defProp = Object.defineProperty;
-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 __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -47,31 +19,176 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var import_sdk = require("@module-federation/sdk");
 var import__ = require("../index");
-var import_sdk2 = require("../sdk");
+var import_sdk = require("../sdk");
 var import_constant = require("../../template/constant");
 var _a;
 const SUPPORT_PKGS = ["react", "react-dom"];
-const fetchAndExecuteUmdSync = (url) => {
+const DEFAULT_SHARE_SCOPE = "default";
+const DEFAULT_GLOBAL_KEY_MAP = {
+  react: "React",
+  "react-dom": "ReactDOM"
+};
+const sanitizeWindowKey = (value) => value.replace(/[^a-zA-Z0-9_$]/g, "_");
+const getShareScopes = (scope) => Array.isArray(scope) && scope.length ? scope : [DEFAULT_SHARE_SCOPE];
+const getDefaultGlobalKey = (pkgName) => DEFAULT_GLOBAL_KEY_MAP[pkgName];
+const getScopedGlobalKey = (scope, pkgName) => `${sanitizeWindowKey(scope)}_${sanitizeWindowKey(pkgName)}`;
+const getWindowValue = (key) => window[key];
+const setWindowValue = (key, value) => {
+  window[key] = value;
+};
+const setScopeGlobals = (pkgName, scopes, source) => {
+  if (!source) {
+    return source;
+  }
+  scopes.forEach((scope) => {
+    setWindowValue(getScopedGlobalKey(scope, pkgName), source);
+  });
+  return source;
+};
+const getScopeGlobal = (pkgName, scopes) => {
+  for (const scope of scopes) {
+    const scopeGlobal = getWindowValue(getScopedGlobalKey(scope, pkgName));
+    if (scopeGlobal) {
+      return scopeGlobal;
+    }
+  }
+  return void 0;
+};
+const getEagerShareInfo = (eagerShare) => {
+  if (!Array.isArray(eagerShare) || eagerShare.length < 2) {
+    return null;
+  }
+  const [, version, scopes] = eagerShare;
+  if (typeof version !== "string") {
+    return null;
+  }
+  return {
+    version,
+    scopes: getShareScopes(scopes)
+  };
+};
+const updateEagerShareInfo = (devtoolsMessage2, pkgName, version, scopes) => {
+  const existing = getEagerShareInfo(devtoolsMessage2[import_constant.__EAGER_SHARE__]);
+  const mergedScopes = Array.from(
+    /* @__PURE__ */ new Set([...(existing == null ? void 0 : existing.scopes) || [], ...scopes])
+  );
+  devtoolsMessage2[import_constant.__EAGER_SHARE__] = [pkgName, version, mergedScopes];
+  return {
+    shouldReload: !existing || existing.version !== version
+  };
+};
+const requestUmdSourceSync = (url) => {
   try {
     const response = new XMLHttpRequest();
     response.open("GET", url, false);
     response.overrideMimeType("text/plain");
     response.send();
     if (response.status === 200) {
-      const scriptContent = response.responseText;
-      const moduleFunction = new Function(scriptContent);
-      return moduleFunction(window);
-    } else {
-      throw new Error(
-        `Failed to load module from ${url}: HTTP ${response.status}`
-      );
+      return response.responseText;
     }
+    throw new Error(
+      `Failed to load module from ${url}: HTTP ${response.status}`
+    );
   } catch (error) {
     throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
   }
 };
+const requestUmdSource = (url) => new Promise((resolve, reject) => {
+  try {
+    const response = new XMLHttpRequest();
+    response.open("GET", url, true);
+    response.overrideMimeType("text/plain");
+    response.onload = () => {
+      if (response.status === 200) {
+        resolve(response.responseText);
+        return;
+      }
+      reject(
+        new Error(
+          `Failed to load module from ${url}: HTTP ${response.status}`
+        )
+      );
+    };
+    response.onerror = () => {
+      reject(new Error(`Failed to fetch module from ${url}`));
+    };
+    response.send();
+  } catch (error) {
+    reject(new Error(`Failed to fetch module from ${url}: ${error.message}`));
+  }
+});
+const createUmdSandbox = (pkgName, scopes) => {
+  const sandboxTarget = /* @__PURE__ */ Object.create(null);
+  const sandbox = new Proxy(sandboxTarget, {
+    get(target, key) {
+      if (typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      if (key in target) {
+        return target[key];
+      }
+      const value = window[key];
+      return typeof value === "function" ? value.bind(window) : value;
+    },
+    set(target, key, value) {
+      target[key] = value;
+      return true;
+    },
+    has(target, key) {
+      return key in target || key in window;
+    }
+  });
+  sandboxTarget.window = sandbox;
+  sandboxTarget.self = sandbox;
+  sandboxTarget.globalThis = sandbox;
+  sandboxTarget.global = sandbox;
+  sandboxTarget.document = window.document;
+  if (pkgName === "react-dom") {
+    sandboxTarget.React = getScopeGlobal("react", scopes);
+  }
+  return sandbox;
+};
+const executeUmdModule = (scriptContent, pkgName, scopes) => {
+  const sandbox = createUmdSandbox(pkgName, scopes);
+  const moduleFunction = new Function(
+    "window",
+    "self",
+    "globalThis",
+    "global",
+    "document",
+    "exports",
+    "module",
+    "define",
+    "require",
+    scriptContent
+  );
+  moduleFunction.call(
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox.document,
+    void 0,
+    void 0,
+    void 0,
+    void 0
+  );
+  return sandbox[getDefaultGlobalKey(pkgName)];
+};
+const loadUmdModuleSync = (pkgName, version, scopes) => executeUmdModule(
+  requestUmdSourceSync((0, import__.getUnpkgUrl)(pkgName, version)),
+  pkgName,
+  scopes
+);
+const loadUmdModule = (pkgName, version, scopes) => __async(exports, null, function* () {
+  return executeUmdModule(
+    yield requestUmdSource((0, import__.getUnpkgUrl)(pkgName, version)),
+    pkgName,
+    scopes
+  );
+});
 const getDevtoolsMessage = () => {
   const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
   if (devtoolsMessageStr) {
@@ -84,18 +201,31 @@ const getDevtoolsMessage = () => {
   return null;
 };
 const devtoolsMessage = getDevtoolsMessage();
-if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && (devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__EAGER_SHARE__])) {
-  const [_name, version] = devtoolsMessage[import_constant.__EAGER_SHARE__];
-  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react", version));
-  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react-dom", version));
+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;
+  setScopeGlobals("react", scopes, loadUmdModuleSync("react", version, scopes));
+  setScopeGlobals(
+    "react-dom",
+    scopes,
+    loadUmdModuleSync("react-dom", version, scopes)
+  );
 }
 const fastRefreshPlugin = () => {
+  let orderResolve;
+  const orderPromise = new Promise((resolve) => {
+    orderResolve = resolve;
+  });
   return {
     name: "mf-fast-refresh-plugin",
-    beforeInit(_a2) {
-      var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
-      const shareInfo = userOptions.shared;
-      const twinsShareInfo = args.shareInfo;
+    beforeRegisterShare(args) {
+      var _a2;
+      const { pkgName, shared } = args;
+      if (!SUPPORT_PKGS.includes(pkgName)) {
+        return args;
+      }
+      const supportPkgName = pkgName;
+      const shareScopes = getShareScopes(shared.scope);
       let enableFastRefresh = false;
       let devtoolsMessage2 = {};
       const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
@@ -108,106 +238,91 @@ const fastRefreshPlugin = () => {
         }
       }
       if (!enableFastRefresh) {
-        return __spreadValues({
-          userOptions
-        }, args);
+        return args;
       }
-      if (shareInfo && (0, import__.isObject)(shareInfo)) {
-        let orderResolve;
-        const orderPromise = new Promise((resolve) => {
-          orderResolve = resolve;
-        });
-        Object.keys(shareInfo).forEach((share) => __async(this, null, function* () {
-          const sharedArr = Array.isArray(shareInfo[share]) ? shareInfo[share] : [shareInfo[share]];
-          let twinsSharedArr;
-          if (twinsShareInfo) {
-            twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
+      if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+        if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
+          const eagerShareInfo2 = updateEagerShareInfo(
+            devtoolsMessage2,
+            pkgName,
+            shared.version,
+            shareScopes
+          );
+          localStorage.setItem(
+            import_constant.__FEDERATION_DEVTOOLS__,
+            JSON.stringify(devtoolsMessage2)
+          );
+          if (eagerShareInfo2.shouldReload) {
+            window.location.reload();
           }
-          sharedArr.forEach((shared, idx) => {
-            var _a3;
-            if (!SUPPORT_PKGS.includes(share)) {
-              return;
-            }
-            if ((_a3 = shared.shareConfig) == null ? void 0 : _a3.eager) {
-              if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
-                const eagerShare = [];
-                eagerShare.push(share, shared.version);
-                devtoolsMessage2[import_constant.__EAGER_SHARE__] = eagerShare;
-                localStorage.setItem(
-                  import_constant.__FEDERATION_DEVTOOLS__,
-                  JSON.stringify(devtoolsMessage2)
-                );
-                window.location.reload();
-              }
-              if (share === "react-dom") {
-                shared.lib = () => window.ReactDOM;
-              }
-              if (share === "react") {
-                shared.lib = () => window.React;
-              }
-              return;
-            }
-            let get;
-            if (share === "react") {
-              get = () => (0, import_sdk.loadScript)((0, import__.getUnpkgUrl)(share, shared.version), {
-                attrs: {
-                  defer: false,
-                  async: false,
-                  "data-mf-injected": "true"
-                }
-              }).then(() => {
-                orderResolve();
-              });
-            }
-            if (share === "react-dom") {
-              get = () => orderPromise.then(
-                () => (0, import_sdk.loadScript)((0, import__.getUnpkgUrl)(share, shared.version), {
-                  attrs: { defer: true, async: false }
-                })
+        } else {
+          updateEagerShareInfo(
+            devtoolsMessage2,
+            pkgName,
+            shared.version,
+            shareScopes
+          );
+          localStorage.setItem(
+            import_constant.__FEDERATION_DEVTOOLS__,
+            JSON.stringify(devtoolsMessage2)
+          );
+        }
+        if (pkgName === "react-dom") {
+          shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+        }
+        if (pkgName === "react") {
+          shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+        }
+        return args;
+      }
+      let get;
+      if (pkgName === "react") {
+        get = () => loadUmdModule(supportPkgName, shared.version, shareScopes).then((moduleValue) => {
+          setScopeGlobals(supportPkgName, shareScopes, moduleValue);
+          return moduleValue;
+        }).then(() => {
+          orderResolve();
+        });
+      }
+      if (pkgName === "react-dom") {
+        get = () => orderPromise.then(
+          () => loadUmdModule(supportPkgName, shared.version, shareScopes)
+        ).then((result) => {
+          setScopeGlobals(supportPkgName, shareScopes, result);
+          return result;
+        });
+      }
+      if (typeof get === "function") {
+        const finalGet = get;
+        if (pkgName === "react") {
+          shared.get = () => __async(this, null, function* () {
+            if (!getScopeGlobal(supportPkgName, shareScopes)) {
+              yield finalGet();
+              console.warn(
+                "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
               );
             }
-            if (typeof get === "function") {
-              if (share === "react") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.React) {
-                    yield get();
-                    console.warn(
-                      "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
-                    );
-                  }
-                  shared.lib = () => window.React;
-                  return () => window.React;
-                });
-              }
-              if (share === "react-dom") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.ReactDOM) {
-                    yield get();
-                  }
-                  shared.lib = () => window.ReactDOM;
-                  return () => window.ReactDOM;
-                });
-              }
-              if (twinsShareInfo) {
-                twinsSharedArr[idx].get = shared.get;
-              }
+            shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+            return () => getScopeGlobal(supportPkgName, shareScopes);
+          });
+        }
+        if (pkgName === "react-dom") {
+          shared.get = () => __async(this, null, function* () {
+            if (!getScopeGlobal(supportPkgName, shareScopes)) {
+              yield finalGet();
             }
+            shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+            return () => getScopeGlobal(supportPkgName, shareScopes);
           });
-        }));
-        return __spreadValues({
-          userOptions
-        }, args);
-      } else {
-        return __spreadValues({
-          userOptions
-        }, args);
+        }
       }
+      return args;
     }
   };
 };
 if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
+  (0, import_sdk.definePropertyGlobalVal)(window, "__FEDERATION__", {});
+  (0, import_sdk.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
 }
 if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
   window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];

package/dist/lib/utils/chrome/override-remote.js CHANGED Viewed

@@ -22,8 +22,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var import_helpers = __toESM(require("@module-federation/runtime/helpers"));
-var import_sdk = require("../sdk");
-var import_template = require("../../template");
+var import_sdk = require("@module-federation/sdk");
+var import_sdk2 = require("../sdk");
 var _a;
 const chromeOverrideRemotesPlugin = function() {
   return {
@@ -32,7 +32,7 @@ const chromeOverrideRemotesPlugin = function() {
       try {
         const { remote } = args;
         const overrideRemote = import_helpers.default.global.nativeGlobal.localStorage.getItem(
-          import_template.__FEDERATION_DEVTOOLS__
+          import_sdk.MODULE_DEVTOOL_IDENTIFIER
         );
         if (!overrideRemote) {
           return args;
@@ -56,8 +56,8 @@ const chromeOverrideRemotesPlugin = function() {
   };
 };
 if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  (0, import_sdk.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
+  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
+  (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
 }
 if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
   window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/devtools",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "echarts-for-react": "3.0.5",
     "i18next": "23.0.0",
     "react-i18next": "15.0.0",
-    "@module-federation/sdk": "2.3.2"
+    "@module-federation/sdk": "2.4.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -82,7 +82,7 @@
     "typescript": "5.9.3",
     "rimraf": "~6.0.1",
     "vitest": "1.2.2",
-    "@module-federation/runtime": "2.3.2"
+    "@module-federation/runtime": "2.4.0"
   },
   "scripts": {
     "build:storybook": "storybook build",