@module-federation/modern-js 0.0.0-next-20240605083609 → 0.0.0-next-20240620090145

package/dist/cjs/cli/index.js

@@ -55,7 +55,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
     let browserPlugin;
     let nodePlugin;
     return {
-      config: () => {
+      config: async () => {
         var _modernjsConfig_dev;
         const bundlerType = useAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
         const WebpackPluginConstructor = userConfig.webpackPluginImplementation || import_enhanced.ModuleFederationPlugin;
@@ -89,6 +89,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             mfConfig: envConfig
           });
         };
+        const ipv4 = await (0, import_utils2.lookupIpv4)();
         return {
           tools: {
             rspack(config) {
@@ -133,7 +134,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
                       next();
                     }
                   } catch (err) {
-                    console.error(err);
+                    if (process.env.FEDERATION_DEBUG) {
+                      console.error(err);
+                    }
                     next();
                   }
                 }
@@ -142,8 +145,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
             bundlerChain(chain, { isServer }) {
               if (isDev && !isServer) {
                 chain.externals({
-                  "@module-federation/node/utils": "NOT_USED_IN_BROWSER",
-                  "@module-federation/dts-plugin/server": "NOT_USED_IN_BROWSER"
+                  "@module-federation/node/utils": "NOT_USED_IN_BROWSER"
                 });
               }
             }
