@module-federation/modern-js 0.0.0-next-20240816090839 → 0.0.0-next-20240816102736

package/dist/cjs/cli/dataLoaderPlugin.js

@@ -0,0 +1,281 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dataLoaderPlugin_exports = {};
+__export(dataLoaderPlugin_exports, {
+  default: () => dataLoaderPlugin_default,
+  generateRoutes: () => import_ast.generateRoutes,
+  generateSlimRoutes: () => import_ast.generateSlimRoutes,
+  moduleFederationDataLoaderPlugin: () => moduleFederationDataLoaderPlugin
+});
+module.exports = __toCommonJS(dataLoaderPlugin_exports);
+var import_path = __toESM(require("path"));
+var import_utils = require("@modern-js/utils");
+var import_utils2 = require("../runtime/utils");
+var import_constant = require("../constant");
+var import_constant2 = require("../runtime/constant");
+var import_ast = require("./ast");
+var import_constant3 = require("./constant");
+var import_utils3 = require("./utils");
+var import_SerializableRoutesPlugin = require("./bundler-plugins/SerializableRoutesPlugin");
+function generateExtraExposeFiles(options) {
+  const { routesFilePath, mfConfig, isServer, baseName } = options;
+  const outputDir = import_path.default.resolve(process.cwd(), "node_modules/.federation");
+  import_utils.fs.ensureDirSync(outputDir);
+  const addSuffix = (fileName) => {
+    if (!isServer) {
+      return `${fileName}.jsx`;
+    }
+    return `${fileName}.server.jsx`;
+  };
+  const routesFileContent = import_utils.fs.readFileSync(routesFilePath, "utf-8");
+  const outputSlimRoutesPath = import_path.default.resolve(outputDir, addSuffix(import_constant2.MF_SLIM_ROUTES));
+  const outputFullRoutesPath = import_path.default.resolve(outputDir, addSuffix(import_constant2.MF_FULL_ROUTES));
+  const outputRoutesMetaPath = import_path.default.resolve(outputDir, `${import_constant2.MF_ROUTES_META}.js`);
+  (0, import_ast.generateSlimRoutes)({
+    sourceCode: routesFileContent,
+    filePath: outputSlimRoutesPath,
+    prefix: (0, import_utils2.transformName2Prefix)(mfConfig.name),
+    baseName
+  });
+  (0, import_ast.generateRoutes)({
+    sourceCode: routesFileContent,
+    filePath: outputFullRoutesPath,
+    prefix: (0, import_utils2.transformName2Prefix)(mfConfig.name),
+    baseName
+  });
+  import_utils.fs.writeFileSync(outputRoutesMetaPath, `export const baseName = '${baseName}';`);
+  return {
+    outputSlimRoutesPath,
+    outputFullRoutesPath,
+    outputRoutesMetaPath
+  };
+}
+function addExpose(options) {
+  const { mfConfig } = options;
+  const { outputSlimRoutesPath, outputFullRoutesPath, outputRoutesMetaPath } = generateExtraExposeFiles(options);
+  const fullRoutesKey = `./${import_constant2.MF_FULL_ROUTES}`;
+  const slimRoutesKey = `./${import_constant2.MF_SLIM_ROUTES}`;
+  const routeMetaKey = `./${import_constant2.MF_ROUTES_META}`;
+  if (!mfConfig.exposes) {
+    mfConfig.exposes = {
+      [fullRoutesKey]: outputFullRoutesPath,
+      [slimRoutesKey]: outputSlimRoutesPath,
+      [routeMetaKey]: outputRoutesMetaPath
+    };
+  } else {
+    if (!Array.isArray(mfConfig.exposes)) {
+      if (!mfConfig.exposes[fullRoutesKey]) {
+        mfConfig.exposes[fullRoutesKey] = outputFullRoutesPath;
+      }
+      if (!mfConfig.exposes[slimRoutesKey]) {
+        mfConfig.exposes[slimRoutesKey] = outputSlimRoutesPath;
+      }
+      if (!mfConfig.exposes[routeMetaKey]) {
+        mfConfig.exposes[routeMetaKey] = outputRoutesMetaPath;
+      }
+    }
+  }
+}
+function addShared(options) {
+  const { metaName, mfConfig } = options;
+  const alias = `@${metaName}/runtime/router`;
+  if (!mfConfig.shared) {
+    mfConfig.shared = {
+      [alias]: {
+        singleton: true
+      }
+    };
+  } else {
+    if (!Array.isArray(mfConfig.shared)) {
+      mfConfig.shared[alias] = {
+        singleton: true
+      };
+    } else {
+      mfConfig.shared.push(alias);
+    }
+  }
+}
+function _pathMfConfig(options) {
+  addShared(options);
+  addExpose(options);
+}
+async function _fetchSSRByRouteIds(partialSSRRemotes, mfConfig, transformRuntimeFn) {
+  const partialMfConfig = {
+    name: mfConfig.name,
+    remotes: {
+      ...mfConfig.remotes
+    }
+  };
+  (0, import_utils3.replaceRemoteUrl)(partialMfConfig, "ipv4");
+  const runtimeInitOptions = transformRuntimeFn(partialMfConfig);
+  if (!runtimeInitOptions.remotes.length || !partialSSRRemotes.length) {
+    return void 0;
+  }
+  const remoteProviderRouteIds = /* @__PURE__ */ new Set();
+  const collectIds = (route) => {
+    remoteProviderRouteIds.add(route.id);
+    if (route.children) {
+      route.children.forEach((r) => {
+        collectIds(r);
+      });
+    }
+  };
+  await Promise.all(runtimeInitOptions.remotes.map(async (remote) => {
+    const entry = "entry" in remote ? remote.entry : "";
+    if (!entry) {
+      return void 0;
+    }
+    const ipv4 = (0, import_utils3.getIPV4)();
+    const url = new URL(entry);
+    const serializableRoutesUrl = url.href.replace(url.pathname, `/${import_SerializableRoutesPlugin.SERIALIZABLE_ROUTES}`).replace("localhost", ipv4);
+    const serializableRoutesRet = await fetch(serializableRoutesUrl);
+    const serializableRoutes = await serializableRoutesRet.json();
+    serializableRoutes.forEach((serializableRoute) => {
+      collectIds(serializableRoute);
+    });
+  }));
+  return [
+    ...remoteProviderRouteIds
+  ];
+}
+function _transformRuntimeOptions(buildOptions) {
+  const remotes = buildOptions.remotes || {};
+  const runtimeRemotes = Object.entries(remotes).map((remote) => {
+    const [_alias, nameAndEntry] = remote;
+    const [name, entry] = nameAndEntry.split("@");
+    return {
+      name,
+      entry
+    };
+  });
+  return {
+    name: buildOptions.name,
+    remotes: runtimeRemotes
+  };
+}
+const moduleFederationDataLoaderPlugin = (enable, internalOptions, userConfig) => ({
+  name: "@modern-js/plugin-module-federation-data-loader",
+  pre: [
+    "@modern-js/plugin-module-federation-config"
+  ],
+  post: [
+    "@modern-js/plugin-router",
+    "@modern-js/plugin-module-federation"
+  ],
+  setup: async ({ useConfigContext, useAppContext }) => {
+    var _modernjsConfig_server, _internalOptions_csrConfig;
+    if (!enable) {
+      return;
+    }
+    const { baseName, partialSSRRemotes = [], fetchSSRByRouteIds, patchMFConfig, metaName = import_constant3.META_NAME, serverPlugin = "@module-federation/modern-js/data-loader-server", transformRuntimeOptions } = userConfig;
+    if (!baseName) {
+      throw new Error(`${import_constant.PLUGIN_IDENTIFIER} 'baseName' is required if you enable 'dataLoader'!`);
+    }
+    const modernjsConfig = useConfigContext();
+    const appContext = useAppContext();
+    const enableSSR = Boolean(modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
+    const name = (_internalOptions_csrConfig = internalOptions.csrConfig) === null || _internalOptions_csrConfig === void 0 ? void 0 : _internalOptions_csrConfig.name;
+    const routesFilePath = import_path.default.resolve(appContext.internalDirectory.replace(import_constant3.META_NAME, metaName || import_constant3.META_NAME), `./main/${import_constant3.MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME}`);
+    const transformRuntimeFn = transformRuntimeOptions || _transformRuntimeOptions;
+    return {
+      _internalRuntimePlugins: ({ entrypoint, plugins }) => {
+        plugins.push({
+          name: "ssrDataLoader",
+          path: "@module-federation/modern-js/data-loader",
+          config: {}
+        });
+        return {
+          entrypoint,
+          plugins
+        };
+      },
+      _internalServerPlugins({ plugins }) {
+        plugins.push({
+          name: serverPlugin,
+          options: transformRuntimeFn(internalOptions.csrConfig)
+        });
+        return {
+          plugins
+        };
+      },
+      config: async () => {
+        const fetchFn = fetchSSRByRouteIds || _fetchSSRByRouteIds;
+        const ssrByRouteIds = await fetchFn(partialSSRRemotes, internalOptions.csrConfig, transformRuntimeFn);
+        const patchMFConfigFn = patchMFConfig || _pathMfConfig;
+        return {
+          server: {
+            ssrByRouteIds
+          },
+          tools: {
+            rspack(_config, { isServer }) {
+              patchMFConfigFn({
+                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                baseName,
+                metaName,
+                isServer,
+                routesFilePath
+              });
+            },
+            webpack(_config, { isServer }) {
+              patchMFConfigFn({
+                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                baseName,
+                metaName,
+                isServer,
+                routesFilePath
+              });
+            },
+            bundlerChain(chain, { isServer }) {
+              if (!isServer && internalOptions.csrConfig && Object.keys(internalOptions.csrConfig.exposes).length) {
+                chain.plugin("SerializableRoutesPlugin").use(import_SerializableRoutesPlugin.SerializableRoutesPlugin, [
+                  {
+                    routesFilePath,
+                    prefix: (0, import_utils2.transformName2Prefix)(internalOptions.csrConfig.name)
+                  }
+                ]);
+              }
+            }
+          },
+          source: {
+            define: {
+              MODERN_ROUTER_ID_PREFIX: JSON.stringify((0, import_utils2.transformName2Prefix)(name))
+            }
+          }
+        };
+      }
+    };
+  }
+});
+var dataLoaderPlugin_default = moduleFederationDataLoaderPlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateRoutes,
+  generateSlimRoutes,
+  moduleFederationDataLoaderPlugin
+});

