@modern-js/app-tools 2.36.0 → 2.37.0

package/dist/cjs/analyze/nestedRoutes.js

@@ -268,7 +268,7 @@ const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldVersion)
     delete finalRoute.path;
   }
   const childRoutes = finalRoute.children = (_finalRoute_children = finalRoute.children) === null || _finalRoute_children === void 0 ? void 0 : _finalRoute_children.filter((childRoute) => childRoute);
-  if (childRoutes && childRoutes.length === 0 && !finalRoute.index) {
+  if (childRoutes && childRoutes.length === 0 && !finalRoute.index && !finalRoute._component) {
     return null;
   }
   if (childRoutes && childRoutes.length === 1 && !finalRoute._component) {

package/dist/cjs/analyze/templates.js

@@ -38,7 +38,8 @@ __export(templates_exports, {
 module.exports = __toCommonJS(templates_exports);
 var import_path = __toESM(require("path"));
 var import_utils = require("@modern-js/utils");
-var import_constants = require("./constants");
+var import_constants = require("@modern-js/utils/universal/constants");
+var import_constants2 = require("./constants");
 var import_utils2 = require("./utils");
 const index = ({ mountId, imports, renderFunction: renderFunction2, exportStatement }) => `
 const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
@@ -64,7 +65,7 @@ const renderFunction = ({ plugins, customBootstrap, fileSystemRoutes: fileSystem
   return `
   const finalAppConfig = {
     ...App.config,
-    ...typeof ${import_constants.APP_CONFIG_NAME} === 'function' ? ${import_constants.APP_CONFIG_NAME}() : {},
+    ...typeof ${import_constants2.APP_CONFIG_NAME} === 'function' ? ${import_constants2.APP_CONFIG_NAME}() : {},
   }
 
   AppWrapper = createApp({
@@ -198,7 +199,7 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
   const loadersMap = {};
   const configs = [];
   const configsMap = {};
-  const loadersMapFile = import_path.default.join(internalDirectory, entryName, import_constants.TEMP_LOADERS_DIR, "map.json");
+  const loadersMapFile = import_path.default.join(internalDirectory, entryName, import_constants2.TEMP_LOADERS_DIR, "map.json");
   const importLazyCode = `
     import { lazy } from "react";
     import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
@@ -263,18 +264,23 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
       if (route._component) {
         if (splitRouteChunks) {
           if (route.isRoot) {
+            lazyImport = `async function(){const routeModule = await import('${route._component}'); if(typeof document !== "undefined") window.${import_constants.ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             rootLayoutCode = `import RootLayout from '${route._component}'`;
             component = `RootLayout`;
           } else if (ssrMode === "string") {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${import_constants.ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             component = `loadable(${lazyImport})`;
           } else {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${import_constants.ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             component = `lazy(${lazyImport})`;
           }
         } else {
-          components.push(route._component);
-          component = `component_${components.length - 1}`;
+          lazyImport = `async function(){const routeModule = await import(/* webpackMode: "eager" */ '${route._component}'); if(typeof document !== "undefined") window.${import_constants.ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+          if (ssrMode === "string") {
+            component = `loadable(${lazyImport})`;
+          } else {
+            component = `lazy(${lazyImport})`;
+          }
         }
       }
     } else if (route._component) {
@@ -299,6 +305,9 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
     if (route._component) {
       finalRoute.component = component;
     }
+    if (route.type === "nested" && route._component && (route.loader || route.data)) {
+      finalRoute.shouldRevalidate = `createShouldRevalidate("${route.id}")`;
+    }
     return finalRoute;
   };
   let routeComponentsCode = `
@@ -311,6 +320,7 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
       const keywords = [
         "component",
         "lazyImport",
+        "shouldRevalidate",
         "loader",
         "action",
         "loading",
@@ -391,14 +401,24 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
   }
   await import_utils.fs.ensureFile(loadersMapFile);
   await import_utils.fs.writeJSON(loadersMapFile, loadersMap);
+  const importRuntimeRouterCode = `
+    import { createShouldRevalidate } from '@modern-js/runtime/router';
+  `;
+  const routeModulesCode = `
+    if(typeof document !== 'undefined'){
+      window.${import_constants.ROUTE_MODULES} = {}
+    }
+  `;
   return `
     ${importLazyCode}
     ${importComponentsCode}
+    ${importRuntimeRouterCode}
     ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}
     ${importLoadersCode}
     ${importConfigsCode}
+    ${routeModulesCode}
     ${routeComponentsCode}
   `;
 };

package/dist/esm/analyze/nestedRoutes.js

@@ -360,7 +360,7 @@ var walk = function() {
           childRoutes = finalRoute.children = (_finalRoute_children = finalRoute.children) === null || _finalRoute_children === void 0 ? void 0 : _finalRoute_children.filter(function(childRoute2) {
             return childRoute2;
           });
-          if (childRoutes && childRoutes.length === 0 && !finalRoute.index) {
+          if (childRoutes && childRoutes.length === 0 && !finalRoute.index && !finalRoute._component) {
             return [
               2,
               null

package/dist/esm/analyze/templates.js

@@ -5,6 +5,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import path from "path";
 import { fs, getEntryOptions, isSSGEntry, slash } from "@modern-js/utils";
+import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
 import { APP_CONFIG_NAME, TEMP_LOADERS_DIR } from "./constants";
 import { getServerLoadersFile } from "./utils";
 var index = function(param) {
@@ -134,7 +135,7 @@ var createMatchReg = function(keyword) {
 };
 var fileSystemRoutes = function() {
   var _ref = _async_to_generator(function(param) {
-    var routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, _param_splitRouteChunks, splitRouteChunks, components, loadings, errors, loaders, loadersMap, configs, configsMap, loadersMapFile, importLazyCode, rootLayoutCode, getDataLoaderPath, traverseRouteTree, routeComponentsCode, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, newRoute, routeStr, keywords, regs, newRouteStr, component, finalRoute, keywords1, routeStr1, regs1, newRouteStr1, importLoadingCode, importComponentsCode, importErrorComponentsCode, importLoadersCode, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1, _iterator1, _step1, _step_value, key, loaderInfo, route1, importConfigsCode, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, _step_value1, key1, configPath;
+    var routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, _param_splitRouteChunks, splitRouteChunks, components, loadings, errors, loaders, loadersMap, configs, configsMap, loadersMapFile, importLazyCode, rootLayoutCode, getDataLoaderPath, traverseRouteTree, routeComponentsCode, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, newRoute, routeStr, keywords, regs, newRouteStr, component, finalRoute, keywords1, routeStr1, regs1, newRouteStr1, importLoadingCode, importComponentsCode, importErrorComponentsCode, importLoadersCode, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1, _iterator1, _step1, _step_value, key, loaderInfo, route1, importConfigsCode, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, _step_value1, key1, configPath, importRuntimeRouterCode, routeModulesCode;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
@@ -209,18 +210,23 @@ var fileSystemRoutes = function() {
               if (route2._component) {
                 if (splitRouteChunks) {
                   if (route2.isRoot) {
+                    lazyImport = "async function(){const routeModule = await import('".concat(route2._component, `'); if(typeof document !== "undefined") window.`).concat(ROUTE_MODULES, '["').concat(route2.id, '"] = routeModule;return routeModule;}');
                     rootLayoutCode = "import RootLayout from '".concat(route2._component, "'");
                     component2 = "RootLayout";
                   } else if (ssrMode === "string") {
-                    lazyImport = '() => import(/* webpackChunkName: "'.concat(route2.id, `" */  '`).concat(route2._component, "')");
+                    lazyImport = 'async function(){const routeModule = await import(/* webpackChunkName: "'.concat(route2.id, `" */  '`).concat(route2._component, `'); if(typeof document !== "undefined") window.`).concat(ROUTE_MODULES, '["').concat(route2.id, '"] = routeModule;return routeModule;}');
                     component2 = "loadable(".concat(lazyImport, ")");
                   } else {
-                    lazyImport = '() => import(/* webpackChunkName: "'.concat(route2.id, `" */  '`).concat(route2._component, "')");
+                    lazyImport = 'async function(){const routeModule = await import(/* webpackChunkName: "'.concat(route2.id, `" */  '`).concat(route2._component, `'); if(typeof document !== "undefined") window.`).concat(ROUTE_MODULES, '["').concat(route2.id, '"] = routeModule;return routeModule;}');
                     component2 = "lazy(".concat(lazyImport, ")");
                   }
                 } else {
-                  components.push(route2._component);
-                  component2 = "component_".concat(components.length - 1);
+                  lazyImport = `async function(){const routeModule = await import(/* webpackMode: "eager" */ '`.concat(route2._component, `'); if(typeof document !== "undefined") window.`).concat(ROUTE_MODULES, '["').concat(route2.id, '"] = routeModule;return routeModule;}');
+                  if (ssrMode === "string") {
+                    component2 = "loadable(".concat(lazyImport, ")");
+                  } else {
+                    component2 = "lazy(".concat(lazyImport, ")");
+                  }
                 }
               }
             } else if (route2._component) {
@@ -244,6 +250,9 @@ var fileSystemRoutes = function() {
             if (route2._component) {
               finalRoute2.component = component2;
             }
+            if (route2.type === "nested" && route2._component && (route2.loader || route2.data)) {
+              finalRoute2.shouldRevalidate = 'createShouldRevalidate("'.concat(route2.id, '")');
+            }
             return finalRoute2;
           };
           routeComponentsCode = "\n    export const routes = [\n  ";
@@ -257,6 +266,7 @@ var fileSystemRoutes = function() {
                 keywords = [
                   "component",
                   "lazyImport",
+                  "shouldRevalidate",
                   "loader",
                   "action",
                   "loading",
@@ -390,9 +400,11 @@ var fileSystemRoutes = function() {
           ];
         case 2:
           _state.sent();
+          importRuntimeRouterCode = "\n    import { createShouldRevalidate } from '@modern-js/runtime/router';\n  ";
+          routeModulesCode = "\n    if(typeof document !== 'undefined'){\n      window.".concat(ROUTE_MODULES, " = {}\n    }\n  ");
           return [
             2,
-            "\n    ".concat(importLazyCode, "\n    ").concat(importComponentsCode, "\n    ").concat(rootLayoutCode, "\n    ").concat(importLoadingCode, "\n    ").concat(importErrorComponentsCode, "\n    ").concat(importLoadersCode, "\n    ").concat(importConfigsCode, "\n    ").concat(routeComponentsCode, "\n  ")
+            "\n    ".concat(importLazyCode, "\n    ").concat(importComponentsCode, "\n    ").concat(importRuntimeRouterCode, "\n    ").concat(rootLayoutCode, "\n    ").concat(importLoadingCode, "\n    ").concat(importErrorComponentsCode, "\n    ").concat(importLoadersCode, "\n    ").concat(importConfigsCode, "\n    ").concat(routeModulesCode, "\n    ").concat(routeComponentsCode, "\n  ")
           ];
       }
     });

package/dist/esm-node/analyze/nestedRoutes.js

@@ -233,7 +233,7 @@ const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldVersion)
     delete finalRoute.path;
   }
   const childRoutes = finalRoute.children = (_finalRoute_children = finalRoute.children) === null || _finalRoute_children === void 0 ? void 0 : _finalRoute_children.filter((childRoute) => childRoute);
-  if (childRoutes && childRoutes.length === 0 && !finalRoute.index) {
+  if (childRoutes && childRoutes.length === 0 && !finalRoute.index && !finalRoute._component) {
     return null;
   }
   if (childRoutes && childRoutes.length === 1 && !finalRoute._component) {

package/dist/esm-node/analyze/templates.js

@@ -1,5 +1,6 @@
 import path from "path";
 import { fs, getEntryOptions, isSSGEntry, slash } from "@modern-js/utils";
+import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
 import { APP_CONFIG_NAME, TEMP_LOADERS_DIR } from "./constants";
 import { getServerLoadersFile } from "./utils";
 const index = ({ mountId, imports, renderFunction: renderFunction2, exportStatement }) => `
@@ -225,18 +226,23 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
       if (route._component) {
         if (splitRouteChunks) {
           if (route.isRoot) {
+            lazyImport = `async function(){const routeModule = await import('${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             rootLayoutCode = `import RootLayout from '${route._component}'`;
             component = `RootLayout`;
           } else if (ssrMode === "string") {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             component = `loadable(${lazyImport})`;
           } else {
-            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
             component = `lazy(${lazyImport})`;
           }
         } else {
-          components.push(route._component);
-          component = `component_${components.length - 1}`;
+          lazyImport = `async function(){const routeModule = await import(/* webpackMode: "eager" */ '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+          if (ssrMode === "string") {
+            component = `loadable(${lazyImport})`;
+          } else {
+            component = `lazy(${lazyImport})`;
+          }
         }
       }
     } else if (route._component) {
@@ -261,6 +267,9 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
     if (route._component) {
       finalRoute.component = component;
     }
+    if (route.type === "nested" && route._component && (route.loader || route.data)) {
+      finalRoute.shouldRevalidate = `createShouldRevalidate("${route.id}")`;
+    }
     return finalRoute;
   };
   let routeComponentsCode = `
@@ -273,6 +282,7 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
       const keywords = [
         "component",
         "lazyImport",
+        "shouldRevalidate",
         "loader",
         "action",
         "loading",
@@ -353,14 +363,24 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
   }
   await fs.ensureFile(loadersMapFile);
   await fs.writeJSON(loadersMapFile, loadersMap);
+  const importRuntimeRouterCode = `
+    import { createShouldRevalidate } from '@modern-js/runtime/router';
+  `;
+  const routeModulesCode = `
+    if(typeof document !== 'undefined'){
+      window.${ROUTE_MODULES} = {}
+    }
+  `;
   return `
     ${importLazyCode}
     ${importComponentsCode}
+    ${importRuntimeRouterCode}
     ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}
     ${importLoadersCode}
     ${importConfigsCode}
+    ${routeModulesCode}
     ${routeComponentsCode}
   `;
 };

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.36.0",
+  "version": "2.37.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
@@ -67,29 +67,29 @@
   },
   "dependencies": {
     "@babel/parser": "^7.22.15",
-    "@babel/traverse": "^7.22.15",
+    "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.22.15",
     "es-module-lexer": "^1.1.0",
     "esbuild": "0.17.19",
     "@swc/helpers": "0.5.1",
-    "@modern-js/builder-plugin-esbuild": "2.36.0",
-    "@modern-js/builder": "2.36.0",
-    "@modern-js/builder-plugin-node-polyfill": "2.36.0",
-    "@modern-js/builder-shared": "2.36.0",
-    "@modern-js/builder-webpack-provider": "2.36.0",
-    "@modern-js/core": "2.36.0",
-    "@modern-js/new-action": "2.36.0",
-    "@modern-js/node-bundle-require": "2.36.0",
-    "@modern-js/plugin": "2.36.0",
-    "@modern-js/plugin-data-loader": "2.36.0",
-    "@modern-js/plugin-i18n": "2.36.0",
-    "@modern-js/plugin-lint": "2.36.0",
-    "@modern-js/prod-server": "2.36.0",
-    "@modern-js/server": "2.36.0",
-    "@modern-js/types": "2.36.0",
-    "@modern-js/upgrade": "2.36.0",
-    "@modern-js/utils": "2.36.0",
-    "@modern-js/server-core": "2.36.0"
+    "@modern-js/builder": "2.37.0",
+    "@modern-js/builder-plugin-esbuild": "2.37.0",
+    "@modern-js/builder-plugin-node-polyfill": "2.37.0",
+    "@modern-js/builder-shared": "2.37.0",
+    "@modern-js/builder-webpack-provider": "2.37.0",
+    "@modern-js/core": "2.37.0",
+    "@modern-js/new-action": "2.37.0",
+    "@modern-js/node-bundle-require": "2.37.0",
+    "@modern-js/plugin": "2.37.0",
+    "@modern-js/plugin-data-loader": "2.37.0",
+    "@modern-js/plugin-i18n": "2.37.0",
+    "@modern-js/plugin-lint": "2.37.0",
+    "@modern-js/prod-server": "2.37.0",
+    "@modern-js/server": "2.37.0",
+    "@modern-js/types": "2.37.0",
+    "@modern-js/upgrade": "2.37.0",
+    "@modern-js/utils": "2.37.0",
+    "@modern-js/server-core": "2.37.0"
   },
   "devDependencies": {
     "@types/babel__traverse": "^7.14.2",
@@ -98,13 +98,13 @@
     "jest": "^29",
     "typescript": "^5",
     "webpack": "^5.88.1",
-    "@modern-js/builder-plugin-swc": "2.36.0",
-    "@modern-js/builder-rspack-provider": "2.36.0",
-    "@scripts/jest-config": "2.36.0",
-    "@scripts/build": "2.36.0"
+    "@modern-js/builder-plugin-swc": "2.37.0",
+    "@modern-js/builder-rspack-provider": "2.37.0",
+    "@scripts/build": "2.37.0",
+    "@scripts/jest-config": "2.37.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-rspack-provider": "^2.36.0"
+    "@modern-js/builder-rspack-provider": "^2.37.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/builder-rspack-provider": {