@@ -151,6 +153,9 @@ const moduleFederationPlugin = (userConfig = {}) => ({
           source: {
             alias: {
               "@modern-js/runtime/mf": require.resolve("@module-federation/modern-js/runtime")
+            },
+            define: {
+              FEDERATION_IPV4: JSON.stringify(ipv4)
             }
           },
           dev: {
@@ -187,9 +192,7 @@ const moduleFederationPlugin = (userConfig = {}) => ({
         }
         plugins.unshift({
           name: SSR_PLUGIN_IDENTIFIER,
-          options: JSON.stringify({
-            name: mfConfig.name
-          })
+          options: JSON.stringify({})
         });
         return {
           entrypoint,

package/dist/cjs/cli/mfRuntimePlugins/resolve-entry-ipv4.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resolve_entry_ipv4_exports = {};
+__export(resolve_entry_ipv4_exports, {
+  default: () => resolve_entry_ipv4_default
+});
+module.exports = __toCommonJS(resolve_entry_ipv4_exports);
+var import_constant = require("../../constant");
+const ipv4 = typeof FEDERATION_IPV4 !== "undefined" ? FEDERATION_IPV4 : "127.0.0.1";
+function replaceLocalhost(url) {
+  return url.replace(import_constant.LOCALHOST, ipv4);
+}
+const resolveEntryIpv4Plugin = () => ({
+  name: "resolve-entry-ipv4",
+  beforeRegisterRemote(args) {
+    const { remote } = args;
+    if ("entry" in remote && remote.entry.includes(import_constant.LOCALHOST)) {
+      remote.entry = replaceLocalhost(remote.entry);
+    }
+    return args;
+  },
+  // async fetch(manifestUrl) {
+  //   const ipv4ManifestUrl = manifestUrl.replace(LOCALHOST, ipv4);
+  //   return globalThis.fetch(ipv4ManifestUrl);
+  // },
+  async afterResolve(args) {
+    const { remoteInfo } = args;
+    if (remoteInfo.entry.includes(import_constant.LOCALHOST)) {
+      remoteInfo.entry = replaceLocalhost(remoteInfo.entry);
+    }
+    return args;
+  },
+  loadRemoteSnapshot(args) {
+    const { remoteSnapshot } = args;
+    if ("publicPath" in remoteSnapshot && remoteSnapshot.publicPath.includes(import_constant.LOCALHOST)) {
+      remoteSnapshot.publicPath = replaceLocalhost(remoteSnapshot.publicPath);
+    }
+    if ("getPublicPath" in remoteSnapshot && remoteSnapshot.getPublicPath.includes(import_constant.LOCALHOST)) {
+      remoteSnapshot.getPublicPath = replaceLocalhost(remoteSnapshot.getPublicPath);
+    }
+    return args;
+  }
+});
+var resolve_entry_ipv4_default = resolveEntryIpv4Plugin;

package/dist/cjs/cli/mfRuntimePlugins/shared-strategy.js

@@ -24,10 +24,11 @@ module.exports = __toCommonJS(shared_strategy_exports);
 const sharedStrategy = () => ({
   name: "shared-strategy-plugin",
   beforeInit(args) {
-    const { shareInfo } = args;
-    if (shareInfo) {
-      Object.keys(shareInfo || {}).forEach((sharedKey) => {
-        const sharedConfigs = shareInfo[sharedKey];
+    const { userOptions } = args;
+    const shared = userOptions.shared;
+    if (shared) {
+      Object.keys(shared).forEach((sharedKey) => {
+        const sharedConfigs = shared[sharedKey];
         const arraySharedConfigs = Array.isArray(sharedConfigs) ? sharedConfigs : [
           sharedConfigs
         ];

package/dist/cjs/cli/utils.js

@@ -30,6 +30,7 @@ var utils_exports = {};
 __export(utils_exports, {
   getMFConfig: () => getMFConfig,
   getTargetEnvConfig: () => getTargetEnvConfig,
+  lookupIpv4: () => lookupIpv4,
   patchMFConfig: () => patchMFConfig,
   patchWebpackConfig: () => patchWebpackConfig
 });
@@ -37,6 +38,8 @@ module.exports = __toCommonJS(utils_exports);
 var import_sdk = require("@module-federation/sdk");
 var import_path = __toESM(require("path"));
 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) => {
   const { config, configPath } = userConfig;
@@ -46,28 +49,58 @@ const getMFConfig = async (userConfig) => {
   const mfConfigPath = configPath ? configPath : defaultPath;
   const preBundlePath = await (0, import_node_bundle_require.bundle)(mfConfigPath);
   const mfConfig = (await Promise.resolve().then(() => __toESM(require(preBundlePath)))).default;
+  await replaceRemoteUrl(mfConfig);
   return mfConfig;
 };
+const injectRuntimePlugins = (runtimePlugin, runtimePlugins) => {
+  if (!runtimePlugins.includes(runtimePlugin)) {
+    runtimePlugins.push(runtimePlugin);
+  }
+};
+const replaceRemoteUrl = async (mfConfig) => {
+  if (!mfConfig.remotes) {
+    return;
+  }
+  const ipv4 = await lookupIpv4();
+  const handleRemoteObject = (remoteObject) => {
+    Object.keys(remoteObject).forEach((remoteKey) => {
+      const remote = remoteObject[remoteKey];
+      if (Array.isArray(remote)) {
+        return;
+      }
+      if (typeof remote === "string" && remote.includes(import_constant.LOCALHOST)) {
+        remoteObject[remoteKey] = remote.replace(import_constant.LOCALHOST, ipv4);
+      }
+      if (typeof remote === "object" && !Array.isArray(remote.external) && remote.external.includes(import_constant.LOCALHOST)) {
+        remote.external = remote.external.replace(import_constant.LOCALHOST, ipv4);
+      }
+    });
+  };
+  if (Array.isArray(mfConfig.remotes)) {
+    mfConfig.remotes.forEach((remoteObject) => {
+      if (typeof remoteObject === "string") {
+        return;
+      }
+      handleRemoteObject(remoteObject);
+    });
+  } else if (typeof mfConfig.remotes !== "string") {
+    handleRemoteObject(mfConfig.remotes);
+  }
+};
 const patchMFConfig = (mfConfig, isServer) => {
+  const isDev = process.env.NODE_ENV === "development";
   const runtimePlugins = [
     ...mfConfig.runtimePlugins || []
   ];
-  const sharedStrategyRuntimePluginPath = import_path.default.resolve(__dirname, "./mfRuntimePlugins/shared-strategy.js");
-  if (!runtimePlugins.includes(sharedStrategyRuntimePluginPath)) {
-    runtimePlugins.push(sharedStrategyRuntimePluginPath);
+  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);
   }
   if (isServer) {
-    const isDev = process.env.NODE_ENV === "development";
     if (isDev) {
-      const nodeHmrPluginPath = require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin");
-      if (!runtimePlugins.includes(nodeHmrPluginPath)) {
-        runtimePlugins.push(nodeHmrPluginPath);
-      }
-    }
-    const injectNodeFetchRuntimePluginPath = import_path.default.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js");
-    if (!runtimePlugins.includes(injectNodeFetchRuntimePluginPath)) {
-      runtimePlugins.push(injectNodeFetchRuntimePluginPath);
+      injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
     }
+    injectRuntimePlugins(import_path.default.resolve(__dirname, "./mfRuntimePlugins/inject-node-fetch.js"), runtimePlugins);
   }
   if (typeof mfConfig.async === "undefined") {
     mfConfig.async = true;
@@ -75,18 +108,7 @@ const patchMFConfig = (mfConfig, isServer) => {
   if (!isServer) {
     return {
       ...mfConfig,
-      runtimePlugins,
-      dts: mfConfig.dts === false ? false : {
-        generateTypes: false,
-        consumeTypes: false,
-        ...typeof mfConfig.dts === "object" ? mfConfig.dts : {}
-      },
-      dev: mfConfig.dev === false ? false : {
-        disableHotTypesReload: true,
-        disableLiveReload: false,
-        injectWebClient: true,
-        ...typeof mfConfig.dev === "object" ? mfConfig.dev : {}
-      }
+      runtimePlugins
     };
   }
   return {
@@ -124,6 +146,9 @@ function patchWebpackConfig(options) {
   const { bundlerConfig, modernjsConfig, isServer, mfConfig } = options;
   const enableSSR = Boolean((_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
   (_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? true : delete _bundlerConfig_optimization.runtimeChunk;
+  if (!isServer) {
+    autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
+  }
   if (!isServer && enableSSR && typeof ((_bundlerConfig_optimization1 = bundlerConfig.optimization) === null || _bundlerConfig_optimization1 === void 0 ? void 0 : _bundlerConfig_optimization1.splitChunks) === "object" && bundlerConfig.optimization.splitChunks.cacheGroups) {
     bundlerConfig.optimization.splitChunks.chunks = "async";
     console.warn('[Modern.js Module Federation] splitChunks.chunks = async is not allowed with stream SSR mode, it will auto changed to "async"');
@@ -153,10 +178,62 @@ function patchWebpackConfig(options) {
     };
   }
 }
+const lookupIpv4 = async () => {
+  try {
+    const res = await import_dns.default.promises.lookup(import_constant.LOCALHOST, {
+      family: 4
+    });
+    return res.address;
+  } catch (err) {
+    return "127.0.0.1";
+  }
+};
+const SPLIT_CHUNK_MAP = {
+  REACT: "lib-react",
+  ROUTER: "lib-router",
+  LODASH: "lib-lodash",
+  ANTD: "lib-antd",
+  ARCO: "lib-arco",
+  SEMI: "lib-semi",
+  AXIOS: "lib-axios"
+};
+const SHARED_SPLIT_CHUNK_MAP = {
+  react: SPLIT_CHUNK_MAP.REACT,
+  "react-dom": SPLIT_CHUNK_MAP.REACT,
+  "react-router": SPLIT_CHUNK_MAP.ROUTER,
+  "react-router-dom": SPLIT_CHUNK_MAP.ROUTER,
+  "@remix-run/router": SPLIT_CHUNK_MAP.ROUTER,
+  lodash: SPLIT_CHUNK_MAP.LODASH,
+  "lodash-es": SPLIT_CHUNK_MAP.LODASH,
+  antd: SPLIT_CHUNK_MAP.ANTD,
+  "@arco-design/web-react": SPLIT_CHUNK_MAP.ARCO,
+  "@douyinfe/semi-ui": SPLIT_CHUNK_MAP.SEMI,
+  axios: SPLIT_CHUNK_MAP.AXIOS
+};
+function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
+  var _bundlerConfig_optimization;
+  if (!mfConfig.shared) {
+    return;
+  }
+  if (!((_bundlerConfig_optimization = bundlerConfig.optimization) === null || _bundlerConfig_optimization === void 0 ? void 0 : _bundlerConfig_optimization.splitChunks) || !bundlerConfig.optimization.splitChunks.cacheGroups) {
+    return;
+  }
+  const arrayShared = Array.isArray(mfConfig.shared) ? mfConfig.shared : Object.keys(mfConfig.shared);
+  for (const shared of arrayShared) {
+    const splitChunkKey = SHARED_SPLIT_CHUNK_MAP[shared];
+    if (!splitChunkKey) {
+      continue;
+    }
+    if (bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey]) {
+      delete bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey];
+    }
+  }
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getMFConfig,
   getTargetEnvConfig,
+  lookupIpv4,
   patchMFConfig,
   patchWebpackConfig
 });

package/dist/cjs/constant.js

@@ -18,11 +18,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constant_exports = {};
 __export(constant_exports, {
+  LOCALHOST: () => LOCALHOST,
   MODERN_JS_SERVER_DIR: () => MODERN_JS_SERVER_DIR
 });
 module.exports = __toCommonJS(constant_exports);
 const MODERN_JS_SERVER_DIR = "bundles";
+const LOCALHOST = "localhost";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  LOCALHOST,
   MODERN_JS_SERVER_DIR
 });

package/dist/cjs/runtime/LiveReload.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LiveReload_exports = {};
+__export(LiveReload_exports, {
+  LiveReload: () => LiveReload
+});
+module.exports = __toCommonJS(LiveReload_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function LiveReload() {
+  if (process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
+    suppressHydrationWarning: true,
+    dangerouslySetInnerHTML: {
+      __html: String.raw`
+      if(${globalThis.shouldUpdate}){
+        location.reload();
+      }
+   `
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiveReload
+});

package/dist/cjs/runtime/MFReactComponent.js

@@ -84,7 +84,9 @@ function getTargetModuleInfo(id) {
   };
 }
 function collectAssets(options) {
-  const { id, injectLink = true, injectScript = true } = options;
+  const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
+    id: options
+  } : options;
   const links = [];
   const scripts = [];
   const instance = (0, import_runtime.getInstance)();
@@ -136,7 +138,9 @@ function collectAssets(options) {
   ];
 }
 function MFReactComponent(props) {
-  const { loading = "loading...", id, fallback } = 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) {

package/dist/cjs/runtime/index.js

@@ -19,14 +19,17 @@ 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
 });
 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");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  LiveReload,
   MFReactComponent,
   collectAssets,
   ...require("@module-federation/enhanced/runtime")

package/dist/cjs/ssr-runtime/plugin.js

@@ -31,10 +31,9 @@ __export(plugin_exports, {
   mfPluginSSR: () => mfPluginSSR
 });
 module.exports = __toCommonJS(plugin_exports);
-const mfPluginSSR = ({ name }) => ({
+const mfPluginSSR = () => ({
   name: "@module-federation/modern-js",
   setup: () => {
-    let mfDevServer;
     return {
       async init({ context }, next) {
         if (typeof window !== "undefined") {
@@ -42,26 +41,13 @@ const mfPluginSSR = ({ name }) => ({
             context
           });
         }
-        const devServer = await Promise.resolve().then(() => __toESM(require("@module-federation/dts-plugin/server")));
-        if (name) {
-          mfDevServer = new devServer.ModuleFederationDevServer({
-            name: `${name}-server`,
-            remotes: [],
-            updateCallback: async () => {
-            },
-            remoteTypeTarPath: ""
-          });
-        }
+        globalThis.shouldUpdate = false;
         const nodeUtils = await Promise.resolve().then(() => __toESM(require("@module-federation/node/utils")));
         const shouldUpdate = await nodeUtils.revalidate();
         if (shouldUpdate) {
           console.log("should RELOAD", shouldUpdate);
           await nodeUtils.flushChunks();
-          mfDevServer && mfDevServer.update({
-            updateKind: devServer.UpdateKind.RELOAD_PAGE,
-            updateMode: devServer.UpdateMode.POSITIVE,
-            clientName: name
-          });
+          globalThis.shouldUpdate = true;
         }
         return next({
           context