@module-federation/devtools 0.21.3 → 0.21.4

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

@@ -48,7 +48,8 @@ import {
   ENABLEHMR,
   __ENABLE_FAST_REFRESH__,
   BROWSER_ENV_KEY,
-  __FEDERATION_DEVTOOLS__
+  __FEDERATION_DEVTOOLS__,
+  __EAGER_SHARE__
 } from "../../template/constant";
 const Layout = (props) => {
   const {
@@ -178,6 +179,7 @@ const Layout = (props) => {
       mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__, on);
     } else {
       removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__);
+      removeStorageKey(__FEDERATION_DEVTOOLS__, __EAGER_SHARE__);
     }
     injectScript(reloadPage, false);
   };

package/dist/es/template/constant.js

@@ -50,12 +50,14 @@ const statusInfo = {
   }
 };
 const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+const __EAGER_SHARE__ = "eagerShare";
 const BROWSER_ENV_KEY = "MF_ENV";
 const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
 export {
   BROWSER_ENV_KEY,
   ENABLEHMR,
   FormID,
+  __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__,
   defaultDataItem,

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

@@ -50,7 +50,48 @@ var _a;
 import { loadScript } from "@module-federation/sdk";
 import { isObject, getUnpkgUrl } from "../index";
 import { definePropertyGlobalVal } from "../sdk";
-import { __FEDERATION_DEVTOOLS__ } from "../../template";
+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}`
+      );
+    }
+  } 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",
@@ -58,17 +99,22 @@ const fastRefreshPlugin = () => {
       var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
       const shareInfo = userOptions.shared;
       const twinsShareInfo = args.shareInfo;
-      let enableFastRefresh;
-      let devtoolsMessage;
+      let enableFastRefresh = false;
+      let devtoolsMessage2 = {};
       const devtoolsMessageStr = localStorage.getItem(__FEDERATION_DEVTOOLS__);
       if (devtoolsMessageStr) {
         try {
-          devtoolsMessage = JSON.parse(devtoolsMessageStr);
-          enableFastRefresh = devtoolsMessage == null ? void 0 : devtoolsMessage.enableFastRefresh;
+          devtoolsMessage2 = JSON.parse(devtoolsMessageStr);
+          enableFastRefresh = devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__ENABLE_FAST_REFRESH__];
         } 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) => {
@@ -81,10 +127,37 @@ const fastRefreshPlugin = () => {
             twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
           }
           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[__EAGER_SHARE__])) {
+                const eagerShare = [];
+                eagerShare.push(share, shared.version);
+                devtoolsMessage2[__EAGER_SHARE__] = eagerShare;
+                localStorage.setItem(
+                  __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 = () => loadScript(getUnpkgUrl(share, shared.version), {
-                attrs: { defer: true, async: false }
+                attrs: {
+                  defer: false,
+                  async: false,
+                  "data-mf-injected": "true"
+                }
               }).then(() => {
                 orderResolve();
               });
@@ -96,7 +169,7 @@ const fastRefreshPlugin = () => {
                 })
               );
             }
-            if (enableFastRefresh && typeof get === "function") {
+            if (typeof get === "function") {
               if (share === "react") {
                 shared.get = () => __async(this, null, function* () {
                   if (!window.React) {

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

@@ -188,6 +188,7 @@ const Layout = (props) => {
       (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__);
     }
     (0, import_utils.injectScript)(import_utils.reloadPage, false);
   };

package/dist/lib/template/constant.js

@@ -35,6 +35,7 @@ __export(constant_exports, {
   BROWSER_ENV_KEY: () => BROWSER_ENV_KEY,
   ENABLEHMR: () => ENABLEHMR,
   FormID: () => FormID,
+  __EAGER_SHARE__: () => __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__: () => __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__: () => __FEDERATION_DEVTOOLS__,
   defaultDataItem: () => defaultDataItem,
@@ -79,6 +80,7 @@ const statusInfo = {
   }
 };
 const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+const __EAGER_SHARE__ = "eagerShare";
 const BROWSER_ENV_KEY = "MF_ENV";
 const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
 // Annotate the CommonJS export names for ESM import in node:
@@ -86,6 +88,7 @@ const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";
   BROWSER_ENV_KEY,
   ENABLEHMR,
   FormID,
+  __EAGER_SHARE__,
   __ENABLE_FAST_REFRESH__,
   __FEDERATION_DEVTOOLS__,
   defaultDataItem,

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

@@ -50,8 +50,45 @@ var __async = (__this, __arguments, generator) => {
 var import_sdk = require("@module-federation/sdk");
 var import__ = require("../index");
 var import_sdk2 = require("../sdk");
-var import_template = require("../../template");
+var import_constant = require("../../template/constant");
 var _a;
+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}`
+      );
+    }
+  } catch (error) {
+    throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
+  }
+};
+const getDevtoolsMessage = () => {
+  const devtoolsMessageStr = localStorage.getItem(import_constant.__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[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 fastRefreshPlugin = () => {
   return {
     name: "mf-fast-refresh-plugin",
@@ -59,17 +96,22 @@ const fastRefreshPlugin = () => {
       var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
       const shareInfo = userOptions.shared;
       const twinsShareInfo = args.shareInfo;
-      let enableFastRefresh;
-      let devtoolsMessage;
-      const devtoolsMessageStr = localStorage.getItem(import_template.__FEDERATION_DEVTOOLS__);
+      let enableFastRefresh = false;
+      let devtoolsMessage2 = {};
+      const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
       if (devtoolsMessageStr) {
         try {
-          devtoolsMessage = JSON.parse(devtoolsMessageStr);
-          enableFastRefresh = devtoolsMessage == null ? void 0 : devtoolsMessage.enableFastRefresh;
+          devtoolsMessage2 = JSON.parse(devtoolsMessageStr);
+          enableFastRefresh = devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__ENABLE_FAST_REFRESH__];
         } catch (e) {
           console.debug("Fast Refresh Plugin Error: ", e);
         }
       }
+      if (!enableFastRefresh) {
+        return __spreadValues({
+          userOptions
+        }, args);
+      }
       if (shareInfo && (0, import__.isObject)(shareInfo)) {
         let orderResolve;
         const orderPromise = new Promise((resolve) => {
@@ -82,10 +124,37 @@ const fastRefreshPlugin = () => {
             twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
           }
           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: true, async: false }
+                attrs: {
+                  defer: false,
+                  async: false,
+                  "data-mf-injected": "true"
+                }
               }).then(() => {
                 orderResolve();
               });
@@ -97,7 +166,7 @@ const fastRefreshPlugin = () => {
                 })
               );
             }
-            if (enableFastRefresh && typeof get === "function") {
+            if (typeof get === "function") {
               if (share === "react") {
                 shared.get = () => __async(this, null, function* () {
                   if (!window.React) {

package/dist/types/src/template/constant.d.ts

@@ -19,5 +19,6 @@ export declare const statusInfo: Record<string, {
     color: string;
 }>;
 export declare const __ENABLE_FAST_REFRESH__ = "enableFastRefresh";
+export declare const __EAGER_SHARE__ = "eagerShare";
 export declare const BROWSER_ENV_KEY = "MF_ENV";
 export declare const __FEDERATION_DEVTOOLS__ = "__MF_DEVTOOLS__";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/devtools",
-  "version": "0.21.3",
+  "version": "0.21.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "reactflow": "11.11.4",
-    "@module-federation/sdk": "0.21.3"
+    "@module-federation/sdk": "0.21.4"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
@@ -65,7 +65,7 @@
     "rimraf": "~6.0.1",
     "typescript": "~5.0.4",
     "vitest": "1.2.2",
-    "@module-federation/runtime": "0.21.3"
+    "@module-federation/runtime": "0.21.4"
   },
   "scripts": {
     "build:storybook": "storybook build",