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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGES_DIR_NAME = exports.NESTED_ROUTES_DIR = exports.JS_EXTENSIONS = exports.INDEX_FILE_NAME = exports.HTML_PARTIALS_FOLDER = exports.HTML_PARTIALS_EXTENSIONS = exports.FILE_SYSTEM_ROUTES_LAYOUT = exports.FILE_SYSTEM_ROUTES_INDEX = exports.FILE_SYSTEM_ROUTES_IGNORED_REGEX = exports.FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT = exports.FILE_SYSTEM_ROUTES_FILE_NAME = exports.FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = exports.FILE_SYSTEM_ROUTES_COMPONENTS_DIR = exports.ENTRY_POINT_FILE_NAME = exports.ENTRY_BOOTSTRAP_FILE_NAME = exports.APP_FILE_NAME = void 0;
+exports.TEMP_LOADERS_DIR = exports.PAGES_DIR_NAME = exports.NESTED_ROUTES_DIR = exports.LOADER_EXPORT_NAME = exports.JS_EXTENSIONS = exports.INDEX_FILE_NAME = exports.HTML_PARTIALS_FOLDER = exports.HTML_PARTIALS_EXTENSIONS = exports.FILE_SYSTEM_ROUTES_LAYOUT = exports.FILE_SYSTEM_ROUTES_INDEX = exports.FILE_SYSTEM_ROUTES_IGNORED_REGEX = exports.FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT = exports.FILE_SYSTEM_ROUTES_FILE_NAME = exports.FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = exports.FILE_SYSTEM_ROUTES_COMPONENTS_DIR = exports.ENTRY_POINT_FILE_NAME = exports.ENTRY_BOOTSTRAP_FILE_NAME = exports.APP_FILE_NAME = void 0;
 const JS_EXTENSIONS = ['.js', '.ts', '.jsx', '.tsx'];
 exports.JS_EXTENSIONS = JS_EXTENSIONS;
 const INDEX_FILE_NAME = 'index';
@@ -16,6 +16,10 @@ const NESTED_ROUTES_DIR = 'routes';
 exports.NESTED_ROUTES_DIR = NESTED_ROUTES_DIR;
 const FILE_SYSTEM_ROUTES_FILE_NAME = 'routes.js';
 exports.FILE_SYSTEM_ROUTES_FILE_NAME = FILE_SYSTEM_ROUTES_FILE_NAME;
+const LOADER_EXPORT_NAME = 'loader';
+exports.LOADER_EXPORT_NAME = LOADER_EXPORT_NAME;
+const TEMP_LOADERS_DIR = '__loaders__';
+exports.TEMP_LOADERS_DIR = TEMP_LOADERS_DIR;
 const ENTRY_POINT_FILE_NAME = 'index.js';
 exports.ENTRY_POINT_FILE_NAME = ENTRY_POINT_FILE_NAME;
 const ENTRY_BOOTSTRAP_FILE_NAME = 'bootstrap.js';

package/dist/js/node/analyze/generateCode.js

@@ -17,6 +17,11 @@ var _nestedRoutes = require("./nestedRoutes");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const loader = {
+  '.js': 'jsx',
+  '.ts': 'tsx'
+};
+const EXTERNAL_REGEXP = /^[^./]|^\.[^./]|^\.\.[^/]/;
 const createImportSpecifier = specifiers => {
   let defaults = '';
   const named = [];
@@ -73,15 +78,10 @@ const createImportStatements = statements => {
 };
 exports.createImportStatements = createImportStatements;
 const buildLoader = async (entry, outfile) => {
-  const loader = {
-    '.js': 'jsx',
-    '.ts': 'tsx'
-  };
-  const EXTERNAL_REGEXP = /^[^./]|^\.[^./]|^\.\.[^/]/;
   const command = (0, _commands.getCommand)();
   await _esbuild.default.build({
-    format: 'cjs',
-    platform: 'node',
+    format: 'esm',
+    platform: 'browser',
     target: 'esnext',
     loader,
     watch: command === 'dev' && {},
@@ -110,6 +110,20 @@ const buildLoader = async (entry, outfile) => {
     }]
   });
 };
