@modern-js/app-tools 2.31.1 → 2.31.3-alpha.0

package/dist/esm-node/index.js

@@ -1,6 +1,6 @@
 import path from "path";
 import { lintPlugin } from "@modern-js/plugin-lint";
-import { cleanRequireCache, emptyDir, getCommand, getArgv } from "@modern-js/utils";
+import { cleanRequireCache, emptyDir, getCommand, getArgv, fs, NESTED_ROUTE_SPEC_FILE } from "@modern-js/utils";
 import { castArray } from "@modern-js/utils/lodash";
 import { getLocaleLanguage } from "@modern-js/plugin-i18n/language-detector";
 import analyzePlugin from "./analyze";
@@ -89,6 +89,7 @@ export const appTools = (options = {
         ...appContext,
         toolsType: "app-tools"
       });
+      const nestedRoutes = {};
       const locale = getLocaleLanguage();
       i18n.changeLanguage({
         locale
@@ -174,6 +175,24 @@ export const appTools = (options = {
           cleanRequireCache([
             require.resolve("./analyze")
           ]);
+        },
+        async modifyFileSystemRoutes({ entrypoint, routes }) {
+          nestedRoutes[entrypoint.entryName] = routes;
+          return {
+            entrypoint,
+            routes
+          };
+        },
+        async beforeGenerateRoutes({ entrypoint, code }) {
+          const { distDirectory } = api.useAppContext();
+          if (!fs.existsSync(distDirectory)) {
+            await fs.mkdir(distDirectory);
+          }
+          await fs.writeJSON(path.resolve(distDirectory, NESTED_ROUTE_SPEC_FILE), nestedRoutes);
+          return {
+            entrypoint,
+            code
+          };
         }
       };
     }

package/dist/js/modern/analyze/constants.js

@@ -0,0 +1,54 @@
+const JS_EXTENSIONS = [".js", ".ts", ".jsx", ".tsx"];
+const INDEX_FILE_NAME = "index";
+const APP_FILE_NAME = "App";
+const PAGES_DIR_NAME = "pages";
+const NESTED_ROUTES_DIR = "routes";
+const FILE_SYSTEM_ROUTES_FILE_NAME = "routes.js";
+const LOADER_EXPORT_NAME = "loader";
+const TEMP_LOADERS_DIR = "__loaders__";
+const ENTRY_POINT_FILE_NAME = "index.js";
+const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.js";
+const FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = /^\[(\S+)\]([*+?]?)$/;
+const FILE_SYSTEM_ROUTES_LAYOUT = "_layout";
+const FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT = "_app";
+const FILE_SYSTEM_ROUTES_INDEX = "index";
+const FILE_SYSTEM_ROUTES_IGNORED_REGEX = /\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/;
+const HTML_PARTIALS_FOLDER = "html";
+const HTML_PARTIALS_EXTENSIONS = [".htm", ".html", ".ejs"];
+const FILE_SYSTEM_ROUTES_COMPONENTS_DIR = "internal_components";
+const NESTED_ROUTE = {
+  LAYOUT_FILE: "layout",
+  LAYOUT_LOADER_FILE: "layout.loader",
+  PAGE_FILE: "page",
+  PAGE_LOADER_FILE: "page.loader",
+  LOADING_FILE: "loading",
+  ERROR_FILE: "error",
+  LOADER_FILE: "loader"
+};
+const APP_CONFIG_NAME = "config";
+const APP_INIT_EXPORTED = "init";
+const APP_INIT_IMPORTED = "appInit";
+export {
+  APP_CONFIG_NAME,
+  APP_FILE_NAME,
+  APP_INIT_EXPORTED,
+  APP_INIT_IMPORTED,
+  ENTRY_BOOTSTRAP_FILE_NAME,
+  ENTRY_POINT_FILE_NAME,
+  FILE_SYSTEM_ROUTES_COMPONENTS_DIR,
+  FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP,
+  FILE_SYSTEM_ROUTES_FILE_NAME,
+  FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT,
+  FILE_SYSTEM_ROUTES_IGNORED_REGEX,
+  FILE_SYSTEM_ROUTES_INDEX,
+  FILE_SYSTEM_ROUTES_LAYOUT,
+  HTML_PARTIALS_EXTENSIONS,
+  HTML_PARTIALS_FOLDER,
+  INDEX_FILE_NAME,
+  JS_EXTENSIONS,
+  LOADER_EXPORT_NAME,
+  NESTED_ROUTE,
+  NESTED_ROUTES_DIR,
+  PAGES_DIR_NAME,
+  TEMP_LOADERS_DIR
+};

package/dist/js/modern/analyze/generateCode.js

@@ -0,0 +1,247 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import path from "path";
+import { fs, getEntryOptions, logger } from "@modern-js/utils";
+import {
+  useResolvedConfigContext
+} from "@modern-js/core";
+import * as templates from "./templates";
+import { getClientRoutes, getClientRoutesLegacy } from "./getClientRoutes";
+import {
+  FILE_SYSTEM_ROUTES_FILE_NAME,
+  ENTRY_POINT_FILE_NAME,
+  ENTRY_BOOTSTRAP_FILE_NAME
+} from "./constants";
+import { getDefaultImports, getServerLoadersFile } from "./utils";
+import { walk } from "./nestedRoutes";
+const createImportSpecifier = (specifiers) => {
+  let defaults = "";
+  const named = [];
+  for (const { local, imported } of specifiers) {
+    if (local && imported) {
+      named.push(`${imported} as ${local}`);
+    } else if (local) {
+      defaults = local;
+    } else {
+      named.push(imported);
+    }
+  }
+  if (defaults && named.length) {
+    return `${defaults}, { ${named.join(", ")} }`;
+  } else if (defaults) {
+    return defaults;
+  } else {
+    return `{ ${named.join(", ")} }`;
+  }
+};
+const createImportStatements = (statements) => {
+  var _a, _b;
+  const deDuplicated = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const { value, specifiers, initialize } of statements) {
+    if (!seen.has(value)) {
+      deDuplicated.push({
+        value,
+        specifiers,
+        initialize
+      });
+      seen.set(value, specifiers);
+    } else {
+      seen.get(value).push(...specifiers);
+      const modifyIndex = deDuplicated.findIndex((v) => v.value === value);
+      const originInitialize = (_b = (_a = deDuplicated[modifyIndex]) == null ? void 0 : _a.initialize) != null ? _b : "";
+      deDuplicated[modifyIndex].initialize = originInitialize.concat(
+        `
+${initialize || ""}`
+      );
+    }
+  }
+  return deDuplicated.map(
+    ({ value, specifiers, initialize }) => `import ${createImportSpecifier(specifiers)} from '${value}';
+${initialize || ""}`
+  ).join("\n");
+};
+const generateCode = (appContext, config, entrypoints, api) => __async(void 0, null, function* () {
+  var _a, _b, _c;
+  const {
+    internalDirectory,
+    srcDirectory,
+    internalDirAlias,
+    internalSrcAlias,
+    packageName
+  } = appContext;
+  const hookRunners = api.useHookRunners();
+  const isV5 = typeof ((_a = config.runtime) == null ? void 0 : _a.router) !== "boolean" && ((_c = (_b = config == null ? void 0 : config.runtime) == null ? void 0 : _b.router) == null ? void 0 : _c.mode) === "react-router-5";
+  const { mountId } = config.html;
+  const getRoutes = isV5 ? getClientRoutesLegacy : getClientRoutes;
+  yield Promise.all(entrypoints.map(generateEntryCode));
+  function generateEntryCode(entrypoint) {
+    return __async(this, null, function* () {
+      const { entryName, isAutoMount, customBootstrap, fileSystemRoutes } = entrypoint;
+      if (isAutoMount) {
+        if (fileSystemRoutes) {
+          let initialRoutes = [];
+          let nestedRoute = null;
+          if (entrypoint.entry) {
+            initialRoutes = getRoutes({
+              entrypoint,
+              srcDirectory,
+              srcAlias: internalSrcAlias,
+              internalDirectory,
+              internalDirAlias
+            });
+          }
+          if (entrypoint.nestedRoutesEntry) {
+            if (!isV5) {
+              nestedRoute = yield walk(
+                entrypoint.nestedRoutesEntry,
+                entrypoint.nestedRoutesEntry,
+                {
+                  name: internalSrcAlias,
+                  basename: srcDirectory
+                },
+                entrypoint.entryName
+              );
+              if (nestedRoute) {
+                initialRoutes.unshift(nestedRoute);
+              }
+            } else {
+              logger.error("Nested routes is not supported in legacy mode.");
+              process.exit(1);
+            }
+          }
+          const { routes } = yield hookRunners.modifyFileSystemRoutes({
+            entrypoint,
+            routes: initialRoutes
+          });
+          const config2 = useResolvedConfigContext();
+          const ssr = getEntryOptions(
+            entryName,
+            config2.server.ssr,
+            config2.server.ssrByEntries,
+            packageName
+          );
+          let mode;
+          if (ssr) {
+            mode = typeof ssr === "object" ? ssr.mode || "string" : "string";
+          } else {
+            mode = false;
+          }
+          if (mode === "stream") {
+            const hasPageRoute = routes.some(
+              (route) => "type" in route && route.type === "page"
+            );
+            if (hasPageRoute) {
+              logger.error(
+                "Streaming ssr is not supported when pages dir exists"
+              );
+              process.exit(1);
+            }
+          }
+          const { code: code2 } = yield hookRunners.beforeGenerateRoutes({
+            entrypoint,
+            code: yield templates.fileSystemRoutes({
+              routes,
+              ssrMode: mode,
+              nestedRoutesEntry: entrypoint.nestedRoutesEntry,
+              entryName: entrypoint.entryName,
+              internalDirectory
+            })
+          });
+          if (entrypoint.nestedRoutesEntry && mode) {
+            const routesServerFile = getServerLoadersFile(
+              internalDirectory,
+              entryName
+            );
+            const code3 = templates.routesForServer({
+              routes
+            });
+            yield fs.ensureFile(routesServerFile);
+            yield fs.writeFile(routesServerFile, code3);
+          }
+          fs.outputFileSync(
+            path.resolve(
+              internalDirectory,
+              `./${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`
+            ),
+            code2,
+            "utf8"
+          );
+        }
+        const { imports: importStatements } = yield hookRunners.modifyEntryImports({
+          entrypoint,
+          imports: getDefaultImports({
+            entrypoint,
+            srcDirectory,
+            internalSrcAlias,
+            internalDirAlias,
+            internalDirectory
+          })
+        });
+        const { plugins } = yield hookRunners.modifyEntryRuntimePlugins({
+          entrypoint,
+          plugins: []
+        });
+        const { code: renderFunction } = yield hookRunners.modifyEntryRenderFunction({
+          entrypoint,
+          code: templates.renderFunction({
+            plugins,
+            customBootstrap,
+            fileSystemRoutes
+          })
+        });
+        const { exportStatement } = yield hookRunners.modifyEntryExport({
+          entrypoint,
+          exportStatement: "export default AppWrapper;"
+        });
+        const code = templates.index({
+          mountId,
+          imports: createImportStatements(importStatements),
+          renderFunction,
+          exportStatement
+        });
+        const entryFile = path.resolve(
+          internalDirectory,
+          `./${entryName}/${ENTRY_POINT_FILE_NAME}`
+        );
+        entrypoint.entry = entryFile;
+        if (config.source.enableAsyncEntry) {
+          const { code: asyncEntryCode } = yield hookRunners.modifyAsyncEntry({
+            entrypoint,
+            code: `import('./${ENTRY_BOOTSTRAP_FILE_NAME}');`
+          });
+          fs.outputFileSync(entryFile, asyncEntryCode, "utf8");
+          const bootstrapFile = path.resolve(
+            internalDirectory,
+            `./${entryName}/${ENTRY_BOOTSTRAP_FILE_NAME}`
+          );
+          fs.outputFileSync(bootstrapFile, code, "utf8");
+        } else {
+          fs.outputFileSync(entryFile, code, "utf8");
+        }
+      }
+    });
+  }
+});
+export {
+  createImportStatements,
+  generateCode
+};

