@modern-js/app-tools 2.52.0 → 2.53.1-alpha.0

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

@@ -0,0 +1,74 @@
+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";
+
+const hasIndex = dir => findExists(JS_EXTENSIONS.map(ext => path.resolve(dir, `${INDEX_FILE_NAME}${ext}`)));
+
+const hasApp = dir => findExists(JS_EXTENSIONS.map(ext => path.resolve(dir, `${APP_FILE_NAME}${ext}`)));
+
+const hasPages = dir => fs.existsSync(path.join(dir, PAGES_DIR_NAME));
+
+const isBundleEntry = dir => hasApp(dir) || hasPages(dir) || hasIndex(dir);
+
+const scanDir = dirs => dirs.map(dir => {
+  const indexFile = hasIndex(dir);
+  const customBootstrap = isDefaultExportFunction(indexFile) ? indexFile : false;
+  const entryName = path.basename(dir);
+
+  if (indexFile && !customBootstrap) {
+    return {
+      entryName,
+      entry: indexFile,
+      isAutoMount: false
+    };
+  }
+
+  if (hasApp(dir)) {
+    return {
+      entryName,
+      entry: path.join(dir, APP_FILE_NAME),
+      isAutoMount: true,
+      customBootstrap
+    };
+  } else if (hasPages(dir)) {
+    return {
+      entryName,
+      entry: path.join(dir, PAGES_DIR_NAME),
+      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
+    };
+  }
+});
+
+export const getFileSystemEntry = (appContext, config) => {
+  const {
+    appDirectory
+  } = appContext;
+  const {
+    source: {
+      entriesDir
+    }
+  } = config;
+  const src = ensureAbsolutePath(appDirectory, entriesDir);
+
+  if (fs.existsSync(src)) {
+    if (fs.statSync(src).isDirectory()) {
+      return scanDir(isBundleEntry(src) ? [src] : fs.readdirSync(src).map(file => path.join(src, file)).filter(file => fs.statSync(file).isDirectory() && isBundleEntry(file)));
+    } else {
+      throw Error(`source.entriesDir accept a directory.`);
+    }
+  } else {
+    throw Error(`src dir ${entriesDir} not found.`);
+  }
+};

package/dist/js/modern/analyze/getHtmlTemplate.js

@@ -0,0 +1,82 @@
+import path from 'path';
+import { fs, findExists, MAIN_ENTRY_NAME } from '@modern-js/utils';
+import { HTML_PARTIALS_EXTENSIONS, HTML_PARTIALS_FOLDER } from "./constants";
+import * as templates from "./templates";
+var PartialPosition;
+
+(function (PartialPosition) {
+  PartialPosition["TOP"] = "top";
+  PartialPosition["HEAD"] = "head";
+  PartialPosition["BODY"] = "body";
+  PartialPosition["BOTTOM"] = "bottom";
+  PartialPosition["INDEX"] = "index";
+})(PartialPosition || (PartialPosition = {}));
+
+const findPartials = (dir, entryName, position) => {
+  if (fs.existsSync(dir)) {
+    const base = findExists(HTML_PARTIALS_EXTENSIONS.map(ext => path.resolve(dir, `${position}${ext}`)));
+    const file = entryName ? findExists(HTML_PARTIALS_EXTENSIONS.map(ext => path.resolve(dir, entryName, `${position}${ext}`))) || base : base;
+    return file ? {
+      file,
+      content: fs.readFileSync(file, 'utf8')
+    } : null;
+  }
+
+  return null;
+}; // generate html template for
+
+
+export const getHtmlTemplate = async (entrypoints, api, {
+  appContext,
+  config
+}) => {
+  const {
+    appDirectory,
+    internalDirectory
+  } = appContext;
+  const {
+    source: {
+      configDir
+    }
+  } = config;
+  const htmlDir = path.resolve(appDirectory, configDir, HTML_PARTIALS_FOLDER);
+  const htmlTemplates = {};
+
+  for (const entrypoint of entrypoints) {
+    const {
+      entryName
+    } = entrypoint;
+    const name = entrypoints.length === 1 && entryName === MAIN_ENTRY_NAME ? '' : entryName;
+    const customIndexTemplate = findPartials(htmlDir, name, PartialPosition.INDEX);
+
+    if (customIndexTemplate) {
+      htmlTemplates[entryName] = customIndexTemplate.file;
+    } else {
+      const hookRunners = api.useHookRunners();
+      const {
+        partials
+      } = await hookRunners.htmlPartials({
+        entrypoint,
+        partials: [PartialPosition.TOP, PartialPosition.HEAD, PartialPosition.BODY].reduce((previous, position) => {
+          const found = findPartials(htmlDir, name, position);
+          previous[position] = found ? [found.content] : [];
+          return previous;
+        }, {
+          top: [],
+          head: [],
+          body: []
+        })
+      });
+      const templatePath = path.resolve(internalDirectory, entryName, 'index.html');
+      fs.outputFileSync(templatePath, templates.html(partials), 'utf8');
+      htmlTemplates[entryName] = templatePath;
+      const bottomTemplate = findPartials(htmlDir, name, PartialPosition.BOTTOM);
+
+      if (bottomTemplate) {
+        htmlTemplates[`__${entryName}-bottom__`] = bottomTemplate.content;
+      }
+    }
+  }
+
+  return htmlTemplates;
+};

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

