@modern-js/app-tools 1.21.3 → 2.0.0-beta.0

package/dist/js/modern/analyze/getFileSystemEntry.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { findExists, ensureAbsolutePath } from '@modern-js/utils';
 import { isDefaultExportFunction } from "./isDefaultExportFunction";
-import { JS_EXTENSIONS, INDEX_FILE_NAME, APP_FILE_NAME, PAGES_DIR_NAME, FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT } from "./constants";
+import { JS_EXTENSIONS, INDEX_FILE_NAME, APP_FILE_NAME, PAGES_DIR_NAME, FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT, NESTED_ROUTES_DIR } from "./constants";
 
 const hasIndex = dir => findExists(JS_EXTENSIONS.map(ext => path.resolve(dir, `${INDEX_FILE_NAME}${ext}`)));
 
@@ -10,7 +10,9 @@ const hasApp = dir => findExists(JS_EXTENSIONS.map(ext => path.resolve(dir, `${A
 
 const hasPages = dir => fs.existsSync(path.join(dir, PAGES_DIR_NAME));
 
-const isBundleEntry = dir => hasApp(dir) || hasPages(dir) || hasIndex(dir);
+const hasNestedRoutes = dir => fs.existsSync(path.join(dir, NESTED_ROUTES_DIR));
+
+const isBundleEntry = dir => hasApp(dir) || hasPages(dir) || hasIndex(dir) || hasNestedRoutes(dir);
 
 const scanDir = dirs => dirs.map(dir => {
   const indexFile = hasIndex(dir);
@@ -25,30 +27,47 @@ const scanDir = dirs => dirs.map(dir => {
     };
   }
 
-  if (hasApp(dir)) {
+  const isHasApp = hasApp(dir);
+
+  if (isHasApp) {
     return {
       entryName,
       entry: path.join(dir, APP_FILE_NAME),
       isAutoMount: true,
       customBootstrap
     };
-  } else if (hasPages(dir)) {
-    return {
+  }
+
+  const isHasNestedRoutes = hasNestedRoutes(dir);
+  const isHasPages = hasPages(dir);
+
+  if (isHasNestedRoutes || isHasPages) {
+    const entrypoint = {
       entryName,
-      entry: path.join(dir, PAGES_DIR_NAME),
+      entry: '',
       fileSystemRoutes: {
         globalApp: findExists(JS_EXTENSIONS.map(ext => path.resolve(dir, `./${PAGES_DIR_NAME}/${FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT}${ext}`)))
       },
       isAutoMount: true,
       customBootstrap
     };
-  } else {
-    return {
-      entryName,
-      entry: indexFile,
-      isAutoMount: false
-    };
+
+    if (isHasPages) {
+      entrypoint.entry = path.join(dir, PAGES_DIR_NAME);
+    }
+
+    if (isHasNestedRoutes) {
+      entrypoint.nestedRoutesEntry = path.join(dir, NESTED_ROUTES_DIR);
+    }
+
+    return entrypoint;
   }
+
+  return {
+    entryName,
+    entry: indexFile,
+    isAutoMount: false
+  };
 });
 
 export const getFileSystemEntry = (appContext, config) => {

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

@@ -95,7 +95,8 @@ export default (() => ({
           entrypoints,
           serverRoutes: routes
         }));
-        pagesDir = entrypoints.map(point => point.entry);
+        const nestedRouteEntries = entrypoints.map(point => point.nestedRoutesEntry).filter(Boolean);
+        pagesDir = entrypoints.map(point => point.entry).filter(Boolean).concat(nestedRouteEntries);
         originEntrypoints = cloneDeep(entrypoints);
         await generateCode(appContext, resolvedConfig, entrypoints, api);
         const htmlTemplates = await getHtmlTemplate(entrypoints, api, {

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

@@ -0,0 +1,127 @@
+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 * as path from 'path';
+import { fs, getRouteId } from '@modern-js/utils';
+import { JS_EXTENSIONS } from "./constants";
+import { 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 replaceDynamicPath = routePath => {
+  return routePath.replace(/\[(.*?)\]/g, ':$1');
+};
+
+const createIndexRoute = (routeInfo, rootDir, filename) => {
+  return createRoute(_objectSpread(_objectSpread({}, routeInfo), {}, {
+    index: true,
+    children: undefined
+  }), rootDir, filename);
+};
+
+const createRoute = (routeInfo, rootDir, filename) => {
+  const id = getRouteId(filename, rootDir);
+  return _objectSpread(_objectSpread({}, routeInfo), {}, {
+    id,
+    type: 'nested'
+  });
+};
+
+export const walk = async (dirname, rootDir, alias) => {
+  if (!(await fs.pathExists(dirname))) {
+    return null;
+  }
+
+  const isDirectory = (await fs.stat(dirname)).isDirectory();
+
+  if (!isDirectory) {
+    return null;
+  }
+
+  const relativeDir = path.relative(rootDir, dirname);
+  const pathSegments = relativeDir.split(path.sep);
+  const lastSegment = pathSegments[pathSegments.length - 1];
+  const isRoot = lastSegment === '';
+  const isPathlessLayout = lastSegment.startsWith('__');
+  const isWithoutLayoutPath = lastSegment.includes('.');
+  let routePath = isRoot || isPathlessLayout ? '/' : `${lastSegment}`;
+
+  if (isWithoutLayoutPath) {
+    routePath = lastSegment.split('.').join('/');
+  }
+
+  routePath = replaceDynamicPath(routePath);
+  const route = {
+    path: routePath,
+    children: []
+  };
+  const items = await fs.readdir(dirname);
+
+  for (const item of items) {
+    const itemPath = path.join(dirname, item);
+    const extname = path.extname(item);
+    const itemWithoutExt = item.slice(0, -extname.length);
+    const isDirectory = (await fs.stat(itemPath)).isDirectory();
+
+    if (isDirectory) {
+      const childRoute = await walk(itemPath, rootDir, alias);
+
+      if (childRoute) {
+        var _route$children;
+
+        (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.push(childRoute);
+      }
+    }
+
+    if (extname && (!JS_EXTENSIONS.includes(extname) || !conventionNames.includes(itemWithoutExt))) {
+      continue;
+    }
+
+    if (itemWithoutExt === LAYOUT_FILE) {
+      route._component = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+
+    if (itemWithoutExt === PAGE_FILE) {
+      var _route$children2;
+
+      const childRoute = createIndexRoute({
+        _component: replaceWithAlias(alias.basename, itemPath, alias.name)
+      }, rootDir, 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 === LOADING_FILE) {
+      route.loading = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+
+    if (itemWithoutExt === ERROR_FILE) {
+      route.error = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+  }
+
+  const finalRoute = createRoute(route, rootDir, path.join(dirname, `${LAYOUT_FILE}.ts`));
+  /**
+   * when the url is /, the __auth/layout.tsx component should not be rendered
+   * - routes
+   *  - __auth
+   *    - layout.tsx
+   *  - layout.tsx
+   */
+
+  if (isPathlessLayout) {
+    delete finalRoute.path;
+  }
+
+  return finalRoute;
+};

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

@@ -1,3 +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; }
+
 export const index = ({
   mountId,
   imports,
@@ -73,16 +79,164 @@ export const html = partials => `
 
 </html>
 `;
-export const fileSystemRoutes = ({
-  routes
-}) => `
-import loadable from '@modern-js/runtime/loadable';
+export const routesForServer = ({
+  routes,
+  alias
+}) => {
+  const {
+    name,
+    basename
+  } = alias;
+  const loaders = [];
+
+  const traverseRouteTree = route => {
+    let children;
+
+    if ('children' in route && route.children) {
+      var _route$children;
+
+      children = route === null || route === void 0 ? void 0 : (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.map(traverseRouteTree);
+    }
+
+    let loader;
+
+    if (route.type === 'nested') {
+      if (route.loader) {
+        loaders.push(route.loader);
+        loader = `loader_${loaders.length - 1}`;
+      }
+    }
+
+    const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+      loader,
+      children
+    });
+
+    return finalRoute;
+  };
+
+  let routesCode = `
+  export const routes = [
+  `;
+
+  for (const route of routes) {
+    if ('type' in route) {
+      const newRoute = traverseRouteTree(route);
+      routesCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loader_[^"])"/g, '$1')},`;
+    } else {
+      routesCode += `${JSON.stringify(route, null, 2)}`;
+    }
+  }
 
-${routes.map(({
-  component,
-  _component
-}) => `const ${component} = loadable(() => import('${_component}'));`).join('\n\n')}
+  routesCode += `\n];`;
+  const importLoadersCode = loaders.map((loader, index) => {
+    const realLoaderPath = loader.replace(name, basename);
+    return `import loader_${index} from '${realLoaderPath}';\n`;
+  }).join('');
+  return `
+    ${importLoadersCode}
+    ${routesCode}
+  `;
+};
+export const fileSystemRoutes = ({
+  routes,
+  ssrMode,
+  nestedRoutesEntry
+}) => {
+  const importLazyCode = ssrMode === 'stream' ? 'import { lazy } from "react";' : `import loadable from '@modern-js/runtime/loadable'`;
+  let dataLoaderPath = '';
+
+  if (ssrMode) {
+    dataLoaderPath = require.resolve(`@modern-js/plugin-data-loader/loader`);
+
+    if (nestedRoutesEntry) {
+      dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}!`;
+    }
+  }
 
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+
+  const traverseRouteTree = route => {
+    let children;
+
+    if ('children' in route && route.children) {
+      var _route$children2;
+
+      children = route === null || route === void 0 ? void 0 : (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.map(traverseRouteTree);
+    }
+
+    let loading;
+    let error;
+    let loader;
+
+    if (route.type === 'nested') {
+      if (route.loading) {
+        loadings.push(route.loading);
+        loading = `loading_${loadings.length - 1}`;
+      }
+
+      if (route.error) {
+        errors.push(route.error);
+        error = `error_${errors.length - 1}`;
+      }
+
+      if (route.loader) {
+        loaders.push(route.loader);
+        loader = `loader_${loaders.length - 1}`;
+      }
+    }
+
+    const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+      loading,
+      loader,
+      error,
+      children
+    });
+
+    if (route._component) {
+      const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
+      finalRoute.component = component;
+    }
+
+    return finalRoute;
+  };
+
+  let routeComponentsCode = `
+    export const routes = [
+  `;
+
+  for (const route of routes) {
+    if ('type' in route) {
+      const newRoute = traverseRouteTree(route);
+      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(error_[^"])"/g, '$1')},`;
+    } else {
+      const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
+
+      const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+        component
+      });
+
+      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1')},`;
+    }
+  }
 