package/dist/cjs/cli/index.js

@@ -27,6 +27,7 @@ var import_enhanced = require("@module-federation/enhanced");
 var import_rspack = require("@module-federation/enhanced/rspack");
 var import_configPlugin = require("./configPlugin");
 var import_ssrPlugin = require("./ssrPlugin");
+var import_dataLoaderPlugin = require("./dataLoaderPlugin");
 var import_enhanced2 = require("@module-federation/enhanced");
 const moduleFederationPlugin = (userConfig = {}) => {
   const internalModernPluginOptions = {
@@ -79,7 +80,11 @@ const moduleFederationPlugin = (userConfig = {}) => {
     },
     usePlugins: [
       (0, import_configPlugin.moduleFederationConfigPlugin)(internalModernPluginOptions),
-      (0, import_ssrPlugin.moduleFederationSSRPlugin)(internalModernPluginOptions)
+      (0, import_ssrPlugin.moduleFederationSSRPlugin)(internalModernPluginOptions),
+      (0, import_dataLoaderPlugin.moduleFederationDataLoaderPlugin)(Boolean(userConfig.dataLoader), internalModernPluginOptions, {
+        baseName: "",
+        ...userConfig.dataLoader
+      })
     ]
   };
 };

package/dist/cjs/cli/server/dataLoaderPlugin.js

