@module-federation/modern-js 0.14.1 → 0.14.3

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

@@ -0,0 +1,181 @@
+import path from "path";
+import fs from "fs-extra";
+import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
+import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
+import UniverseEntryChunkTrackerPlugin from "@module-federation/node/universe-entry-chunk-tracker-plugin";
+import { updateStatsAndManifest } from "./manifest";
+import { isDev } from "./constant";
+import logger from "./logger";
+import { isWebTarget, skipByTarget } from "./utils";
+function setEnv() {
+  process.env["MF_DISABLE_EMIT_STATS"] = "true";
+  process.env["MF_SSR_PRJ"] = "true";
+}
+const CHAIN_MF_PLUGIN_ID = "plugin-module-federation-server";
+const mfSSRRsbuildPlugin = (pluginOptions) => {
+  return {
+    name: "@modern-js/plugin-mf-post-config",
+    pre: [
+      "@modern-js/builder-plugin-ssr"
+    ],
+    setup(api) {
+      if (pluginOptions.csrConfig.getPublicPath) {
+        return;
+      }
+      let csrOutputPath = "";
+      let ssrOutputPath = "";
+      let ssrEnv = "";
+      api.modifyEnvironmentConfig((config, { name }) => {
+        const target = config.output.target;
+        if (skipByTarget(target)) {
+          return config;
+        }
+        if (isWebTarget(target)) {
+          csrOutputPath = config.output.distPath.root;
+        } else {
+          ssrOutputPath = config.output.distPath.root;
+          ssrEnv = name;
+        }
+        return config;
+      });
+      const modifySSRPublicPath = (config, utils) => {
+        if (ssrEnv !== utils.environment.name) {
+          return config;
+        }
+        const userSSRConfig = pluginOptions.userConfig.ssr ? typeof pluginOptions.userConfig.ssr === "object" ? pluginOptions.userConfig.ssr : {} : {};
+        if (userSSRConfig.distOutputDir) {
+          return;
+        }
+        config.output.publicPath = `${config.output.publicPath}${path.relative(csrOutputPath, ssrOutputPath)}/`;
+        return config;
+      };
+      api.modifyWebpackConfig((config, utils) => {
+        modifySSRPublicPath(config, utils);
+        return config;
+      });
+      api.modifyRspackConfig((config, utils) => {
+        modifySSRPublicPath(config, utils);
+        return config;
+      });
+    }
+  };
+};
+const moduleFederationSSRPlugin = (pluginOptions) => ({
+  name: "@modern-js/plugin-module-federation-ssr",
+  pre: [
+    "@modern-js/plugin-module-federation-config",
+    "@modern-js/plugin-module-federation"
+  ],
+  setup: async (api) => {
+    var _pluginOptions_userConfig, _modernjsConfig_server;
+    const modernjsConfig = api.getConfig();
+    var _pluginOptions_userConfig_ssr;
+    const enableSSR = (_pluginOptions_userConfig_ssr = (_pluginOptions_userConfig = pluginOptions.userConfig) === null || _pluginOptions_userConfig === void 0 ? void 0 : _pluginOptions_userConfig.ssr) !== null && _pluginOptions_userConfig_ssr !== void 0 ? _pluginOptions_userConfig_ssr : Boolean(modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
+    if (!enableSSR) {
+      return;
+    }
+    setEnv();
+    api._internalRuntimePlugins(({ entrypoint, plugins }) => {
+      if (!isDev) {
+        return {
+          entrypoint,
+          plugins
+        };
+      }
+      plugins.push({
+        name: "mfSSR",
+        path: "@module-federation/modern-js/ssr-runtime",
+        config: {}
+      });
+      return {
+        entrypoint,
+        plugins
+      };
+    });
+    api.modifyBundlerChain((chain) => {
+      const target = chain.get("target");
+      if (skipByTarget(target)) {
+        return;
+      }
+      const bundlerType = api.getAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
+      const MFPlugin = bundlerType === "webpack" ? ModuleFederationPlugin : RspackModuleFederationPlugin;
+      const isWeb = isWebTarget(target);
+      if (!isWeb) {
+        if (!chain.plugins.has(CHAIN_MF_PLUGIN_ID)) {
+          chain.plugin(CHAIN_MF_PLUGIN_ID).use(MFPlugin, [
+            pluginOptions.ssrConfig
+          ]).init((Plugin, args) => {
+            pluginOptions.nodePlugin = new Plugin(args[0]);
+            return pluginOptions.nodePlugin;
+          });
+        }
+      }
+      if (!isWeb) {
+        chain.target("async-node");
+        if (isDev) {
+          chain.plugin("UniverseEntryChunkTrackerPlugin").use(UniverseEntryChunkTrackerPlugin);
+        }
+        const userSSRConfig = pluginOptions.userConfig.ssr ? typeof pluginOptions.userConfig.ssr === "object" ? pluginOptions.userConfig.ssr : {} : {};
+        const publicPath = chain.output.get("publicPath");
+        if (userSSRConfig.distOutputDir && publicPath) {
+          chain.output.publicPath(`${publicPath}${userSSRConfig.distOutputDir}/`);
+        }
+      }
+      if (isDev && isWeb) {
+        chain.externals({
+          "@module-federation/node/utils": "NOT_USED_IN_BROWSER"
+        });
+      }
+    });
+    api.config(() => {
+      return {
+        builderPlugins: [
+          mfSSRRsbuildPlugin(pluginOptions)
+        ],
+        tools: {
+          devServer: {
+            before: [
+              (req, res, next) => {
+                if (!enableSSR) {
+                  next();
+                  return;
+                }
+                try {
+                  var _req_url, _req_url1;
+                  if (((_req_url = req.url) === null || _req_url === void 0 ? void 0 : _req_url.includes(".json")) && !((_req_url1 = req.url) === null || _req_url1 === void 0 ? void 0 : _req_url1.includes("hot-update"))) {
+                    const filepath = path.join(process.cwd(), `dist${req.url}`);
+                    fs.statSync(filepath);
+                    res.setHeader("Access-Control-Allow-Origin", "*");
+                    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS");
+                    res.setHeader("Access-Control-Allow-Headers", "*");
+                    fs.createReadStream(filepath).pipe(res);
+                  } else {
+                    next();
+                  }
+                } catch (err) {
+                  logger.debug(err);
+                  next();
+                }
+              }
+            ]
+          }
+        }
+      };
+    });
+    api.onAfterBuild(() => {
+      const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions;
+      updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir);
+    });
+    api.onDevCompileDone(() => {
+      const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions;
+      updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir);
+    });
+  }
+});
+var ssrPlugin_default = moduleFederationSSRPlugin;
+export {
+  CHAIN_MF_PLUGIN_ID,
+  ssrPlugin_default as default,
+  moduleFederationSSRPlugin,
+  setEnv
+};

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

