@module-federation/modern-js 0.0.0-next-20240812114132 → 0.0.0-next-20240814073142

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,132 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+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 { getInstance, init } from "@module-federation/enhanced/runtime";
+import { MF_SLIM_ROUTES } from "../../runtime/constant";
+function dataLoaderPlugin_default(options) {
+  return {
+    name: "MFDataLoaderServerPlugin",
+    pre: [
+      "@modern-js/plugin-inject-resource"
+    ],
+    setup: function setup(api) {
+      var mfConfig = options.csrConfig;
+      var remotes = mfConfig.remotes;
+      if (!remotes || !Object.keys(remotes).length) {
+        return {};
+      }
+      var runtimeRemotes = Object.entries(remotes).map(function(item) {
+        var _item = _sliced_to_array(item, 2), _alias = _item[0], nameAndEntry = _item[1];
+        var _nameAndEntry_split = _sliced_to_array(nameAndEntry.split("@"), 2), name = _nameAndEntry_split[0], entry = _nameAndEntry_split[1];
+        return {
+          name,
+          entry
+        };
+      });
+      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, instance, slimRoutes;
+                return _ts_generator(this, function(_state) {
+                  switch (_state.label) {
+                    case 0:
+                      console.log("isHandled : ", isHandled);
+                      serverManifest = c.get("serverManifest");
+                      loaderBundles = serverManifest.loaderBundles;
+                      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: mfConfig.name,
+                        remotes: runtimeRemotes
+                      });
+                      return [
+                        4,
+                        Promise.all(runtimeRemotes.map(function() {
+                          var _ref2 = _async_to_generator(function(remote) {
+                            var _ref3, routes, baseName;
+                            return _ts_generator(this, function(_state2) {
+                              switch (_state2.label) {
+                                case 0:
+                                  return [
+                                    4,
+                                    instance.loadRemote("".concat(remote.name, "/").concat(MF_SLIM_ROUTES))
+                                  ];
+                                case 1:
+                                  _ref3 = _state2.sent(), routes = _ref3.routes, baseName = _ref3.baseName;
+                                  return [
+                                    2,
+                                    {
+                                      routes,
+                                      baseName
+                                    }
+                                  ];
+                              }
+                            });
+                          });
+                          return function(remote) {
+                            return _ref2.apply(this, arguments);
+                          };
+                        }()))
+                      ];
+                    case 3:
+                      slimRoutes = _state.sent();
+                      slimRoutes.forEach(function(slimRoute) {
+                        var _loaderBundles_main_routes;
+                        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));
+                      });
+                      console.log("loaderBundles.main.routes : ", loaderBundles.main.routes);
+                      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/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
 };

package/dist/esm/runtime/utils.js

@@ -0,0 +1,16 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+function transformName2Prefix(name) {
+  var NameTransformSymbol = {
+    AT: "@",
+    HYPHEN: "-",
+    SLASH: "/",
+    UNDERLINE: "_"
+  };
+  var _obj;
+  var NameTransformMap = (_obj = {}, _define_property(_obj, NameTransformSymbol.AT, "SCOPE"), _define_property(_obj, NameTransformSymbol.HYPHEN, "HYPHEN"), _define_property(_obj, NameTransformSymbol.SLASH, "SLASH"), _define_property(_obj, NameTransformSymbol.UNDERLINE, "UNDERLINE"), _obj);
+  var SPLIT_SYMBOL = "@";
+  return "".concat(name.replace(new RegExp("".concat(NameTransformSymbol.AT), "g"), NameTransformMap[NameTransformSymbol.AT]).replace(new RegExp("".concat(NameTransformSymbol.HYPHEN), "g"), NameTransformMap[NameTransformSymbol.HYPHEN]).replace(new RegExp("".concat(NameTransformSymbol.SLASH), "g"), NameTransformMap[NameTransformSymbol.SLASH]).replace(new RegExp("".concat(NameTransformSymbol.UNDERLINE), "g"), NameTransformMap[NameTransformSymbol.UNDERLINE])).concat(SPLIT_SYMBOL);
+}
+export {
+  transformName2Prefix
+};

package/dist/esm/runtime/withMFRouteId.js

@@ -0,0 +1,7 @@
+function withMFRouteId(id) {
+  var prefix = typeof MODERN_ROUTER_ID_PREFIX === "string" ? MODERN_ROUTER_ID_PREFIX : "";
+  return prefix + id;
+}
+export {
+  withMFRouteId
+};

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

@@ -4,24 +4,22 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { SSRLiveReload } from "./SSRLiveReload";
+console.log("mfSSRPlugin trigger");
 var mfSSRPlugin = function() {
   return {
     name: "@module-federation/modern-js",
     setup: function() {
       return {
-        init: function init(param, next) {
-          var context = param.context;
+        beforeRender: function beforeRender() {
           return _async_to_generator(function() {
             var nodeUtils, shouldUpdate;
             return _ts_generator(this, function(_state) {
               switch (_state.label) {
                 case 0:
+                  console.log(111, "beforeRender");
                   if (typeof window !== "undefined") {
                     return [
-                      2,
-                      next({
-                        context
-                      })
+                      2
                     ];
                   }
                   globalThis.shouldUpdate = false;
@@ -53,10 +51,7 @@ var mfSSRPlugin = function() {
                   _state.label = 4;
                 case 4:
                   return [
-                    2,
-                    next({
-                      context
-                    })
+                    2
                   ];
               }
             });

package/dist/esm-node/cli/ast/constant.js

@@ -0,0 +1,16 @@
+const IS_ROOT = "isRoot";
+const ID = "id";
+const COMPONENT = "component";
+const LAZY_COMPONENT = "lazyImport";
+const SHOULD_REVALIDATE = "shouldRevalidate";
+const PRIVATE_COMPONENT = "_component";
+const ELEMENT = "element";
+export {
+  COMPONENT,
+  ELEMENT,
+  ID,
+  IS_ROOT,
+  LAZY_COMPONENT,
+  PRIVATE_COMPONENT,
+  SHOULD_REVALIDATE
+};

package/dist/esm-node/cli/ast/generateRoutes.js

@@ -0,0 +1,106 @@
+import fs from "fs";
+import traverse from "@babel/traverse";
+import * as babelParser from "@babel/parser";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+function findTargetKeyNode(nodeProperties, key) {
+  return nodeProperties.find((p) => t.isObjectProperty(p) && t.isStringLiteral(p.key) && p.key.value === key);
+}
+function generateRoutes({ sourceCode, filePath, prefix, baseName }) {
+  const ast = babelParser.parse(sourceCode, {
+    sourceType: "module"
+  });
+  const lazyComponentDeclarations = [];
+  const componentDeclarations = [];
+  let componentId = 0;
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const source = path.node.source.value;
+      const routeIdMatch = source.match(/routeId=([^&]+)/);
+      if (routeIdMatch) {
+        const originalRouteId = routeIdMatch[1];
+        const newRouteId = `${prefix}${originalRouteId}`;
+        const newSource = source.replace(/routeId=[^&]+/, `routeId=${newRouteId}`);
+        path.node.source = t.stringLiteral(newSource);
+      }
+    },
+    ObjectExpression(path) {
+      let componentName = "";
+      let lazyComponentName = "";
+      if (!Array.isArray(path.node.properties)) {
+        return;
+      }
+      const idNode = findTargetKeyNode(path.node.properties, "id");
+      if (idNode && t.isObjectProperty(idNode) && t.isStringLiteral(idNode.value)) {
+        idNode.value = t.stringLiteral(`${prefix}${idNode.value.value}`);
+      }
+      const isRootNode = findTargetKeyNode(path.node.properties, "isRoot");
+      if (isRootNode && t.isObjectProperty(isRootNode) && t.isBooleanLiteral(isRootNode.value)) {
+        isRootNode.value.value = false;
+      }
+      if (!isRootNode) {
+        const lazyComponentNode = findTargetKeyNode(path.node.properties, "lazyImport");
+        if (lazyComponentNode && t.isObjectProperty(lazyComponentNode) && t.isArrowFunctionExpression(lazyComponentNode.value)) {
+          lazyComponentName = `LazyComponent_${componentId}`;
+          const lazyDeclaration = t.variableDeclaration("const", [
+            t.variableDeclarator(t.identifier(lazyComponentName), lazyComponentNode.value)
+          ]);
+          lazyComponentNode.value = t.identifier(lazyComponentName);
+          const componentNode2 = findTargetKeyNode(path.node.properties, "component");
+          if (componentNode2 && t.isObjectProperty(componentNode2) && t.isCallExpression(componentNode2.value) && t.isIdentifier(componentNode2.value.callee)) {
+            componentNode2.value = t.callExpression(t.identifier("lazy"), [
+              t.identifier(lazyComponentName)
+            ]);
+          }
+          lazyComponentDeclarations.push(lazyDeclaration);
+        }
+      }
+      const componentNode = findTargetKeyNode(path.node.properties, "component");
+      if (componentNode && t.isObjectProperty(componentNode) && t.isCallExpression(componentNode.value) && t.isIdentifier(componentNode.value.callee)) {
+        componentName = `Component_${componentId}`;
+        const componentDeclaration = t.variableDeclaration("const", [
+          t.variableDeclarator(t.identifier(componentName), lazyComponentName ? t.callExpression(t.identifier("lazy"), [
+            t.identifier(lazyComponentName)
+          ]) : componentNode.value)
+        ]);
+        componentDeclarations.push(componentDeclaration);
+        componentNode.value = t.identifier(componentName);
+      }
+      if (lazyComponentName || componentName) {
+        componentId++;
+        if (componentName) {
+          const upperFirstName = componentName.slice(0, 1).toUpperCase() + componentName.slice(1);
+          const jsxElement = t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier(upperFirstName), [], true), null, [], true);
+          path.node.properties.push(t.objectProperty(t.identifier("element"), jsxElement));
+        }
+      }
+    }
+  });
+  traverse(ast, {
+    Program(path) {
+      const lastImportIndex = path.get("body").reduce((lastIndex, p, index) => {
+        if (t.isImportDeclaration(p.node)) {
+          lastIndex = index;
+        }
+        return lastIndex;
+      }, -1);
+      if (lastImportIndex >= 0) {
+        const lastImport = path.get(`body.${lastImportIndex}`);
+        [
+          ...componentDeclarations,
+          ...lazyComponentDeclarations
+        ].forEach((declaration) => {
+          if ("insertAfter" in lastImport) {
+            lastImport.insertAfter(declaration);
+          }
+        });
+      }
+    }
+  });
+  const { code: newCode } = generate(ast);
+  const finalCode = `${newCode}export const baseName = '${baseName}';`;
+  fs.writeFileSync(filePath, finalCode);
+}
+export {
+  generateRoutes
+};

package/dist/esm-node/cli/ast/generateSlimRoutes.js

@@ -0,0 +1,72 @@
+import fs from "fs";
+import traverse from "@babel/traverse";
+import * as babelParser from "@babel/parser";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+import { COMPONENT, ID, SHOULD_REVALIDATE, LAZY_COMPONENT, PRIVATE_COMPONENT } from "./constant";
+function generateSlimRoutes({ sourceCode, filePath, prefix, baseName }) {
+  const ast = babelParser.parse(sourceCode, {
+    sourceType: "module"
+  });
+  const removedKeys = [
+    COMPONENT,
+    SHOULD_REVALIDATE,
+    LAZY_COMPONENT,
+    PRIVATE_COMPONENT
+  ];
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const source = path.node.source.value;
+      const routeIdMatch = source.match(/routeId=([^&]+)/);
+      if (routeIdMatch) {
+        const originalRouteId = routeIdMatch[1];
+        const newRouteId = `${prefix}${originalRouteId}`;
+        const newSource = source.replace(/routeId=[^&]+/, `routeId=${newRouteId}`);
+        path.node.source = t.stringLiteral(newSource);
+      }
+    },
+    ObjectExpression(path) {
+      if (!Array.isArray(path.node.properties)) {
+        return;
+      }
+      path.node.properties.forEach((prop) => {
+        if (t.isObjectProperty(prop) && t.isStringLiteral(prop.key) && t.isStringLiteral(prop.value) && prop.key.value === ID) {
+          prop.value = t.stringLiteral(`${prefix}${prop.value.value}`);
+        }
+      });
+      path.node.properties = path.node.properties.filter((p) => {
+        if (t.isObjectProperty(p) && t.isStringLiteral(p.key)) {
+          return !removedKeys.includes(p.key.value);
+        } else {
+          return true;
+        }
+      });
+    }
+  });
+  const tempCode = generate(ast).code;
+  const tempAst = babelParser.parse(tempCode, {
+    sourceType: "module"
+  });
+  const usedIdentifiers = /* @__PURE__ */ new Set();
+  traverse(tempAst, {
+    Identifier(path) {
+      if (t.isProperty(path.parent)) {
+        usedIdentifiers.add(path.node.name);
+      }
+    }
+  });
+  traverse(tempAst, {
+    ImportDeclaration(path) {
+      path.node.specifiers = path.node.specifiers.filter((specifier) => usedIdentifiers.has(specifier.local.name));
+      if (!path.node.specifiers.length) {
+        path.remove();
+      }
+    }
+  });
+  const { code: newCode } = generate(tempAst);
+  const finalCode = `${newCode}export const baseName = '${baseName}';`;
+  fs.writeFileSync(filePath, finalCode);
+}
+export {
+  generateSlimRoutes
+};

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

@@ -0,0 +1,6 @@
+import { generateRoutes } from "./generateRoutes";
+import { generateSlimRoutes } from "./generateSlimRoutes";
+export {
+  generateRoutes,
+  generateSlimRoutes
+};

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

@@ -32,6 +32,7 @@ const moduleFederationConfigPlugin = (userConfig) => ({
     return {
       config: async () => {
         var _modernjsConfig_server, _modernjsConfig_dev;
+        console.log("config plugin config");
         const bundlerType = useAppContext().bundlerType === "rspack" ? "rspack" : "webpack";
         const ipv4 = getIPV4();
         const enableSSR = Boolean(modernjsConfig === null || modernjsConfig === void 0 ? void 0 : (_modernjsConfig_server = modernjsConfig.server) === null || _modernjsConfig_server === void 0 ? void 0 : _modernjsConfig_server.ssr);

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

@@ -1,4 +1,6 @@
 const isDev = process.env.NODE_ENV === "development";
+const MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME = "routes.js";
 export {
+  MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME,
   isDev
 };