@modern-js/app-tools 2.0.0-beta.2 → 2.0.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,256 @@
 # @modern-js/app-tools
 
+## 2.0.0-beta.3
+
+### Major Changes
+
+- dda38c9c3e: chore: v2
+
+### Minor Changes
+
+- edd1cfb1af: feat: modernjs Access builder compiler
+  feat: modernjs 接入 builder 构建
+- b710adb: feat: extract the data loader
+  feat: 提取 data loader
+- bbe4c4a: feat: add @modern-js/plugin-swc
+
+  feat: 新增 @modern-js/plugin-swc 插件
+
+- e4558a0: feat:
+
+  1. add `runBin` function
+  2. config internal plugins constants in the app/module/doc tools
+  3. add app/module/doc tools internal plugins
+
+  feat:
+
+  1. 添加 `runBin` 函数
+  2. 在 app/module/doc tools 里配置内部插件
+  3. 增加 app/module/doc tools 使用的插件常量
+
+- 543be9558e: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- c9f912ca4d: feat(app-tools): improve build logs of dev and build command
+
+  feat(app-tools): 优化 dev 和 build 过程中的日志展示
+
+- 0078da4: fix: remove webpack oneof rule in new config, save in legacy mode.
+  fix: 在新模式下删除 webpack oneof 规则，兼容模式下保留
+- 103973cde9: fix: builder tools.webpackChain config args not match the Modernjs tools.webpackChain
+  fix: builder tools.webpackChain 配置传参无法匹配 Modernjs tools.webpackChain
+- d4e8e6f: fix: modernjs dev server can't start normaly
+  fix: modernjs dev 服务端不能正常启动
+- 0b2d1ef02b: fix: repeat register `babel-plugin-lodash`
+  fix: 重复注册 `babel-plugin-lodash`
+- 82cef85ed7: fix: specify builder compiler framework
+  fix: 指明 builder 构建时框架
+- 3e57f2bd58: feat: add document feature with plugin
+
+  feat: 增加 document 功能插件
+
+- 85edee888c: feat(app-tools): support tools.htmlPlugin config
+
+  feat(app-tools): 支持 tools.htmlPlugin 配置项
+
+- 2e60319: fix: some optimizations for router and loader
+  fix: 一些 router 和 loader 的优化
+  q
+- a55b965: fix: rename "loader routes" file to avoid influence ssr
+  fix: 重命名 loader routes 避免影响 ssr
+- 5402fdb0ca: feat(Builder): add output.disableTsChecker config
+
+  feat(Builder): 新增 output.disableTsChecker 配置项
+
+- dc8eeb9cbb: fix: clear distDirectory in prepare hook & inject data loader plugin to server
+  fix: 在 prepare hook 中清理 dist 目录，并且向 server 中注入 data loader plugin
+- cc971eabfc: refactor: move server plugin load logic in `@modern-js/core`
+  refactor：移除在 `@modern-js/core` 中的 server 插件加载逻辑
+- 5b9049f2e9: feat: inject async js chunk when streaming ssr
+  feat: streaming ssr 时, 注入 async 类型的 js chunk
+- d4a456659b: chore: rename plugin-jarvis to plugin-lint
+
+  chore: 重命名 plugin-jarvis 为 plugin-lint
+
+- 6bda14ed71: feat: refactor router with react-router@6.4
+
+  feat: 使用 react-router@6.4 重构路由模块
+
+- d36c6ee126: fix(app-tools): failed to run inspect command
+
+  fix(app-tools): 修复运行 inspect 命令失败的问题
+
+- 92004d1906: feat: support load chunks parallelly
+  feat: 支持并行加载 chunks
+- b8bbe036c7: feat: change type logic
+  feat: 修改类型相关的逻辑
+- 40ed5874c6: feat: inject css chunk into html for streaming ssr
+  feat: streaming ssr 返回的 html 注入 css chunk
+- af4422d67f: feat(builder): complete utils of tools.webpack
+
+  feat(builder): 补全 tools.webpack 提供的 utils 方法
+
+- 87c1ff86b9: feat(app-tools): attach builder instance to appContext
+
+  feat(app-tools): 将 builder 实例挂载到 appContext 上
+
+- c258e34202: fix: add builder hooks `beforeBuild` params
+  fix: 新增 builder hooks `beforeBuild` 的参数
+- 3b3d709: fix(app-tools): cli --analyze option not work
+
+  fix(app-tools): 修复 --analyze 命令行参数不生效的问题
+
+- 8b8e1bb571: feat: support nested routes
+  feat: 支持嵌套路由
+- 88eb147: fix(app-tools): builder's onBeforeCreateDevServer hook not work
+
+  fix(app-tools): 修复 builder 的 onBeforeCreateDevServer hook 无法触发的问题
+
+- 8c32dc4: fix: builder should not be checked when apiOnly is true
+  fix: 当 apiOnly 为 true 时，builder 不应该被校验
+- a2c8cc3: fix: change tools define userconfig type
+  fix: 修改工程定义的 UserConfig 类型
+- b7a96c3: fix(app-tools): loose CLI init options after restart
+
+  fix(app-tools): 修复重启 CLI 后丢失 init options 的问题
+
+- 7de97ae24f: fix: `deploy` command has't load `builder` instance
+  fix: `deploy` 命令没有加载 builder 实例
+- cce8ece: fix: handle some `TODO` & `FIXME`, change some tests
+  fix: 处理一些 `TODO` 和 `FIXME`, 修改了一些 tests
+- c3b7de4bfb: fix(app-tools): dev.assetPrefix not work
+
+  fix(app-tools): 修复 dev.assetPrefix 配置项不生效的问题
+
+- 16a3441: fix(app-tools): remove duplicated port log
+
+  fix(app-tools): 修复 port 重复的日志输出两遍的问题
+
+- 92004d1906: fix: use loadable lazy instead of loadable
+  fix: 使用 loadable lazy 组件替代 loadable
+- c677befc22: fix(app-tools): compat legacy resolve behavior
+
+  fix(app-tools): 兼容旧版本 node_modules 解析逻辑
+
+- 3f7cde5caa: fix: builder plugin setup can't get config
+  fix: builder 插件在 setup 阶段无法拿到 config
+- 99213e4bae: fix: process does't exit when exec command
+  fix: 修复执行命令时进程未退出的问题
+- b16fd964da: fix: `modern-js/app-tools` pass error config to builder.
+  fix: `modern-js/app-tools` 传递错误的 config 给 builder.
+- 7eefedd7ca: fix: add html-webpack-plugin `__internal__` options, for bottom template
+  fix: 为了 bottom template, 增加 `html-webpack-plugin` `__internal__` 配置项，
+- 14b712da84: fix: use consistent alias type and default value across packages
+
+  fix: 在各个包中使用一致的 alias 类型定义和默认值
+
+- Updated dependencies [c9f912ca4d]
+- Updated dependencies [95be7cc49c]
+- Updated dependencies [e439457a51]
+- Updated dependencies [4d1545f8c0]
+- Updated dependencies [2bc090c089]
+- Updated dependencies [f0abb2e]
+- Updated dependencies [f96a725211]
+- Updated dependencies [828f42f9ce]
+- Updated dependencies [060abd4]
+- Updated dependencies [309cd71]
+- Updated dependencies [c7456864a8]
+- Updated dependencies [c9e800d39a]
+- Updated dependencies [d4e8e6f]
+- Updated dependencies [0ff846fb56]
+- Updated dependencies [3cf9633]
+- Updated dependencies [6604f1b]
+- Updated dependencies [57077b2c64]
+- Updated dependencies [d032d49e09]
+- Updated dependencies [6aca875]
+- Updated dependencies [2ff6167be0]
+- Updated dependencies [287f298990]
+- Updated dependencies [15bf09d9c8]
+- Updated dependencies [423188db70]
+- Updated dependencies [fd2d652c03]
+- Updated dependencies [0c2d8dae31]
+- Updated dependencies [2edad29dd7]
+- Updated dependencies [85edee888c]
+- Updated dependencies [2e60319]
+- Updated dependencies [a2509bfbdb]
+- Updated dependencies [3998875791]
+- Updated dependencies [ab3924a]
+- Updated dependencies [3998875791]
+- Updated dependencies [ba86b8b711]
+- Updated dependencies [61f21d1e77]
+- Updated dependencies [5402fdb0ca]
+- Updated dependencies [2ae58176fe]
+- Updated dependencies [92f0eade39]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [5d67c26cdb]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f2e9]
+- Updated dependencies [a3af050]
+- Updated dependencies [d4a456659b]
+- Updated dependencies [18360a38d7]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [0b314e6946]
+- Updated dependencies [92004d1906]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [5911154]
+- Updated dependencies [40ed5874c6]
+- Updated dependencies [af4422d67f]
+- Updated dependencies [705adc1]
+- Updated dependencies [f680410]
+- Updated dependencies [87c1ff86b9]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9c3e]
+- Updated dependencies [102d32e4ba]
+- Updated dependencies [c258e34202]
+- Updated dependencies [812913ccdd]
+- Updated dependencies [7248342e4d]
+- Updated dependencies [568eab1e42]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [ae71096d45]
+- Updated dependencies [73cd29dd9f]
+- Updated dependencies [b710adb]
+- Updated dependencies [b7a96c3]
+- Updated dependencies [a23010138d]
+- Updated dependencies [75d1b2657c]
+- Updated dependencies [cce8ece]
+- Updated dependencies [18aaf42249]
+- Updated dependencies [f179749375]
+- Updated dependencies [3fae2d03b3]
+- Updated dependencies [ea7cf06]
+- Updated dependencies [8a6d45f105]
+- Updated dependencies [bbe4c4a]
+- Updated dependencies [ebbeed1ece]
+- Updated dependencies [90e2879520]
+- Updated dependencies [e4558a0]
+- Updated dependencies [df41d71ade]
+- Updated dependencies [f727e5c6cc]
+- Updated dependencies [5e3cecd523]
+- Updated dependencies [abf3421a75]
+- Updated dependencies [da2d1fc3c2]
+- Updated dependencies [543be9558e]
+- Updated dependencies [fd1d9fd]
+- Updated dependencies [14b712da84]
+  - @modern-js/builder-webpack-provider@2.0.0-beta.3
+  - @modern-js/builder-shared@2.0.0-beta.3
+  - @modern-js/core@2.0.0-beta.3
+  - @modern-js/prod-server@2.0.0-beta.3
+  - @modern-js/server@2.0.0-beta.3
+  - @modern-js/builder-plugin-esbuild@2.0.0-beta.3
+  - @modern-js/plugin-data-loader@2.0.0-beta.3
+  - @modern-js/builder-plugin-node-polyfill@2.0.0-beta.3
+  - @modern-js/utils@2.0.0-beta.3
+  - @modern-js/types@2.0.0-beta.3
+  - @modern-js/node-bundle-require@2.0.0-beta.3
+  - @modern-js/plugin-lint@2.0.0-beta.3
+  - @modern-js/plugin@2.0.0-beta.3
+  - @modern-js/builder@2.0.0-beta.3
+  - @modern-js/plugin-i18n@2.0.0-beta.3
+  - @modern-js/new-action@2.0.0-beta.3
+  - @modern-js/upgrade@2.0.0-beta.3
+
 ## 2.0.0-beta.2
 
 ### Major Changes

