@module-federation/modern-js 0.0.0-next-20241016083243 → 0.0.0-next-20241017090853

package/dist/esm/runtime/{dataLoader → routes}/plugin-inject-assets.js

@@ -14,9 +14,9 @@ function traverseRoutes(routes, remoteNames) {
 var ssrDataLoaderInjectAssetsPlugin = function(param) {
   var metaName = param.metaName;
   return {
-    name: "@modern-js/plugin-mf-data-loader-inject-assets",
+    name: "@modern-js/plugin-mf-routes-inject-assets",
     pre: [
-      "@modern-js/plugin-mf-data-loader"
+      "@modern-js/plugin-mf-routes"
     ],
     post: [
       "@module-federation/modern-js",
@@ -24,7 +24,7 @@ var ssrDataLoaderInjectAssetsPlugin = function(param) {
     ],
     setup: function() {
       return {
-        wrapRoot: function wrapRoot(App) {
+        wrapRoot: function wrapRoot() {
           var AppWrapper = function(props) {
             var instance = getInstance();
             if (!instance || !instance.options.remotes.length) {

package/dist/esm/runtime/{dataLoader → routes}/plugin.js

@@ -6,7 +6,7 @@ import { injectRemoteRoutes } from "./utils";
 var ssrDataLoaderPlugin = function(param) {
   var metaName = param.metaName, dataLoaderRemotes = param.dataLoaderRemotes;
   return {
-    name: "@modern-js/plugin-mf-data-loader",
+    name: "@modern-js/plugin-mf-routes",
     post: [
       "@".concat(metaName, "/plugin-router"),
       "@module-federation/modern-js"

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

@@ -2,7 +2,7 @@ import { ModuleFederationPlugin as WebpackModuleFederationPlugin, AsyncBoundaryP
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import { moduleFederationConfigPlugin } from "./configPlugin";
 import { moduleFederationSSRPlugin } from "./ssrPlugin";
-import { moduleFederationDataLoaderPlugin } from "./dataLoader/plugin";
+import { moduleFederationRoutesPlugin } from "./routes/plugin";
 const moduleFederationPlugin = (userConfig = {}) => {
   const internalModernPluginOptions = {
     csrConfig: void 0,
@@ -11,7 +11,7 @@ const moduleFederationPlugin = (userConfig = {}) => {
     nodePlugin: void 0,
     distOutputDir: "",
     originPluginOptions: userConfig,
-    remoteIpStrategy: userConfig === null || userConfig === void 0 ? void 0 : userConfig.remoteIpStrategy
+    remoteIpStrategy: void 0
   };
   return {
     name: "@modern-js/plugin-module-federation",
@@ -55,8 +55,9 @@ const moduleFederationPlugin = (userConfig = {}) => {
     usePlugins: [
       moduleFederationConfigPlugin(internalModernPluginOptions),
       moduleFederationSSRPlugin(internalModernPluginOptions),
-      moduleFederationDataLoaderPlugin(Boolean(userConfig.dataLoader), internalModernPluginOptions, {
-        ...typeof userConfig.dataLoader === "boolean" ? {} : userConfig.dataLoader
+      moduleFederationRoutesPlugin({
+        userConfig,
+        internalOptions: internalModernPluginOptions
       })
     ]
   };

package/dist/esm-node/cli/routes/exportRoutePlugin.js

@@ -0,0 +1,53 @@
+import { META_NAME } from "../../constant";
+import { addExpose } from "./utils";
+const moduleFederationExportRoutePlugin = ({ userConfig, internalOptions, entries }) => ({
+  name: "@modern-js/plugin-module-federation-export-routes",
+  pre: [
+    "@modern-js/plugin-module-federation-route"
+  ],
+  post: [
+    "@modern-js/plugin-router",
+    "@modern-js/plugin-module-federation"
+  ],
+  setup: async ({ useAppContext }) => {
+    if (!userConfig.exportRoutes) {
+      return;
+    }
+    const appContext = useAppContext();
+    const { metaName = META_NAME } = internalOptions;
+    const internalDirectory = appContext.internalDirectory.replace(META_NAME, metaName || META_NAME);
+    return {
+      config: async () => {
+        return {
+          tools: {
+            // bundlerChain can not keep target order
+            rspack(_config, { isServer }) {
+              addExpose({
+                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                metaName,
+                isServer,
+                internalDirectory,
+                entries
+              });
+            },
+            // bundlerChain can not keep target order
+            webpack(_config, { isServer }) {
+              addExpose({
+                mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                metaName,
+                isServer,
+                internalDirectory,
+                entries
+              });
+            }
+          }
+        };
+      }
+    };
+  }
+});
+var exportRoutePlugin_default = moduleFederationExportRoutePlugin;
+export {
+  exportRoutePlugin_default as default,
+  moduleFederationExportRoutePlugin
+};

package/dist/esm-node/cli/routes/importRoutesPlugin.js

@@ -0,0 +1,96 @@
+import { META_NAME } from "../../constant";
+import { clearMFCache } from "./clearMFCache";
+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,
+      alias
+    };
+  });
+  return {
+    name: buildOptions.name,
+    remotes: runtimeRemotes
+  };
+}
+const moduleFederationImportRoutePlugin = ({ userConfig, internalOptions, remotePathMap, serverPlugin = "@module-federation/modern-js/fetch-router-server-plugin", ssrByRouteIdsMap, transformRuntimeOptions }) => ({
+  name: "@modern-js/plugin-module-federation-import-routes",
+  pre: [
+    "@modern-js/plugin-module-federation-route"
+  ],
+  post: [
+    "@modern-js/plugin-router",
+    "@modern-js/plugin-module-federation"
+  ],
+  setup: async () => {
+    if (!userConfig.importRoutes) {
+      return;
+    }
+    const { metaName = META_NAME } = internalOptions;
+    const transformRuntimeFn = transformRuntimeOptions || _transformRuntimeOptions;
+    const dataLoaderRemotes = [
+      ...new Set(Object.values(remotePathMap).map((i) => i.name))
+    ];
+    const serverPluginOptions = {
+      runtimeOptions: transformRuntimeFn(internalOptions.csrConfig),
+      dataLoaderRemotes,
+      ssrByRouteIdsMap
+    };
+    const hasDataLoaderRemotes = () => Boolean(serverPluginOptions.dataLoaderRemotes.length);
+    return {
+      _internalRuntimePlugins: ({ entrypoint, plugins }) => {
+        if (!hasDataLoaderRemotes()) {
+          return {
+            entrypoint,
+            plugins
+          };
+        }
+        plugins.push({
+          name: "ssrDataLoader",
+          path: "@module-federation/modern-js/routes",
+          config: {
+            metaName,
+            dataLoaderRemotes
+          }
+        });
+        plugins.push({
+          name: "ssrDataLoaderInjectAssets",
+          path: "@module-federation/modern-js/routes-inject-assets",
+          config: {
+            metaName,
+            dataLoaderRemotes
+          }
+        });
+        return {
+          entrypoint,
+          plugins
+        };
+      },
+      _internalServerPlugins({ plugins }) {
+        if (!hasDataLoaderRemotes()) {
+          return {
+            plugins
+          };
+        }
+        plugins.push({
+          name: serverPlugin,
+          options: serverPluginOptions
+        });
+        return {
+          plugins
+        };
+      },
+      async afterDev() {
+        clearMFCache();
+      }
+    };
+  }
+});
+var importRoutesPlugin_default = moduleFederationImportRoutePlugin;
+export {
+  importRoutesPlugin_default as default,
+  moduleFederationImportRoutePlugin
+};

package/dist/esm-node/cli/routes/plugin.js

@@ -0,0 +1,121 @@
+import path from "path";
+import { fs } from "@modern-js/utils";
+import { transformName2Prefix } from "../../runtime/routes/utils";
+import { META_NAME } from "../../constant";
+import { traverseRouteFiles } from "./traverseRouteFiles";
+import { moduleFederationExportRoutePlugin } from "./exportRoutePlugin";
+import { moduleFederationImportRoutePlugin } from "./importRoutesPlugin";
+import { addShared } from "./utils";
+import { DEFAULT_ENTRY, ROUTE_ID } from "../../constant";
+const moduleFederationRoutesPlugin = ({ userConfig, internalOptions }) => {
+  const entries = /* @__PURE__ */ new Set();
+  const remotePathMap = {};
+  const ssrByRouteIdsMap = {};
+  const internalRoutesPluginOptions = {
+    userConfig,
+    internalOptions,
+    entries,
+    remotePathMap,
+    ssrByRouteIdsMap
+  };
+  return {
+    name: "@modern-js/plugin-module-federation-route",
+    pre: [
+      "@modern-js/plugin-module-federation-config"
+    ],
+    setup: async ({ useAppContext }) => {
+      if (!userConfig.exportRoutes && !userConfig.importRoutes) {
+        return;
+      }
+      const appContext = useAppContext();
+      const name = internalOptions.csrConfig.name;
+      const { metaName = META_NAME } = internalOptions;
+      const internalDirectory = appContext.internalDirectory.replace(META_NAME, metaName || META_NAME);
+      const csrConfig = internalOptions.csrConfig;
+      if (typeof csrConfig.remotes === "object" && Object.keys(csrConfig.remotes).length) {
+        const { entries: scanEntries } = await traverseRouteFiles({
+          appDirectory: appContext.appDirectory,
+          generateRouteFile: userConfig.importRoutes,
+          remotePathMap
+        });
+        scanEntries.forEach((e) => entries.add(e));
+      } else {
+        entries.add(DEFAULT_ENTRY);
+      }
+      return {
+        config: async () => {
+          return {
+            tools: {
+              // bundlerChain can not keep target order
+              rspack(_config, { isServer }) {
+                addShared({
+                  mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                  metaName,
+                  isServer,
+                  internalDirectory,
+                  entries
+                });
+              },
+              // bundlerChain can not keep target order
+              webpack(_config, { isServer }) {
+                addShared({
+                  mfConfig: isServer ? internalOptions.ssrConfig : internalOptions.csrConfig,
+                  metaName,
+                  isServer,
+                  internalDirectory,
+                  entries
+                });
+              }
+            },
+            source: {
+              define: {
+                MODERN_ROUTER_ID_PREFIX: JSON.stringify(transformName2Prefix(name))
+              }
+            }
+          };
+        },
+        async modifyFileSystemRoutes(options) {
+          const { routes, entrypoint } = options;
+          const { entryName } = entrypoint;
+          const prefix = transformName2Prefix(internalOptions.csrConfig.name);
+          const modifyRouteIds = async (route, pathName) => {
+            const currentPathName = route.path ? path.join("/", pathName, route.path) : pathName;
+            if (route.id) {
+              const originalId = route.id;
+              route.originalId = originalId;
+              const remoteInfo = remotePathMap[currentPathName];
+              if (remoteInfo) {
+                const { path: path2, name: name2 } = remoteInfo;
+                const remoteIdPrefix = transformName2Prefix(name2);
+                const isLayout = Boolean(route.children);
+                const newId = `${remoteIdPrefix}${isLayout ? "layout" : "page"}`;
+                ssrByRouteIdsMap[originalId] = newId;
+                const content = fs.readFileSync(path2, "utf-8");
+                await fs.writeFile(path2, content.replace(ROUTE_ID, originalId));
+                route.id = newId;
+              } else {
+                route.id = `${prefix}${route.id}`;
+              }
+              route.children && await Promise.all(route.children.map(async (r) => {
+                return await modifyRouteIds(r, currentPathName);
+              }));
+            }
+          };
+          await Promise.all(routes.map(async (route) => {
+            await modifyRouteIds(route, entryName === DEFAULT_ENTRY ? "" : entryName);
+          }));
+          return options;
+        }
+      };
+    },
+    usePlugins: [
+      moduleFederationExportRoutePlugin(internalRoutesPluginOptions),
+      moduleFederationImportRoutePlugin(internalRoutesPluginOptions)
+    ]
+  };
+};
+var plugin_default = moduleFederationRoutesPlugin;
+export {
+  plugin_default as default,
+  moduleFederationRoutesPlugin
+};

package/dist/esm-node/cli/{dataLoader/generateRouteFile.js → routes/traverseRouteFiles.js}

@@ -2,7 +2,7 @@ import { fs, normalizeToPosixPath } from "@modern-js/utils";
 import path from "path";
 import os from "os";
 import { DEFAULT_ENTRY, MF_JSON, ROUTE_ID } from "../../constant";
-import { getRemoteLayoutId } from "../../runtime/dataLoader/utils";
+import { getRemoteLayoutId } from "../../runtime/routes/utils";
 const ROUTES = "routes";
 function calcPathName(filePath, rootDir, entry) {
   const relativePath = path.relative(rootDir, filePath);
@@ -31,10 +31,9 @@ function calcPathName(filePath, rootDir, entry) {
   }, []);
   return path.join("/", entry, splitPaths.filter((p) => !!p).join("/"));
 }
-async function generateRouteFile(options) {
-  const { appDirectory } = options;
+async function traverseRouteFiles(options) {
+  const { appDirectory, generateRouteFile, remotePathMap } = options;
   const entries = [];
-  const remotePathMap = {};
   const srcPath = `${appDirectory}/src`;
   const traverse = async (filepath, rootDir, entry) => {
     if (!await fs.pathExists(filepath)) {
@@ -88,7 +87,9 @@ async function generateRouteFile(options) {
       const entry = path.relative(srcPath, dir);
       entries.push(entry);
       const rootDir = `${dir}/${ROUTES}`;
-      await traverse(rootDir, rootDir, entry);
+      if (generateRouteFile) {
+        await traverse(rootDir, rootDir, entry);
+      }
     } else {
       await Promise.all(items.map(async (item) => {
         await traverseRoutes(path.join(dir, item), level++);
@@ -103,11 +104,10 @@ async function generateRouteFile(options) {
     return entry;
   });
   return {
-    entries: normalizedEntries,
-    remotePathMap
+    entries: normalizedEntries
   };
 }
 export {
   calcPathName,
-  generateRouteFile
+  traverseRouteFiles
 };

package/dist/esm-node/cli/{dataLoader/patchMFConfig.js → routes/utils.js}

@@ -76,7 +76,8 @@ function addExpose(options) {
   });
 }
 function addShared(options) {
-  const { metaName, mfConfig } = options;
+  const { mfConfig } = options;
+  const styledComponents = `styled-components`;
   const reactRouterDom = `react-router-dom`;
   const reactRouterDomServer = `react-router-dom/server`;
   if (!mfConfig.shared) {
@@ -86,6 +87,9 @@ function addShared(options) {
       },
       [reactRouterDomServer]: {
         singleton: true
+      },
+      [styledComponents]: {
+        singleton: true
       }
     };
   } else {
@@ -96,6 +100,9 @@ function addShared(options) {
       mfConfig.shared[reactRouterDomServer] = {
         singleton: true
       };
+      mfConfig.shared[styledComponents] = {
+        singleton: true
+      };
     } else {
       mfConfig.shared = mfConfig.shared.reduce((sum, cur) => {
         if (typeof cur === "string") {
@@ -114,13 +121,13 @@ function addShared(options) {
       mfConfig.shared[reactRouterDomServer] = {
         singleton: true
       };
+      mfConfig.shared[styledComponents] = {
+        singleton: true
+      };
     }
   }
 }
-function patchMFConfig(options) {
-  addShared(options);
-  addExpose(options);
-}
 export {
-  patchMFConfig
+  addExpose,
+  addShared
 };

package/dist/esm-node/cli/server/{dataLoaderPlugin.js → fetchRoutePlugin.js}

@@ -1,10 +1,10 @@
 import { init } from "@module-federation/enhanced/runtime";
 import { isBrowserEnv } from "@module-federation/sdk";
 import { fetchRemoteFullRoutesMap, getSSRByRouteIds } from "./fetchRemoteFullRoutesMap";
-import { injectRemoteRoutes } from "../../runtime/dataLoader/utils";
+import { injectRemoteRoutes } from "../../runtime/routes/utils";
 import { MF_ROUTES, DEFAULT_ENTRY, MODERN_JS_ROUTE_SERVER_LOADER } from "../../constant";
-var dataLoaderPlugin_default = ({ runtimeOptions, dataLoaderRemotes, ssrByRouteIdsMap }) => ({
-  name: "MFDataLoaderServerPlugin",
+var fetchRoutePlugin_default = ({ runtimeOptions, dataLoaderRemotes, ssrByRouteIdsMap }) => ({
+  name: "@module-federation/modern-js-fetch-route",
   pre: [
     "@modern-js/plugin-inject-resource"
   ],
@@ -57,5 +57,5 @@ var dataLoaderPlugin_default = ({ runtimeOptions, dataLoaderRemotes, ssrByRouteI
   }
 });
 export {
-  dataLoaderPlugin_default as default
+  fetchRoutePlugin_default as default
 };

package/dist/esm-node/runtime/{dataLoader → routes}/plugin-inject-assets.js

@@ -12,9 +12,9 @@ function traverseRoutes(routes, remoteNames) {
 }
 const ssrDataLoaderInjectAssetsPlugin = ({ metaName }) => {
   return {
-    name: "@modern-js/plugin-mf-data-loader-inject-assets",
+    name: "@modern-js/plugin-mf-routes-inject-assets",
     pre: [
-      "@modern-js/plugin-mf-data-loader"
+      "@modern-js/plugin-mf-routes"
     ],
     post: [
       "@module-federation/modern-js",
@@ -22,7 +22,7 @@ const ssrDataLoaderInjectAssetsPlugin = ({ metaName }) => {
     ],
     setup: () => {
       return {
-        wrapRoot(App) {
+        wrapRoot() {
           const AppWrapper = (props) => {
             const instance = getInstance();
             if (!instance || !instance.options.remotes.length) {

package/dist/esm-node/runtime/{dataLoader → routes}/plugin.js

@@ -3,7 +3,7 @@ import { MF_ROUTES, DEFAULT_ENTRY } from "../../constant";
 import { injectRemoteRoutes } from "./utils";
 const ssrDataLoaderPlugin = ({ metaName, dataLoaderRemotes }) => {
   return {
-    name: "@modern-js/plugin-mf-data-loader",
+    name: "@modern-js/plugin-mf-routes",
     post: [
       `@${metaName}/plugin-router`,
       "@module-federation/modern-js"

package/dist/types/cli/routes/exportRoutePlugin.d.ts

@@ -0,0 +1,4 @@
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+import type { InternalRoutesPluginOptions } from '../../types/routes';
+export declare const moduleFederationExportRoutePlugin: ({ userConfig, internalOptions, entries, }: InternalRoutesPluginOptions) => CliPlugin<AppTools>;
+export default moduleFederationExportRoutePlugin;

package/dist/types/cli/routes/importRoutesPlugin.d.ts

@@ -0,0 +1,4 @@
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+import type { InternalRoutesPluginOptions } from '../../types/routes';
+export declare const moduleFederationImportRoutePlugin: ({ userConfig, internalOptions, remotePathMap, serverPlugin, ssrByRouteIdsMap, transformRuntimeOptions, }: InternalRoutesPluginOptions) => CliPlugin<AppTools>;
+export default moduleFederationImportRoutePlugin;

package/dist/types/cli/routes/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+import type { RoutesPluginOptions } from '../../types/routes';
+export declare const moduleFederationRoutesPlugin: ({ userConfig, internalOptions, }: RoutesPluginOptions) => CliPlugin<AppTools>;
+export default moduleFederationRoutesPlugin;

package/dist/types/cli/{dataLoader/generateRouteFile.d.ts → routes/traverseRouteFiles.d.ts}

@@ -1,10 +1,11 @@
 export declare function calcPathName(filePath: string, rootDir: string, entry: string): string;
-export declare function generateRouteFile(options: {
+export declare function traverseRouteFiles(options: {
     appDirectory: string;
-}): Promise<{
-    entries: string[];
     remotePathMap: Record<string, {
         name: string;
         path: string;
     }>;
+    generateRouteFile?: boolean;
+}): Promise<{
+    entries: string[];
 }>;

package/dist/types/cli/{dataLoader/patchMFConfig.d.ts → routes/utils.d.ts}

@@ -6,5 +6,6 @@ type PatchMFConfigOptions = {
     internalDirectory: string;
     entries: Set<string>;
 };
-export declare function patchMFConfig(options: PatchMFConfigOptions): void;
+export declare function addExpose(options: PatchMFConfigOptions): void;
+export declare function addShared(options: PatchMFConfigOptions): void;
 export {};

package/dist/types/cli/server/{dataLoaderPlugin.d.ts → fetchRoutePlugin.d.ts}

@@ -1,10 +1,10 @@
 import type { ServerPlugin } from '@modern-js/server-core';
 import { init } from '@module-federation/enhanced/runtime';
 type MFRuntimeOptions = Parameters<typeof init>[0];
-export type DataLoaderServerPluginOptions = {
+export type FetchRouteServerPluginOptions = {
     runtimeOptions: MFRuntimeOptions;
     dataLoaderRemotes: string[];
     ssrByRouteIdsMap: Record<string, string>;
 };
-declare const _default: ({ runtimeOptions, dataLoaderRemotes, ssrByRouteIdsMap, }: DataLoaderServerPluginOptions) => ServerPlugin;
+declare const _default: ({ runtimeOptions, dataLoaderRemotes, ssrByRouteIdsMap, }: FetchRouteServerPluginOptions) => ServerPlugin;
 export default _default;

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

@@ -1,12 +1,11 @@
 import { moduleFederationPlugin } from '@module-federation/sdk';
 import type { ModuleFederationPlugin as WebpackModuleFederationPlugin } from '@module-federation/enhanced';
 import type { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@module-federation/enhanced/rspack';
-import type { init } from '@module-federation/enhanced/runtime';
 export interface PluginOptions {
     config?: moduleFederationPlugin.ModuleFederationPluginOptions;
     configPath?: string;
-    remoteIpStrategy?: 'ipv4' | 'inherit';
-    dataLoader?: boolean | DataLoaderOptions;
+    exportRoutes?: boolean;
+    importRoutes?: boolean;
 }
 export interface InternalModernPluginOptions {
     metaName?: string;
@@ -19,8 +18,3 @@ export interface InternalModernPluginOptions {
     remoteIpStrategy?: 'ipv4' | 'inherit';
 }
 export type BundlerPlugin = WebpackModuleFederationPlugin | RspackModuleFederationPlugin;
-export type TransformRuntimeOptions = (mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions) => Parameters<typeof init>[0];
-export type DataLoaderOptions = {
-    serverPlugin?: string;
-    transformRuntimeOptions?: TransformRuntimeOptions;
-};

package/dist/types/types/routes.d.ts

@@ -0,0 +1,19 @@
+import { PluginOptions, InternalModernPluginOptions } from './index';
+import type { init } from '@module-federation/enhanced/runtime';
+import { moduleFederationPlugin } from '@module-federation/sdk';
+type TransformRuntimeOptions = (mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions) => Parameters<typeof init>[0];
+export type RoutesPluginOptions = {
+    userConfig: PluginOptions;
+    internalOptions: InternalModernPluginOptions;
+    serverPlugin?: string;
+    transformRuntimeOptions?: TransformRuntimeOptions;
+};
+export type InternalRoutesPluginOptions = {
+    entries: Set<string>;
+    remotePathMap: Record<string, {
+        name: string;
+        path: string;
+    }>;
+    ssrByRouteIdsMap: Record<string, string>;
+} & RoutesPluginOptions;
+export {};