@module-federation/modern-js 0.0.0-next-20240819040425 → 0.0.0-next-20240820034939

package/dist/esm/cli/dataLoaderPlugin.js

@@ -0,0 +1,325 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import path from "path";
+import { fs } from "@modern-js/utils";
+import { transformName2Prefix } from "../runtime/utils";
+import { PLUGIN_IDENTIFIER } from "../constant";
+import { MF_FULL_ROUTES, MF_SLIM_ROUTES, MF_ROUTES_META } from "../runtime/constant";
+import { generateRoutes, generateSlimRoutes } from "./ast";
+import { MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME, META_NAME } from "./constant";
+import { getIPV4, replaceRemoteUrl } from "./utils";
+import { SerializableRoutesPlugin, SERIALIZABLE_ROUTES } from "./bundler-plugins/SerializableRoutesPlugin";
+function generateExtraExposeFiles(options) {
+  var routesFilePath = options.routesFilePath, mfConfig = options.mfConfig, isServer = options.isServer, baseName = options.baseName;
+  var outputDir = path.resolve(process.cwd(), "node_modules/.federation");
+  fs.ensureDirSync(outputDir);
+  var addSuffix = function(fileName) {
+    if (!isServer) {
+      return "".concat(fileName, ".jsx");
+    }
+    return "".concat(fileName, ".server.jsx");
+  };
+  var routesFileContent = fs.readFileSync(routesFilePath, "utf-8");
+  var outputSlimRoutesPath = path.resolve(outputDir, addSuffix(MF_SLIM_ROUTES));
+  var outputFullRoutesPath = path.resolve(outputDir, addSuffix(MF_FULL_ROUTES));
+  var outputRoutesMetaPath = path.resolve(outputDir, "".concat(MF_ROUTES_META, ".js"));
+  generateSlimRoutes({
+    sourceCode: routesFileContent,
+    filePath: outputSlimRoutesPath,
+    prefix: transformName2Prefix(mfConfig.name),
+    baseName
+  });
+  generateRoutes({
+    sourceCode: routesFileContent,
+    filePath: outputFullRoutesPath,
+    prefix: transformName2Prefix(mfConfig.name),
+    baseName
+  });
+  fs.writeFileSync(outputRoutesMetaPath, "export const baseName = '".concat(baseName, "';"));
+  return {
+    outputSlimRoutesPath,
+    outputFullRoutesPath,
+    outputRoutesMetaPath
+  };
+}
+function addExpose(options) {
+  var mfConfig = options.mfConfig;
+  var _generateExtraExposeFiles = generateExtraExposeFiles(options), outputSlimRoutesPath = _generateExtraExposeFiles.outputSlimRoutesPath, outputFullRoutesPath = _generateExtraExposeFiles.outputFullRoutesPath, outputRoutesMetaPath = _generateExtraExposeFiles.outputRoutesMetaPath;
+  var fullRoutesKey = "./".concat(MF_FULL_ROUTES);
+  var slimRoutesKey = "./".concat(MF_SLIM_ROUTES);
+  var routeMetaKey = "./".concat(MF_ROUTES_META);
+  if (!mfConfig.exposes) {
+    var _obj;
+    mfConfig.exposes = (_obj = {}, _define_property(_obj, fullRoutesKey, outputFullRoutesPath), _define_property(_obj, slimRoutesKey, outputSlimRoutesPath), _define_property(_obj, routeMetaKey, outputRoutesMetaPath), _obj);
+  } 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) {
+  var metaName = options.metaName, mfConfig = options.mfConfig;
+  var alias = "@".concat(metaName, "/runtime/router");
+  if (!mfConfig.shared) {
+    mfConfig.shared = _define_property({}, alias, {
+      singleton: true
+    });
+  } else {
+    if (!Array.isArray(mfConfig.shared)) {
+      mfConfig.shared[alias] = {
+        singleton: true
+      };
+    } else {
+      mfConfig.shared.push(alias);
+    }
+  }
+}
+function patchMfConfig(options) {
+  addShared(options);
+  addExpose(options);
+}
+function _fetchSSRByRouteIds(partialSSRRemotes, mfConfig, transformRuntimeFn) {
+  return __fetchSSRByRouteIds.apply(this, arguments);
+}
+function __fetchSSRByRouteIds() {
+  __fetchSSRByRouteIds = _async_to_generator(function(partialSSRRemotes, mfConfig, transformRuntimeFn) {
+    var partialMfConfig, runtimeInitOptions, remoteProviderRouteIds, collectIds;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          partialMfConfig = {
+            name: mfConfig.name,
+            remotes: _object_spread({}, mfConfig.remotes)
+          };
+          runtimeInitOptions = transformRuntimeFn(partialMfConfig);
+          replaceRemoteUrl(runtimeInitOptions, "ipv4");
+          if (!runtimeInitOptions.remotes.length || !partialSSRRemotes.length) {
+            return [
+              2,
+              void 0
+            ];
+          }
+          remoteProviderRouteIds = /* @__PURE__ */ new Set();
+          collectIds = function(route) {
+            remoteProviderRouteIds.add(route.id);
+            if (route.children) {
+              route.children.forEach(function(r) {
+                collectIds(r);
+              });
+            }
+          };
+          return [
+            4,
+            Promise.all(runtimeInitOptions.remotes.map(function() {
+              var _ref = _async_to_generator(function(remote) {
+                var entry, ipv4, url, serializableRoutesUrl, serializableRoutesRet, serializableRoutes;
+                return _ts_generator(this, function(_state2) {
+                  switch (_state2.label) {
+                    case 0:
+                      entry = "entry" in remote ? remote.entry : "";
+                      if (!entry) {
+                        return [
+                          2,
+                          void 0
+                        ];
+                      }
+                      ipv4 = getIPV4();
+                      url = new URL(entry);
+                      serializableRoutesUrl = url.href.replace(url.pathname, "/".concat(SERIALIZABLE_ROUTES)).replace("localhost", ipv4);
+                      return [
+                        4,
+                        fetch(serializableRoutesUrl)
+                      ];
+                    case 1:
+                      serializableRoutesRet = _state2.sent();
+                      return [
+                        4,
+                        serializableRoutesRet.json()
+                      ];
+                    case 2:
+                      serializableRoutes = _state2.sent();
+                      serializableRoutes.forEach(function(serializableRoute) {
+                        collectIds(serializableRoute);
+                      });
+                      return [
+                        2
+                      ];
+                  }
+                });
+              });
+              return function(remote) {
+                return _ref.apply(this, arguments);
+              };
+            }()))
+          ];
+        case 1:
+          _state.sent();
+          return [
+            2,
+            _to_consumable_array(remoteProviderRouteIds)
+          ];
+      }
+    });
+  });
+  return __fetchSSRByRouteIds.apply(this, arguments);
+}
+function _transformRuntimeOptions(buildOptions) {
+  var remotes = buildOptions.remotes || {};
+  var runtimeRemotes = Object.entries(remotes).map(function(remote) {
+    var _remote = _sliced_to_array(remote, 2), _alias = _remote[0], nameAndEntry = _remote[1];
+    var _nameAndEntry_split = _sliced_to_array(nameAndEntry.split("@"), 2), name = _nameAndEntry_split[0], entry = _nameAndEntry_split[1];
+    return {
+      name,
+      entry
+    };
+  });
+  return {
+    name: buildOptions.name,
+    remotes: runtimeRemotes
+  };
+}
+var moduleFederationDataLoaderPlugin = function(enable, internalOptions, userConfig) {
+  return {
+    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: function() {
+      var _ref = _async_to_generator(function(param) {
+        var useConfigContext, useAppContext, _modernjsConfig_server, _internalOptions_csrConfig, baseName, _userConfig_partialSSRRemotes, partialSSRRemotes, fetchSSRByRouteIds, _userConfig_metaName, metaName, _userConfig_serverPlugin, serverPlugin, transformRuntimeOptions, modernjsConfig, appContext, enableSSR, name, routesFilePath, transformRuntimeFn;
+        return _ts_generator(this, function(_state) {
+          useConfigContext = param.useConfigContext, useAppContext = param.useAppContext;
+          if (!enable) {
+            return [
+              2
+            ];
+          }
+          baseName = userConfig.baseName, _userConfig_partialSSRRemotes = userConfig.partialSSRRemotes, partialSSRRemotes = _userConfig_partialSSRRemotes === void 0 ? [] : _userConfig_partialSSRRemotes, fetchSSRByRouteIds = userConfig.fetchSSRByRouteIds, _userConfig_metaName = userConfig.metaName, metaName = _userConfig_metaName === void 0 ? META_NAME : _userConfig_metaName, _userConfig_serverPlugin = userConfig.serverPlugin, serverPlugin = _userConfig_serverPlugin === void 0 ? "@module-federation/modern-js/data-loader-server" : _userConfig_serverPlugin, transformRuntimeOptions = userConfig.transformRuntimeOptions;
+          if (!baseName) {
+            throw new Error("".concat(PLUGIN_IDENTIFIER, " 'baseName' is required if you enable 'dataLoader'!"));
+          }
+          modernjsConfig = useConfigContext();
+          appContext = useAppContext();
+          enableSSR = Boolean(modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);
+          name = (_internalOptions_csrConfig = internalOptions.csrConfig) === null || _internalOptions_csrConfig === void 0 ? void 0 : _internalOptions_csrConfig.name;
+          routesFilePath = path.resolve(appContext.internalDirectory.replace(META_NAME, metaName || META_NAME), "./main/".concat(MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME));
+          transformRuntimeFn = transformRuntimeOptions || _transformRuntimeOptions;
+          return [
+            2,
+            {
+              _internalRuntimePlugins: function(param2) {
+                var entrypoint = param2.entrypoint, plugins = param2.plugins;
+                plugins.push({
+                  name: "ssrDataLoader",
+                  path: "@module-federation/modern-js/data-loader",
+                  config: {}
+                });
+                return {
+                  entrypoint,
+                  plugins
+                };
+              },
+              _internalServerPlugins: function _internalServerPlugins(param2) {
+                var plugins = param2.plugins;
+                plugins.push({
+                  name: serverPlugin,
+                  options: transformRuntimeFn(internalOptions.csrConfig)
+                });
+                return {
+                  plugins
+                };
+              },
+              config: /* @__PURE__ */ _async_to_generator(function() {
+                var fetchFn, ssrByRouteIds;
+                return _ts_generator(this, function(_state2) {
+                  switch (_state2.label) {
+                    case 0:
+                      fetchFn = fetchSSRByRouteIds || _fetchSSRByRouteIds;
+                      return [
+                        4,
+                        fetchFn(partialSSRRemotes, internalOptions.csrConfig, transformRuntimeFn)
+                      ];
+                    case 1:
+                      ssrByRouteIds = _state2.sent();
+                      return [
+                        2,
+                        {
+                          server: {
+                            ssrByRouteIds
+                          },
+                          tools: {
+                            rspack: function rspack(_config, param2) {
+                              var isServer = param2.isServer;
+                              patchMfConfig({
+                                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                                baseName,
+                                metaName,
+                                isServer,
+                                routesFilePath
+                              });
+                            },
+                            webpack: function webpack(_config, param2) {
+                              var isServer = param2.isServer;
+                              patchMfConfig({
+                                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                                baseName,
+                                metaName,
+                                isServer,
+                                routesFilePath
+                              });
+                            },
+                            bundlerChain: function bundlerChain(chain, param2) {
+                              var isServer = param2.isServer;
+                              if (!isServer && internalOptions.csrConfig && Object.keys(internalOptions.csrConfig.exposes).length) {
+                                chain.plugin("SerializableRoutesPlugin").use(SerializableRoutesPlugin, [
+                                  {
+                                    routesFilePath,
+                                    prefix: transformName2Prefix(internalOptions.csrConfig.name)
+                                  }
+                                ]);
+                              }
+                            }
+                          },
+                          source: {
+                            define: {
+                              MODERN_ROUTER_ID_PREFIX: JSON.stringify(transformName2Prefix(name))
+                            }
+                          }
+                        }
+                      ];
+                  }
+                });
+              })
+            }
+          ];
+        });
+      });
+      return function(_) {
+        return _ref.apply(this, arguments);
+      };
+    }()
+  };
+};
+var dataLoaderPlugin_default = moduleFederationDataLoaderPlugin;
+export {
+  dataLoaderPlugin_default as default,
+  generateRoutes,
+  generateSlimRoutes,
+  moduleFederationDataLoaderPlugin
+};

