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

package/dist/js/modern/analyze/index.js

@@ -2,7 +2,6 @@ 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 { createAsyncWaterfall } from '@modern-js/plugin';
 import { createDebugger, fs, isApiOnly } from '@modern-js/utils';
 import { cloneDeep } from '@modern-js/utils/lodash';
 import { createBuilderForEdenX } from "../builder";
@@ -10,34 +9,11 @@ import { printInstructions } from "../utils/printInstructions";
 import { generateRoutes } from "../utils/routes";
 import { emitResolvedConfig } from "../utils/config";
 import { getCommand } from "../utils/commands";
+import { initialNormalizedConfig } from "../config";
 import { isRouteComponentFile } from "./utils";
 const debug = createDebugger('plugin-analyze');
-export const modifyEntryImports = createAsyncWaterfall();
-export const modifyEntryExport = createAsyncWaterfall();
-export const addRuntimeExports = createAsyncWaterfall();
-export const modifyEntryRuntimePlugins = createAsyncWaterfall();
-export const modifyEntryRenderFunction = createAsyncWaterfall();
-export const modifyAsyncEntry = createAsyncWaterfall();
-export const modifyFileSystemRoutes = createAsyncWaterfall();
-export const modifyServerRoutes = createAsyncWaterfall();
-export const htmlPartials = createAsyncWaterfall();
-export const beforeGenerateRoutes = createAsyncWaterfall();
-export const addDefineTypes = createAsyncWaterfall();
 export default (() => ({
   name: '@modern-js/plugin-analyze',
-  registerHook: {
-    modifyAsyncEntry,
-    modifyEntryImports,
-    modifyEntryExport,
-    modifyEntryRuntimePlugins,
-    modifyEntryRenderFunction,
-    modifyFileSystemRoutes,
-    modifyServerRoutes,
-    htmlPartials,
-    addRuntimeExports,
-    beforeGenerateRoutes,
-    addDefineTypes
-  },
   setup: api => {
     let pagesDir = [];
     let originEntrypoints = [];
@@ -52,7 +28,7 @@ export default (() => ({
         } catch (_unused) {
           // FIXME:
         }
-        const apiOnly = await 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 isApiOnly(appContext.appDirectory, (_resolvedConfig$sourc = resolvedConfig.source) === null || _resolvedConfig$sourc === void 0 ? void 0 : _resolvedConfig$sourc.entriesDir);
         await hookRunners.addRuntimeExports();
         if (apiOnly) {
           const {
@@ -119,7 +95,7 @@ export default (() => ({
         if (buildCommands.includes(command)) {
           const normalizedConfig = api.useResolvedConfigContext();
           const builder = await createBuilderForEdenX({
-            normalizedConfig,
+            normalizedConfig: normalizedConfig,
             appContext,
             compatPluginConfig: {
               async onBeforeBuild({
@@ -180,6 +156,15 @@ export default (() => ({
       watchFiles() {
         return pagesDir;
       },
+      resolvedConfig({
+        resolved
+      }) {
+        const appContext = api.useAppContext();
+        const config = initialNormalizedConfig(resolved, appContext);
+        return {
+          resolved: config
+        };
+      },
       async fileChange(e) {
         const appContext = api.useAppContext();
         const {

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);
+};

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

@@ -62,14 +62,15 @@ export const PluginCompatModern = (appContext, modernConfig, options) => ({
       }
 
       // apply copy plugin
-      // const copyPatterns = createCopyPatterns(chain, appContext, modernConfig);
-      const defaultCopyPattern = 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 = 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;
@@ -77,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';
@@ -107,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);
   }
 
@@ -167,9 +173,9 @@ function applyBottomHtmlWebpackPlugin({
     // FIXME: the only need necessary
     const baseTemplateParams = _objectSpread({
       entryName,
-      title: getEntryOptions(entryName, modernConfig.output.title, modernConfig.output.titleByEntries, appContext.packageName),
-      mountId: modernConfig.output.mountId
-    }, getEntryOptions(entryName, modernConfig.output.templateParameters, modernConfig.output.templateParametersByEntries, appContext.packageName));
+      title: getEntryOptions(entryName, modernConfig.html.title, modernConfig.html.titleByEntries, appContext.packageName),
+      mountId: modernConfig.html.mountId
+    }, 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__`] && lodashTemplate(appContext.htmlTemplates[`__${entryName}-bottom__`])(baseTemplateParams)

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

@@ -1,11 +1,11 @@
+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 { createBuilder } from '@modern-js/builder';
 import { builderWebpackProvider } from '@modern-js/builder-webpack-provider';
 import { applyOptionsChain, isUseSSRBundle } from '@modern-js/utils';
 import { PluginCompatModern } from "./builderPlugins/compatModern";
-import { createHtmlConfig } from "./createHtmlConfig";
-import { createOutputConfig } from "./createOutputConfig";
-import { createSourceConfig } from "./createSourceConfig";
-import { createToolsConfig } from "./createToolsConfig";
+import { createCopyPattern } from "./share";
 function getBuilderTargets(normalizedConfig) {
   const targets = ['web'];
   if (normalizedConfig.output.enableModernMode && !targets.includes('modern-web')) {
@@ -21,8 +21,8 @@ export async function createBuilderForEdenX({
   appContext,
   compatPluginConfig
 }) {
-  const builderConfig = createBuilderProviderConfig(normalizedConfig, appContext);
   // create webpack provider
+  const builderConfig = createBuilderProviderConfig(normalizedConfig, appContext);
   const webpackProvider = builderWebpackProvider({
     builderConfig
   });
@@ -32,25 +32,40 @@ export async function createBuilderForEdenX({
   await applyBuilderPlugins(builder, normalizedConfig, appContext, compatPluginConfig);
   return builder;
 }
-function createBuilderProviderConfig(normalizedConfig, appContext) {
-  const source = createSourceConfig(normalizedConfig, appContext);
-  const html = createHtmlConfig(normalizedConfig, appContext);
+export function createBuilderProviderConfig(normalizedConfig, appContext) {
+  var _normalizedConfig$ser;
   const output = createOutputConfig(normalizedConfig, appContext);
-  const tools = createToolsConfig(normalizedConfig);
-  return {
-    source,
-    html,
+  return _objectSpread(_objectSpread({}, normalizedConfig), {}, {
+    source: _objectSpread(_objectSpread({}, normalizedConfig.source), {}, {
+      resolveExtensionPrefix: '.web'
+    }),
     output,
-    tools,
     dev: {
+      port: (_normalizedConfig$ser = normalizedConfig.server) === null || _normalizedConfig$ser === void 0 ? void 0 : _normalizedConfig$ser.port,
       https: normalizedConfig.dev.https,
       assetPrefix: normalizedConfig.dev.assetPrefix
     },
-    performance: {
+    html: _objectSpread(_objectSpread({}, normalizedConfig.html), {}, {
+      templateByEntries: normalizedConfig.html.templateByEntries || appContext.htmlTemplates
+    }),
+    performance: _objectSpread(_objectSpread({}, normalizedConfig.performance), {}, {
       // `@modern-js/webpack` used to remove moment locale by default
       removeMomentLocale: true
-    }
-  };
+    })
+  });
+  function createOutputConfig(config, appContext) {
+    const defaultCopyPattern = createCopyPattern(appContext, config, 'upload');
+    const {
+      copy
+    } = config.output;
+    const copyOptions = Array.isArray(copy) ? copy : copy === null || copy === void 0 ? void 0 : copy.patterns;
+    const builderCopy = [...(copyOptions || []), defaultCopyPattern];
+    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
+    });
+  }
 }
 export function createBuilderOptions(target, appContext) {
   // create entries

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/builder/share.js

@@ -2,7 +2,7 @@ import path from 'path';
 import { template as lodashTemplate } from '@modern-js/utils/lodash';
 import { removeTailSlash } from '@modern-js/utils';
 export function createCopyPattern(appContext, config, patternsType, chain) {
-  const configDir = path.resolve(appContext.appDirectory, config.source.configDir);
+  const configDir = path.resolve(appContext.appDirectory, config.source.configDir || './config');
   const uploadDir = path.posix.join(configDir.replace(/\\/g, '/'), 'upload');
   const publicDir = path.posix.join(configDir.replace(/\\/g, '/'), 'public');
   const minifiedJsRexExp = /\.min\.js/;

package/dist/js/modern/commands/build.js

@@ -6,6 +6,10 @@ import { logger, printBuildError } from '@modern-js/utils';
 import { generateRoutes } from "../utils/routes";
 import { buildServerConfig } from "../utils/config";
 export const build = async (api, options) => {
+  if (options !== null && options !== void 0 && options.analyze) {
+    // Builder will read this env var to enable bundle analyzer
+    process.env.BUNDLE_ANALYZE = 'true';
+  }
   let resolvedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
   const hookRunners = api.useHookRunners();
@@ -49,9 +53,11 @@ export const build = async (api, options) => {
     configFile: serverConfigFile
   });
   try {
-    var _appContext$builder;
     logger.info('Create a production build...\n');
-    await ((_appContext$builder = appContext.builder) === null || _appContext$builder === void 0 ? void 0 : _appContext$builder.build());
+    if (!appContext.builder) {
+      throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
+    }
+    await appContext.builder.build();
   } catch (error) {
     printBuildError(error);
     // eslint-disable-next-line no-process-exit

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

@@ -1,21 +1,26 @@
 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";
 import { createServer, injectDataLoaderPlugin } from "../utils/createServer";
 import { generateRoutes } from "../utils/routes";
 import { getSpecifiedEntries } from "../utils/getSpecifiedEntries";
 import { buildServerConfig } from "../utils/config";
 export const dev = async (api, options) => {
-  let userConfig = api.useResolvedConfigContext();
+  var _normalizedConfig$too;
+  if (options.analyze) {
+    // Builder will read this env var to enable bundle analyzer
+    process.env.BUNDLE_ANALYZE = 'true';
+  }
+  let normalizedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
   const hookRunners = api.useHookRunners();
-  userConfig = _objectSpread(_objectSpread({}, userConfig), {}, {
+  normalizedConfig = _objectSpread(_objectSpread({}, normalizedConfig), {}, {
     cliOptions: options
   });
-  ResolvedConfigContext.set(userConfig);
+  ResolvedConfigContext.set(normalizedConfig);
   const {
     appDirectory,
     distDirectory,
@@ -41,39 +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) {
-    var _appContext$builder;
-    compiler = await ((_appContext$builder = appContext.builder) === null || _appContext$builder === void 0 ? void 0 : _appContext$builder.createCompiler());
+    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: userConfig.dev.https
-    }), userConfig.tools.devServer),
-    compiler,
+      https: normalizedConfig.dev.https
+    }, (_normalizedConfig$too = normalizedConfig.tools) === null || _normalizedConfig$too === void 0 ? void 0 : _normalizedConfig$too.devServer),
+    compiler: compiler || null,
     pwd: appDirectory,
-    config: userConfig,
+    config: normalizedConfig,
     serverConfigFile,
     internalPlugins: injectDataLoaderPlugin(serverInternalPlugins)
-  });
-  app.listen(port, async err => {
-    if (err) {
-      throw err;
-    }
-    if (!apiOnly) {
-      logger.info(`Starting dev server...\n`);
-    } else {
-      printInstructions(hookRunners, appContext, userConfig);
-    }
-  });
+  };
+  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/inspect.js

@@ -1,8 +1,10 @@
 import { join } from 'path';
 export const inspect = async (api, options) => {
-  var _appContext$builder;
   const appContext = api.useAppContext();
-  return (_appContext$builder = appContext.builder) === null || _appContext$builder === void 0 ? void 0 : _appContext$builder.inspectConfig({
+  if (!appContext.builder) {
+    throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
+  }
+  return appContext.builder.inspectConfig({
     env: options.env,
     verbose: options.verbose,
     outputPath: join(appContext === null || appContext === void 0 ? void 0 : appContext.builder.context.distPath, options.output),