package/dist/js/modern/analyze/getBundleEntry.js

@@ -0,0 +1,71 @@
+import path from "path";
+import {
+  ensureAbsolutePath,
+  fs,
+  findExists,
+  MAIN_ENTRY_NAME
+} from "@modern-js/utils";
+import { getFileSystemEntry } from "./getFileSystemEntry";
+import { JS_EXTENSIONS } from "./constants";
+const ensureExtensions = (file) => {
+  if (!path.extname(file)) {
+    return findExists(JS_EXTENSIONS.map((ext) => `${file}${ext}`)) || file;
+  }
+  return file;
+};
+const ifAlreadyExists = (entrypoints, checked) => entrypoints.some((entrypoint) => {
+  if (ensureExtensions(entrypoint.entry) === ensureExtensions(checked.entry)) {
+    checked.entryName = entrypoint.entryName;
+    return true;
+  }
+  if (entrypoint.entry.startsWith(checked.entry) || checked.entry.startsWith(entrypoint.entry)) {
+    throw new Error(
+      `Entry configuration conflicts
+ Your configuration: ${checked.entry}.
+ Default entrypoint: ${entrypoint.entry}
+ Please reset source.entries or set source.disableDefaultEntries to disable the default entry rules.`
+    );
+  }
+  return false;
+});
+const getBundleEntry = (appContext, config) => {
+  const { appDirectory, packageName } = appContext;
+  const {
+    source: { disableDefaultEntries, entries, entriesDir }
+  } = config;
+  const defaults = disableDefaultEntries ? [] : getFileSystemEntry(appContext, config);
+  if (entries) {
+    Object.keys(entries).forEach((name) => {
+      const value = entries[name];
+      const entrypoint = typeof value === "string" ? {
+        entryName: name,
+        entry: ensureAbsolutePath(appDirectory, value),
+        isAutoMount: true,
+        fileSystemRoutes: fs.statSync(ensureAbsolutePath(appDirectory, value)).isDirectory() ? {} : void 0
+      } : {
+        entryName: name,
+        entry: ensureAbsolutePath(appDirectory, value.entry),
+        isAutoMount: !value.disableMount,
+        customBootstrap: value.customBootstrap && ensureAbsolutePath(appDirectory, value.customBootstrap),
+        fileSystemRoutes: fs.statSync(ensureAbsolutePath(appDirectory, value.entry)).isDirectory() ? {} : void 0
+      };
+      if (entrypoint.fileSystemRoutes) {
+        entrypoint.nestedRoutesEntry = entrypoint.entry;
+      }
+      if (!ifAlreadyExists(defaults, entrypoint)) {
+        defaults.push(entrypoint);
+      }
+    });
+  }
+  if (!disableDefaultEntries) {
+    const entriesDirAbs = ensureAbsolutePath(appDirectory, entriesDir || "");
+    const found = defaults.find(
+      ({ entryName, entry, nestedRoutesEntry = "" }) => entryName === packageName || path.dirname(entry) === entriesDirAbs || path.dirname(nestedRoutesEntry) === entriesDirAbs
+    );
+    found && (found.entryName = MAIN_ENTRY_NAME);
+  }
+  return defaults;
+};
+export {
+  getBundleEntry
+};