package/dist/esm/cli/index.js

@@ -1,9 +1,11 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryPlugin } from "@module-federation/enhanced";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import { moduleFederationConfigPlugin } from "./configPlugin";
 import { moduleFederationSSRPlugin } from "./ssrPlugin";
+import { moduleFederationDataLoaderPlugin } from "./dataLoaderPlugin";
 var moduleFederationPlugin = function() {
   var userConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   var internalModernPluginOptions = {
@@ -79,7 +81,10 @@ var moduleFederationPlugin = function() {
     }(),
     usePlugins: [
       moduleFederationConfigPlugin(internalModernPluginOptions),
-      moduleFederationSSRPlugin(internalModernPluginOptions)
+      moduleFederationSSRPlugin(internalModernPluginOptions),
+      moduleFederationDataLoaderPlugin(Boolean(userConfig.dataLoader), internalModernPluginOptions, _object_spread({
+        baseName: ""
+      }, userConfig.dataLoader))
     ]
   };
 };

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

@@ -0,0 +1,146 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { getInstance, init } from "@module-federation/enhanced/runtime";
+import { MF_SLIM_ROUTES } from "../../runtime/constant";
+function getSlimRemotes(mfInstance) {
+  return _getSlimRemotes.apply(this, arguments);
+}
+function _getSlimRemotes() {
+  _getSlimRemotes = _async_to_generator(function(mfInstance) {
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          return [
+            4,
+            Promise.all(mfInstance.options.remotes.map(function() {
+              var _ref = _async_to_generator(function(remote) {
+                var _ref2, routes, baseName;
+                return _ts_generator(this, function(_state2) {
+                  switch (_state2.label) {
+                    case 0:
+                      return [
+                        4,
+                        mfInstance.loadRemote("".concat(remote.name, "/").concat(MF_SLIM_ROUTES))
+                      ];
+                    case 1:
+                      _ref2 = _state2.sent(), routes = _ref2.routes, baseName = _ref2.baseName;
+                      return [
+                        2,
+                        {
+                          routes,
+                          baseName
+                        }
+                      ];
+                  }
+                });
+              });
+              return function(remote) {
+                return _ref.apply(this, arguments);
+              };
+            }()))
+          ];
+        case 1:
+          return [
+            2,
+            _state.sent()
+          ];
+      }
+    });
+  });
+  return _getSlimRemotes.apply(this, arguments);
+}
+function dataLoaderPlugin_default(mfRuntimeOptions) {
+  return {
+    name: "MFDataLoaderServerPlugin",
+    pre: [
+      "@modern-js/plugin-inject-resource"
+    ],
+    setup: function setup(api) {
+      var remotes = mfRuntimeOptions.remotes, name = mfRuntimeOptions.name;
+      if (!remotes.length) {
+        return {};
+      }
+      var isHandled = false;
+      return {
+        prepare: function prepare() {
+          var middlewares = api.useAppContext().middlewares;
+          middlewares.push({
+            name: "MFDataLoaderServerPlugin",
+            handler: function() {
+              var _ref = _async_to_generator(function(c, next) {
+                var serverManifest, loaderBundles, nestedRoutesJson, instance, slimRoutes;
+                return _ts_generator(this, function(_state) {
+                  switch (_state.label) {
+                    case 0:
+                      console.log("isHandled : ", isHandled);
+                      serverManifest = c.get("serverManifest");
+                      loaderBundles = serverManifest.loaderBundles, nestedRoutesJson = serverManifest.nestedRoutesJson;
+                      console.log("nestedRoutesJson: ", nestedRoutesJson);
+                      console.log("loaderBundles.main.routes : ", loaderBundles.main.routes);
+                      if (!isHandled)
+                        return [
+                          3,
+                          2
+                        ];
+                      return [
+                        4,
+                        next()
+                      ];
+                    case 1:
+                      _state.sent();
+                      return [
+                        3,
+                        5
+                      ];
+                    case 2:
+                      instance = getInstance() || init({
+                        name,
+                        remotes
+                      });
+                      return [
+                        4,
+                        getSlimRemotes(instance)
+                      ];
+                    case 3:
+                      slimRoutes = _state.sent();
+                      slimRoutes.forEach(function(slimRoute) {
+                        var _loaderBundles_main_routes, _nestedRoutesJson_default_main;
+                        var routes = slimRoute.routes, baseName = slimRoute.baseName;
+                        routes[0].path = "/".concat(baseName);
+                        (_loaderBundles_main_routes = loaderBundles.main.routes).push.apply(_loaderBundles_main_routes, _to_consumable_array(routes));
+                        (_nestedRoutesJson_default_main = nestedRoutesJson.default.main).push.apply(_nestedRoutesJson_default_main, _to_consumable_array(routes));
+                      });
+                      console.log("push loaderBundles.main.routes done ");
+                      isHandled = true;
+                      return [
+                        4,
+                        next()
+                      ];
+                    case 4:
+                      _state.sent();
+                      _state.label = 5;
+                    case 5:
+                      return [
+                        2
+                      ];
+                  }
+                });
+              });
+              return function(c, next) {
+                return _ref.apply(this, arguments);
+              };
+            }(),
+            before: [
+              "render"
+            ]
+          });
+        }
+      };
+    }
+  };
+}
+;
+export {
+  dataLoaderPlugin_default as default
+};