@@ -0,0 +1,192 @@
+const _excluded = ["path"],
+      _excluded2 = ["path"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 'fs';
+import { urlJoin, isPlainObject, removeLeadingSlash, getEntryOptions, SERVER_BUNDLE_DIRECTORY, MAIN_ENTRY_NAME, removeTailSlash } from '@modern-js/utils';
+import { walkDirectory } from "./utils";
+/**
+ * Add base url for each server route.
+ * @param baseUrl - Base url from server.baseUrl
+ * @param routes - Server routes.
+ * @returns Server routes with baseUrl prefixed.
+ */
+
+const applyBaseUrl = (baseUrl, routes) => {
+  if (baseUrl) {
+    if (Array.isArray(baseUrl)) {
+      return baseUrl.reduce((previous, current) => [...previous, ...applyBaseUrl(current, routes)], []);
+    } else {
+      return routes.map(route => {
+        const urlPath = urlJoin(baseUrl, route.urlPath);
+        return _objectSpread(_objectSpread({}, route), {}, {
+          urlPath: urlPath === '/' ? urlPath : removeTailSlash(urlPath)
+        });
+      });
+    }
+  }
+
+  return routes;
+};
+/**
+ *
+ * @param original - Original entrypoint route info.
+ * @param routeOptions - Custom entrypoint route config from server.routes.
+ * @returns
+ */
+
+
+const applyRouteOptions = (original, routeOptions) => {
+  const {
+    route,
+    disableSpa
+  } = routeOptions;
+  original.isSPA = !disableSpa; // set entryPath as dir
+
+  !original.isSPA && (original.entryPath = path.dirname(original.entryPath));
+  let routes;
+
+  if (route) {
+    if (Array.isArray(route)) {
+      routes = route.map(url => {
+        if (isPlainObject(url)) {
+          const _ref = url,
+                {
+            path: urlPath
+          } = _ref,
+                other = _objectWithoutProperties(_ref, _excluded);
+
+          return _objectSpread(_objectSpread(_objectSpread({}, original), other), {}, {
+            urlPath
+          });
+        } else {
+          return _objectSpread(_objectSpread({}, original), {}, {
+            urlPath: url
+          });
+        }
+      });
+    } else if (isPlainObject(route)) {
+      const _ref2 = route,
+            {
+        path: urlPath
+      } = _ref2,
+            other = _objectWithoutProperties(_ref2, _excluded2);
+
+      routes = [_objectSpread(_objectSpread(_objectSpread({}, original), other), {}, {
+        urlPath
+      })];
+    } else {
+      routes = [_objectSpread(_objectSpread({}, original), {}, {
+        urlPath: route
+      })];
+    }
+  } else {
+    routes = [original];
+  }
+
+  return routes;
+};
+/**
+ * Collect routes from entrypoints.
+ * @param entrypoints - Bundle entrypoints.
+ * @param config - Normalized user config.
+ * @returns entrypoint Routes
+ */
+
+
+const collectHtmlRoutes = (entrypoints, appContext, config) => {
+  const {
+    output: {
+      htmlPath,
+      disableHtmlFolder,
+      enableModernMode
+    },
+    server: {
+      baseUrl,
+      routes,
+      ssr,
+      ssrByEntries
+    }
+  } = config;
+  const {
+    packageName
+  } = appContext;
+  let htmlRoutes = entrypoints.reduce((previous, {
+    entryName
+  }) => {
+    const entryOptions = getEntryOptions(entryName, ssr, ssrByEntries, packageName);
+    const isSSR = Boolean(entryOptions);
+    const {
+      resHeaders
+    } = (routes === null || routes === void 0 ? void 0 : routes[entryName]) || {};
+    let route = {
+      urlPath: `/${entryName === MAIN_ENTRY_NAME ? '' : entryName}`,
+      entryName,
+      entryPath: removeLeadingSlash(path.posix.normalize(`${htmlPath}/${entryName}${disableHtmlFolder ? '.html' : '/index.html'}`)),
+      isSPA: true,
+      isSSR,
+      responseHeaders: resHeaders,
+      enableModernMode: Boolean(enableModernMode),
+      bundle: isSSR ? `${SERVER_BUNDLE_DIRECTORY}/${entryName}.js` : undefined
+    };
+
+    if (routes !== null && routes !== void 0 && routes.hasOwnProperty(entryName)) {
+      const routeOptions = isPlainObject(routes[entryName]) ? routes[entryName] : {
+        route: routes[entryName]
+      };
+      route = applyRouteOptions(route, routeOptions);
+    }
+
+    return Array.isArray(route) ? [...previous, ...route] : [...previous, route];
+  }, []);
+  htmlRoutes = applyBaseUrl(baseUrl, htmlRoutes);
+  return htmlRoutes;
+};
+/**
+ * Collect static public file routes from config/public folder.
+ * @param appContext - App context info.
+ * @param config - normalized user config.
+ * @returns Static public file routes.
+ */
+
+
+const collectStaticRoutes = (appContext, config) => {
+  const {
+    appDirectory
+  } = appContext;
+  const {
+    source: {
+      configDir
+    },
+    server: {
+      publicRoutes = {}
+    }
+  } = config;
+  const publicFolder = path.resolve(appDirectory, configDir, 'public');
+  return fs.existsSync(publicFolder) ? walkDirectory(publicFolder).map(filePath => {
+    const urlPath = `${urlJoin(toPosix(filePath).slice(toPosix(publicFolder).length))}`;
+    return {
+      urlPath: publicRoutes[removeLeadingSlash(urlPath)] || urlPath,
+      isSPA: true,
+      isSSR: false,
+      entryPath: toPosix(path.relative(path.resolve(appDirectory, configDir), filePath))
+    };
+  }) : [];
+};
+
+export const getServerRoutes = (entrypoints, {
+  appContext,
+  config
+}) => [...collectHtmlRoutes(entrypoints, appContext, config), ...collectStaticRoutes(appContext, config)];
+
+const toPosix = pathStr => pathStr.split(path.sep).join(path.posix.sep);

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

@@ -0,0 +1,148 @@
+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 { createAsyncWaterfall } from '@modern-js/plugin';
+import { createDebugger, fs, isApiOnly } from '@modern-js/utils';
+import { cloneDeep } from '@modern-js/utils/lodash';
+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 = [];
+    return {
+      async prepare() {
+        var _resolvedConfig$sourc;
+
+        const appContext = api.useAppContext();
+        const resolvedConfig = api.useResolvedConfigContext();
+        const hookRunners = api.useHookRunners();
+
+        try {
+          fs.emptydirSync(appContext.internalDirectory);
+        } 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);
+        await hookRunners.addRuntimeExports();
+
+        if (apiOnly) {
+          const {
+            routes
+          } = await hookRunners.modifyServerRoutes({
+            routes: []
+          });
+          debug(`server routes: %o`, routes);
+          api.setAppContext(_objectSpread(_objectSpread({}, appContext), {}, {
+            apiOnly,
+            serverRoutes: routes
+          }));
+          return;
+        }
+
+        const [{
+          getBundleEntry
+        }, {
+          getServerRoutes
+        }, {
+          generateCode
+        }, {
+          getHtmlTemplate
+        }] = await Promise.all([import("./getBundleEntry"), import("./getServerRoutes"), import("./generateCode"), import("./getHtmlTemplate")]);
+        const entrypoints = getBundleEntry(appContext, resolvedConfig);
+        const defaultChecked = entrypoints.map(point => point.entryName);
+        debug(`entrypoints: %o`, entrypoints);
+        const initialRoutes = getServerRoutes(entrypoints, {
+          appContext,
+          config: resolvedConfig
+        });
+        const {
+          routes
+        } = await hookRunners.modifyServerRoutes({
+          routes: initialRoutes
+        });
+        debug(`server routes: %o`, routes);
+        api.setAppContext(_objectSpread(_objectSpread({}, appContext), {}, {
+          entrypoints,
+          serverRoutes: routes
+        }));
+        pagesDir = entrypoints.map(point => point.entry);
+        originEntrypoints = cloneDeep(entrypoints);
+        await generateCode(appContext, resolvedConfig, entrypoints, api);
+        const htmlTemplates = await getHtmlTemplate(entrypoints, api, {
+          appContext,
+          config: resolvedConfig
+        });
+        debug(`html templates: %o`, htmlTemplates);
+        await hookRunners.addDefineTypes();
+        debug(`add Define Types`);
+        api.setAppContext(_objectSpread(_objectSpread({}, appContext), {}, {
+          entrypoints,
+          checkedEntries: defaultChecked,
+          apiOnly,
+          serverRoutes: routes,
+          htmlTemplates
+        }));
+      },
+
+      watchFiles() {
+        return pagesDir;
+      },
+
+      async fileChange(e) {
+        const appContext = api.useAppContext();
+        const {
+          appDirectory
+        } = appContext;
+        const {
+          filename,
+          eventType
+        } = e;
+
+        const isPageFile = name => pagesDir.some(pageDir => name.includes(pageDir));
+
+        const absoluteFilePath = path.resolve(appDirectory, filename);
+        const isRouteComponent = isPageFile(absoluteFilePath) && isRouteComponentFile(absoluteFilePath);
+
+        if (isRouteComponent && (eventType === 'add' || eventType === 'unlink')) {
+          const resolvedConfig = api.useResolvedConfigContext();
+          const {
+            generateCode
+          } = await import("./generateCode");
+          const entrypoints = cloneDeep(originEntrypoints);
+          generateCode(appContext, resolvedConfig, entrypoints, api);
+        }
+      }
+
+    };
+  }
+}));

