@module-federation/modern-js 0.0.0-next-20241230030326 → 0.0.0-next-20241230085648

package/dist/esm/cli/utils.js

@@ -82,7 +82,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);
@@ -129,13 +131,15 @@ var patchMFConfig = function(mfConfig, isServer, remoteIpStrategy) {
     throw new Error("".concat(PLUGIN_IDENTIFIER, " mfConfig.name can not be empty!"));
   }
   var runtimePlugins = _to_consumable_array(mfConfig.runtimePlugins || []);
+  var _mfConfig_shareStrategy;
+  mfConfig.shareStrategy = (_mfConfig_shareStrategy = mfConfig.shareStrategy) !== null && _mfConfig_shareStrategy !== void 0 ? _mfConfig_shareStrategy : "loaded-first";
   patchDTSConfig(mfConfig, isServer);
   injectRuntimePlugins(require.resolve("@module-federation/modern-js/shared-strategy"), runtimePlugins);
   if (isDev) {
     injectRuntimePlugins(require.resolve("@module-federation/modern-js/resolve-entry-ipv4"), runtimePlugins);
   }
   if (isServer) {
-    injectRuntimePlugins(require.resolve("@module-federation/node/runtimePlugin"), runtimePlugins);
+    injectRuntimePlugins(path.resolve(__dirname, "./mfRuntimePlugins/node.js"), runtimePlugins);
     if (isDev) {
       injectRuntimePlugins(require.resolve("@module-federation/node/record-dynamic-remote-entry-hash-plugin"), runtimePlugins);
     }
@@ -318,5 +322,6 @@ export {
   getMFConfig,
   patchBundlerConfig,
   patchIgnoreWarning,
-  patchMFConfig
+  patchMFConfig,
+  replaceRemoteUrl
 };

package/dist/esm/cli/utils.spec.js

@@ -40,6 +40,7 @@ describe("patchMFConfig", /* @__PURE__ */ _async_to_generator(function() {
             remote: "http://".concat(ipv4, ":3000/remoteEntry.js")
           },
           remoteType: "script",
+          shareStrategy: "loaded-first",
           runtimePlugins: [
             require.resolve("@module-federation/modern-js/shared-strategy"),
             require.resolve("@module-federation/node/runtimePlugin"),

package/dist/esm/constant.js

@@ -1,8 +1,30 @@
 var MODERN_JS_SERVER_DIR = "bundles";
 var LOCALHOST = "localhost";
 var PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
+var isDev = process.env.NODE_ENV === "development";
+var MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME = "routes";
+var MODERN_JS_ROUTE_SERVER_LOADER = "route-server-loaders";
+var META_NAME = "modern-js";
+var FOLD_IDENTIFIER = "@mf";
+var SEPARATOR = "_";
+var MF_ROUTES = "mf-routes";
+var DEFAULT_ENTRY = "main";
+var DEFAULT_LAYOUT = "layout";
+var MF_JSON = "mf.json";
+var ROUTE_ID = "ROUTE_ID";
 export {
+  DEFAULT_ENTRY,
+  DEFAULT_LAYOUT,
+  FOLD_IDENTIFIER,
   LOCALHOST,
+  META_NAME,
+  MF_JSON,
+  MF_ROUTES,
+  MODERN_JS_FILE_SYSTEM_ROUTES_FILE_NAME,
+  MODERN_JS_ROUTE_SERVER_LOADER,
   MODERN_JS_SERVER_DIR,
-  PLUGIN_IDENTIFIER
+  PLUGIN_IDENTIFIER,
+  ROUTE_ID,
+  SEPARATOR,
+  isDev
 };

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/routes/plugin-inject-assets.js

@@ -0,0 +1,71 @@
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { collectSSRAssets } from "../createRemoteSSRComponent";
+import { RuntimeReactContext } from "@meta/runtime";
+import { decodeId, getRemoteId } from "./utils";
+function traverseRoutes(routes, remoteNames) {
+  routes.forEach(function(route) {
+    route.id && remoteNames.add(decodeId(route.id));
+    route.children && traverseRoutes(route.children, remoteNames);
+  });
+}
+var ssrDataLoaderInjectAssetsPlugin = function(param) {
+  var metaName = param.metaName;
+  return {
+    name: "@modern-js/plugin-mf-routes-inject-assets",
+    pre: [
+      "@modern-js/plugin-mf-routes"
+    ],
+    post: [
+      "@module-federation/modern-js",
+      "@".concat(metaName, "/plugin-router")
+    ],
+    setup: function() {
+      return {
+        wrapRoot: function wrapRoot() {
+          var AppWrapper = function(props) {
+            var instance = getInstance();
+            if (!instance || !instance.options.remotes.length) {
+              return /* @__PURE__ */ _jsx(_Fragment, {
+                children: props.children
+              });
+            }
+            var context = useContext(RuntimeReactContext);
+            var remotes = instance.options.remotes;
+            var remoteNames = /* @__PURE__ */ new Set();
+            traverseRoutes(context.routes, remoteNames);
+            var remoteIds = _to_consumable_array(remoteNames).reduce(function(sum, cur) {
+              var matchRemote = remotes.find(function(r) {
+                return r.name === cur;
+              });
+              if (matchRemote) {
+                sum.add(getRemoteId(cur));
+              }
+              return sum;
+            }, /* @__PURE__ */ new Set());
+            var assets = [];
+            remoteIds.forEach(function(remoteId) {
+              var _assets;
+              (_assets = assets).push.apply(_assets, _to_consumable_array(collectSSRAssets({
+                id: remoteId,
+                injectScript: false
+              })));
+            });
+            return /* @__PURE__ */ _jsxs(_Fragment, {
+              children: [
+                assets,
+                props.children
+              ]
+            });
+          };
+          return AppWrapper;
+        }
+      };
+    }
+  };
+};
+export {
+  ssrDataLoaderInjectAssetsPlugin
+};

package/dist/esm/runtime/routes/plugin.js

@@ -0,0 +1,97 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { MF_ROUTES, DEFAULT_ENTRY } from "../../constant";
+import { injectRemoteRoutes } from "./utils";
+var ssrDataLoaderPlugin = function(param) {
+  var metaName = param.metaName, dataLoaderRemotes = param.dataLoaderRemotes;
+  return {
+    name: "@modern-js/plugin-mf-routes",
+    post: [
+      "@".concat(metaName, "/plugin-router"),
+      "@module-federation/modern-js"
+    ],
+    setup: function() {
+      var remoteRoutesMap = {};
+      return {
+        beforeRender: function beforeRender() {
+          return _async_to_generator(function() {
+            var instance;
+            return _ts_generator(this, function(_state) {
+              switch (_state.label) {
+                case 0:
+                  if (Object.keys(remoteRoutesMap).length) {
+                    return [
+                      2
+                    ];
+                  }
+                  instance = getInstance();
+                  if (!instance) {
+                    return [
+                      2
+                    ];
+                  }
+                  if (!instance.options.remotes.length) {
+                    return [
+                      2
+                    ];
+                  }
+                  return [
+                    4,
+                    Promise.all(instance.options.remotes.map(function() {
+                      var _ref = _async_to_generator(function(remote) {
+                        var remoteId, routes;
+                        return _ts_generator(this, function(_state2) {
+                          switch (_state2.label) {
+                            case 0:
+                              if (!dataLoaderRemotes.includes(remote.name)) {
+                                return [
+                                  2
+                                ];
+                              }
+                              remoteId = "".concat(remote.name, "/").concat(DEFAULT_ENTRY, "/").concat(MF_ROUTES);
+                              return [
+                                4,
+                                instance.loadRemote(remoteId)
+                              ];
+                            case 1:
+                              routes = _state2.sent().routes;
+                              remoteRoutesMap[remote.name] = {
+                                routes
+                              };
+                              return [
+                                2
+                              ];
+                          }
+                        });
+                      });
+                      return function(remote) {
+                        return _ref.apply(this, arguments);
+                      };
+                    }()))
+                  ];
+                case 1:
+                  _state.sent();
+                  return [
+                    2
+                  ];
+              }
+            });
+          })();
+        },
+        // runtime plugin not save route , so it needs to inject again when trigger
+        modifyRoutes: function(routes) {
+          injectRemoteRoutes({
+            entry: {
+              routes
+            }
+          }, remoteRoutesMap);
+          return routes;
+        }
+      };
+    }
+  };
+};
+export {
+  ssrDataLoaderPlugin
+};

package/dist/esm/runtime/routes/utils.js

@@ -0,0 +1,86 @@
+import { encodeName, decodeName } from "@module-federation/sdk";
+import { DEFAULT_ENTRY, DEFAULT_LAYOUT, MF_ROUTES } from "../../constant";
+var SPLIT_SYMBOL = "@";
+function transformName2Prefix(name) {
+  return "".concat(encodeName(name, "", false)).concat(SPLIT_SYMBOL);
+}
+function decodeId(prefix) {
+  var realPrefix = prefix.split(SPLIT_SYMBOL)[0];
+  return decodeName(realPrefix, "", false);
+}
+function getRemoteRoutesInfos(route, remoteRoutesMap) {
+  if (!route.id) {
+    return;
+  }
+  var remoteName = decodeId(route.id);
+  var remoteRouteObj = remoteRoutesMap[remoteName];
+  if (!remoteRouteObj) {
+    return;
+  }
+  var remoteRoutes = remoteRouteObj.routes[0];
+  return {
+    routes: remoteRoutes,
+    name: remoteName,
+    pathName: route.path
+  };
+}
+function getRemoteLayoutId(remoteName) {
+  var prefix = transformName2Prefix(remoteName);
+  return "".concat(prefix).concat(DEFAULT_LAYOUT);
+}
+function getRemoteId(remoteName) {
+  return "".concat(remoteName, "/").concat(DEFAULT_ENTRY, "/").concat(MF_ROUTES);
+}
+function injectRemoteRoutes(initialRoutes, remoteRoutesMap) {
+  var traverse = function(route) {
+    var _route_children;
+    var remoteRoutesInfos = getRemoteRoutesInfos(route, remoteRoutesMap);
+    if (remoteRoutesInfos) {
+      var routes = remoteRoutesInfos.routes, pathName = remoteRoutesInfos.pathName;
+      route.id = routes.id;
+      route.path = pathName;
+      if (routes.loader) {
+        route.loader = routes.loader;
+      }
+      if (routes.children) {
+        route.children = routes.children;
+      }
+      if (routes.Component) {
+        route.Component = routes.Component;
+        if (route.element) {
+          delete route.element;
+        }
+      } else if (routes.element) {
+        route.element = routes.element;
+        if (route.Component) {
+          delete route.Component;
+        }
+      }
+      return;
+    }
+    (_route_children = route.children) === null || _route_children === void 0 ? void 0 : _route_children.forEach(function(r) {
+      traverse(r);
+    });
+  };
+  Object.keys(initialRoutes).forEach(function(entryName) {
+    var routes = initialRoutes[entryName];
+    if (Array.isArray(routes)) {
+      routes.forEach(function(route) {
+        traverse(route);
+      });
+    } else {
+      var _routes_routes;
+      routes === null || routes === void 0 ? void 0 : (_routes_routes = routes.routes) === null || _routes_routes === void 0 ? void 0 : _routes_routes.forEach(function(r) {
+        traverse(r);
+      });
+    }
+  });
+}
+export {
+  decodeId,
+  getRemoteId,
+  getRemoteLayoutId,
+  getRemoteRoutesInfos,
+  injectRemoteRoutes,
+  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,13 +4,16 @@ 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";
-var mfSSRPlugin = function() {
+var mfSSRPlugin = function(param) {
+  var metaName = param.metaName;
   return {
     name: "@module-federation/modern-js",
+    pre: [
+      "@".concat(metaName, "/plugin-router")
+    ],
     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) {
@@ -18,10 +21,7 @@ var mfSSRPlugin = function() {
                 case 0:
                   if (typeof window !== "undefined") {
                     return [
-                      2,
-                      next({
-                        context
-                      })
+                      2
                     ];
                   }
                   globalThis.shouldUpdate = false;
@@ -53,10 +53,7 @@ var mfSSRPlugin = function() {
                   _state.label = 4;
                 case 4:
                   return [
-                    2,
-                    next({
-                      context
-                    })
+                    2
                   ];
               }
             });

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

@@ -2,6 +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 { moduleFederationRoutesPlugin } from "./routes/plugin";
 const moduleFederationPlugin = (userConfig = {}) => {
   const internalModernPluginOptions = {
     csrConfig: void 0,
@@ -10,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",
@@ -53,7 +54,11 @@ const moduleFederationPlugin = (userConfig = {}) => {
     },
     usePlugins: [
       moduleFederationConfigPlugin(internalModernPluginOptions),
-      moduleFederationSSRPlugin(internalModernPluginOptions)
+      moduleFederationSSRPlugin(internalModernPluginOptions),
+      moduleFederationRoutesPlugin({
+        userConfig,
+        internalOptions: internalModernPluginOptions
+      })
     ]
   };
 };

package/dist/esm-node/cli/mfRuntimePlugins/{inject-node-fetch.js → node-fetch.js}

@@ -1,6 +1,6 @@
 import nodeFetch from "node-fetch";
 const injectNodeFetchPlugin = () => ({
-  name: "inject-node-fetch-plugin",
+  name: "node-fetch-plugin",
   beforeInit(args) {
     if (!globalThis.fetch) {
       globalThis.fetch = nodeFetch;
@@ -8,7 +8,7 @@ const injectNodeFetchPlugin = () => ({
     return args;
   }
 });
-var inject_node_fetch_default = injectNodeFetchPlugin;
+var node_fetch_default = injectNodeFetchPlugin;
 export {
-  inject_node_fetch_default as default
+  node_fetch_default as default
 };

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

@@ -0,0 +1,11 @@
+import nodeRuntimePlugin from "@module-federation/node/runtimePlugin";
+const isContainer = typeof __filename === "string" ? __filename.includes("remote") ? true : false : false;
+const pluginName = `node-plugin-${isContainer}`;
+const nodePlugin = () => ({
+  name: pluginName,
+  beforeInit: nodeRuntimePlugin().beforeInit
+});
+var node_default = nodePlugin;
+export {
+  node_default as default
+};

package/dist/esm-node/cli/mfRuntimePlugins/resolve-entry-ipv4.js

@@ -16,46 +16,48 @@ function replaceObjectLocalhost(key, obj) {
 function replaceLocalhost(url) {
   return url.replace(LOCALHOST, ipv4);
 }
-const resolveEntryIpv4Plugin = () => ({
-  name: "resolve-entry-ipv4",
-  beforeRegisterRemote(args) {
-    const { remote } = args;
-    replaceObjectLocalhost("entry", remote);
-    return args;
-  },
-  async afterResolve(args) {
-    const { remoteInfo } = args;
-    replaceObjectLocalhost("entry", remoteInfo);
-    return args;
-  },
-  beforeLoadRemoteSnapshot(args) {
-    const { moduleInfo } = args;
-    if ("entry" in moduleInfo) {
-      replaceObjectLocalhost("entry", moduleInfo);
+const resolveEntryIpv4Plugin = () => {
+  return {
+    name: "resolve-entry-ipv4",
+    beforeRegisterRemote(args) {
+      const { remote } = args;
+      replaceObjectLocalhost("entry", remote);
+      return args;
+    },
+    async afterResolve(args) {
+      const { remoteInfo } = args;
+      replaceObjectLocalhost("entry", remoteInfo);
+      return args;
+    },
+    beforeLoadRemoteSnapshot(args) {
+      const { moduleInfo } = args;
+      if ("entry" in moduleInfo) {
+        replaceObjectLocalhost("entry", moduleInfo);
+        return args;
+      }
+      if ("version" in moduleInfo) {
+        replaceObjectLocalhost("version", moduleInfo);
+      }
+      return args;
+    },
+    loadRemoteSnapshot(args) {
+      const { remoteSnapshot } = args;
+      if ("publicPath" in remoteSnapshot) {
+        replaceObjectLocalhost("publicPath", remoteSnapshot);
+      }
+      if ("getPublicPath" in remoteSnapshot) {
+        replaceObjectLocalhost("getPublicPath", remoteSnapshot);
+      }
+      if (remoteSnapshot.remotesInfo) {
+        Object.keys(remoteSnapshot.remotesInfo).forEach((key) => {
+          const remoteInfo = remoteSnapshot.remotesInfo[key];
+          replaceObjectLocalhost("matchedVersion", remoteInfo);
+        });
+      }
       return args;
     }
-    if ("version" in moduleInfo) {
-      replaceObjectLocalhost("version", moduleInfo);
-    }
-    return args;
-  },
-  loadRemoteSnapshot(args) {
-    const { remoteSnapshot } = args;
-    if ("publicPath" in remoteSnapshot) {
-      replaceObjectLocalhost("publicPath", remoteSnapshot);
-    }
-    if ("getPublicPath" in remoteSnapshot) {
-      replaceObjectLocalhost("getPublicPath", remoteSnapshot);
-    }
-    if (remoteSnapshot.remotesInfo) {
-      Object.keys(remoteSnapshot.remotesInfo).forEach((key) => {
-        const remoteInfo = remoteSnapshot.remotesInfo[key];
-        replaceObjectLocalhost("matchedVersion", remoteInfo);
-      });
-    }
-    return args;
-  }
-});
+  };
+};
 var resolve_entry_ipv4_default = resolveEntryIpv4Plugin;
 export {
   resolve_entry_ipv4_default as default

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

@@ -0,0 +1,18 @@
+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";
+const LOADER = "loader";
+export {
+  COMPONENT,
+  ELEMENT,
+  ID,
+  IS_ROOT,
+  LAZY_COMPONENT,
+  LOADER,
+  PRIVATE_COMPONENT,
+  SHOULD_REVALIDATE
+};

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

@@ -0,0 +1,109 @@
+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 }) {
+  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)) {
+      }
+      const isRootNode = findTargetKeyNode(path.node.properties, "isRoot");
+      if (isRootNode && t.isObjectProperty(isRootNode) && t.isBooleanLiteral(isRootNode.value)) {
+        isRootNode.value.value = false;
+      }
+      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));
+        } else {
+          path.node.properties.push(t.objectProperty(t.identifier("Component"), t.callExpression(t.identifier("lazy"), [
+            t.identifier(lazyComponentName)
+          ])));
+        }
+      }
+    }
+  });
+  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 } = generate(ast);
+  fs.writeFileSync(filePath, code);
+}
+export {
+  generateRoutes
+};