package/dist/esm/cli/ssrPlugin.js

@@ -2,9 +2,9 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import path from "path";
 import { fs } from "@modern-js/utils";
-import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
+import { ModuleFederationPlugin } from "@module-federation/enhanced";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
-import UniverseEntryChunkTrackerPlugin from "@module-federation/node/universe-entry-chunk-tracker-plugin";
+import { UniverseEntryChunkTrackerPlugin } from "@module-federation/node";
 import { updateStatsAndManifest } from "./manifest";
 import { isDev } from "./constant";
 function setEnv() {

package/dist/esm/cli/utils.js

@@ -79,7 +79,9 @@ var replaceRemoteUrl = function(mfConfig, remoteIpStrategy) {
       if (typeof remoteObject === "string") {
         return;
       }
-      handleRemoteObject(remoteObject);
+      if ("entry" in remoteObject && typeof remoteObject.entry === "string") {
+        remoteObject.entry = remoteObject.entry.replace(LOCALHOST, ipv4);
+      }
     });
   } else if (typeof mfConfig.remotes !== "string") {
     handleRemoteObject(mfConfig.remotes);
@@ -339,5 +341,6 @@ export {
   getMFConfig,
   patchBundlerConfig,
   patchIgnoreWarning,
-  patchMFConfig
+  patchMFConfig,
+  replaceRemoteUrl
 };

package/dist/esm/runtime/constant.js

@@ -0,0 +1,8 @@
+var MF_SLIM_ROUTES = "mf-slim-routes";
+var MF_FULL_ROUTES = "mf-full-routes";
+var MF_ROUTES_META = "mf-routes-meta";
+export {
+  MF_FULL_ROUTES,
+  MF_ROUTES_META,
+  MF_SLIM_ROUTES
+};

package/dist/esm/runtime/dataLoader.js

@@ -0,0 +1,125 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getInstance, loadRemote } from "@module-federation/enhanced/runtime";
+import { MF_FULL_ROUTES } from "./constant";
+globalThis.mfRemoteRoutes = globalThis.mfRemoteRoutes || [];
+var _globalThis_mfHasLoadedRemoteRoutes;
+globalThis.mfHasLoadedRemoteRoutes = (_globalThis_mfHasLoadedRemoteRoutes = globalThis.mfHasLoadedRemoteRoutes) !== null && _globalThis_mfHasLoadedRemoteRoutes !== void 0 ? _globalThis_mfHasLoadedRemoteRoutes : false;
+function loadRoutes() {
+  return _loadRoutes.apply(this, arguments);
+}
+function _loadRoutes() {
+  _loadRoutes = _async_to_generator(function() {
+    var _getInstance, remotes, remoteModuleIds, traverse;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          if (globalThis.mfHasLoadedRemoteRoutes) {
+            return [
+              2
+            ];
+          }
+          remotes = (_getInstance = getInstance()) === null || _getInstance === void 0 ? void 0 : _getInstance.options.remotes;
+          if (!remotes) {
+            return [
+              2
+            ];
+          }
+          remoteModuleIds = remotes.map(function(remote) {
+            return "".concat(remote.name, "/").concat(MF_FULL_ROUTES);
+          });
+          traverse = function(cRoutes, prefix) {
+            cRoutes.forEach(function(i) {
+              i.id = prefix + i.id;
+              var Comp = i.component;
+              i.element = /* @__PURE__ */ _jsx(Comp, {});
+              if (i.children) {
+                traverse(i.children, prefix);
+              }
+            });
+          };
+          return [
+            4,
+            Promise.all(remoteModuleIds.map(function() {
+              var _ref = _async_to_generator(function(remoteModuleId) {
+                var _globalThis_mfRemoteRoutes, remoteName, _ref2, routes, baseName;
+                return _ts_generator(this, function(_state2) {
+                  switch (_state2.label) {
+                    case 0:
+                      remoteName = remoteModuleId.split("/".concat(MF_FULL_ROUTES))[0];
+                      return [
+                        4,
+                        loadRemote(remoteModuleId)
+                      ];
+                    case 1:
+                      _ref2 = _state2.sent(), routes = _ref2.routes, baseName = _ref2.baseName;
+                      routes[0].path = "/".concat(baseName);
+                      routes[0].isRoot = false;
+                      (_globalThis_mfRemoteRoutes = globalThis.mfRemoteRoutes).push.apply(_globalThis_mfRemoteRoutes, _to_consumable_array(routes));
+                      return [
+                        2
+                      ];
+                  }
+                });
+              });
+              return function(remoteModuleId) {
+                return _ref.apply(this, arguments);
+              };
+            }()))
+          ];
+        case 1:
+          _state.sent();
+          globalThis.mfHasLoadedRemoteRoutes = true;
+          return [
+            2,
+            globalThis.mfRemoteRoutes
+          ];
+      }
+    });
+  });
+  return _loadRoutes.apply(this, arguments);
+}
+var ssrDataLoaderPlugin = function() {
+  return {
+    name: "@modern-js/plugin-mf-data-loader",
+    post: [
+      "@modern-js/plugin-router"
+    ],
+    setup: function() {
+      return {
+        beforeRender: function beforeRender(param) {
+          var context = param.context;
+          return _async_to_generator(function() {
+            return _ts_generator(this, function(_state) {
+              switch (_state.label) {
+                case 0:
+                  console.log("init");
+                  return [
+                    4,
+                    loadRoutes()
+                  ];
+                case 1:
+                  _state.sent();
+                  return [
+                    2
+                  ];
+              }
+            });
+          })();
+        },
+        modifyRoutes: function(routes) {
+          var _routes;
+          console.log("modifyRoutes");
+          (_routes = routes).push.apply(_routes, _to_consumable_array(globalThis.mfRemoteRoutes));
+          console.log("routes: ", routes);
+          return routes;
+        }
+      };
+    }
+  };
+};
+export {
+  ssrDataLoaderPlugin
+};

package/dist/esm/runtime/index.js

@@ -1,5 +1,7 @@
 export * from "@module-federation/enhanced/runtime";
 import { createRemoteSSRComponent } from "./createRemoteSSRComponent";
+import { withMFRouteId } from "./withMFRouteId";
 export {
-  createRemoteSSRComponent
+  createRemoteSSRComponent,
+  withMFRouteId
 };