@modern-js/app-tools 1.22.1 → 2.0.0-alpha.0

package/bin/modern.js

@@ -1,3 +1,15 @@
 #!/usr/bin/env node
+const {
+  INTERNAL_APP_TOOLS_PLUGINS,
+  INTERNAL_SERVER_PLUGINS,
+  INTERNAL_APP_TOOLS_RUNTIME_PLUGINS,
+} = require('@modern-js/utils');
 
-require('@modern-js/core/bin');
+require('@modern-js/core/runBin').run({
+  internalPlugins: {
+    cli: INTERNAL_APP_TOOLS_PLUGINS,
+    server: INTERNAL_SERVER_PLUGINS,
+    autoLoad: INTERNAL_APP_TOOLS_RUNTIME_PLUGINS,
+  },
+  toolsType: 'app-tools',
+});

package/dist/js/modern/analyze/Builder.js

@@ -0,0 +1,39 @@
+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 { build } from "esbuild";
+class Builder {
+  build(options) {
+    return __async(this, null, function* () {
+      this.buildRes = yield build(options);
+    });
+  }
+  stop() {
+    var _a, _b;
+    ((_a = this.buildRes) == null ? void 0 : _a.stop) && ((_b = this.buildRes) == null ? void 0 : _b.stop());
+  }
+}
+const loaderBuilder = new Builder();
+const serverLoaderBuilder = new Builder();
+export {
+  Builder,
+  loaderBuilder,
+  serverLoaderBuilder
+};

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

@@ -1,15 +1,48 @@
-export const JS_EXTENSIONS = ['.js', '.ts', '.jsx', '.tsx'];
-export const INDEX_FILE_NAME = 'index';
-export const APP_FILE_NAME = 'App';
-export const PAGES_DIR_NAME = 'pages';
-export const FILE_SYSTEM_ROUTES_FILE_NAME = 'routes.js';
-export const ENTRY_POINT_FILE_NAME = 'index.js';
-export const ENTRY_BOOTSTRAP_FILE_NAME = 'bootstrap.js';
-export const FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = /^\[(\S+)\]([*+?]?)$/;
-export const FILE_SYSTEM_ROUTES_LAYOUT = '_layout';
-export const FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT = '_app';
-export const FILE_SYSTEM_ROUTES_INDEX = 'index';
-export const FILE_SYSTEM_ROUTES_IGNORED_REGEX = /\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/;
-export const HTML_PARTIALS_FOLDER = 'html';
-export const HTML_PARTIALS_EXTENSIONS = ['.htm', '.html', '.ejs'];
-export const FILE_SYSTEM_ROUTES_COMPONENTS_DIR = 'internal_components';
+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"
+};
+export {
+  APP_FILE_NAME,
+  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

@@ -1,18 +1,54 @@
-import path from 'path';
-import { fs } from '@modern-js/utils';
+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,
+  LOADER_ROUTES_DIR,
+  logger
+} from "@modern-js/utils";
+import {
+  useResolvedConfigContext
+} from "@modern-js/core";
+import { isDevCommand } from "../utils/commands";
 import * as templates from "./templates";
-import { getClientRoutes } from "./getClientRoutes";
-import { FILE_SYSTEM_ROUTES_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_BOOTSTRAP_FILE_NAME } from "./constants";
+import { getClientRoutes, getClientRoutesLegacy } from "./getClientRoutes";
+import {
+  FILE_SYSTEM_ROUTES_FILE_NAME,
+  ENTRY_POINT_FILE_NAME,
+  ENTRY_BOOTSTRAP_FILE_NAME,
+  TEMP_LOADERS_DIR
+} from "./constants";
 import { getDefaultImports } from "./utils";
