@module-federation/modern-js 0.0.0-next-20240621075348 → 0.0.0-next-20240624115757

package/dist/cjs/cli/index.js

@@ -89,7 +89,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await (0, import_utils2.lookupIpv4)();
+        const ipv4 = await (0, import_utils2.getIPV4)();
         return {
           tools: {
             rspack(config) {

package/dist/cjs/cli/utils.js

@@ -28,17 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  getIPV4: () => getIPV4,
   getMFConfig: () => getMFConfig,
   getTargetEnvConfig: () => getTargetEnvConfig,
-  lookupIpv4: () => lookupIpv4,
   patchMFConfig: () => patchMFConfig,
   patchWebpackConfig: () => patchWebpackConfig
 });
 module.exports = __toCommonJS(utils_exports);
 var import_sdk = require("@module-federation/sdk");
 var import_path = __toESM(require("path"));
+var import_os = __toESM(require("os"));
 var import_node_bundle_require = require("@modern-js/node-bundle-require");
-var import_dns = __toESM(require("dns"));
 var import_constant = require("../constant");
 const defaultPath = import_path.default.resolve(process.cwd(), "module-federation.config.ts");
 const getMFConfig = async (userConfig) => {
@@ -64,7 +64,7 @@ const replaceRemoteUrl = async (mfConfig) => {
   if (!mfConfig.remotes) {
     return;
   }
-  const ipv4 = await lookupIpv4();
+  const ipv4 = getIPV4();
   const handleRemoteObject = (remoteObject) => {
     Object.keys(remoteObject).forEach((remoteKey) => {
       const remote = remoteObject[remoteKey];
@@ -95,6 +95,33 @@ const patchMFConfig = (mfConfig, isServer) => {
   const runtimePlugins = [
     ...mfConfig.runtimePlugins || []
   ];
+  const ModernJSRuntime = "@modern-js/runtime/mf";
+  if (mfConfig.dts !== false) {
+    var _mfConfig_dts, _mfConfig_dts1;
+    if (typeof mfConfig.dts === "boolean" || mfConfig.dts === void 0) {
+      mfConfig.dts = {
+        consumeTypes: {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        }
+      };
+    } else if (((_mfConfig_dts = mfConfig.dts) === null || _mfConfig_dts === void 0 ? void 0 : _mfConfig_dts.consumeTypes) || ((_mfConfig_dts1 = mfConfig.dts) === null || _mfConfig_dts1 === void 0 ? void 0 : _mfConfig_dts1.consumeTypes) === void 0) {
+      var _mfConfig_dts2;
+      if (typeof mfConfig.dts.consumeTypes === "boolean" || ((_mfConfig_dts2 = mfConfig.dts) === null || _mfConfig_dts2 === void 0 ? void 0 : _mfConfig_dts2.consumeTypes) === void 0) {
+        mfConfig.dts.consumeTypes = {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        };
+      } else {
+        mfConfig.dts.consumeTypes.runtimePkgs = mfConfig.dts.consumeTypes.runtimePkgs || [];
+        if (!mfConfig.dts.consumeTypes.runtimePkgs.includes(ModernJSRuntime)) {
+          mfConfig.dts.consumeTypes.runtimePkgs.push(ModernJSRuntime);
+        }
+      }
+    }
+  }
   injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -178,16 +205,31 @@ function patchWebpackConfig(options) {
     };
   }
 }
-const lookupIpv4 = async () => {
+const localIpv4 = "127.0.0.1";
+const getIpv4Interfaces = () => {
   try {
-    const res = await import_dns.default.promises.lookup(import_constant.LOCALHOST, {
-      family: 4
+    const interfaces = import_os.default.networkInterfaces();
+    const ipv4Interfaces = [];
+    Object.values(interfaces).forEach((detail) => {
+      detail === null || detail === void 0 ? void 0 : detail.forEach((detail2) => {
+        const familyV4Value = typeof detail2.family === "string" ? "IPv4" : 4;
+        if (detail2.family === familyV4Value && detail2.address !== localIpv4) {
+          ipv4Interfaces.push(detail2);
+        }
+      });
     });
-    return res.address;
-  } catch (err) {
-    return "127.0.0.1";
+    return ipv4Interfaces;
+  } catch (_err) {
+    return [];
   }
 };
+const getIPV4 = () => {
+  const ipv4Interfaces = getIpv4Interfaces();
+  const ipv4Interface = ipv4Interfaces[0] || {
+    address: localIpv4
+  };
+  return ipv4Interface.address;
+};
 const SPLIT_CHUNK_MAP = {
   REACT: "lib-react",
   ROUTER: "lib-router",
@@ -231,9 +273,9 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getIPV4,
   getMFConfig,
   getTargetEnvConfig,
-  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 });

package/dist/cjs/cli/utils.spec.js

@@ -92,6 +92,13 @@ const mfConfig = {
           eager: true,
           singleton: true
         }
+      },
+      dts: {
+        consumeTypes: {
+          runtimePkgs: [
+            "@modern-js/runtime/mf"
+          ]
+        }
       }
     });
   });

package/dist/cjs/runtime/{LiveReload.js → SSRLiveReload.js}

@@ -16,13 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var LiveReload_exports = {};
-__export(LiveReload_exports, {
-  LiveReload: () => LiveReload
+var SSRLiveReload_exports = {};
+__export(SSRLiveReload_exports, {
+  SSRLiveReload: () => SSRLiveReload
 });
-module.exports = __toCommonJS(LiveReload_exports);
+module.exports = __toCommonJS(SSRLiveReload_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function LiveReload() {
+function SSRLiveReload() {
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
@@ -39,5 +39,5 @@ function LiveReload() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LiveReload
+  SSRLiveReload
 });

package/dist/cjs/runtime/{MFReactComponent.js → createRemoteSSRComponent.js}

@@ -26,15 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var MFReactComponent_exports = {};
-__export(MFReactComponent_exports, {
-  MFReactComponent: () => MFReactComponent,
-  collectAssets: () => collectAssets
+var createRemoteSSRComponent_exports = {};
+__export(createRemoteSSRComponent_exports, {
+  collectSSRAssets: () => collectSSRAssets,
+  createRemoteSSRComponent: () => createRemoteSSRComponent
 });
-module.exports = __toCommonJS(MFReactComponent_exports);
+module.exports = __toCommonJS(createRemoteSSRComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_runtime = require("@module-federation/enhanced/runtime");
+var import_react_error_boundary = require("react-error-boundary");
 function getLoadedRemoteInfos(instance, id) {
   const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
   if (!name) {
@@ -83,7 +84,7 @@ function getTargetModuleInfo(id) {
     remoteEntry
   };
 }
-function collectAssets(options) {
+function collectSSRAssets(options) {
   const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
     id: options
   } : options;
@@ -137,46 +138,63 @@ function collectAssets(options) {
     ...links
   ];
 }
-function MFReactComponent(props) {
-  const { loading = "loading...", id, fallback = void 0 } = typeof props === "string" ? {
-    id: props
-  } : props;
-  const Component = /* @__PURE__ */ import_react.default.lazy(() => (0, import_runtime.loadRemote)(id).then((mod) => {
-    const assets = collectAssets(props);
-    if (!mod) {
-      throw new Error("load remote failed");
-    }
-    const Com = typeof mod === "object" ? "default" in mod ? mod.default : mod : mod;
-    return {
-      default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [
-          assets,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, {})
-        ]
+function createRemoteSSRComponent(info) {
+  return (props) => {
+    const exportName = (info === null || info === void 0 ? void 0 : info.export) || "default";
+    const LazyComponent = /* @__PURE__ */ import_react.default.lazy(async () => {
+      try {
+        const m = await info.loader();
+        if (!m) {
+          throw new Error("load remote failed");
+        }
+        const moduleId = m && m[Symbol.for("mf_module_id")];
+        const assets = collectSSRAssets({
+          id: moduleId,
+          injectLink: info.injectLink,
+          injectScript: info.injectScript
+        });
+        const Com = m[exportName];
+        if (exportName in m && typeof Com === "function") {
+          return {
+            default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [
+                assets,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, {
+                  ...props
+                })
+              ]
+            })
+          };
+        } else {
+          throw Error(`Make sure that ${moduleId} has the correct export when export is ${String(exportName)}`);
+        }
+      } catch (err) {
+        if (!info.fallback) {
+          throw err;
+        }
+        const FallbackFunctionComponent = info.fallback;
+        const FallbackNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackFunctionComponent, {
+          error: err,
+          resetErrorBoundary: () => {
+            console.log('SSR mode not support "resetErrorBoundary" !');
+          }
+        });
+        return {
+          default: () => FallbackNode
+        };
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_error_boundary.ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazyComponent, {})
       })
-    };
-  }).catch((err) => {
-    if (!fallback) {
-      throw err;
-    }
-    const FallbackNode = typeof fallback === "function" ? fallback(err) : fallback;
-    if (/* @__PURE__ */ import_react.default.isValidElement(FallbackNode)) {
-      return {
-        default: () => FallbackNode
-      };
-    }
-    const FallbackFunctionComponent = FallbackNode;
-    return {
-      default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackFunctionComponent, {})
-    };
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Suspense, {
-    fallback: loading,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {})
-  });
+    });
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MFReactComponent,
-  collectAssets
+  collectSSRAssets,
+  createRemoteSSRComponent
 });

package/dist/cjs/runtime/index.js

@@ -19,18 +19,18 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var runtime_exports = {};
 __export(runtime_exports, {
-  LiveReload: () => import_LiveReload.LiveReload,
-  MFReactComponent: () => import_MFReactComponent.MFReactComponent,
-  collectAssets: () => import_MFReactComponent.collectAssets
+  SSRLiveReload: () => import_SSRLiveReload.SSRLiveReload,
+  collectSSRAssets: () => import_createRemoteSSRComponent.collectSSRAssets,
+  createRemoteSSRComponent: () => import_createRemoteSSRComponent.createRemoteSSRComponent
 });
 module.exports = __toCommonJS(runtime_exports);
 __reExport(runtime_exports, require("@module-federation/enhanced/runtime"), module.exports);
-var import_MFReactComponent = require("./MFReactComponent");
-var import_LiveReload = require("./LiveReload");
+var import_createRemoteSSRComponent = require("./createRemoteSSRComponent");
+var import_SSRLiveReload = require("./SSRLiveReload");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  LiveReload,
-  MFReactComponent,
-  collectAssets,
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent,
   ...require("@module-federation/enhanced/runtime")
 });

package/dist/esm/cli/index.js

@@ -5,7 +5,7 @@ import { fs } from "@modern-js/utils";
 import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
-import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, lookupIpv4 } from "./utils";
+import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, getIPV4 } from "./utils";
 import { updateStatsAndManifest } from "./manifest";
 import { MODERN_JS_SERVER_DIR } from "../constant";
 var SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