package/bin/modern.js

@@ -1,3 +1,12 @@
 #!/usr/bin/env node
+const {
+  INTERNAL_APP_TOOLS_PLUGINS,
+  INTERNAL_SERVER_PLUGINS,
+} = require('@modern-js/utils');
 
-require('@modern-js/core/bin');
+require('@modern-js/core/runBin').run({
+  internalPlugins: {
+    cli: INTERNAL_APP_TOOLS_PLUGINS,
+    server: INTERNAL_SERVER_PLUGINS,
+  },
+});

package/dist/js/modern/analyze/constants.js

@@ -4,6 +4,8 @@ export const APP_FILE_NAME = 'App';
 export const PAGES_DIR_NAME = 'pages';
 export const NESTED_ROUTES_DIR = 'routes';
 export const FILE_SYSTEM_ROUTES_FILE_NAME = 'routes.js';
+export const LOADER_EXPORT_NAME = 'loader';
+export const TEMP_LOADERS_DIR = '__loaders__';
 export const ENTRY_POINT_FILE_NAME = 'index.js';
 export const ENTRY_BOOTSTRAP_FILE_NAME = 'bootstrap.js';
 export const FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = /^\[(\S+)\]([*+?]?)$/;

package/dist/js/modern/analyze/generateCode.js

