@modern-js/app-tools 2.31.2 → 2.31.3-alpha.0

package/dist/cjs/analyze/constants.js

@@ -107,8 +107,12 @@ const FILE_SYSTEM_ROUTES_COMPONENTS_DIR = "internal_components";
 const NESTED_ROUTE = {
   LAYOUT_FILE: "layout",
   LAYOUT_LOADER_FILE: "layout.loader",
+  LAYOUT_DATA_FILE: "layout.data",
+  LAYOUT_CLIENT_LOADER: "layout.data.client",
   PAGE_FILE: "page",
   PAGE_LOADER_FILE: "page.loader",
+  PAGE_DATA_FILE: "layout.data",
+  PAGE_CLIENT_LOADER: "page.data.client",
   LOADING_FILE: "loading",
   ERROR_FILE: "error",
   LOADER_FILE: "loader",

package/dist/cjs/analyze/nestedRoutes.js

@@ -66,7 +66,8 @@ const optimizeRoute = (routeTree) => {
     ];
   }
   const { children } = routeTree;
-  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config) {
+  const hasPage = children.some((child) => child.index);
+  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config && !routeTree.clientData && !hasPage) {
     const newRoutes = children.map((child) => {
       const routePath = `${routeTree.path ? routeTree.path : ""}${child.path ? `/${child.path}` : ""}`;
       const newRoute = {
@@ -142,6 +143,12 @@ const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldVersion)
         route.loader = itemPath;
       }
     }
+    if (itemWithoutExt === _constants.NESTED_ROUTE.LAYOUT_CLIENT_LOADER) {
+      route.clientData = itemPath;
+    }
+    if (itemWithoutExt === _constants.NESTED_ROUTE.LAYOUT_DATA_FILE) {
+      route.data = itemPath;
+    }
     if (itemWithoutExt === _constants.NESTED_ROUTE.LAYOUT_CONFIG_FILE) {
       if (!route.config) {
         route.config = itemPath;
@@ -153,6 +160,12 @@ const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldVersion)
     if (itemWithoutExt === _constants.NESTED_ROUTE.PAGE_LOADER_FILE) {
       pageLoaderFile = itemPath;
     }
+    if (itemWithoutExt === _constants.NESTED_ROUTE.PAGE_CLIENT_LOADER) {
+      route.clientData = itemPath;
+    }
+    if (itemWithoutExt === _constants.NESTED_ROUTE.PAGE_DATA_FILE) {
+      route.data = itemPath;
+    }
     if (itemWithoutExt === _constants.NESTED_ROUTE.PAGE_CONFIG_FILE) {
       pageConfigFile = itemPath;
     }

package/dist/cjs/analyze/templates.js

@@ -164,12 +164,13 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
     import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
   `;
   let rootLayoutCode = ``;
-  const getDataLoaderPath = (loaderId) => {
+  const getDataLoaderPath = (loaderId, clientData) => {
     if (!ssrMode) {
       return "";
     }
+    const clientDataStr = clientData ? `&clientData=${clientData}` : "";
     if (nestedRoutesEntry) {
-      return `?mapFile=${(0, _utils.slash)(loadersMapFile)}&loaderId=${loaderId}`;
+      return `?mapFile=${(0, _utils.slash)(loadersMapFile)}&loaderId=${loaderId}${clientDataStr}`;
     }
     return "";
   };
@@ -194,15 +195,17 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
         errors.push(route.error);
         error = `error_${errors.length - 1}`;
       }
-      if (route.loader) {
+      if (route.loader || route.data) {
         loaders.push(route.loader);
         const loaderId = loaders.length - 1;
         loader = `loader_${loaderId}`;
         loadersMap[loader] = {
           routeId: route.id,
-          filePath: route.loader,
-          inline: false
+          filePath: route.data || route.loader,
+          clientData: Boolean(route.clientData),
+          inline: Boolean(route.data)
         };
+        loader = `loader_${loaderId}`;
       }
       if (typeof route.config === "string") {
         configs.push(route.config);
@@ -301,10 +304,10 @@ const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, entryName,
   let importLoadersCode = "";
   for (const [key, loaderInfo] of Object.entries(loadersMap)) {
     if (loaderInfo.inline) {
-      importLoadersCode += `import { loader as ${key} } from "${(0, _utils.slash)(loaderInfo.filePath)}${getDataLoaderPath(key)}";
+      importLoadersCode += `import { loader as ${key} } from "${(0, _utils.slash)(loaderInfo.filePath)}${getDataLoaderPath(key, loaderInfo.clientData)}";
 `;
     } else {
-      importLoadersCode += `import ${key} from "${(0, _utils.slash)(loaderInfo.filePath)}${getDataLoaderPath(key)}";
+      importLoadersCode += `import ${key} from "${(0, _utils.slash)(loaderInfo.filePath)}${getDataLoaderPath(key, loaderInfo.clientData)}";
 `;
     }
   }

package/dist/cjs/builder/shared/builderPlugins/adapterSSR.js

@@ -154,6 +154,6 @@ function applySSRDataLoader(chain, options) {
   const { appDirectory } = appContext;
   const { entriesDir = "./src" } = normalizedConfig.source;
   const absolutePath = _path.resolve(appDirectory, entriesDir).split(_path.sep).join("(\\\\|/)");
-  const reg = new RegExp(`${absolutePath}.*\\.loader\\.[t|j]s$`);
+  const reg = new RegExp(`${absolutePath}.*\\.(loader|data|data.client)\\.[t|j]sx?$`);
   chain.module.rule("ssr-data-loader").test(reg).use("data-loader").loader(require.resolve("@modern-js/plugin-data-loader/loader")).end();
 }

package/dist/cjs/builder/shared/bundlerPlugins/RouterPlugin.js

@@ -164,28 +164,30 @@ class RouterPlugin {
           const oldHtml = compilation.assets[htmlName];
           const { enableInlineRouteManifests, disableFilenameHash, staticJsDir, scriptLoading, nonce } = this;
           const nonceAttr = nonce ? `nonce="${nonce}"` : "";
-          if (enableInlineRouteManifests) {
-            compilation.updateAsset(
-              htmlName,
-              new RawSource(oldHtml.source().toString().replace(placeholder, `<script ${nonceAttr}>${injectedContent}</script>`)),
-              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-              void 0
-            );
-          } else {
-            const scriptPath = `${staticJsDir}/${ROUTE_MANIFEST_HOLDER}-${entryName}${disableFilenameHash ? ".js" : `.${generateContentHash(injectedContent)}.js`}`;
-            const scriptUrl = `${publicPath}${scriptPath}`;
-            const scriptLoadingAttr = (
-              // eslint-disable-next-line no-nested-ternary
-              scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? `type="module"` : ""
-            );
-            const script = `<script ${scriptLoadingAttr} ${nonceAttr} src="${scriptUrl}"></script>`;
-            compilation.updateAsset(
-              htmlName,
-              new RawSource(oldHtml.source().toString().replace(placeholder, script)),
-              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-              void 0
-            );
-            compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+          if (oldHtml) {
+            if (enableInlineRouteManifests) {
+              compilation.updateAsset(
+                htmlName,
+                new RawSource(oldHtml.source().toString().replace(placeholder, `<script ${nonceAttr}>${injectedContent}</script>`)),
+                // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                void 0
+              );
+            } else {
+              const scriptPath = `${staticJsDir}/${ROUTE_MANIFEST_HOLDER}-${entryName}${disableFilenameHash ? ".js" : `.${generateContentHash(injectedContent)}.js`}`;
+              const scriptUrl = `${publicPath}${scriptPath}`;
+              const scriptLoadingAttr = (
+                // eslint-disable-next-line no-nested-ternary
+                scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? `type="module"` : ""
+              );
+              const script = `<script ${scriptLoadingAttr} ${nonceAttr} src="${scriptUrl}"></script>`;
+              compilation.updateAsset(
+                htmlName,
+                new RawSource(oldHtml.source().toString().replace(placeholder, script)),
+                // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                void 0
+              );
+              compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+            }
           }
         }
         if (prevManifestAsset) {

package/dist/cjs/index.js

@@ -123,6 +123,7 @@ const appTools = (options = {
         ...appContext,
         toolsType: "app-tools"
       });
+      const nestedRoutes = {};
       const locale = (0, _languagedetector.getLocaleLanguage)();
       _locale.i18n.changeLanguage({
         locale
@@ -208,6 +209,24 @@ const appTools = (options = {
           (0, _utils.cleanRequireCache)([
             require.resolve("./analyze")
           ]);
+        },
+        async modifyFileSystemRoutes({ entrypoint, routes }) {
+          nestedRoutes[entrypoint.entryName] = routes;
+          return {
+            entrypoint,
+            routes
+          };
+        },
+        async beforeGenerateRoutes({ entrypoint, code }) {
+          const { distDirectory } = api.useAppContext();
+          if (!_utils.fs.existsSync(distDirectory)) {
+            await _utils.fs.mkdir(distDirectory);
+          }
+          await _utils.fs.writeJSON(_path.default.resolve(distDirectory, _utils.NESTED_ROUTE_SPEC_FILE), nestedRoutes);
+          return {
+            entrypoint,
+            code
+          };
         }
       };
     }

package/dist/esm/analyze/constants.js

@@ -28,8 +28,12 @@ export var FILE_SYSTEM_ROUTES_COMPONENTS_DIR = "internal_components";
 export var NESTED_ROUTE = {
   LAYOUT_FILE: "layout",
   LAYOUT_LOADER_FILE: "layout.loader",
+  LAYOUT_DATA_FILE: "layout.data",
+  LAYOUT_CLIENT_LOADER: "layout.data.client",
   PAGE_FILE: "page",
   PAGE_LOADER_FILE: "page.loader",
+  PAGE_DATA_FILE: "layout.data",
+  PAGE_CLIENT_LOADER: "page.data.client",
   LOADING_FILE: "loading",
   ERROR_FILE: "error",
   LOADER_FILE: "loader",

package/dist/esm/analyze/nestedRoutes.js

@@ -45,7 +45,10 @@ export var optimizeRoute = function(routeTree) {
     ];
   }
   var children = routeTree.children;
-  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config) {
+  var hasPage = children.some(function(child) {
+    return child.index;
+  });
+  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config && !routeTree.clientData && !hasPage) {
     var newRoutes = children.map(function(child) {
       var routePath = "".concat(routeTree.path ? routeTree.path : "").concat(child.path ? "/".concat(child.path) : "");
       var newRoute = _object_spread_props(_object_spread({}, child), {
@@ -179,6 +182,12 @@ export var walk = function() {
               route.loader = itemPath;
             }
           }
+          if (itemWithoutExt === NESTED_ROUTE.LAYOUT_CLIENT_LOADER) {
+            route.clientData = itemPath;
+          }
+          if (itemWithoutExt === NESTED_ROUTE.LAYOUT_DATA_FILE) {
+            route.data = itemPath;
+          }
           if (itemWithoutExt === NESTED_ROUTE.LAYOUT_CONFIG_FILE) {
             if (!route.config) {
               route.config = itemPath;
@@ -190,6 +199,12 @@ export var walk = function() {
           if (itemWithoutExt === NESTED_ROUTE.PAGE_LOADER_FILE) {
             pageLoaderFile = itemPath;
           }
+          if (itemWithoutExt === NESTED_ROUTE.PAGE_CLIENT_LOADER) {
+            route.clientData = itemPath;
+          }
+          if (itemWithoutExt === NESTED_ROUTE.PAGE_DATA_FILE) {
+            route.data = itemPath;
+          }
           if (itemWithoutExt === NESTED_ROUTE.PAGE_CONFIG_FILE) {
             pageConfigFile = itemPath;
           }

package/dist/esm/analyze/templates.js

@@ -99,12 +99,13 @@ export var fileSystemRoutes = function() {
           loadersMapFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, "map.json");
           importLazyCode = '\n    import { lazy } from "react";\n    import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"\n  ';
           rootLayoutCode = "";
-          getDataLoaderPath = function(loaderId) {
+          getDataLoaderPath = function(loaderId, clientData) {
             if (!ssrMode) {
               return "";
             }
+            var clientDataStr = clientData ? "&clientData=".concat(clientData) : "";
             if (nestedRoutesEntry) {
-              return "?mapFile=".concat(slash(loadersMapFile), "&loaderId=").concat(loaderId);
+              return "?mapFile=".concat(slash(loadersMapFile), "&loaderId=").concat(loaderId).concat(clientDataStr);
             }
             return "";
           };
@@ -129,15 +130,17 @@ export var fileSystemRoutes = function() {
                 errors.push(route2.error);
                 error = "error_".concat(errors.length - 1);
               }
-              if (route2.loader) {
+              if (route2.loader || route2.data) {
                 loaders.push(route2.loader);
                 var loaderId = loaders.length - 1;
                 loader = "loader_".concat(loaderId);
                 loadersMap[loader] = {
                   routeId: route2.id,
-                  filePath: route2.loader,
-                  inline: false
+                  filePath: route2.data || route2.loader,
+                  clientData: Boolean(route2.clientData),
+                  inline: Boolean(route2.data)
                 };
+                loader = "loader_".concat(loaderId);
               }
               if (typeof route2.config === "string") {
                 configs.push(route2.config);
@@ -252,9 +255,9 @@ export var fileSystemRoutes = function() {
             for (_iterator1 = Object.entries(loadersMap)[Symbol.iterator](); !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
               _step_value = _sliced_to_array(_step1.value, 2), key = _step_value[0], loaderInfo = _step_value[1];
               if (loaderInfo.inline) {
-                importLoadersCode += "import { loader as ".concat(key, ' } from "').concat(slash(loaderInfo.filePath)).concat(getDataLoaderPath(key), '";\n');
+                importLoadersCode += "import { loader as ".concat(key, ' } from "').concat(slash(loaderInfo.filePath)).concat(getDataLoaderPath(key, loaderInfo.clientData), '";\n');
               } else {
-                importLoadersCode += "import ".concat(key, ' from "').concat(slash(loaderInfo.filePath)).concat(getDataLoaderPath(key), '";\n');
+                importLoadersCode += "import ".concat(key, ' from "').concat(slash(loaderInfo.filePath)).concat(getDataLoaderPath(key, loaderInfo.clientData), '";\n');
               }
             }
           } catch (err) {

package/dist/esm/builder/shared/builderPlugins/adapterSSR.js

@@ -253,6 +253,6 @@ function applySSRDataLoader(chain, options) {
   var appDirectory = appContext.appDirectory;
   var _normalizedConfig_source = normalizedConfig.source, _normalizedConfig_source_entriesDir = _normalizedConfig_source.entriesDir, entriesDir = _normalizedConfig_source_entriesDir === void 0 ? "./src" : _normalizedConfig_source_entriesDir;
   var absolutePath = path.resolve(appDirectory, entriesDir).split(path.sep).join("(\\\\|/)");
-  var reg = new RegExp("".concat(absolutePath, ".*\\.loader\\.[t|j]s$"));
+  var reg = new RegExp("".concat(absolutePath, ".*\\.(loader|data|data.client)\\.[t|j]sx?$"));
   chain.module.rule("ssr-data-loader").test(reg).use("data-loader").loader(require.resolve("@modern-js/plugin-data-loader/loader")).end();
 }

package/dist/esm/builder/shared/bundlerPlugins/RouterPlugin.js

@@ -172,28 +172,30 @@ export var RouterPlugin = /* @__PURE__ */ function() {
                 var oldHtml = compilation.assets[htmlName];
                 var enableInlineRouteManifests = _this1.enableInlineRouteManifests, disableFilenameHash = _this1.disableFilenameHash, staticJsDir = _this1.staticJsDir, scriptLoading = _this1.scriptLoading, nonce = _this1.nonce;
                 var nonceAttr = nonce ? 'nonce="'.concat(nonce, '"') : "";
-                if (enableInlineRouteManifests) {
-                  compilation.updateAsset(
-                    htmlName,
-                    new RawSource(oldHtml.source().toString().replace(placeholder, "<script ".concat(nonceAttr, ">").concat(injectedContent, "</script>"))),
-                    // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-                    void 0
-                  );
-                } else {
-                  var scriptPath = "".concat(staticJsDir, "/").concat(ROUTE_MANIFEST_HOLDER, "-").concat(entryName).concat(disableFilenameHash ? ".js" : ".".concat(generateContentHash(injectedContent), ".js"));
-                  var scriptUrl = "".concat(publicPath).concat(scriptPath);
-                  var scriptLoadingAttr = (
-                    // eslint-disable-next-line no-nested-ternary
-                    scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? 'type="module"' : ""
-                  );
-                  var script = "<script ".concat(scriptLoadingAttr, " ").concat(nonceAttr, ' src="').concat(scriptUrl, '"></script>');
-                  compilation.updateAsset(
-                    htmlName,
-                    new RawSource(oldHtml.source().toString().replace(placeholder, script)),
-                    // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-                    void 0
-                  );
-                  compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+                if (oldHtml) {
+                  if (enableInlineRouteManifests) {
+                    compilation.updateAsset(
+                      htmlName,
+                      new RawSource(oldHtml.source().toString().replace(placeholder, "<script ".concat(nonceAttr, ">").concat(injectedContent, "</script>"))),
+                      // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                      void 0
+                    );
+                  } else {
+                    var scriptPath = "".concat(staticJsDir, "/").concat(ROUTE_MANIFEST_HOLDER, "-").concat(entryName).concat(disableFilenameHash ? ".js" : ".".concat(generateContentHash(injectedContent), ".js"));
+                    var scriptUrl = "".concat(publicPath).concat(scriptPath);
+                    var scriptLoadingAttr = (
+                      // eslint-disable-next-line no-nested-ternary
+                      scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? 'type="module"' : ""
+                    );
+                    var script = "<script ".concat(scriptLoadingAttr, " ").concat(nonceAttr, ' src="').concat(scriptUrl, '"></script>');
+                    compilation.updateAsset(
+                      htmlName,
+                      new RawSource(oldHtml.source().toString().replace(placeholder, script)),
+                      // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                      void 0
+                    );
+                    compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+                  }
                 }
               };
               stats = compilation.getStats().toJson({

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import path from "path";
 import { lintPlugin } from "@modern-js/plugin-lint";
-import { cleanRequireCache, emptyDir, getCommand, getArgv } from "@modern-js/utils";
+import { cleanRequireCache, emptyDir, getCommand, getArgv, fs, NESTED_ROUTE_SPEC_FILE } from "@modern-js/utils";
 import { castArray } from "@modern-js/utils/lodash";
 import { getLocaleLanguage } from "@modern-js/plugin-i18n/language-detector";
 import analyzePlugin from "./analyze";
@@ -301,6 +301,7 @@ export var appTools = function() {
       api.setAppContext(_object_spread_props(_object_spread({}, appContext), {
         toolsType: "app-tools"
       }));
+      var nestedRoutes = {};
       var locale = getLocaleLanguage();
       i18n.changeLanguage({
         locale: locale
@@ -601,6 +602,59 @@ export var appTools = function() {
               ];
             });
           })();
+        },
+        modifyFileSystemRoutes: function modifyFileSystemRoutes(param) {
+          var entrypoint = param.entrypoint, routes = param.routes;
+          return _async_to_generator(function() {
+            return _ts_generator(this, function(_state) {
+              nestedRoutes[entrypoint.entryName] = routes;
+              return [
+                2,
+                {
+                  entrypoint: entrypoint,
+                  routes: routes
+                }
+              ];
+            });
+          })();
+        },
+        beforeGenerateRoutes: function beforeGenerateRoutes(param) {
+          var entrypoint = param.entrypoint, code = param.code;
+          return _async_to_generator(function() {
+            var distDirectory;
+            return _ts_generator(this, function(_state) {
+              switch (_state.label) {
+                case 0:
+                  distDirectory = api.useAppContext().distDirectory;
+                  if (!!fs.existsSync(distDirectory))
+                    return [
+                      3,
+                      2
+                    ];
+                  return [
+                    4,
+                    fs.mkdir(distDirectory)
+                  ];
+                case 1:
+                  _state.sent();
+                  _state.label = 2;
+                case 2:
+                  return [
+                    4,
+                    fs.writeJSON(path.resolve(distDirectory, NESTED_ROUTE_SPEC_FILE), nestedRoutes)
+                  ];
+                case 3:
+                  _state.sent();
+                  return [
+                    2,
+                    {
+                      entrypoint: entrypoint,
+                      code: code
+                    }
+                  ];
+              }
+            });
+          })();
         }
       };
     }

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

@@ -28,8 +28,12 @@ export const FILE_SYSTEM_ROUTES_COMPONENTS_DIR = "internal_components";
 export const NESTED_ROUTE = {
   LAYOUT_FILE: "layout",
   LAYOUT_LOADER_FILE: "layout.loader",
+  LAYOUT_DATA_FILE: "layout.data",
+  LAYOUT_CLIENT_LOADER: "layout.data.client",
   PAGE_FILE: "page",
   PAGE_LOADER_FILE: "page.loader",
+  PAGE_DATA_FILE: "layout.data",
+  PAGE_CLIENT_LOADER: "page.data.client",
   LOADING_FILE: "loading",
   ERROR_FILE: "error",
   LOADER_FILE: "loader",

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

@@ -43,7 +43,8 @@ export const optimizeRoute = (routeTree) => {
     ];
   }
   const { children } = routeTree;
-  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config) {
+  const hasPage = children.some((child) => child.index);
+  if (!routeTree._component && !routeTree.error && !routeTree.loading && !routeTree.config && !routeTree.clientData && !hasPage) {
     const newRoutes = children.map((child) => {
       const routePath = `${routeTree.path ? routeTree.path : ""}${child.path ? `/${child.path}` : ""}`;
       const newRoute = {
@@ -119,6 +120,12 @@ export const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldV
         route.loader = itemPath;
       }
     }
+    if (itemWithoutExt === NESTED_ROUTE.LAYOUT_CLIENT_LOADER) {
+      route.clientData = itemPath;
+    }
+    if (itemWithoutExt === NESTED_ROUTE.LAYOUT_DATA_FILE) {
+      route.data = itemPath;
+    }
     if (itemWithoutExt === NESTED_ROUTE.LAYOUT_CONFIG_FILE) {
       if (!route.config) {
         route.config = itemPath;
@@ -130,6 +137,12 @@ export const walk = async (dirname, rootDir, alias, entryName, isMainEntry, oldV
     if (itemWithoutExt === NESTED_ROUTE.PAGE_LOADER_FILE) {
       pageLoaderFile = itemPath;
     }
+    if (itemWithoutExt === NESTED_ROUTE.PAGE_CLIENT_LOADER) {
+      route.clientData = itemPath;
+    }
+    if (itemWithoutExt === NESTED_ROUTE.PAGE_DATA_FILE) {
+      route.data = itemPath;
+    }
     if (itemWithoutExt === NESTED_ROUTE.PAGE_CONFIG_FILE) {
       pageConfigFile = itemPath;
     }

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

@@ -132,12 +132,13 @@ export const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, ent
     import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
   `;
   let rootLayoutCode = ``;
-  const getDataLoaderPath = (loaderId) => {
+  const getDataLoaderPath = (loaderId, clientData) => {
     if (!ssrMode) {
       return "";
     }
+    const clientDataStr = clientData ? `&clientData=${clientData}` : "";
     if (nestedRoutesEntry) {
-      return `?mapFile=${slash(loadersMapFile)}&loaderId=${loaderId}`;
+      return `?mapFile=${slash(loadersMapFile)}&loaderId=${loaderId}${clientDataStr}`;
     }
     return "";
   };
@@ -162,15 +163,17 @@ export const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, ent
         errors.push(route.error);
         error = `error_${errors.length - 1}`;
       }
-      if (route.loader) {
+      if (route.loader || route.data) {
         loaders.push(route.loader);
         const loaderId = loaders.length - 1;
         loader = `loader_${loaderId}`;
         loadersMap[loader] = {
           routeId: route.id,
-          filePath: route.loader,
-          inline: false
+          filePath: route.data || route.loader,
+          clientData: Boolean(route.clientData),
+          inline: Boolean(route.data)
         };
+        loader = `loader_${loaderId}`;
       }
       if (typeof route.config === "string") {
         configs.push(route.config);
@@ -269,10 +272,10 @@ export const fileSystemRoutes = async ({ routes, ssrMode, nestedRoutesEntry, ent
   let importLoadersCode = "";
   for (const [key, loaderInfo] of Object.entries(loadersMap)) {
     if (loaderInfo.inline) {
-      importLoadersCode += `import { loader as ${key} } from "${slash(loaderInfo.filePath)}${getDataLoaderPath(key)}";
+      importLoadersCode += `import { loader as ${key} } from "${slash(loaderInfo.filePath)}${getDataLoaderPath(key, loaderInfo.clientData)}";
 `;
     } else {
-      importLoadersCode += `import ${key} from "${slash(loaderInfo.filePath)}${getDataLoaderPath(key)}";
+      importLoadersCode += `import ${key} from "${slash(loaderInfo.filePath)}${getDataLoaderPath(key, loaderInfo.clientData)}";
 `;
     }
   }

package/dist/esm-node/builder/shared/builderPlugins/adapterSSR.js

@@ -143,6 +143,6 @@ function applySSRDataLoader(chain, options) {
   const { appDirectory } = appContext;
   const { entriesDir = "./src" } = normalizedConfig.source;
   const absolutePath = path.resolve(appDirectory, entriesDir).split(path.sep).join("(\\\\|/)");
-  const reg = new RegExp(`${absolutePath}.*\\.loader\\.[t|j]s$`);
+  const reg = new RegExp(`${absolutePath}.*\\.(loader|data|data.client)\\.[t|j]sx?$`);
   chain.module.rule("ssr-data-loader").test(reg).use("data-loader").loader(require.resolve("@modern-js/plugin-data-loader/loader")).end();
 }

package/dist/esm-node/builder/shared/bundlerPlugins/RouterPlugin.js

@@ -154,28 +154,30 @@ export class RouterPlugin {
           const oldHtml = compilation.assets[htmlName];
           const { enableInlineRouteManifests, disableFilenameHash, staticJsDir, scriptLoading, nonce } = this;
           const nonceAttr = nonce ? `nonce="${nonce}"` : "";
-          if (enableInlineRouteManifests) {
-            compilation.updateAsset(
-              htmlName,
-              new RawSource(oldHtml.source().toString().replace(placeholder, `<script ${nonceAttr}>${injectedContent}</script>`)),
-              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-              void 0
-            );
-          } else {
-            const scriptPath = `${staticJsDir}/${ROUTE_MANIFEST_HOLDER}-${entryName}${disableFilenameHash ? ".js" : `.${generateContentHash(injectedContent)}.js`}`;
-            const scriptUrl = `${publicPath}${scriptPath}`;
-            const scriptLoadingAttr = (
-              // eslint-disable-next-line no-nested-ternary
-              scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? `type="module"` : ""
-            );
-            const script = `<script ${scriptLoadingAttr} ${nonceAttr} src="${scriptUrl}"></script>`;
-            compilation.updateAsset(
-              htmlName,
-              new RawSource(oldHtml.source().toString().replace(placeholder, script)),
-              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-              void 0
-            );
-            compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+          if (oldHtml) {
+            if (enableInlineRouteManifests) {
+              compilation.updateAsset(
+                htmlName,
+                new RawSource(oldHtml.source().toString().replace(placeholder, `<script ${nonceAttr}>${injectedContent}</script>`)),
+                // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                void 0
+              );
+            } else {
+              const scriptPath = `${staticJsDir}/${ROUTE_MANIFEST_HOLDER}-${entryName}${disableFilenameHash ? ".js" : `.${generateContentHash(injectedContent)}.js`}`;
+              const scriptUrl = `${publicPath}${scriptPath}`;
+              const scriptLoadingAttr = (
+                // eslint-disable-next-line no-nested-ternary
+                scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? `type="module"` : ""
+              );
+              const script = `<script ${scriptLoadingAttr} ${nonceAttr} src="${scriptUrl}"></script>`;
+              compilation.updateAsset(
+                htmlName,
+                new RawSource(oldHtml.source().toString().replace(placeholder, script)),
+                // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+                void 0
+              );
+              compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+            }
           }
         }
         if (prevManifestAsset) {