+const buildServerLoader = async (entry, outfile) => {
+  const command = (0, _commands.getCommand)();
+  await _esbuild.default.build({
+    format: 'cjs',
+    platform: 'node',
+    target: 'esnext',
+    loader,
+    watch: command === 'dev' && {},
+    bundle: true,
+    logLevel: 'error',
+    entryPoints: [entry],
+    outfile
+  });
+};
 const generateCode = async (appContext, config, entrypoints, api) => {
   var _config$runtime, _config$runtime$route;
   const {
@@ -123,7 +137,7 @@ const generateCode = async (appContext, config, entrypoints, api) => {
   const islegacy = Boolean(config === null || config === void 0 ? void 0 : (_config$runtime = config.runtime) === null || _config$runtime === void 0 ? void 0 : (_config$runtime$route = _config$runtime.router) === null || _config$runtime$route === void 0 ? void 0 : _config$runtime$route.legacy);
   const {
     mountId
-  } = config.output;
+  } = config.html;
   const getRoutes = islegacy ? _getClientRoutes.getClientRoutesLegacy : _getClientRoutes.getClientRoutes;
   await Promise.all(entrypoints.map(generateEntryCode));
   async function generateEntryCode(entrypoint) {
@@ -188,28 +202,34 @@ 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.default.join(internalDirectory, entryName, 'routes.server.js');
-          const outputRoutesServerFile = _path.default.join(distDirectory, 'loader-routes', entryName, 'index.js');
+          const routesServerFile = _path.default.join(internalDirectory, entryName, 'route-server-loaders.js');
+          const outputRoutesServerFile = _path.default.join(distDirectory, _utils.LOADER_ROUTES_DIR, entryName, 'index.js');
           const code = templates.routesForServer({
             routes: routes,
-            alias: {
-              name: internalSrcAlias,
-              basename: srcDirectory
-            }
+            internalDirectory,
+            entryName
           });
           await _utils.fs.ensureFile(routesServerFile);
           await _utils.fs.writeFile(routesServerFile, code);
-          await buildLoader(routesServerFile, outputRoutesServerFile);
+          const loaderEntryFile = _path.default.join(internalDirectory, entryName, _constants.TEMP_LOADERS_DIR, 'entry.js');
+          const loaderIndexFile = _path.default.join(internalDirectory, entryName, _constants.TEMP_LOADERS_DIR, 'index.js');
+          if (await _utils.fs.pathExists(loaderEntryFile)) {
+            await buildLoader(loaderEntryFile, loaderIndexFile);
+          }
+          if (await _utils.fs.pathExists(routesServerFile)) {
+            await buildServerLoader(routesServerFile, outputRoutesServerFile);
+          }
         }
         _utils.fs.outputFileSync(_path.default.resolve(internalDirectory, `./${entryName}/${_constants.FILE_SYSTEM_ROUTES_FILE_NAME}`), code, 'utf8');
       }

package/dist/js/node/analyze/getBundleEntry.js

@@ -63,7 +63,7 @@ const getBundleEntry = (appContext, config) => {
   }
   if (!disableDefaultEntries) {
     // find main entry point which server route is '/'.
-    const entriesDirAbs = (0, _utils.ensureAbsolutePath)(appDirectory, entriesDir);
+    const entriesDirAbs = (0, _utils.ensureAbsolutePath)(appDirectory, entriesDir || '');
     const found = defaults.find(({
       entryName,
       entry,

package/dist/js/node/analyze/getFileSystemEntry.js

@@ -74,7 +74,7 @@ const getFileSystemEntry = (appContext, config) => {
       entriesDir
     }
   } = config;
-  const src = (0, _utils.ensureAbsolutePath)(appDirectory, entriesDir);
+  const src = (0, _utils.ensureAbsolutePath)(appDirectory, entriesDir || '');
   if (_fs.default.existsSync(src)) {
     if (_fs.default.statSync(src).isDirectory()) {
       return scanDir(isBundleEntry(src) ? [src] : _fs.default.readdirSync(src).map(file => _path.default.join(src, file)).filter(file => _fs.default.statSync(file).isDirectory() && isBundleEntry(file)));

package/dist/js/node/analyze/getHtmlTemplate.js

@@ -45,7 +45,7 @@ const getHtmlTemplate = async (entrypoints, api, {
       configDir
     }
   } = config;
-  const htmlDir = _path.default.resolve(appDirectory, configDir, _constants.HTML_PARTIALS_FOLDER);
+  const htmlDir = _path.default.resolve(appDirectory, configDir || '', _constants.HTML_PARTIALS_FOLDER);
   const htmlTemplates = {};
   for (const entrypoint of entrypoints) {
     const {

package/dist/js/node/analyze/getServerRoutes.js

@@ -100,9 +100,13 @@ const applyRouteOptions = (original, routeOptions) => {
  */
 const collectHtmlRoutes = (entrypoints, appContext, config) => {
   const {
+    html: {
+      disableHtmlFolder
+    },
     output: {
-      htmlPath,
-      disableHtmlFolder,
+      distPath: {
+        html: htmlPath
+      } = {},
       enableModernMode
     },
     server: {
@@ -163,14 +167,14 @@ const collectStaticRoutes = (appContext, config) => {
       publicRoutes = {}
     }
   } = config;
-  const publicFolder = _path.default.resolve(appDirectory, configDir, 'public');
+  const publicFolder = _path.default.resolve(appDirectory, configDir || '', 'public');
   return _fs.default.existsSync(publicFolder) ? (0, _utils2.walkDirectory)(publicFolder).map(filePath => {
     const urlPath = `${(0, _utils.urlJoin)(toPosix(filePath).slice(toPosix(publicFolder).length))}`;
     return {
       urlPath: publicRoutes[(0, _utils.removeLeadingSlash)(urlPath)] || urlPath,
       isSPA: true,
       isSSR: false,
-      entryPath: toPosix(_path.default.relative(_path.default.resolve(appDirectory, configDir), filePath))
+      entryPath: toPosix(_path.default.relative(_path.default.resolve(appDirectory, configDir || ''), filePath))
     };
   }) : [];
 };

package/dist/js/node/analyze/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modifyServerRoutes = exports.modifyFileSystemRoutes = exports.modifyEntryRuntimePlugins = exports.modifyEntryRenderFunction = exports.modifyEntryImports = exports.modifyEntryExport = exports.modifyAsyncEntry = exports.htmlPartials = exports.default = exports.beforeGenerateRoutes = exports.addRuntimeExports = exports.addDefineTypes = void 0;
+exports.default = void 0;
 var path = _interopRequireWildcard(require("path"));
-var _plugin = require("@modern-js/plugin");
 var _utils = require("@modern-js/utils");
 var _lodash = require("@modern-js/utils/lodash");
 var _builder = require("../builder");
@@ -13,6 +12,7 @@ var _printInstructions = require("../utils/printInstructions");
 var _routes = require("../utils/routes");
 var _config = require("../utils/config");
 var _commands = require("../utils/commands");
+var _config2 = require("../config");
 var _utils2 = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,43 +20,8 @@ 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; }
 const debug = (0, _utils.createDebugger)('plugin-analyze');
-const modifyEntryImports = (0, _plugin.createAsyncWaterfall)();
-exports.modifyEntryImports = modifyEntryImports;
-const modifyEntryExport = (0, _plugin.createAsyncWaterfall)();
-exports.modifyEntryExport = modifyEntryExport;
-const addRuntimeExports = (0, _plugin.createAsyncWaterfall)();
-exports.addRuntimeExports = addRuntimeExports;
-const modifyEntryRuntimePlugins = (0, _plugin.createAsyncWaterfall)();
-exports.modifyEntryRuntimePlugins = modifyEntryRuntimePlugins;
-const modifyEntryRenderFunction = (0, _plugin.createAsyncWaterfall)();
-exports.modifyEntryRenderFunction = modifyEntryRenderFunction;
-const modifyAsyncEntry = (0, _plugin.createAsyncWaterfall)();
-exports.modifyAsyncEntry = modifyAsyncEntry;
-const modifyFileSystemRoutes = (0, _plugin.createAsyncWaterfall)();
-exports.modifyFileSystemRoutes = modifyFileSystemRoutes;
-const modifyServerRoutes = (0, _plugin.createAsyncWaterfall)();
-exports.modifyServerRoutes = modifyServerRoutes;
-const htmlPartials = (0, _plugin.createAsyncWaterfall)();
-exports.htmlPartials = htmlPartials;
-const beforeGenerateRoutes = (0, _plugin.createAsyncWaterfall)();
-exports.beforeGenerateRoutes = beforeGenerateRoutes;
-const addDefineTypes = (0, _plugin.createAsyncWaterfall)();
-exports.addDefineTypes = addDefineTypes;
 var _default = () => ({
   name: '@modern-js/plugin-analyze',
-  registerHook: {
-    modifyAsyncEntry,
-    modifyEntryImports,
-    modifyEntryExport,
-    modifyEntryRuntimePlugins,
-    modifyEntryRenderFunction,
-    modifyFileSystemRoutes,
-    modifyServerRoutes,
-    htmlPartials,
-    addRuntimeExports,
-    beforeGenerateRoutes,
-    addDefineTypes
-  },
   setup: api => {
     let pagesDir = [];
     let originEntrypoints = [];
@@ -71,7 +36,7 @@ var _default = () => ({
         } catch (_unused) {
           // FIXME:
         }
-        const apiOnly = await (0, _utils.isApiOnly)(appContext.appDirectory, resolvedConfig === null || resolvedConfig === void 0 ? void 0 : (_resolvedConfig$sourc = resolvedConfig.source) === null || _resolvedConfig$sourc === void 0 ? void 0 : _resolvedConfig$sourc.entriesDir);
+        const apiOnly = await (0, _utils.isApiOnly)(appContext.appDirectory, (_resolvedConfig$sourc = resolvedConfig.source) === null || _resolvedConfig$sourc === void 0 ? void 0 : _resolvedConfig$sourc.entriesDir);
         await hookRunners.addRuntimeExports();
         if (apiOnly) {
           const {
@@ -138,7 +103,7 @@ var _default = () => ({
         if (buildCommands.includes(command)) {
           const normalizedConfig = api.useResolvedConfigContext();
           const builder = await (0, _builder.createBuilderForEdenX)({
-            normalizedConfig,
+            normalizedConfig: normalizedConfig,
             appContext,
             compatPluginConfig: {
               async onBeforeBuild({
@@ -199,6 +164,15 @@ var _default = () => ({
       watchFiles() {
         return pagesDir;
       },
+      resolvedConfig({
+        resolved
+      }) {
+        const appContext = api.useAppContext();
+        const config = (0, _config2.initialNormalizedConfig)(resolved, appContext);
+        return {
+          resolved: config
+        };
+      },
       async fileChange(e) {
         const appContext = api.useAppContext();
         const {

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

@@ -19,6 +19,12 @@ 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 (0, _utils2.hasLoader)(filename)) {
+    return (0, _utils.normalizeToPosixPath)(filename);
+  }
+  return undefined;
+};
 const replaceDynamicPath = routePath => {
   return routePath.replace(/\[(.*?)\]/g, ':$1');
 };
@@ -56,7 +62,8 @@ const walk = async (dirname, rootDir, alias, entryName) => {
   routePath = replaceDynamicPath(routePath);
   const route = {
     path: routePath,
-    children: []
+    children: [],
+    isRoot
   };
   const items = await _utils.fs.readdir(dirname);
   for (const item of items) {
@@ -76,17 +83,21 @@ const walk = async (dirname, rootDir, alias, entryName) => {
     }
     if (itemWithoutExt === LAYOUT_FILE) {
       route._component = (0, _utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
+      route.loader = await getLoaderPath(itemPath);
     }
     if (itemWithoutExt === PAGE_FILE) {
       var _route$children2;
       const childRoute = createIndexRoute({
         _component: (0, _utils2.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 = (0, _utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
-    }
+
+    // if (itemWithoutExt === LOADER_FILE) {
+    //   route.loader = replaceWithAlias(alias.basename, itemPath, alias.name);
+    // }
+
     if (itemWithoutExt === LOADING_FILE) {
       route.loading = (0, _utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
     }

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

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.routesForServer = exports.renderFunction = exports.index = exports.html = exports.fileSystemRoutes = void 0;
+var _path = _interopRequireDefault(require("path"));
+var _utils = require("@modern-js/utils");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -87,13 +91,11 @@ const html = partials => `
 exports.html = html;
 const routesForServer = ({
   routes,
-  alias
+  internalDirectory,
+  entryName
 }) => {
-  const {
-    name,
-    basename
-  } = alias;
   const loaders = [];
+  const loaderIndexFile = _path.default.join(internalDirectory, entryName, _constants.TEMP_LOADERS_DIR, 'index.js');
   const traverseRouteTree = route => {
     let children;
     if ('children' in route && route.children) {
@@ -125,39 +127,44 @@ 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}
   `;
 };
 exports.routesForServer = routesForServer;
-const fileSystemRoutes = ({
+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.default.join('@_modern_js_internal', entryName, _constants.TEMP_LOADERS_DIR, 'index.js');
+  const loadersMapFile = _path.default.join(internalDirectory, entryName, _constants.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.default.join(__dirname, '../builder/loaders/routerLoader')}!`;
   }
-  const loadings = [];
-  const errors = [];
-  const loaders = [];
   const traverseRouteTree = route => {
     let children;
     if ('children' in route && route.children) {
@@ -179,13 +186,19 @@ 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) {
@@ -208,7 +221,7 @@ 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), {}, {
@@ -224,14 +237,34 @@ 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.default.join(internalDirectory, entryName, _constants.TEMP_LOADERS_DIR, 'entry.js');
+    await _utils.fs.ensureFile(loaderEntryFile);
+    await _utils.fs.writeFile(loaderEntryFile, loaderEntryCode);
+    await _utils.fs.writeJSON(loadersMapFile, loadersMap);
+    await Promise.all(loaders.map(async (loader, index) => {
+      const name = `loader_${index}`;
+      const filename = _path.default.join(internalDirectory, entryName, _constants.TEMP_LOADERS_DIR, `${name}.js`);
+      const code = `
+          export { loader as ${name} } from '${loader}'
+        `;
+      await _utils.fs.ensureFile(filename);
+      await _utils.fs.writeFile(filename, code);
+    }));
+  }
   return `
     ${importLazyCode}
+    ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}
-    ${importLoaderComponentsCode}
+    ${importLoadersCode}
     ${routeComponentsCode}
   `;
 };

package/dist/js/node/analyze/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.walkDirectory = exports.replaceWithAlias = exports.isRouteComponentFile = exports.getDefaultImports = void 0;
+exports.walkDirectory = exports.replaceWithAlias = exports.parseModule = exports.isRouteComponentFile = exports.hasLoader = exports.getDefaultImports = void 0;
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
 var _utils = require("@modern-js/utils");
+var _esbuild = require("esbuild");
+var _esModuleLexer = require("es-module-lexer");
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const walkDirectory = dir => _fs.default.readdirSync(dir).reduce((previous, filename) => {
@@ -59,7 +61,7 @@ const getDefaultImports = ({
       specifiers: [{
         imported: 'routes'
       }],
-      value: (0, _utils.normalizeToPosixPath)(`${internalDirAlias}/${entryName}/${_constants.FILE_SYSTEM_ROUTES_FILE_NAME}`)
+      value: (0, _utils.normalizeToPosixPath)(`${internalDirAlias}/${entryName}/${_constants.FILE_SYSTEM_ROUTES_FILE_NAME.replace('.js', '')}`)
     };
     if (fileSystemRoutes.globalApp) {
       imports.push({
@@ -94,4 +96,30 @@ const isRouteComponentFile = filePath => {
 };
 exports.isRouteComponentFile = isRouteComponentFile;
 const replaceWithAlias = (base, filePath, alias) => (0, _utils.normalizeToPosixPath)(_path.default.join(alias, _path.default.relative(base, filePath)));
-exports.replaceWithAlias = replaceWithAlias;
+exports.replaceWithAlias = replaceWithAlias;
+const parseModule = async ({
+  source,
+  filename
+}) => {
+  let content = source;
+  if (filename.endsWith('.tsx') || filename.endsWith('.jsx')) {
+    const result = await (0, _esbuild.transform)(content, {
+      loader: _path.default.extname(filename).slice(1),
+      format: 'esm'
+    });
+    content = result.code;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/await-thenable
+  return await (0, _esModuleLexer.parse)(content);
+};
+exports.parseModule = parseModule;
+const hasLoader = async filename => {
+  const source = await _utils.fs.readFile(filename);
+  const [, moduleExports] = await parseModule({
+    source: source.toString(),
+    filename
+  });
+  return moduleExports.some(e => e.n === _constants.LOADER_EXPORT_NAME);
+};
+exports.hasLoader = hasLoader;

package/dist/js/node/builder/builderPlugins/compatModern.js

@@ -69,14 +69,15 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
       }
 
       // apply copy plugin
-      // const copyPatterns = createCopyPatterns(chain, appContext, modernConfig);
-      const defaultCopyPattern = (0, _share.createCopyPattern)(appContext, modernConfig, 'public', chain);
-      chain.plugin(CHAIN_ID.PLUGIN.COPY).tap(args => {
-        var _args$;
-        return [{
-          patterns: [...(((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.patterns) || []), defaultCopyPattern]
-        }];
-      });
+      if (chain.plugins.has(CHAIN_ID.PLUGIN.COPY)) {
+        const defaultCopyPattern = (0, _share.createCopyPattern)(appContext, modernConfig, 'public', chain);
+        chain.plugin(CHAIN_ID.PLUGIN.COPY).tap(args => {
+          var _args$;
+          return [{
+            patterns: [...(((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.patterns) || []), defaultCopyPattern]
+          }];
+        });
+      }
       const {
         entrypoints
       } = appContext;
@@ -84,6 +85,11 @@ const PluginCompatModern = (appContext, modernConfig, options) => ({
       chain.plugin('route-plugin').use(_routerPlugin.default, [{
         existNestedRoutes
       }]);
+      if (target !== 'node') {
+        const bareServerModuleReg = /\.(server|node)\.[tj]sx?$/;
+        chain.module.rule(CHAIN_ID.RULE.JS).exclude.add(bareServerModuleReg);
+        chain.module.rule('bare-server-module').test(bareServerModuleReg).use('server-module-loader').loader(require.resolve("../loaders/serverModuleLoader"));
+      }
       function isHtmlEnabled(config, target) {
         var _config$tools;
         return ((_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : _config$tools.htmlPlugin) !== false && target !== 'node' && target !== 'web-worker';
@@ -115,7 +121,7 @@ function applyCallbacks(api, options) {
  */
 function applyNodeCompat(chain, modernConfig, isProd) {
   // apply node resolve extensions
-  for (const ext of ['.node.js', '.node.jsx', '.node.ts', '.node.tsx']) {
+  for (const ext of ['.node.js', '.node.jsx', '.node.ts', '.node.tsx', '.server.js', '.server.ts', '.server.ts', '.server.tsx']) {
     chain.resolve.extensions.prepend(ext);
   }
 
@@ -175,9 +181,9 @@ function applyBottomHtmlWebpackPlugin({
     // FIXME: the only need necessary
     const baseTemplateParams = _objectSpread({
       entryName,
-      title: (0, _utils.getEntryOptions)(entryName, modernConfig.output.title, modernConfig.output.titleByEntries, appContext.packageName),
-      mountId: modernConfig.output.mountId
-    }, (0, _utils.getEntryOptions)(entryName, modernConfig.output.templateParameters, modernConfig.output.templateParametersByEntries, appContext.packageName));
+      title: (0, _utils.getEntryOptions)(entryName, modernConfig.html.title, modernConfig.html.titleByEntries, appContext.packageName),
+      mountId: modernConfig.html.mountId
+    }, (0, _utils.getEntryOptions)(entryName, modernConfig.html.templateParameters, modernConfig.html.templateParametersByEntries, appContext.packageName));
     chain.plugin(`${CHAIN_ID.PLUGIN.HTML}-${entryName}`).tap(args => [_objectSpread(_objectSpread({}, args[0] || {}), {}, {
       __internal__: true,
       bottomTemplate: appContext.htmlTemplates[`__${entryName}-bottom__`] && (0, _lodash.template)(appContext.htmlTemplates[`__${entryName}-bottom__`])(baseTemplateParams)