package/dist/js/modern/analyze/isDefaultExportFunction.js

@@ -0,0 +1,32 @@
+import fs from 'fs';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import * as t from '@babel/types';
+
+const isFunction = node => t.isFunctionDeclaration(node) || t.isFunctionExpression(node) || t.isArrowFunctionExpression(node);
+
+export const isDefaultExportFunction = file => {
+  if (!file || !fs.existsSync(file)) {
+    return false;
+  }
+
+  const ast = parse(fs.readFileSync(file, 'utf8'), {
+    sourceType: 'unambiguous',
+    plugins: ['jsx', 'typescript', 'classProperties', 'dynamicImport', 'exportDefaultFrom', 'exportNamespaceFrom', 'decorators-legacy', 'functionBind', 'classPrivateMethods', ['pipelineOperator', {
+      proposal: 'minimal'
+    }], 'optionalChaining', 'optionalCatchBinding', 'objectRestSpread', 'numericSeparator']
+  });
+  let isExportFunction = false;
+  traverse(ast, {
+    ExportDefaultDeclaration: path => {
+      const {
+        declaration
+      } = path.node;
+
+      if (isFunction(declaration)) {
+        isExportFunction = true;
+      }
+    }
+  });
+  return isExportFunction;
+};

package/dist/js/modern/analyze/makeLegalIdentifier.js