-
-const createImportSpecifier = specifiers => {
-  let defaults = '';
+import { walk } from "./nestedRoutes";
+import { loaderBuilder, serverLoaderBuilder } from "./Builder";
+const loader = {
+  ".js": "jsx",
+  ".ts": "tsx"
+};
+const EXTERNAL_REGEXP = /^[^./]|^\.[^./]|^\.\.[^/]/;
+const createImportSpecifier = (specifiers) => {
+  let defaults = "";
   const named = [];
-
-  for (const {
-    local,
-    imported
-  } of specifiers) {
+  for (const { local, imported } of specifiers) {
     if (local && imported) {
       named.push(`${imported} as ${local}`);
     } else if (local) {
@@ -21,26 +57,19 @@ const createImportSpecifier = specifiers => {
       named.push(imported);
     }
   }
-
   if (defaults && named.length) {
-    return `${defaults}, { ${named.join(', ')} }`;
+    return `${defaults}, { ${named.join(", ")} }`;
   } else if (defaults) {
     return defaults;
   } else {
-    return `{ ${named.join(', ')} }`;
+    return `{ ${named.join(", ")} }`;
   }
 };
-
-export const createImportStatements = statements => {
-  // merge import statements with the same value.
+const createImportStatements = (statements) => {
+  var _a, _b;
   const deDuplicated = [];
-  const seen = new Map();
-
-  for (const {
-    value,
-    specifiers,
-    initialize
-  } of statements) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const { value, specifiers, initialize } of statements) {
     if (!seen.has(value)) {
       deDuplicated.push({
         value,
@@ -49,131 +78,255 @@ export const createImportStatements = statements => {
       });
       seen.set(value, specifiers);
     } else {
-      var _deDuplicated$modifyI, _deDuplicated$modifyI2;
-
-      seen.get(value).push(...specifiers); // make "initialize" param can be connected when multiple plugins were imported from same package
-
-      const modifyIndex = deDuplicated.findIndex(v => v.value === value);
-      const originInitialize = (_deDuplicated$modifyI = (_deDuplicated$modifyI2 = deDuplicated[modifyIndex]) === null || _deDuplicated$modifyI2 === void 0 ? void 0 : _deDuplicated$modifyI2.initialize) !== null && _deDuplicated$modifyI !== void 0 ? _deDuplicated$modifyI : '';
-      deDuplicated[modifyIndex].initialize = originInitialize.concat(`\n${initialize || ''}`);
+      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}';\n${initialize || ''}`).join('\n');
+  return deDuplicated.map(
+    ({ value, specifiers, initialize }) => `import ${createImportSpecifier(specifiers)} from '${value}';
+${initialize || ""}`
+  ).join("\n");
 };
-export const generateCode = async (appContext, config, entrypoints, api) => {
+const buildLoader = (entry, outfile) => __async(void 0, null, function* () {
+  yield loaderBuilder.build({
+    format: "esm",
+    platform: "browser",
+    target: "esnext",
+    loader,
+    watch: isDevCommand() && {},
+    bundle: true,
+    logLevel: "error",
+    entryPoints: [entry],
+    outfile,
+    plugins: [
+      {
+        name: "make-all-packages-external",
+        setup(build) {
+          build.onResolve({ filter: EXTERNAL_REGEXP }, (args) => {
+            let external = true;
+            if (args.kind === "entry-point") {
+              external = false;
+            }
+            return {
+              path: args.path,
+              external
+            };
+          });
+        }
+      }
+    ]
+  });
+});
+const buildServerLoader = (entry, outfile) => __async(void 0, null, function* () {
+  yield serverLoaderBuilder.build({
+    format: "cjs",
+    platform: "node",
+    target: "esnext",
+    loader,
+    watch: isDevCommand() && {},
+    bundle: true,
+    logLevel: "error",
+    entryPoints: [entry],
+    outfile
+  });
+});
+const generateCode = (appContext, config, entrypoints, api) => __async(void 0, null, function* () {
+  var _a, _b, _c;
   const {
     internalDirectory,
+    distDirectory,
     srcDirectory,
     internalDirAlias,
-    internalSrcAlias
+    internalSrcAlias,
+    packageName
   } = appContext;
   const hookRunners = api.useHookRunners();
-  const {
-    output: {
-      mountId
-    }
-  } = config;
-
-  for (const entrypoint of entrypoints) {
-    const {
-      entryName,
-      isAutoMount,
-      customBootstrap,
-      fileSystemRoutes
-    } = entrypoint;
-
-    if (isAutoMount) {
-      // generate routes file for file system routes entrypoint.
-      if (fileSystemRoutes) {
-        const initialRoutes = getClientRoutes({
+  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,
+              internalDirAlias
+            })
+          });
+          if (entrypoint.nestedRoutesEntry) {
+            const routesServerFile = path.join(
+              internalDirectory,
+              entryName,
+              "route-server-loaders.js"
+            );
+            const outputRoutesServerFile = path.join(
+              distDirectory,
+              LOADER_ROUTES_DIR,
+              entryName,
+              "index.js"
+            );
+            const code3 = templates.routesForServer({
+              routes,
+              internalDirectory,
+              entryName
+            });
+            yield fs.ensureFile(routesServerFile);
+            yield fs.writeFile(routesServerFile, code3);
+            const loaderEntryFile = path.join(
+              internalDirectory,
+              entryName,
+              TEMP_LOADERS_DIR,
+              "entry.js"
+            );
+            const loaderIndexFile = path.join(
+              internalDirectory,
+              entryName,
+              TEMP_LOADERS_DIR,
+              "index.js"
+            );
+            if (yield fs.pathExists(loaderEntryFile)) {
+              yield buildLoader(loaderEntryFile, loaderIndexFile);
+            }
+            if (yield fs.pathExists(routesServerFile)) {
+              yield buildServerLoader(routesServerFile, outputRoutesServerFile);
+            }
+          }
+          fs.outputFileSync(
+            path.resolve(
+              internalDirectory,
+              `./${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`
+            ),
+            code2,
+            "utf8"
+          );
+        }
+        const { imports: importStatements } = yield hookRunners.modifyEntryImports({
           entrypoint,
-          srcDirectory,
-          srcAlias: internalSrcAlias,
-          internalDirectory,
-          internalDirAlias
+          imports: getDefaultImports({
+            entrypoint,
+            srcDirectory,
+            internalSrcAlias,
+            internalDirAlias,
+            internalDirectory
+          })
         });
-        const {
-          routes
-        } = await hookRunners.modifyFileSystemRoutes({
+        const { plugins } = yield hookRunners.modifyEntryRuntimePlugins({
           entrypoint,
-          routes: initialRoutes
+          plugins: []
         });
-        const {
-          code
-        } = await hookRunners.beforeGenerateRoutes({
+        const { code: renderFunction } = yield hookRunners.modifyEntryRenderFunction({
           entrypoint,
-          code: templates.fileSystemRoutes({
-            routes
+          code: templates.renderFunction({
+            plugins,
+            customBootstrap,
+            fileSystemRoutes
           })
         });
-        fs.outputFileSync(path.resolve(internalDirectory, `./${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`), code, 'utf8');
-      } // call modifyEntryImports hook
-
-
-      const {
-        imports: importStatements
-      } = await hookRunners.modifyEntryImports({
-        entrypoint,
-        imports: getDefaultImports({
-          entrypoint,
-          srcDirectory,
-          internalSrcAlias,
-          internalDirAlias,
-          internalDirectory
-        })
-      }); // call modifyEntryRuntimePlugins hook
-
-      const {
-        plugins
-      } = await hookRunners.modifyEntryRuntimePlugins({
-        entrypoint,
-        plugins: []
-      }); // call modifyEntryRenderFunction hook
-
-      const {
-        code: renderFunction
-      } = await hookRunners.modifyEntryRenderFunction({
-        entrypoint,
-        code: templates.renderFunction({
-          plugins,
-          customBootstrap,
-          fileSystemRoutes
-        })
-      }); // call modifyEntryExport hook
-
-      const {
-        exportStatement
-      } = await hookRunners.modifyEntryExport({
-        entrypoint,
-        exportStatement: 'export default AppWrapper;'
-      });
-      const code = templates.index({
-        mountId: mountId,
-        imports: createImportStatements(importStatements),
-        renderFunction,
-        exportStatement
-      });
-      const entryFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
-      entrypoint.entry = entryFile; // generate entry file.
-
-      if (config.source.enableAsyncEntry) {
-        const {
-          code: asyncEntryCode
-        } = await hookRunners.modifyAsyncEntry({
+        const { exportStatement } = yield hookRunners.modifyEntryExport({
           entrypoint,
-          code: `import('./${ENTRY_BOOTSTRAP_FILE_NAME}');`
+          exportStatement: "export default AppWrapper;"
         });
-        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');
+        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
+};