@@ -1,13 +1,18 @@
 import path from 'path';
-import { fs, logger } from '@modern-js/utils';
+import { fs, LOADER_ROUTES_DIR, logger } from '@modern-js/utils';
 import { useResolvedConfigContext } from '@modern-js/core';
 import esbuild from 'esbuild';
 import { getCommand } from "../utils/commands";
 import * as templates from "./templates";
 import { getClientRoutes, getClientRoutesLegacy } from "./getClientRoutes";
-import { FILE_SYSTEM_ROUTES_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_BOOTSTRAP_FILE_NAME } from "./constants";
+import { FILE_SYSTEM_ROUTES_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_BOOTSTRAP_FILE_NAME, TEMP_LOADERS_DIR } from "./constants";
 import { getDefaultImports } from "./utils";
 import { walk } from "./nestedRoutes";
+const loader = {
+  '.js': 'jsx',
+  '.ts': 'tsx'
+};
+const EXTERNAL_REGEXP = /^[^./]|^\.[^./]|^\.\.[^/]/;
 const createImportSpecifier = specifiers => {
   let defaults = '';
   const named = [];
@@ -63,15 +68,10 @@ export const createImportStatements = statements => {
   }) => `import ${createImportSpecifier(specifiers)} from '${value}';\n${initialize || ''}`).join('\n');
 };
 const buildLoader = async (entry, outfile) => {
-  const loader = {
-    '.js': 'jsx',
-    '.ts': 'tsx'
-  };
-  const EXTERNAL_REGEXP = /^[^./]|^\.[^./]|^\.\.[^/]/;
   const command = getCommand();
   await esbuild.build({
-    format: 'cjs',
-    platform: 'node',
+    format: 'esm',
+    platform: 'browser',
     target: 'esnext',
     loader,
     watch: command === 'dev' && {},
@@ -100,6 +100,20 @@ const buildLoader = async (entry, outfile) => {
     }]
   });
 };