-export const routes = ${JSON.stringify(routes, null, 2).replace(/"component"\s*:\s*"(\S+)"/g, '"component": $1')}
-`;
+  routeComponentsCode += `\n];`;
+  const importLoadingCode = loadings.map((loading, index) => {
+    return `import loading_${index} from '${loading}';\n`;
+  }).join('');
+  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('');
+  return `
+    ${importLazyCode}
+    ${importLoadingCode}
+    ${importErrorComponentsCode}
+    ${importLoaderComponentsCode}
+    ${routeComponentsCode}
+  `;
+};

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

@@ -89,4 +89,5 @@ export const isRouteComponentFile = filePath => {
   }
 
   return false;
-};
+};
+export const replaceWithAlias = (base, filePath, alias) => normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));

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

@@ -0,0 +1,226 @@
+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 { join } from 'path';
+import { mergeBuilderConfig } from '@modern-js/builder-shared';
+import { template as lodashTemplate } from '@modern-js/utils/lodash';
+import HtmlWebpackPlugin from '@modern-js/builder-webpack-provider/html-webpack-plugin';
+import { getEntryOptions } from '@modern-js/utils';
+import { BottomTemplatePlugin } from "../webpackPlugins/htmlBottomTemplate";
+import { HtmlAsyncChunkPlugin } from "../webpackPlugins/htmlAsyncChunkPlugin";
+import { createCopyPattern } from "../share";
+
+/**
+ * Provides default configuration consistent with `@modern-js/webpack`
+ */
+export const PluginCompatModern = (appContext, modernConfig, options) => ({
+  name: 'builder-plugin-compat-modern',
+
+  setup(api) {
+    api.modifyBuilderConfig(config => {
+      if (isStreamingSSR(modernConfig)) {
+        return mergeBuilderConfig(config, {
+          html: {
+            inject: 'body'
+          }
+        });
+      }
+
+      return config;
+    });
+    api.modifyWebpackChain((chain, {
+      target,
+      CHAIN_ID,
+      isProd
+    }) => {
+      const builderNormalizedConfig = api.getNormalizedConfig(); // set webpack config name
+
+      if (target === 'node') {
+        chain.name('server');
+      } else if (target === 'modern-web') {
+        chain.name('modern');
+      } else {
+        chain.name('client');
+      }
+
+      chain.resolve.modules.add('node_modules').add(join(api.context.rootPath, 'node_modules')); // apply node compat
+
+      if (target === 'node') {
+        applyNodeCompat(chain, modernConfig, isProd);
+      }
+
+      if (isHtmlEnabled(builderNormalizedConfig, target)) {
+        applyBottomHtmlWebpackPlugin({
+          api,
+          chain,
+          CHAIN_ID,
+          appContext,
+          modernConfig
+        });
+        applyAsyncChunkHtmlPlugin({
+          chain,
+          CHAIN_ID,
+          modernConfig
+        });
+      } // 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]
+        }];
+      });
+
+      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';
+      }
+    });
+
+    if (options) {
+      applyCallbacks(api, options);
+    }
+  }
+
+});
+/**
+ * register builder hooks callback
+ */
+
+function applyCallbacks(api, options) {
+  options.onAfterBuild && api.onAfterBuild(options.onAfterBuild);
+  options.onAfterCreateCompiler && api.onAfterCreateCompiler(options.onAfterCreateCompiler);
+  options.onAfterStartDevServer && api.onAfterStartDevServer(options.onAfterStartDevServer);
+  options.onBeforeBuild && api.onBeforeBuild(options.onBeforeBuild);
+  options.onBeforeCreateCompiler && api.onBeforeCreateCompiler(options.onBeforeCreateCompiler);
+  options.onBeforeStartDevServer && api.onBeforeStartDevServer(options.onBeforeStartDevServer);
+  options.onDevCompileDone && api.onDevCompileDone(options.onDevCompileDone);
+  options.onExit && api.onExit(options.onExit);
+}
+/**
+ * compat some config, if target is `node`
+ */
+
+
+function applyNodeCompat(chain, modernConfig, isProd) {
+  // apply node resolve extensions
+  for (const ext of ['.node.js', '.node.jsx', '.node.ts', '.node.tsx']) {
+    chain.resolve.extensions.prepend(ext);
+  } // apply filterEntriesBySSRConfig
+
+
+  filterEntriesBySSRConfig(isProd, chain, modernConfig.server, modernConfig.output);
+
+  function filterEntriesBySSRConfig(isProd, chain, serverConfig, outputConfig) {
+    var _outputConfig$ssg;
+
+    const entries = chain.entryPoints.entries(); // if prod and ssg config is true or function
+
+    if (isProd && ((outputConfig === null || outputConfig === void 0 ? void 0 : outputConfig.ssg) === true || typeof (outputConfig === null || outputConfig === void 0 ? void 0 : (_outputConfig$ssg = outputConfig.ssg) === null || _outputConfig$ssg === void 0 ? void 0 : _outputConfig$ssg[0]) === 'function')) {
+      return;
+    } // if single entry has ssg config
+    // `ssg: {}` is not allowed if multi entry
+
+
+    const entryNames = Object.keys(entries);
+
+    if (isProd && entryNames.length === 1 && outputConfig !== null && outputConfig !== void 0 && outputConfig.ssg) {
+      return;
+    } // collect all ssg entries
+
+
+    const ssgEntries = [];
+
+    if (isProd && outputConfig !== null && outputConfig !== void 0 && outputConfig.ssg) {
+      const {
+        ssg
+      } = outputConfig;
+      entryNames.forEach(name => {
+        if (ssg[name]) {
+          ssgEntries.push(name);
+        }
+      });
+    }
+
+    const {
+      ssr,
+      ssrByEntries
+    } = serverConfig || {};
+    entryNames.forEach(name => {
+      if (!ssgEntries.includes(name) && (ssr && (ssrByEntries === null || ssrByEntries === void 0 ? void 0 : ssrByEntries[name]) === false || !ssr && !(ssrByEntries !== null && ssrByEntries !== void 0 && ssrByEntries[name]))) {
+        chain.entryPoints.delete(name);
+      }
+    });
+  }
+}
+/**
+ * inject bottom template
+ */
+
+
+function applyBottomHtmlWebpackPlugin({
+  api,
+  chain,
+  modernConfig,
+  appContext,
+  CHAIN_ID
+}) {
+  // inject bottomTemplate into html-webpack-plugin
+  for (const entryName of Object.keys(api.context.entry)) {
+    // 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));
+
+    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)
+    })]);
+  }
+
+  chain.plugin(CHAIN_ID.PLUGIN.BOTTOM_TEMPLATE).use(BottomTemplatePlugin, [HtmlWebpackPlugin]);
+}
+
+const isStreamingSSR = userConfig => {
+  const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
+
+  const {
+    server
+  } = userConfig;
+
+  if (isStreaming(server.ssr)) {
+    return true;
+  } // Since we cannot apply different plugins for different entries,
+  // we regard the whole app as streaming ssr only if one entry meets the requirement.
+
+
+  if (server !== null && server !== void 0 && server.ssrByEntries && typeof server.ssrByEntries === 'object') {
+    for (const name of Object.keys(server.ssrByEntries)) {
+      if (isStreaming(server.ssrByEntries[name])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+function applyAsyncChunkHtmlPlugin({
+  chain,
+  modernConfig,
+  CHAIN_ID
+}) {
+  if (isStreamingSSR(modernConfig)) {
+    chain.plugin(CHAIN_ID.PLUGIN.HTML_ASYNC_CHUNK).use(HtmlAsyncChunkPlugin, [HtmlWebpackPlugin]);
+  }
+}

package/dist/js/modern/builder/createHtmlConfig.js

@@ -0,0 +1,58 @@
+import path from 'path';
+import { findExists } from '@modern-js/utils';
+export function createHtmlConfig(normalizedConfig, appContext) {
+  const {
+    disableHtmlFolder,
+    favicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    scriptExt,
+    templateParameters,
+    templateParametersByEntries
+  } = normalizedConfig.output;
+  const {
+    configDir
+  } = normalizedConfig.source; // transform Modernjs `output.scriptExt` to Builder `html.crossorigin`  configuration
+
+  const builderCrossorigin = createBuilderCrossorigin(scriptExt);
+  const builderAppIcon = createBuilderAppIcon(configDir, appContext);
+  const builderFavicon = createBuilderFavicon(favicon, configDir, appContext);
+  return {
+    appIcon: builderAppIcon,
+    disableHtmlFolder,
+    favicon: builderFavicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    crossorigin: builderCrossorigin,
+    templateByEntries: appContext.htmlTemplates,
+    templateParameters,
+    templateParametersByEntries: templateParametersByEntries
+  };
+}
+const ICON_EXTENSIONS = ['png', 'jpg', 'jpeg', 'svg', 'ico'];
+export function createBuilderAppIcon(configDir, appContext) {
+  const appIcon = findExists(ICON_EXTENSIONS.map(ext => path.resolve(appContext.appDirectory, configDir, `icon.${ext}`)));
+  return typeof appIcon === 'string' ? appIcon : undefined;
+}
+export function createBuilderCrossorigin(scriptExt) {
+  var _scriptExtCustomConfi;
+
+  const scriptExtCustomConfig = scriptExt === null || scriptExt === void 0 ? void 0 : scriptExt.custom;
+  return scriptExtCustomConfig !== null && scriptExtCustomConfig !== void 0 && (_scriptExtCustomConfi = scriptExtCustomConfig.test) !== null && _scriptExtCustomConfi !== void 0 && _scriptExtCustomConfi.test('.js') && (scriptExtCustomConfig === null || scriptExtCustomConfig === void 0 ? void 0 : scriptExtCustomConfig.attribute) === 'crossorigin' ? scriptExtCustomConfig.value : undefined;
+}
+export function createBuilderFavicon(favicon, configDir, appContext) {
+  const defaultFavicon = findExists(ICON_EXTENSIONS.map(ext => path.resolve(appContext.appDirectory, configDir, `favicon.${ext}`)));
+  return favicon || defaultFavicon || undefined;
+}