@@ -0,0 +1,49 @@
+import os from "os";
+const localIpv4 = "127.0.0.1";
+const getIpv4Interfaces = () => {
+  try {
+    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 ipv4Interfaces;
+  } catch (_err) {
+    return [];
+  }
+};
+const getIPV4 = () => {
+  const ipv4Interfaces = getIpv4Interfaces();
+  const ipv4Interface = ipv4Interfaces[0] || {
+    address: localIpv4
+  };
+  return ipv4Interface.address;
+};
+const isWebTarget = (target) => {
+  const WEB_TARGET = "web";
+  if (Array.isArray(target)) {
+    return target.includes(WEB_TARGET);
+  } else if (typeof target === "string") {
+    return target === WEB_TARGET;
+  }
+  return false;
+};
+const skipByTarget = (target) => {
+  const IGNORE_TARGET = "webworker";
+  if (Array.isArray(target)) {
+    return target.includes(IGNORE_TARGET);
+  } else if (typeof target === "string") {
+    return target === IGNORE_TARGET;
+  }
+  return false;
+};
+export {
+  getIPV4,
+  isWebTarget,
+  skipByTarget
+};

package/dist/esm-node/constant.js

@@ -0,0 +1,6 @@
+const LOCALHOST = "localhost";
+const PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
+export {
+  LOCALHOST,
+  PLUGIN_IDENTIFIER
+};

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

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+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) {
+    return;
+  }
+  const module = instance.moduleCache.get(name);
+  if (!module) {
+    return;
+  }
+  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo);
+  return {
+    ...module.remoteInfo,
+    snapshot: remoteSnapshot,
+    expose
+  };
+}
+function getTargetModuleInfo(id) {
+  const instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  const loadedRemoteInfo = getLoadedRemoteInfos(instance, id);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  const snapshot = loadedRemoteInfo.snapshot;
+  if (!snapshot) {
+    return;
+  }
+  const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
+  if (!publicPath) {
+    return;
+  }
+  const modules = "modules" in snapshot ? snapshot.modules : [];
+  const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
+  if (!targetModule) {
+    return;
+  }
+  const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectSSRAssets(options) {
+  const { id, injectLink = true, injectScript = true } = typeof options === "string" ? {
+    id: options
+  } : options;
+  const links = [];
+  const scripts = [];
+  const instance = getInstance();
+  if (!instance || !injectLink && !injectScript) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return [
+      ...scripts,
+      ...links
+    ];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
+    [
+      ...targetModule.assets.css.sync,
+      ...targetModule.assets.css.async
+    ].forEach((file, index) => {
+      links.push(/* @__PURE__ */ _jsx("link", {
+        href: `${publicPath}${file}`,
+        rel: "stylesheet",
+        type: "text/css"
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ _jsx("script", {
+      async: true,
+      src: `${publicPath}${remoteEntry}`,
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    [
+      ...targetModule.assets.js.sync
+    ].forEach((file, index) => {
+      scripts.push(/* @__PURE__ */ _jsx("script", {
+        async: true,
+        src: `${publicPath}${file}`,
+        crossOrigin: "anonymous"
+      }, `${file.split(".")[0]}_${index}`));
+    });
+  }
+  return [
+    ...scripts,
+    ...links
+  ];
+}
+function createRemoteSSRComponent(info) {
+  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
+      });
+      const Com = m[exportName];
+      if (exportName in m && typeof Com === "function") {
+        return {
+          default: (props) => /* @__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 (props) => {
+    const { key, ...args } = props;
+    return /* @__PURE__ */ _jsx(ErrorBoundary, {
+      FallbackComponent: info.fallback,
+      children: /* @__PURE__ */ _jsx(React.Suspense, {
+        fallback: info.loading,
+        children: /* @__PURE__ */ _jsx(LazyComponent, {
+          ...args
+        })
+      })
+    });
+  };
+}
+export {
+  collectSSRAssets,
+  createRemoteSSRComponent
+};

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

@@ -0,0 +1,12 @@
+export * from "@module-federation/enhanced/runtime";
+const kit = {
+  get createRemoteSSRComponent() {
+    return require("./createRemoteSSRComponent").createRemoteSSRComponent;
+  },
+  get collectSSRAssets() {
+    return require("./createRemoteSSRComponent").collectSSRAssets;
+  }
+};
+export {
+  kit
+};

package/dist/esm-node/server/fileCache.js

@@ -0,0 +1,49 @@
+import fs from "fs-extra";
+import { LRUCache } from "lru-cache";
+class FileCache {
+  /**
+  * Check if file exists and return file info
+  * @param filepath Path to the file
+  * @returns FileResult or null if file doesn't exist
+  */
+  async getFile(filepath) {
+    if (!await fs.pathExists(filepath)) {
+      return null;
+    }
+    try {
+      const stat = await fs.lstat(filepath);
+      const currentModified = stat.mtimeMs;
+      const cachedEntry = this.cache.get(filepath);
+      if (cachedEntry && currentModified <= cachedEntry.lastModified) {
+        return {
+          content: cachedEntry.content,
+          lastModified: cachedEntry.lastModified
+        };
+      }
+      const content = await fs.readFile(filepath, "utf-8");
+      const newEntry = {
+        content,
+        lastModified: currentModified
+      };
+      this.cache.set(filepath, newEntry, {
+        size: stat.size || content.length
+      });
+      return {
+        content,
+        lastModified: currentModified
+      };
+    } catch (err) {
+      return null;
+    }
+  }
+  constructor() {
+    this.cache = new LRUCache({
+      maxSize: 200 * 1024 * 1024
+    });
+  }
+}
+const fileCache = new FileCache();
+export {
+  FileCache,
+  fileCache
+};

package/dist/esm-node/server/fileCache.spec.js

@@ -0,0 +1,27 @@
+import { it, expect, describe, vi, beforeAll } from "vitest";
+import { FileCache } from "./fileCache";
+beforeAll(() => {
+  vi.mock("fs-extra", () => ({
+    default: {
+      pathExists: () => {
+        return true;
+      },
+      lstat: () => {
+        return {
+          mtimeMs: Date.now(),
+          size: 4
+        };
+      },
+      readFile: () => {
+        return "test";
+      }
+    }
+  }));
+});
+describe("modern serve static file cache", async () => {
+  it("should cache file", async () => {
+    const cache = new FileCache();
+    const result = await cache.getFile("test.txt");
+    expect(result === null || result === void 0 ? void 0 : result.content).toBe("test");
+  });
+});

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

@@ -0,0 +1,34 @@
+import { createStaticMiddleware } from "./staticMiddleware";
+const staticServePlugin = () => ({
+  name: "@modern-js/module-federation/server",
+  setup: (api) => {
+    api.onPrepare(() => {
+      var _config_output, _config_server;
+      console.log(process.env.NODE_ENV);
+      if (process.env.NODE_ENV === "development") {
+        return;
+      }
+      const { middlewares } = api.getServerContext();
+      const config = api.getServerConfig();
+      const assetPrefix = ((_config_output = config.output) === null || _config_output === void 0 ? void 0 : _config_output.assetPrefix) || "";
+      if (!((_config_server = config.server) === null || _config_server === void 0 ? void 0 : _config_server.ssr)) {
+        return;
+      }
+      const context = api.getServerContext();
+      const pwd = context.distDirectory;
+      const serverStaticMiddleware = createStaticMiddleware({
+        assetPrefix,
+        pwd
+      });
+      middlewares.push({
+        name: "module-federation-serve-manifest",
+        handler: serverStaticMiddleware
+      });
+    });
+  }
+});
+var server_default = staticServePlugin;
+export {
+  server_default as default,
+  staticServePlugin
+};

package/dist/esm-node/server/staticMiddleware.js

@@ -0,0 +1,43 @@
+import fs from "fs-extra";
+import path from "node:path";
+import { fileCache } from "./fileCache";
+const bundlesAssetPrefix = "/bundles";
+const removeHost = (url) => {
+  try {
+    const hasProtocol = url.includes("://");
+    const hasDomain = hasProtocol || url.startsWith("//");
+    const pathname = hasDomain ? new URL(hasProtocol ? url : `http:${url}`).pathname : url;
+    return pathname;
+  } catch (e) {
+    return url;
+  }
+};
+const createStaticMiddleware = (options) => {
+  const { assetPrefix, pwd } = options;
+  return async (c, next) => {
+    const pathname = c.req.path;
+    if (path.extname(pathname) !== ".js") {
+      return next();
+    }
+    const prefixWithoutHost = removeHost(assetPrefix);
+    const prefixWithBundle = path.join(prefixWithoutHost, bundlesAssetPrefix);
+    if (!pathname.startsWith(prefixWithBundle)) {
+      return next();
+    }
+    const pathnameWithoutPrefix = pathname.replace(prefixWithBundle, "");
+    const filepath = path.join(pwd, bundlesAssetPrefix, pathnameWithoutPrefix);
+    if (!await fs.pathExists(filepath)) {
+      return next();
+    }
+    const fileResult = await fileCache.getFile(filepath);
+    if (!fileResult) {
+      return next();
+    }
+    c.header("Content-Type", "application/javascript");
+    c.header("Content-Length", String(fileResult.content.length));
+    return c.body(fileResult.content, 200);
+  };
+};
+export {
+  createStaticMiddleware
+};