+const buildServerLoader = async (entry, outfile) => {
+  const command = getCommand();
+  await esbuild.build({
+    format: 'cjs',
+    platform: 'node',
+    target: 'esnext',
+    loader,
+    watch: command === 'dev' && {},
+    bundle: true,
+    logLevel: 'error',
+    entryPoints: [entry],
+    outfile
+  });
+};
 export const generateCode = async (appContext, config, entrypoints, api) => {
   var _config$runtime, _config$runtime$route;
   const {
@@ -178,28 +192,34 @@ export const generateCode = async (appContext, config, entrypoints, api) => {
           code
         } = await hookRunners.beforeGenerateRoutes({
           entrypoint,
-          code: templates.fileSystemRoutes({
+          code: await templates.fileSystemRoutes({
             routes,
             ssrMode: mode,
             nestedRoutesEntry: entrypoint.nestedRoutesEntry,
-            entryName: entrypoint.entryName
+            entryName: entrypoint.entryName,
+            internalDirectory
           })
         });
 
         // extract nested router loaders
         if (entrypoint.nestedRoutesEntry) {
-          const routesServerFile = path.join(internalDirectory, entryName, 'routes.server.js');
-          const outputRoutesServerFile = path.join(distDirectory, 'loader-routes', entryName, 'index.js');
+          const routesServerFile = path.join(internalDirectory, entryName, 'route-server-loaders.js');
+          const outputRoutesServerFile = path.join(distDirectory, LOADER_ROUTES_DIR, entryName, 'index.js');
           const code = templates.routesForServer({
             routes: routes,
-            alias: {
-              name: internalSrcAlias,
-              basename: srcDirectory
-            }
+            internalDirectory,
+            entryName
           });
           await fs.ensureFile(routesServerFile);
           await fs.writeFile(routesServerFile, code);
-          await buildLoader(routesServerFile, outputRoutesServerFile);
+          const loaderEntryFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'entry.js');
+          const loaderIndexFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'index.js');
+          if (await fs.pathExists(loaderEntryFile)) {
+            await buildLoader(loaderEntryFile, loaderIndexFile);
+          }
+          if (await fs.pathExists(routesServerFile)) {
+            await buildServerLoader(routesServerFile, outputRoutesServerFile);
+          }
         }
         fs.outputFileSync(path.resolve(internalDirectory, `./${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`), code, 'utf8');
       }

package/dist/js/modern/analyze/getServerRoutes.js

@@ -100,7 +100,8 @@ const collectHtmlRoutes = (entrypoints, appContext, config) => {
     output: {
       distPath: {
         html: htmlPath
-      } = {}
+      } = {},
+      enableModernMode
     },
     server: {
       baseUrl,
@@ -127,8 +128,7 @@ const collectHtmlRoutes = (entrypoints, appContext, config) => {
       isSPA: true,
       isSSR,
       responseHeaders: resHeaders,
-      // FIXME: remove the config.enableModernMode
-      // enableModernMode: Boolean(enableModernMode),
+      enableModernMode: Boolean(enableModernMode),
       bundle: isSSR ? `${SERVER_BUNDLE_DIRECTORY}/${entryName}.js` : undefined
     };
     if (routes !== null && routes !== void 0 && routes.hasOwnProperty(entryName)) {

package/dist/js/modern/analyze/nestedRoutes.js

@@ -2,15 +2,21 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import * as path from 'path';
-import { fs, getRouteId } from '@modern-js/utils';
+import { fs, getRouteId, normalizeToPosixPath } from '@modern-js/utils';
 import { JS_EXTENSIONS } from "./constants";
-import { replaceWithAlias } from "./utils";
+import { hasLoader, replaceWithAlias } from "./utils";
 const LAYOUT_FILE = 'layout';
 const PAGE_FILE = 'page';
 const LOADING_FILE = 'loading';
 const ERROR_FILE = 'error';
 const LOADER_FILE = 'loader';
 const conventionNames = [LAYOUT_FILE, PAGE_FILE, LOADING_FILE, ERROR_FILE, LOADER_FILE];
+const getLoaderPath = async filename => {
+  if (await hasLoader(filename)) {
+    return normalizeToPosixPath(filename);
+  }
+  return undefined;
+};
 const replaceDynamicPath = routePath => {
   return routePath.replace(/\[(.*?)\]/g, ':$1');
 };
@@ -48,7 +54,8 @@ export const walk = async (dirname, rootDir, alias, entryName) => {
   routePath = replaceDynamicPath(routePath);
   const route = {
     path: routePath,
-    children: []
+    children: [],
+    isRoot
   };
   const items = await fs.readdir(dirname);
   for (const item of items) {
@@ -68,17 +75,21 @@ export const walk = async (dirname, rootDir, alias, entryName) => {
     }
     if (itemWithoutExt === LAYOUT_FILE) {
       route._component = replaceWithAlias(alias.basename, itemPath, alias.name);
+      route.loader = await getLoaderPath(itemPath);
     }
     if (itemWithoutExt === PAGE_FILE) {
       var _route$children2;
       const childRoute = createIndexRoute({
         _component: replaceWithAlias(alias.basename, itemPath, alias.name)
       }, rootDir, itemPath, entryName);
+      childRoute.loader = await getLoaderPath(itemPath);
       (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.push(childRoute);
     }
-    if (itemWithoutExt === LOADER_FILE) {
-      route.loader = replaceWithAlias(alias.basename, itemPath, alias.name);
-    }
+
+    // if (itemWithoutExt === LOADER_FILE) {
+    //   route.loader = replaceWithAlias(alias.basename, itemPath, alias.name);
+    // }
+
     if (itemWithoutExt === LOADING_FILE) {
       route.loading = replaceWithAlias(alias.basename, itemPath, alias.name);
     }

package/dist/js/modern/analyze/templates.js

@@ -1,6 +1,9 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+import path from 'path';
+import { fs } from '@modern-js/utils';
+import { TEMP_LOADERS_DIR } from "./constants";
 export const index = ({
   mountId,
   imports,
@@ -78,13 +81,11 @@ export const html = partials => `
 `;
 export const routesForServer = ({
   routes,
-  alias
+  internalDirectory,
+  entryName
 }) => {
-  const {
-    name,
-    basename
-  } = alias;
   const loaders = [];
+  const loaderIndexFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'index.js');
   const traverseRouteTree = route => {
     let children;
     if ('children' in route && route.children) {
@@ -116,38 +117,43 @@ export const routesForServer = ({
     }
   }
   routesCode += `\n];`;
-  const importLoadersCode = loaders.map((loader, index) => {
-    const realLoaderPath = loader.replace(name, basename);
-    return `import loader_${index} from '${realLoaderPath}';\n`;
-  }).join('');
+  let importLoadersCode = '';
+  if (loaders.length > 0) {
+    importLoadersCode = `
+    import { ${loaders.map((loader, index) => `loader_${index}`)} } from "${loaderIndexFile}"`;
+  }
   return `
     ${importLoadersCode}
     ${routesCode}
   `;
 };
-export const fileSystemRoutes = ({
+export const fileSystemRoutes = async ({
   routes,
   ssrMode,
   nestedRoutesEntry,
-  entryName
+  entryName,
+  internalDirectory
 }) => {
-  // The legacy mode and pages dir routes should use loadable
-  // nested routes + renderTostring should use loadable.lazy
-  // nested routes + renderToStream should use react.lazy
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+  const loadersMap = {};
+  const loadersIndexFile = path.join('@_modern_js_internal', entryName, TEMP_LOADERS_DIR, 'index.js');
+  const loadersMapFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'map.json');
   const importLazyCode = `
     import { lazy } from "react";
     import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
   `;
+  let rootLayoutCode = ``;
   let dataLoaderPath = '';
+  let componentLoaderPath = '';
   if (ssrMode) {
     dataLoaderPath = require.resolve(`@modern-js/plugin-data-loader/loader`);
     if (nestedRoutesEntry) {
-      dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}&entryName=${entryName}!`;
+      dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}&mapFile=${loadersMapFile}!`;
     }
+    componentLoaderPath = `${path.join(__dirname, '../builder/loaders/routerLoader')}!`;
   }
-  const loadings = [];
-  const errors = [];
-  const loaders = [];
   const traverseRouteTree = route => {
     let children;
     if ('children' in route && route.children) {
@@ -169,13 +175,19 @@ export const fileSystemRoutes = ({
       }
       if (route.loader) {
         loaders.push(route.loader);
-        loader = `loader_${loaders.length - 1}`;
+        const loaderId = loaders.length - 1;
+        loader = `loader_${loaderId}`;
+        loadersMap[loader] = route.id;
       }
       if (route._component) {
-        if (ssrMode === 'stream') {
-          component = `lazy(() => import(/* webpackChunkName: "${route.id}" */  /* webpackMode: "lazy-once" */ '${route._component}'))`;
+        if (route.isRoot) {
+          rootLayoutCode = `import RootLayout from '${route._component}'`;
+          component = `RootLayout`;
+        } else if (ssrMode === 'string') {
+          component = `loadable(() => import(/* webpackChunkName: "${route.id}" */  '${componentLoaderPath}${route._component}'))`;
         } else {
-          component = `loadable(() => import(/* webpackChunkName: "${route.id}" */  /* webpackMode: "lazy-once" */ '${route._component}'))`;
+          // csr and streaming
+          component = `lazy(() => import(/* webpackChunkName: "${route.id}" */  '${componentLoaderPath}${route._component}'))`;
         }
       }
     } else if (route._component) {
@@ -198,7 +210,7 @@ export const fileSystemRoutes = ({
   for (const route of routes) {
     if ('type' in route) {
       const newRoute = traverseRouteTree(route);
-      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, '$1').replace(/"(loadableLazy.*\))"/g, '$1').replace(/"(lazy.*\))"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(error_[^"])"/g, '$1').replace(/\\"/g, '"')},`;
+      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, '$1').replace(/"(loadableLazy.*\))"/g, '$1').replace(/"(lazy.*\))"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(RootLayout)"/g, '$1').replace(/"(error_[^"])"/g, '$1').replace(/\\"/g, '"')},`;
     } else {
       const component = `loadable(() => import('${route._component}'))`;
       const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
@@ -214,14 +226,34 @@ export const fileSystemRoutes = ({
   const importErrorComponentsCode = errors.map((error, index) => {
     return `import error_${index} from '${error}';\n`;
   }).join('');
-  const importLoaderComponentsCode = loaders.map((loader, index) => {
-    return `import loader_${index} from '${dataLoaderPath}${loader}';\n`;
-  }).join('');
+  let importLoadersCode = '';
+  if (loaders.length > 0) {
+    importLoadersCode = `
+    import { ${loaders.map((loader, index) => `loader_${index}`)} } from "${dataLoaderPath}${loadersIndexFile}"
+  `;
+    const loaderEntryCode = loaders.map((loader, index) => {
+      return `export * from './loader_${index}.js';`;
+    }).join('\n');
+    const loaderEntryFile = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, 'entry.js');
+    await fs.ensureFile(loaderEntryFile);
+    await fs.writeFile(loaderEntryFile, loaderEntryCode);
+    await fs.writeJSON(loadersMapFile, loadersMap);
+    await Promise.all(loaders.map(async (loader, index) => {
+      const name = `loader_${index}`;
+      const filename = path.join(internalDirectory, entryName, TEMP_LOADERS_DIR, `${name}.js`);
+      const code = `
+          export { loader as ${name} } from '${loader}'
+        `;
+      await fs.ensureFile(filename);
+      await fs.writeFile(filename, code);
+    }));
+  }
   return `
     ${importLazyCode}
+    ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}
-    ${importLoaderComponentsCode}
+    ${importLoadersCode}
     ${routeComponentsCode}
   `;
 };

package/dist/js/modern/analyze/utils.js

@@ -1,7 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-import { isReact18, normalizeToPosixPath } from '@modern-js/utils';
-import { FILE_SYSTEM_ROUTES_FILE_NAME } from "./constants";
+import { isReact18, normalizeToPosixPath, fs as fse } from '@modern-js/utils';
+import { transform } from 'esbuild';
+import { parse } from 'es-module-lexer';
+import { FILE_SYSTEM_ROUTES_FILE_NAME, LOADER_EXPORT_NAME } from "./constants";
 export const walkDirectory = dir => fs.readdirSync(dir).reduce((previous, filename) => {
   const filePath = path.join(dir, filename);
   if (fs.statSync(filePath).isDirectory()) {
@@ -51,7 +53,7 @@ export const getDefaultImports = ({
       specifiers: [{
         imported: 'routes'
       }],
-      value: normalizeToPosixPath(`${internalDirAlias}/${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`)
+      value: normalizeToPosixPath(`${internalDirAlias}/${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME.replace('.js', '')}`)
     };
     if (fileSystemRoutes.globalApp) {
       imports.push({
@@ -83,4 +85,28 @@ export const isRouteComponentFile = filePath => {
   }
   return false;
 };
-export const replaceWithAlias = (base, filePath, alias) => normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
+export const replaceWithAlias = (base, filePath, alias) => normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
+export const parseModule = async ({
+  source,
+  filename
+}) => {
+  let content = source;
+  if (filename.endsWith('.tsx') || filename.endsWith('.jsx')) {
+    const result = await transform(content, {
+      loader: path.extname(filename).slice(1),
+      format: 'esm'
+    });
+    content = result.code;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/await-thenable
+  return await parse(content);
+};
+export const hasLoader = async filename => {
+  const source = await fse.readFile(filename);
+  const [, moduleExports] = await parseModule({
+    source: source.toString(),
+    filename
+  });
+  return moduleExports.some(e => e.n === LOADER_EXPORT_NAME);
+};