package/dist/js/modern/analyze/getClientRoutes/getRoutes.js

@@ -0,0 +1,220 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import path from "path";
+import { fs } from "@modern-js/utils";
+import { makeLegalIdentifier } from "../makeLegalIdentifier";
+import {
+  FILE_SYSTEM_ROUTES_COMPONENTS_DIR,
+  FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP,
+  FILE_SYSTEM_ROUTES_INDEX,
+  FILE_SYSTEM_ROUTES_LAYOUT
+} from "../constants";
+import { replaceWithAlias } from "../utils";
+import { debug, findLayout, shouldSkip, getRouteWeight } from "./utils";
+const compName = (srcDirectory, filePath) => {
+  const legalCompName = makeLegalIdentifier(
+    path.relative(srcDirectory, filePath)
+  );
+  return `Comp_${legalCompName}`;
+};
+const layoutNameAbbr = (filePath) => {
+  const prefix = "L_";
+  const dirName = path.dirname(filePath).split("/").pop() || "";
+  return `${prefix}${makeLegalIdentifier(dirName)}`;
+};
+const parents = [];
+const recursiveReadDir = ({
+  dir,
+  routes,
+  basePath = "/",
+  srcDirectory,
+  srcAlias
+}) => {
+  let hasDynamicRoute = false;
+  let resetParent = false;
+  let parent = parents[parents.length - 1];
+  const layout = findLayout(dir);
+  if (layout) {
+    if (basePath === "/") {
+      throw new Error(`should use _app instead of _layout in ${dir}`);
+    } else {
+      const alias = replaceWithAlias(srcDirectory, layout, srcAlias);
+      const componentName = compName(srcDirectory, layout);
+      const route = {
+        path: `${basePath.substring(0, basePath.length - 1)}`,
+        children: [],
+        _component: alias,
+        component: componentName,
+        parent,
+        type: "page"
+      };
+      parent = route;
+      resetParent = true;
+      routes.push(route);
+      parents.push(route);
+      routes = route.children;
+    }
+  }
+  for (const relative of fs.readdirSync(dir)) {
+    const filePath = path.join(dir, relative);
+    if (!shouldSkip(filePath)) {
+      const filename = path.basename(filePath, path.extname(filePath));
+      const alias = replaceWithAlias(srcDirectory, filePath, srcAlias);
+      const componentName = compName(srcDirectory, filePath);
+      const dynamicRouteMatched = FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP.exec(filename);
+      if (dynamicRouteMatched) {
+        if (hasDynamicRoute) {
+          throw new Error(
+            `Can't set two dynamic route in one directory: ${dir}`
+          );
+        } else {
+          hasDynamicRoute = true;
+        }
+      }
+      const route = {
+        path: `${basePath}${dynamicRouteMatched ? `:${dynamicRouteMatched[1]}${dynamicRouteMatched[2]}` : filename}`,
+        _component: alias,
+        component: componentName,
+        parent,
+        type: "page"
+      };
+      if (fs.statSync(filePath).isDirectory()) {
+        recursiveReadDir({
+          dir: filePath,
+          routes,
+          basePath: `${route.path}/`,
+          srcDirectory,
+          srcAlias
+        });
+        continue;
+      }
+      if (filename === FILE_SYSTEM_ROUTES_LAYOUT) {
+        continue;
+      }
+      if (filename === FILE_SYSTEM_ROUTES_INDEX) {
+        route.path = basePath === "/" ? basePath : `${basePath.substring(0, basePath.length - 1)}`;
+      }
+      if (filename === "404" && basePath === "/") {
+        route.path = "*";
+      }
+      routes.push(route);
+    }
+  }
+  if (resetParent) {
+    parents.pop();
+  }
+};
+const normalizeNestedRoutes = (nested, internalComponentsDir, internalDirectory, internalDirAlias) => {
+  const flat = (routes) => routes.reduce(
+    (memo, route) => memo.concat(
+      Array.isArray(route.children) ? flat(route.children) : [route]
+    ),
+    []
+  );
+  const generate = (route) => {
+    const codes = [];
+    let lastComponent = route.component;
+    const imports = [
+      `import React from 'react';`,
+      `import ${lastComponent} from '${route._component}'`
+    ];
+    while (route = route.parent) {
+      const layoutComponent = route.component;
+      const layoutComponentAbbr = layoutNameAbbr(route._component);
+      imports.push(`import ${layoutComponent} from '${route._component}';`);
+      const currentComponent = `${layoutComponentAbbr}_${lastComponent}`;
+      codes.push(
+        `const ${currentComponent} = props => <${layoutComponent} Component={${lastComponent}} {...props} />;`
+      );
+      lastComponent = currentComponent;
+    }
+    const file = path.resolve(internalComponentsDir, `${lastComponent}.jsx`);
+    fs.outputFileSync(
+      file,
+      `${imports.join("\n")}
+${codes.join(
+        "\n"
+      )}
+export default ${lastComponent}`
+    );
+    return {
+      component: lastComponent,
+      _component: replaceWithAlias(internalDirectory, file, internalDirAlias)
+    };
+  };
+  const normalized = flat(nested).map(
+    (route) => route.parent ? __spreadProps(__spreadValues(__spreadValues({}, route), generate(route)), { parent: void 0 }) : __spreadProps(__spreadValues({}, route), { parent: void 0 })
+  );
+  return normalized;
+};
+const getClientRoutes = ({
+  entrypoint,
+  srcDirectory,
+  srcAlias,
+  internalDirectory,
+  internalDirAlias
+}) => {
+  const { entryName, pageRoutesEntry } = entrypoint;
+  if (!pageRoutesEntry) {
+    return [];
+  }
+  if (!fs.existsSync(pageRoutesEntry)) {
+    throw new Error(
+      `generate file system routes error, ${pageRoutesEntry} directory not found.`
+    );
+  }
+  if (!(fs.existsSync(pageRoutesEntry) && fs.statSync(pageRoutesEntry).isDirectory())) {
+    throw new Error(
+      `generate file system routes error, ${pageRoutesEntry} should be directory.`
+    );
+  }
+  let routes = [];
+  recursiveReadDir({
+    dir: pageRoutesEntry,
+    routes,
+    basePath: "/",
+    srcDirectory,
+    srcAlias
+  });
+  const internalComponentsDir = path.resolve(
+    internalDirectory,
+    `${entryName}/${FILE_SYSTEM_ROUTES_COMPONENTS_DIR}`
+  );
+  fs.emptyDirSync(internalComponentsDir);
+  routes = normalizeNestedRoutes(
+    routes,
+    internalComponentsDir,
+    internalDirectory,
+    internalDirAlias
+  );
+  parents.length = 0;
+  routes.sort((a, b) => {
+    const delta = getRouteWeight(a.path) - getRouteWeight(b.path);
+    if (delta === 0) {
+      return a.path.length - b.path.length;
+    }
+    return delta;
+  });
+  debug(`fileSystem routes: %o`, routes);
+  return routes;
+};
+export {
+  getClientRoutes
+};