@@ -0,0 +1,16 @@
+/**
+ * modified from https://github.com/rollup/plugins/blob/master/packages/pluginutils
+ * license at https://github.com/rollup/plugins/blob/master/LICENSE
+ */
+const reservedWords = 'break case class catch const continue debugger default delete do else export extends finally for function if import in instanceof let new return super switch this throw try typeof var void while with yield enum await implements package protected static interface private public';
+const builtins = 'arguments Infinity NaN undefined null true false eval uneval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Symbol Error EvalError InternalError RangeError ReferenceError SyntaxError TypeError URIError Number Math Date String RegExp Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array Map Set WeakMap WeakSet SIMD ArrayBuffer DataView JSON Promise Generator GeneratorFunction Reflect Proxy Intl';
+const forbidList = new Set(`${reservedWords} ${builtins}`.split(' '));
+export function makeLegalIdentifier(str) {
+  const identifier = str.replace(/-(\w)/g, (_, letter) => letter.toUpperCase()).replace(/[^$_a-zA-Z0-9]/g, '_');
+
+  if (/\d/.test(identifier[0]) || forbidList.has(identifier)) {
+    return `_${identifier}`;
+  }
+
+  return identifier || '_';
+}

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

@@ -0,0 +1,88 @@
+export const index = ({
+  mountId,
+  imports,
+  renderFunction,
+  exportStatement
+}) => `
+const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
+const IS_REACT18 = process.env.IS_REACT18 === 'true';
+const MOUNT_ID = '${mountId}';
+
+${imports}
+
+let AppWrapper = null;
+
+let root = null;
+
+function render() {
+  ${renderFunction}
+}
+
+AppWrapper = render();
+
+${exportStatement};
+`;
+export const renderFunction = ({
+  plugins,
+  customBootstrap,
+  fileSystemRoutes
+}) => `
+  AppWrapper = createApp({
+    plugins: [
+     ${plugins.map(({
+  name,
+  options,
+  args
+}) => `${name}({...${options}, ...App?.config?.${args || name}}),`).join('\n')}
+    ]
+  })(${fileSystemRoutes ? '' : `App`})
+
+  if (IS_BROWSER) {
+    ${customBootstrap ? `customBootstrap(AppWrapper);` : `bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM);`}
+  }
+
+  return AppWrapper
+`;
+export const html = partials => `
+<!DOCTYPE html>
+<html>
+<head>
+  <%= meta %>
+  <title><%= title %></title>
+
+  ${partials.top.join('\n')}
+
+  <script>
+    window.__assetPrefix__ = '<%= assetPrefix %>';
+  </script>
+  ${partials.head.join('\n')}
+
+  <!--<?- chunksMap.css ?>-->
+</head>
+
+<body>
+  <noscript>
+    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.
+  </noscript>
+  <div id="<%= mountId %>"><!--<?- html ?>--></div>
+  ${partials.body.join('\n')}
+  <!--<?- chunksMap.js ?>-->
+  <!--<?- SSRDataScript ?>-->
+  <!--<?- bottomTemplate ?>-->
+</body>
+
+</html>
+`;
+export const fileSystemRoutes = ({
+  routes
+}) => `
+import loadable from '@modern-js/runtime/loadable';
+
+${routes.map(({
+  component,
+  _component
+}) => `const ${component} = loadable(() => import('${_component}'));`).join('\n\n')}
+
+
+export const routes = ${JSON.stringify(routes, null, 2).replace(/"component"\s*:\s*"(\S+)"/g, '"component": $1')}
+`;