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

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

@@ -78,6 +78,11 @@ export const PluginCompatModern = (appContext, modernConfig, options) => ({
       chain.plugin('route-plugin').use(RouterPlugin, [{
         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';
@@ -108,7 +113,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);
   }
 

package/dist/js/modern/builder/index.js

@@ -33,6 +33,7 @@ export async function createBuilderForEdenX({
   return builder;
 }
 export function createBuilderProviderConfig(normalizedConfig, appContext) {
+  var _normalizedConfig$ser;
   const output = createOutputConfig(normalizedConfig, appContext);
   return _objectSpread(_objectSpread({}, normalizedConfig), {}, {
     source: _objectSpread(_objectSpread({}, normalizedConfig.source), {}, {
@@ -40,6 +41,7 @@ export function createBuilderProviderConfig(normalizedConfig, appContext) {
     }),
     output,
     dev: {
+      port: (_normalizedConfig$ser = normalizedConfig.server) === null || _normalizedConfig$ser === void 0 ? void 0 : _normalizedConfig$ser.port,
       https: normalizedConfig.dev.https,
       assetPrefix: normalizedConfig.dev.assetPrefix
     },
@@ -61,11 +63,7 @@ export function createBuilderProviderConfig(normalizedConfig, appContext) {
     return _objectSpread(_objectSpread({}, config.output), {}, {
       copy: builderCopy,
       // We need to do this in the app-tools prepare hook because some files will be generated into the dist directory in the analyze process
-      cleanDistPath: false,
-      // `@modern-js/webpack` used to generate asset manifest by default
-      enableAssetManifest: true,
-      // compatible the modern-js with fallback behavior
-      enableAssetFallback: true
+      cleanDistPath: false
     });
   }
 }

package/dist/js/modern/builder/loaders/routerLoader.js

@@ -0,0 +1,20 @@
+function loader(source) {
+  // eslint-disable-next-line @babel/no-invalid-this
+  this.cacheable();
+  // eslint-disable-next-line @babel/no-invalid-this
+  const {
+    target
+  } = this._compiler.options;
+  if (target === 'node' || Array.isArray(target) && target.includes('node')) {
+    return source;
+  }
+  // eslint-disable-next-line @babel/no-invalid-this
+  const {
+    resourcePath
+  } = this;
+  const code = `
+    export { default } from "${resourcePath}";
+  `;
+  return code;
+}
+export default loader;

package/dist/js/modern/builder/loaders/serverModuleLoader.js

@@ -0,0 +1,4 @@
+function loader() {
+  return `module.exports = {}`;
+}
+export default loader;

package/dist/js/modern/commands/dev.js

@@ -1,7 +1,6 @@
 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 { logger } from '@modern-js/utils';
 import { ResolvedConfigContext } from '@modern-js/core';
 import { createFileWatcher } from "../utils/createFileWatcher";
 import { printInstructions } from "../utils/printInstructions";
@@ -47,42 +46,39 @@ export const dev = async (api, options) => {
     }
   });
   await hookRunners.beforeDev();
-  let compiler = null;
+  let compiler;
+  if (!appContext.builder && !apiOnly) {
+    throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
+  }
   if (!apiOnly) {
-    if (!appContext.builder) {
-      throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
-    }
     compiler = await appContext.builder.createCompiler();
   }
   await generateRoutes(appContext);
-  const app = await createServer({
-    dev: _objectSpread(_objectSpread({}, {
-      client: {
-        port: port.toString()
-      },
-      devMiddleware: {
-        writeToDisk: file => !file.includes('.hot-update.')
-      },
-      hot: true,
-      liveReload: true,
+  const serverOptions = {
+    dev: _objectSpread({
       port,
       https: normalizedConfig.dev.https
-    }), (_normalizedConfig$too = normalizedConfig.tools) === null || _normalizedConfig$too === void 0 ? void 0 : _normalizedConfig$too.devServer),
-    compiler,
+    }, (_normalizedConfig$too = normalizedConfig.tools) === null || _normalizedConfig$too === void 0 ? void 0 : _normalizedConfig$too.devServer),
+    compiler: compiler || null,
     pwd: appDirectory,
     config: normalizedConfig,
     serverConfigFile,
     internalPlugins: injectDataLoaderPlugin(serverInternalPlugins)
-  });
-  app.listen(port, async err => {
-    if (err) {
-      throw err;
-    }
-    if (!apiOnly) {
-      logger.info(`Starting dev server...\n`);
-    } else {
+  };
+  if (apiOnly) {
+    const app = await createServer(serverOptions);
+    app.listen(port, async err => {
+      if (err) {
+        throw err;
+      }
       printInstructions(hookRunners, appContext, normalizedConfig);
-    }
-  });
+    });
+  } else {
+    await appContext.builder.startDevServer({
+      compiler,
+      printURLs: false,
+      serverOptions
+    });
+  }
   await createFileWatcher(appContext, normalizedConfig.source.configDir, hookRunners);
 };

package/dist/js/modern/commands/start.js

@@ -16,7 +16,6 @@ export const start = async api => {
   const apiOnly = await isApiOnly(appContext.appDirectory, userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.entriesDir);
   const app = await server({
     pwd: appDirectory,
-    // FIXME: remove the `any` type
     config: userConfig,
     serverConfigFile,
     internalPlugins: injectDataLoaderPlugin(appContext.serverInternalPlugins),

package/dist/js/modern/config/default.js

@@ -36,7 +36,6 @@ export function createDefaultConfig(appContext) {
     disableFilenameHash: false,
     enableLatestDecorators: false,
     polyfill: 'entry',
-    dataUriLimit: 10000,
     cssModuleLocalIdentName: undefined
   };
   const html = {

package/dist/js/modern/config/initial/createOutputConfig.js

@@ -62,6 +62,9 @@ export function createOutputConfig(config) {
       css: cssModuleLocalIdentName
     },
     ssg,
+    // set `true`, only in legacy config
+    enableAssetFallback: true,
+    enableAssetManifest: true,
     enableModernMode,
     disableNodePolyfill
   };

package/dist/js/modern/utils/createFileWatcher.js

@@ -13,7 +13,7 @@ const getPackageConfig = (appDirectory, packageJsonConfig) => {
   const json = JSON.parse(fs.readFileSync(path.resolve(appDirectory, './package.json'), 'utf8'));
   return json[packageJsonConfig !== null && packageJsonConfig !== void 0 ? packageJsonConfig : PACKAGE_JSON_CONFIG_NAME];
 };
-const addServerConfigToDeps = async (dependencies, appDirectory, serverConfigFile) => {
+export const addServerConfigToDeps = async (dependencies, appDirectory, serverConfigFile) => {
   const serverConfig = await getServerConfig(appDirectory, serverConfigFile);
   if (serverConfig) {
     dependencies.push(serverConfig);

package/dist/js/modern/utils/restart.js

@@ -5,7 +5,7 @@ export async function restart(hooksRunner) {
   let hasGetError = false;
   await hooksRunner.beforeRestart();
   try {
-    await cli.init(cli.initOptions);
+    await cli.init(cli.getPrevInitOptions());
   } catch (err) {
     console.error(err);
     hasGetError = true;

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 {
@@ -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/getServerRoutes.js

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

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

@@ -85,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';
@@ -116,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);
   }
 

package/dist/js/node/builder/index.js

@@ -43,6 +43,7 @@ async function createBuilderForEdenX({
   return builder;
 }
 function createBuilderProviderConfig(normalizedConfig, appContext) {
+  var _normalizedConfig$ser;
   const output = createOutputConfig(normalizedConfig, appContext);
   return _objectSpread(_objectSpread({}, normalizedConfig), {}, {
     source: _objectSpread(_objectSpread({}, normalizedConfig.source), {}, {
@@ -50,6 +51,7 @@ function createBuilderProviderConfig(normalizedConfig, appContext) {
     }),
     output,
     dev: {
+      port: (_normalizedConfig$ser = normalizedConfig.server) === null || _normalizedConfig$ser === void 0 ? void 0 : _normalizedConfig$ser.port,
       https: normalizedConfig.dev.https,
       assetPrefix: normalizedConfig.dev.assetPrefix
     },
@@ -71,11 +73,7 @@ function createBuilderProviderConfig(normalizedConfig, appContext) {
     return _objectSpread(_objectSpread({}, config.output), {}, {
       copy: builderCopy,
       // We need to do this in the app-tools prepare hook because some files will be generated into the dist directory in the analyze process
-      cleanDistPath: false,
-      // `@modern-js/webpack` used to generate asset manifest by default
-      enableAssetManifest: true,
-      // compatible the modern-js with fallback behavior
-      enableAssetFallback: true
+      cleanDistPath: false
     });
   }
 }