@@ -72,7 +72,7 @@ var moduleFederationPlugin = function() {
                           };
                           return [
                             4,
-                            lookupIpv4()
+                            getIPV4()
                           ];
                         case 1:
                           ipv4 = _state2.sent();

package/dist/esm/cli/utils.js

@@ -5,8 +5,8 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { encodeName } from "@module-federation/sdk";
 import path from "path";
+import os from "os";
 import { bundle } from "@modern-js/node-bundle-require";
-import dns from "dns";
 import { LOCALHOST } from "../constant";
 var defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
 var getMFConfig = function() {
@@ -64,47 +64,39 @@ var replaceRemoteUrl = function() {
   var _ref = _async_to_generator(function(mfConfig) {
     var ipv4, handleRemoteObject;
     return _ts_generator(this, function(_state) {
-      switch (_state.label) {
-        case 0:
-          if (!mfConfig.remotes) {
-            return [
-              2
-            ];
+      if (!mfConfig.remotes) {
+        return [
+          2
+        ];
+      }
+      ipv4 = getIPV4();
+      handleRemoteObject = function(remoteObject) {
+        Object.keys(remoteObject).forEach(function(remoteKey) {
+          var remote = remoteObject[remoteKey];
+          if (Array.isArray(remote)) {
+            return;
           }
-          return [
-            4,
-            lookupIpv4()
-          ];
-        case 1:
-          ipv4 = _state.sent();
-          handleRemoteObject = function(remoteObject) {
-            Object.keys(remoteObject).forEach(function(remoteKey) {
-              var remote = remoteObject[remoteKey];
-              if (Array.isArray(remote)) {
-                return;
-              }
-              if (typeof remote === "string" && remote.includes(LOCALHOST)) {
-                remoteObject[remoteKey] = remote.replace(LOCALHOST, ipv4);
-              }
-              if (typeof remote === "object" && !Array.isArray(remote.external) && remote.external.includes(LOCALHOST)) {
-                remote.external = remote.external.replace(LOCALHOST, ipv4);
-              }
-            });
-          };
-          if (Array.isArray(mfConfig.remotes)) {
-            mfConfig.remotes.forEach(function(remoteObject) {
-              if (typeof remoteObject === "string") {
-                return;
-              }
-              handleRemoteObject(remoteObject);
-            });
-          } else if (typeof mfConfig.remotes !== "string") {
-            handleRemoteObject(mfConfig.remotes);
+          if (typeof remote === "string" && remote.includes(LOCALHOST)) {
+            remoteObject[remoteKey] = remote.replace(LOCALHOST, ipv4);
           }
-          return [
-            2
-          ];
+          if (typeof remote === "object" && !Array.isArray(remote.external) && remote.external.includes(LOCALHOST)) {
+            remote.external = remote.external.replace(LOCALHOST, ipv4);
+          }
+        });
+      };
+      if (Array.isArray(mfConfig.remotes)) {
+        mfConfig.remotes.forEach(function(remoteObject) {
+          if (typeof remoteObject === "string") {
+            return;
+          }
+          handleRemoteObject(remoteObject);
+        });
+      } else if (typeof mfConfig.remotes !== "string") {
+        handleRemoteObject(mfConfig.remotes);
       }
+      return [
+        2
+      ];
     });
   });
   return function replaceRemoteUrl2(mfConfig) {
@@ -114,6 +106,33 @@ var replaceRemoteUrl = function() {
 var patchMFConfig = function(mfConfig, isServer) {
   var isDev = process.env.NODE_ENV === "development";
   var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
+  var ModernJSRuntime = "@modern-js/runtime/mf";
+  if (mfConfig.dts !== false) {
+    var _mfConfig_dts, _mfConfig_dts1;
+    if (typeof mfConfig.dts === "boolean" || mfConfig.dts === void 0) {
+      mfConfig.dts = {
+        consumeTypes: {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        }
+      };
+    } else if (((_mfConfig_dts = mfConfig.dts) === null || _mfConfig_dts === void 0 ? void 0 : _mfConfig_dts.consumeTypes) || ((_mfConfig_dts1 = mfConfig.dts) === null || _mfConfig_dts1 === void 0 ? void 0 : _mfConfig_dts1.consumeTypes) === void 0) {
+      var _mfConfig_dts2;
+      if (typeof mfConfig.dts.consumeTypes === "boolean" || ((_mfConfig_dts2 = mfConfig.dts) === null || _mfConfig_dts2 === void 0 ? void 0 : _mfConfig_dts2.consumeTypes) === void 0) {
+        mfConfig.dts.consumeTypes = {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        };
+      } else {
+        mfConfig.dts.consumeTypes.runtimePkgs = mfConfig.dts.consumeTypes.runtimePkgs || [];
+        if (!mfConfig.dts.consumeTypes.runtimePkgs.includes(ModernJSRuntime)) {
+          mfConfig.dts.consumeTypes.runtimePkgs.push(ModernJSRuntime);
+        }
+      }
+    }
+  }
   injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -191,47 +210,31 @@ function patchWebpackConfig(options) {
     });
   }
 }
-var lookupIpv4 = function() {
-  var _ref = _async_to_generator(function() {
-    var res, err;
-    return _ts_generator(this, function(_state) {
-      switch (_state.label) {
-        case 0:
-          _state.trys.push([
-            0,
-            2,
-            ,
-            3
-          ]);
-          return [
-            4,
-            dns.promises.lookup(LOCALHOST, {
-              family: 4
-            })
-          ];
-        case 1:
-          res = _state.sent();
-          return [
-            2,
-            res.address
-          ];
-        case 2:
-          err = _state.sent();
-          return [
-            2,
-            "127.0.0.1"
-          ];
-        case 3:
-          return [
-            2
-          ];
-      }
+var localIpv4 = "127.0.0.1";
+var getIpv4Interfaces = function() {
+  try {
+    var interfaces = os.networkInterfaces();
+    var ipv4Interfaces = [];
+    Object.values(interfaces).forEach(function(detail) {
+      detail === null || detail === void 0 ? void 0 : detail.forEach(function(detail2) {
+        var familyV4Value = typeof detail2.family === "string" ? "IPv4" : 4;
+        if (detail2.family === familyV4Value && detail2.address !== localIpv4) {
+          ipv4Interfaces.push(detail2);
+        }
+      });
     });
-  });
-  return function lookupIpv42() {
-    return _ref.apply(this, arguments);
+    return ipv4Interfaces;
+  } catch (_err) {
+    return [];
+  }
+};
+var getIPV4 = function() {
+  var ipv4Interfaces = getIpv4Interfaces();
+  var ipv4Interface = ipv4Interfaces[0] || {
+    address: localIpv4
   };
-}();
+  return ipv4Interface.address;
+};
 var SPLIT_CHUNK_MAP = {
   REACT: "lib-react",
   ROUTER: "lib-router",
@@ -291,9 +294,9 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
   }
 }
 export {
+  getIPV4,
   getMFConfig,
   getTargetEnvConfig,
-  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 };

package/dist/esm/cli/utils.spec.js

@@ -80,6 +80,13 @@ describe("getTargetEnvConfig", /* @__PURE__ */ _async_to_generator(function() {
               eager: true,
               singleton: true
             }
+          },
+          dts: {
+            consumeTypes: {
+              runtimePkgs: [
+                "@modern-js/runtime/mf"
+              ]
+            }
           }
         });
         return [

package/dist/esm/runtime/{LiveReload.js → SSRLiveReload.js}

@@ -10,7 +10,7 @@ function _templateObject() {
   return data;
 }
 import { jsx as _jsx } from "react/jsx-runtime";
-function LiveReload() {
+function SSRLiveReload() {
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
@@ -22,5 +22,5 @@ function LiveReload() {
   });
 }
 export {
-  LiveReload
+  SSRLiveReload
 };

package/dist/esm/runtime/{MFReactComponent.js → createRemoteSSRComponent.js}

@@ -1,9 +1,12 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { ErrorBoundary } from "react-error-boundary";
 function getLoadedRemoteInfos(instance, id) {
   var _ref = instance.remoteHandler.idToRemoteMap[id] || {}, name = _ref.name, expose = _ref.expose;
   if (!name) {
@@ -53,7 +56,7 @@ function getTargetModuleInfo(id) {
     remoteEntry
   };
 }
-function collectAssets(options) {
+function collectSSRAssets(options) {
   var _ref = typeof options === "string" ? {
     id: options
   } : options, id = _ref.id, _ref_injectLink = _ref.injectLink, injectLink = _ref_injectLink === void 0 ? true : _ref_injectLink, _ref_injectScript = _ref.injectScript, injectScript = _ref_injectScript === void 0 ? true : _ref_injectScript;
@@ -93,53 +96,94 @@ function collectAssets(options) {
   }
   return _to_consumable_array(scripts).concat(_to_consumable_array(links));
 }
-function MFReactComponent(props) {
-  var _ref = typeof props === "string" ? {
-    id: props
-  } : props, _ref_loading = _ref.loading, loading = _ref_loading === void 0 ? "loading..." : _ref_loading, id = _ref.id, _ref_fallback = _ref.fallback, fallback = _ref_fallback === void 0 ? void 0 : _ref_fallback;
-  var Component = /* @__PURE__ */ React.lazy(function() {
-    return loadRemote(id).then(function(mod) {
-      var assets = collectAssets(props);
-      if (!mod) {
-        throw new Error("load remote failed");
-      }
-      var Com = typeof mod === "object" ? "default" in mod ? mod.default : mod : mod;
-      return {
-        default: function() {
-          return /* @__PURE__ */ _jsxs(_Fragment, {
-            children: [
-              assets,
-              /* @__PURE__ */ _jsx(Com, {})
-            ]
-          });
+function createRemoteSSRComponent(info) {
+  return function(props) {
+    var exportName = (info === null || info === void 0 ? void 0 : info.export) || "default";
+    var LazyComponent = /* @__PURE__ */ React.lazy(/* @__PURE__ */ _async_to_generator(function() {
+      var m, moduleId, assets, Com, err, FallbackFunctionComponent, FallbackNode;
+      return _ts_generator(this, function(_state) {
+        switch (_state.label) {
+          case 0:
+            _state.trys.push([
+              0,
+              2,
+              ,
+              3
+            ]);
+            return [
+              4,
+              info.loader()
+            ];
+          case 1:
+            m = _state.sent();
+            if (!m) {
+              throw new Error("load remote failed");
+            }
+            moduleId = m && m[Symbol.for("mf_module_id")];
+            assets = collectSSRAssets({
+              id: moduleId,
+              injectLink: info.injectLink,
+              injectScript: info.injectScript
+            });
+            Com = m[exportName];
+            if (exportName in m && typeof Com === "function") {
+              return [
+                2,
+                {
+                  default: function() {
+                    return /* @__PURE__ */ _jsxs(_Fragment, {
+                      children: [
+                        assets,
+                        /* @__PURE__ */ _jsx(Com, _object_spread({}, props))
+                      ]
+                    });
+                  }
+                }
+              ];
+            } else {
+              throw Error("Make sure that ".concat(moduleId, " has the correct export when export is ").concat(String(exportName)));
+            }
+            return [
+              3,
+              3
+            ];
+          case 2:
+            err = _state.sent();
+            if (!info.fallback) {
+              throw err;
+            }
+            FallbackFunctionComponent = info.fallback;
+            FallbackNode = /* @__PURE__ */ _jsx(FallbackFunctionComponent, {
+              error: err,
+              resetErrorBoundary: function() {
+                console.log('SSR mode not support "resetErrorBoundary" !');
+              }
+            });
+            return [
+              2,
+              {
+                default: function() {
+                  return FallbackNode;
+                }
+              }
+            ];
+          case 3:
+            return [
+              2
+            ];
         }
-      };
-    }).catch(function(err) {
-      if (!fallback) {
-        throw err;
-      }
-      var FallbackNode = typeof fallback === "function" ? fallback(err) : fallback;
-      if (/* @__PURE__ */ React.isValidElement(FallbackNode)) {
-        return {
-          default: function() {
-            return FallbackNode;
-          }
-        };
-      }
-      var FallbackFunctionComponent = FallbackNode;
-      return {
-        default: function() {
-          return /* @__PURE__ */ _jsx(FallbackFunctionComponent, {});
-        }
-      };
+      });
+    }));
+    return /* @__PURE__ */ _jsx(ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ _jsx(React.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ _jsx(LazyComponent, {})
+      })
     });
-  });
-  return /* @__PURE__ */ _jsx(React.Suspense, {
-    fallback: loading,
-    children: /* @__PURE__ */ _jsx(Component, {})
-  });
+  };
 }
 export {
-  MFReactComponent,
-  collectAssets
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/esm/runtime/index.js

@@ -1,8 +1,8 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectAssets } from "./MFReactComponent";
-import { LiveReload } from "./LiveReload";
+import { createRemoteSSRComponent, collectSSRAssets } from "./createRemoteSSRComponent";
+import { SSRLiveReload } from "./SSRLiveReload";
 export {
-  LiveReload,
-  MFReactComponent,
-  collectAssets
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/esm-node/cli/index.js

@@ -3,7 +3,7 @@ import { fs } from "@modern-js/utils";
 import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import { StreamingTargetPlugin, EntryChunkTrackerPlugin } from "@module-federation/node";
-import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, lookupIpv4 } from "./utils";
+import { getMFConfig, getTargetEnvConfig, patchWebpackConfig, getIPV4 } from "./utils";
 import { updateStatsAndManifest } from "./manifest";
 import { MODERN_JS_SERVER_DIR } from "../constant";
 const SSR_PLUGIN_IDENTIFIER = "mfPluginSSR";
@@ -53,7 +53,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
-        const ipv4 = await lookupIpv4();
+        const ipv4 = await getIPV4();
         return {
           tools: {
             rspack(config) {

package/dist/esm-node/cli/utils.js

@@ -1,7 +1,7 @@
 import { encodeName } from "@module-federation/sdk";
 import path from "path";
+import os from "os";
 import { bundle } from "@modern-js/node-bundle-require";
-import dns from "dns";
 import { LOCALHOST } from "../constant";
 const defaultPath = path.resolve(process.cwd(), "module-federation.config.ts");
 const getMFConfig = async (userConfig) => {
@@ -27,7 +27,7 @@ const replaceRemoteUrl = async (mfConfig) => {
   if (!mfConfig.remotes) {
     return;
   }
-  const ipv4 = await lookupIpv4();
+  const ipv4 = getIPV4();
   const handleRemoteObject = (remoteObject) => {
     Object.keys(remoteObject).forEach((remoteKey) => {
       const remote = remoteObject[remoteKey];
@@ -58,6 +58,33 @@ const patchMFConfig = (mfConfig, isServer) => {
   const runtimePlugins = [
     ...mfConfig.runtimePlugins || []
   ];
+  const ModernJSRuntime = "@modern-js/runtime/mf";
+  if (mfConfig.dts !== false) {
+    var _mfConfig_dts, _mfConfig_dts1;
+    if (typeof mfConfig.dts === "boolean" || mfConfig.dts === void 0) {
+      mfConfig.dts = {
+        consumeTypes: {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        }
+      };
+    } else if (((_mfConfig_dts = mfConfig.dts) === null || _mfConfig_dts === void 0 ? void 0 : _mfConfig_dts.consumeTypes) || ((_mfConfig_dts1 = mfConfig.dts) === null || _mfConfig_dts1 === void 0 ? void 0 : _mfConfig_dts1.consumeTypes) === void 0) {
+      var _mfConfig_dts2;
+      if (typeof mfConfig.dts.consumeTypes === "boolean" || ((_mfConfig_dts2 = mfConfig.dts) === null || _mfConfig_dts2 === void 0 ? void 0 : _mfConfig_dts2.consumeTypes) === void 0) {
+        mfConfig.dts.consumeTypes = {
+          runtimePkgs: [
+            ModernJSRuntime
+          ]
+        };
+      } else {
+        mfConfig.dts.consumeTypes.runtimePkgs = mfConfig.dts.consumeTypes.runtimePkgs || [];
+        if (!mfConfig.dts.consumeTypes.runtimePkgs.includes(ModernJSRuntime)) {
+          mfConfig.dts.consumeTypes.runtimePkgs.push(ModernJSRuntime);
+        }
+      }
+    }
+  }
   injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/resolve-entry-ipv4.js"), runtimePlugins);
@@ -141,16 +168,31 @@ function patchWebpackConfig(options) {
     };
   }
 }
-const lookupIpv4 = async () => {
+const localIpv4 = "127.0.0.1";
+const getIpv4Interfaces = () => {
   try {
-    const res = await dns.promises.lookup(LOCALHOST, {
-      family: 4
+    const interfaces = os.networkInterfaces();
+    const ipv4Interfaces = [];
+    Object.values(interfaces).forEach((detail) => {
+      detail === null || detail === void 0 ? void 0 : detail.forEach((detail2) => {
+        const familyV4Value = typeof detail2.family === "string" ? "IPv4" : 4;
+        if (detail2.family === familyV4Value && detail2.address !== localIpv4) {
+          ipv4Interfaces.push(detail2);
+        }
+      });
     });
-    return res.address;
-  } catch (err) {
-    return "127.0.0.1";
+    return ipv4Interfaces;
+  } catch (_err) {
+    return [];
   }
 };
+const getIPV4 = () => {
+  const ipv4Interfaces = getIpv4Interfaces();
+  const ipv4Interface = ipv4Interfaces[0] || {
+    address: localIpv4
+  };
+  return ipv4Interface.address;
+};
 const SPLIT_CHUNK_MAP = {
   REACT: "lib-react",
   ROUTER: "lib-router",
@@ -193,9 +235,9 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
   }
 }
 export {
+  getIPV4,
   getMFConfig,
   getTargetEnvConfig,
-  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 };

package/dist/esm-node/cli/utils.spec.js

@@ -69,6 +69,13 @@ describe("getTargetEnvConfig", async () => {
           eager: true,
           singleton: true
         }
+      },
+      dts: {
+        consumeTypes: {
+          runtimePkgs: [
+            "@modern-js/runtime/mf"
+          ]
+        }
       }
     });
   });

package/dist/esm-node/runtime/{LiveReload.js → SSRLiveReload.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function LiveReload() {
+function SSRLiveReload() {
   if (process.env.NODE_ENV !== "development") {
     return null;
   }
@@ -15,5 +15,5 @@ function LiveReload() {
   });
 }
 export {
-  LiveReload
+  SSRLiveReload
 };

package/dist/esm-node/runtime/{MFReactComponent.js → createRemoteSSRComponent.js}

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { ErrorBoundary } from "react-error-boundary";
 function getLoadedRemoteInfos(instance, id) {
   const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
   if (!name) {
@@ -49,7 +50,7 @@ function getTargetModuleInfo(id) {
     remoteEntry
   };
 }
-function collectAssets(options) {
+function collectSSRAssets(options) {
   const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
     id: options
   } : options;
@@ -103,45 +104,62 @@ function collectAssets(options) {
     ...links
   ];
 }
-function MFReactComponent(props) {
-  const { loading = "loading...", id, fallback = void 0 } = typeof props === "string" ? {
-    id: props
-  } : props;
-  const Component = /* @__PURE__ */ React.lazy(() => loadRemote(id).then((mod) => {
-    const assets = collectAssets(props);
-    if (!mod) {
-      throw new Error("load remote failed");
-    }
-    const Com = typeof mod === "object" ? "default" in mod ? mod.default : mod : mod;
-    return {
-      default: () => /* @__PURE__ */ _jsxs(_Fragment, {
-        children: [
-          assets,
-          /* @__PURE__ */ _jsx(Com, {})
-        ]
+function createRemoteSSRComponent(info) {
+  return (props) => {
+    const exportName = (info === null || info === void 0 ? void 0 : info.export) || "default";
+    const LazyComponent = /* @__PURE__ */ React.lazy(async () => {
+      try {
+        const m = await info.loader();
+        if (!m) {
+          throw new Error("load remote failed");
+        }
+        const moduleId = m && m[Symbol.for("mf_module_id")];
+        const assets = collectSSRAssets({
+          id: moduleId,
+          injectLink: info.injectLink,
+          injectScript: info.injectScript
+        });
+        const Com = m[exportName];
+        if (exportName in m && typeof Com === "function") {
+          return {
+            default: () => /* @__PURE__ */ _jsxs(_Fragment, {
+              children: [
+                assets,
+                /* @__PURE__ */ _jsx(Com, {
+                  ...props
+                })
+              ]
+            })
+          };
+        } else {
+          throw Error(`Make sure that ${moduleId} has the correct export when export is ${String(exportName)}`);
+        }
+      } catch (err) {
+        if (!info.fallback) {
+          throw err;
+        }
+        const FallbackFunctionComponent = info.fallback;
+        const FallbackNode = /* @__PURE__ */ _jsx(FallbackFunctionComponent, {
+          error: err,
+          resetErrorBoundary: () => {
+            console.log('SSR mode not support "resetErrorBoundary" !');
+          }
+        });
+        return {
+          default: () => FallbackNode
+        };
+      }
+    });
+    return /* @__PURE__ */ _jsx(ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ _jsx(React.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ _jsx(LazyComponent, {})
       })
-    };
-  }).catch((err) => {
-    if (!fallback) {
-      throw err;
-    }
-    const FallbackNode = typeof fallback === "function" ? fallback(err) : fallback;
-    if (/* @__PURE__ */ React.isValidElement(FallbackNode)) {
-      return {
-        default: () => FallbackNode
-      };
-    }
-    const FallbackFunctionComponent = FallbackNode;
-    return {
-      default: () => /* @__PURE__ */ _jsx(FallbackFunctionComponent, {})
-    };
-  }));
-  return /* @__PURE__ */ _jsx(React.Suspense, {
-    fallback: loading,
-    children: /* @__PURE__ */ _jsx(Component, {})
-  });
+    });
+  };
 }
 export {
-  MFReactComponent,
-  collectAssets
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/esm-node/runtime/index.js

@@ -1,8 +1,8 @@
 export * from "@module-federation/enhanced/runtime";
-import { MFReactComponent, collectAssets } from "./MFReactComponent";
-import { LiveReload } from "./LiveReload";
+import { createRemoteSSRComponent, collectSSRAssets } from "./createRemoteSSRComponent";
+import { SSRLiveReload } from "./SSRLiveReload";
 export {
-  LiveReload,
-  MFReactComponent,
-  collectAssets
+  SSRLiveReload,
+  collectSSRAssets,
+  createRemoteSSRComponent
 };

package/dist/types/cli/utils.d.ts

@@ -43,4 +43,4 @@ export declare function patchWebpackConfig<T>(options: {
     modernjsConfig: UserConfig<AppTools>;
     mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;
 }): void;
-export declare const lookupIpv4: () => Promise<string>;
+export declare const getIPV4: () => string;

package/dist/types/runtime/SSRLiveReload.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SSRLiveReload(): import("react").JSX.Element | null;

package/dist/types/runtime/createRemoteSSRComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
+type IProps = {
+    id: string;
+    injectScript?: boolean;
+    injectLink?: boolean;
+};
+export declare function collectSSRAssets(options: IProps): React.ReactNode[];
+export declare function createRemoteSSRComponent<T, E extends keyof T>(info: {
+    loader: () => Promise<T>;
+    loading: React.ReactNode;
+    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
+    injectScript?: boolean;
+    injectLink?: boolean;
+    export?: E;
+}): (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? Record<string, never> : Parameters<T[E]>[0] : Record<string, never>) => React.JSX.Element;
+export {};

package/dist/types/runtime/index.d.ts

@@ -1,3 +1,3 @@
 export * from '@module-federation/enhanced/runtime';
-export { MFReactComponent, collectAssets } from './MFReactComponent';
-export { LiveReload } from './LiveReload';
+export { createRemoteSSRComponent, collectSSRAssets, } from './createRemoteSSRComponent';
+export { SSRLiveReload } from './SSRLiveReload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/modern-js",
-  "version": "0.0.0-next-20240621075348",
+  "version": "0.0.0-next-20240624115757",
   "files": [
     "dist/",
     "types.d.ts",
@@ -46,9 +46,10 @@
     "@modern-js/utils": "^2.49.2",
     "@modern-js/node-bundle-require": "^2.49.2",
     "node-fetch": "~3.3.0",
-    "@module-federation/sdk": "0.0.0-next-20240621075348",
-    "@module-federation/enhanced": "0.0.0-next-20240621075348",
-    "@module-federation/node": "0.0.0-next-20240621075348"
+    "react-error-boundary": "4.0.13",
+    "@module-federation/sdk": "0.0.0-next-20240624115757",
+    "@module-federation/enhanced": "0.0.0-next-20240624115757",
+    "@module-federation/node": "0.0.0-next-20240624115757"
   },
   "devDependencies": {
     "@modern-js/app-tools": "^2.49.2",
@@ -56,7 +57,7 @@
     "@modern-js/runtime": "^2.49.2",
     "@modern-js/module-tools": "^2.35.0",
     "@modern-js/tsconfig": "^2.35.0",
-    "@module-federation/manifest": "0.0.0-next-20240621075348"
+    "@module-federation/manifest": "0.0.0-next-20240624115757"
   },
   "peerDependencies": {
     "react": ">=17",

package/dist/types/runtime/LiveReload.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function LiveReload(): import("react").JSX.Element | null;

package/dist/types/runtime/MFReactComponent.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-type Id = string;
-type IProps = {
-    id: Id;
-    injectScript?: boolean;
-    injectLink?: boolean;
-    loading?: React.ReactNode;
-    fallback?: ((err: Error) => React.FC | React.ReactElement) | React.FC | React.ReactElement;
-} | Id;
-declare function collectAssets(options: IProps): React.ReactNode[];
-declare function MFReactComponent(props: IProps): React.JSX.Element;
-export { MFReactComponent, collectAssets };