@@ -0,0 +1,83 @@
+"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 dataLoaderPlugin_exports = {};
+__export(dataLoaderPlugin_exports, {
+  default: () => dataLoaderPlugin_default
+});
+module.exports = __toCommonJS(dataLoaderPlugin_exports);
+var import_runtime = require("@module-federation/enhanced/runtime");
+var import_constant = require("../../runtime/constant");
+async function getSlimRemotes(mfInstance) {
+  return await Promise.all(mfInstance.options.remotes.map(async (remote) => {
+    const { routes, baseName } = await mfInstance.loadRemote(`${remote.name}/${import_constant.MF_SLIM_ROUTES}`);
+    return {
+      routes,
+      baseName
+    };
+  }));
+}
+var dataLoaderPlugin_default = (mfRuntimeOptions) => ({
+  name: "MFDataLoaderServerPlugin",
+  pre: [
+    "@modern-js/plugin-inject-resource"
+  ],
+  setup(api) {
+    const { remotes, name } = mfRuntimeOptions;
+    if (!remotes.length) {
+      return {};
+    }
+    let isHandled = false;
+    return {
+      prepare() {
+        const { middlewares } = api.useAppContext();
+        middlewares.push({
+          name: "MFDataLoaderServerPlugin",
+          handler: async (c, next) => {
+            console.log("isHandled : ", isHandled);
+            const serverManifest = c.get("serverManifest");
+            const { loaderBundles, nestedRoutesJson } = serverManifest;
+            console.log("nestedRoutesJson: ", nestedRoutesJson);
+            console.log("loaderBundles.main.routes : ", loaderBundles.main.routes);
+            if (isHandled) {
+              await next();
+            } else {
+              const instance = (0, import_runtime.getInstance)() || (0, import_runtime.init)({
+                name,
+                remotes
+              });
+              const slimRoutes = await getSlimRemotes(instance);
+              slimRoutes.forEach((slimRoute) => {
+                const { routes, baseName } = slimRoute;
+                routes[0].path = `/${baseName}`;
+                loaderBundles.main.routes.push(...routes);
+                nestedRoutesJson.default.main.push(...routes);
+              });
+              console.log("push loaderBundles.main.routes done ");
+              isHandled = true;
+              await next();
+            }
+          },
+          before: [
+            "render"
+          ]
+        });
+      }
+    };
+  }
+});

package/dist/cjs/cli/ssrPlugin.js

@@ -35,9 +35,9 @@ __export(ssrPlugin_exports, {
 module.exports = __toCommonJS(ssrPlugin_exports);
 var import_path = __toESM(require("path"));
 var import_utils = require("@modern-js/utils");
-var import_webpack = require("@module-federation/enhanced/webpack");
+var import_enhanced = require("@module-federation/enhanced");
 var import_rspack = require("@module-federation/enhanced/rspack");
-var import_universe_entry_chunk_tracker_plugin = __toESM(require("@module-federation/node/universe-entry-chunk-tracker-plugin"));
+var import_node = require("@module-federation/node");
 var import_manifest = require("./manifest");
 var import_constant = require("./constant");
 function setEnv() {
@@ -101,7 +101,7 @@ const moduleFederationSSRPlugin = (userConfig) => ({
               if (isServer) {
                 if (!userConfig.nodePlugin) {
                   var _config_plugins;
-                  userConfig.nodePlugin = new import_webpack.ModuleFederationPlugin(userConfig.ssrConfig);
+                  userConfig.nodePlugin = new import_enhanced.ModuleFederationPlugin(userConfig.ssrConfig);
                   (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(userConfig.nodePlugin);
                 }
               } else {
@@ -141,7 +141,7 @@ const moduleFederationSSRPlugin = (userConfig) => ({
               if (isServer) {
                 chain.target("async-node");
                 if (import_constant.isDev) {
-                  chain.plugin("UniverseEntryChunkTrackerPlugin").use(import_universe_entry_chunk_tracker_plugin.default);
+                  chain.plugin("UniverseEntryChunkTrackerPlugin").use(import_node.UniverseEntryChunkTrackerPlugin);
                 }
               }
               if (import_constant.isDev && !isServer) {

package/dist/cjs/cli/utils.js

@@ -32,7 +32,8 @@ __export(utils_exports, {
   getMFConfig: () => getMFConfig,
   patchBundlerConfig: () => patchBundlerConfig,
   patchIgnoreWarning: () => patchIgnoreWarning,
-  patchMFConfig: () => patchMFConfig
+  patchMFConfig: () => patchMFConfig,
+  replaceRemoteUrl: () => replaceRemoteUrl
 });
 module.exports = __toCommonJS(utils_exports);
 var import_sdk = require("@module-federation/sdk");
@@ -329,5 +330,6 @@ function autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig) {
   getMFConfig,
   patchBundlerConfig,
   patchIgnoreWarning,
-  patchMFConfig
+  patchMFConfig,
+  replaceRemoteUrl
 });

package/dist/cjs/interfaces/route.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 route_exports = {};
+module.exports = __toCommonJS(route_exports);

package/dist/cjs/runtime/constant.js

@@ -0,0 +1,34 @@
+"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 constant_exports = {};
+__export(constant_exports, {
+  MF_FULL_ROUTES: () => MF_FULL_ROUTES,
+  MF_ROUTES_META: () => MF_ROUTES_META,
+  MF_SLIM_ROUTES: () => MF_SLIM_ROUTES
+});
+module.exports = __toCommonJS(constant_exports);
+const MF_SLIM_ROUTES = "mf-slim-routes";
+const MF_FULL_ROUTES = "mf-full-routes";
+const MF_ROUTES_META = "mf-routes-meta";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MF_FULL_ROUTES,
+  MF_ROUTES_META,
+  MF_SLIM_ROUTES
+});

package/dist/cjs/runtime/dataLoader.js

@@ -0,0 +1,87 @@
+"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 dataLoader_exports = {};
+__export(dataLoader_exports, {
+  ssrDataLoaderPlugin: () => ssrDataLoaderPlugin
+});
+module.exports = __toCommonJS(dataLoader_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_runtime = require("@module-federation/enhanced/runtime");
+var import_constant = require("./constant");
+globalThis.mfRemoteRoutes = globalThis.mfRemoteRoutes || [];
+var _globalThis_mfHasLoadedRemoteRoutes;
+globalThis.mfHasLoadedRemoteRoutes = (_globalThis_mfHasLoadedRemoteRoutes = globalThis.mfHasLoadedRemoteRoutes) !== null && _globalThis_mfHasLoadedRemoteRoutes !== void 0 ? _globalThis_mfHasLoadedRemoteRoutes : false;
+async function loadRoutes() {
+  var _getInstance;
+  if (globalThis.mfHasLoadedRemoteRoutes) {
+    return;
+  }
+  const remotes = (_getInstance = (0, import_runtime.getInstance)()) === null || _getInstance === void 0 ? void 0 : _getInstance.options.remotes;
+  if (!remotes) {
+    return;
+  }
+  const remoteModuleIds = remotes.map((remote) => {
+    return `${remote.name}/${import_constant.MF_FULL_ROUTES}`;
+  });
+  const traverse = (cRoutes, prefix) => {
+    cRoutes.forEach((i) => {
+      i.id = prefix + i.id;
+      const Comp = i.component;
+      i.element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, {});
+      if (i.children) {
+        traverse(i.children, prefix);
+      }
+    });
+  };
+  await Promise.all(remoteModuleIds.map(async (remoteModuleId) => {
+    const remoteName = remoteModuleId.split(`/${import_constant.MF_FULL_ROUTES}`)[0];
+    const { routes, baseName } = await (0, import_runtime.loadRemote)(remoteModuleId);
+    routes[0].path = `/${baseName}`;
+    routes[0].isRoot = false;
+    globalThis.mfRemoteRoutes.push(...routes);
+  }));
+  globalThis.mfHasLoadedRemoteRoutes = true;
+  return globalThis.mfRemoteRoutes;
+}
+const ssrDataLoaderPlugin = () => {
+  return {
+    name: "@modern-js/plugin-mf-data-loader",
+    post: [
+      "@modern-js/plugin-router"
+    ],
+    setup: () => {
+      return {
+        async beforeRender({ context }) {
+          console.log("init");
+          await loadRoutes();
+        },
+        modifyRoutes: (routes) => {
+          console.log("modifyRoutes");
+          routes.push(...globalThis.mfRemoteRoutes);
+          console.log("routes: ", routes);
+          return routes;
+        }
+      };
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ssrDataLoaderPlugin
+});

package/dist/cjs/runtime/index.js

@@ -19,13 +19,16 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var runtime_exports = {};
 __export(runtime_exports, {
-  createRemoteSSRComponent: () => import_createRemoteSSRComponent.createRemoteSSRComponent
+  createRemoteSSRComponent: () => import_createRemoteSSRComponent.createRemoteSSRComponent,
+  withMFRouteId: () => import_withMFRouteId.withMFRouteId
 });
 module.exports = __toCommonJS(runtime_exports);
 __reExport(runtime_exports, require("@module-federation/enhanced/runtime"), module.exports);
 var import_createRemoteSSRComponent = require("./createRemoteSSRComponent");
+var import_withMFRouteId = require("./withMFRouteId");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createRemoteSSRComponent,
+  withMFRouteId,
   ...require("@module-federation/enhanced/runtime")
 });

package/dist/cjs/runtime/utils.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 utils_exports = {};
+__export(utils_exports, {
+  transformName2Prefix: () => transformName2Prefix
+});
+module.exports = __toCommonJS(utils_exports);
+function transformName2Prefix(name) {
+  const NameTransformSymbol = {
+    AT: "@",
+    HYPHEN: "-",
+    SLASH: "/",
+    UNDERLINE: "_"
+  };
+  const NameTransformMap = {
+    [NameTransformSymbol.AT]: "SCOPE",
+    [NameTransformSymbol.HYPHEN]: "HYPHEN",
+    [NameTransformSymbol.SLASH]: "SLASH",
+    [NameTransformSymbol.UNDERLINE]: "UNDERLINE"
+  };
+  const SPLIT_SYMBOL = "@";
+  return `${name.replace(new RegExp(`${NameTransformSymbol.AT}`, "g"), NameTransformMap[NameTransformSymbol.AT]).replace(new RegExp(`${NameTransformSymbol.HYPHEN}`, "g"), NameTransformMap[NameTransformSymbol.HYPHEN]).replace(new RegExp(`${NameTransformSymbol.SLASH}`, "g"), NameTransformMap[NameTransformSymbol.SLASH]).replace(new RegExp(`${NameTransformSymbol.UNDERLINE}`, "g"), NameTransformMap[NameTransformSymbol.UNDERLINE])}${SPLIT_SYMBOL}`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  transformName2Prefix
+});

package/dist/cjs/runtime/withMFRouteId.js

@@ -0,0 +1,31 @@
+"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 withMFRouteId_exports = {};
+__export(withMFRouteId_exports, {
+  withMFRouteId: () => withMFRouteId
+});
+module.exports = __toCommonJS(withMFRouteId_exports);
+function withMFRouteId(id) {
+  const prefix = typeof MODERN_ROUTER_ID_PREFIX === "string" ? MODERN_ROUTER_ID_PREFIX : "";
+  return prefix + id;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withMFRouteId
+});