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

package/dist/js/node/analyze/nestedRoutes.js

@@ -0,0 +1,193 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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());
+  });
+};
+var nestedRoutes_exports = {};
+__export(nestedRoutes_exports, {
+  walk: () => walk
+});
+module.exports = __toCommonJS(nestedRoutes_exports);
+var path = __toESM(require("path"));
+var import_utils = require("@modern-js/utils");
+var import_constants = require("./constants");
+var import_utils2 = require("./utils");
+const conventionNames = Object.values(import_constants.NESTED_ROUTE);
+const getLoaderPath = (filename) => __async(void 0, null, function* () {
+  if (yield (0, import_utils2.hasLoader)(filename)) {
+    return filename;
+  }
+  return void 0;
+});
+const replaceDynamicPath = (routePath) => {
+  return routePath.replace(/\[(.*?)\]/g, ":$1");
+};
+const createIndexRoute = (routeInfo, rootDir, filename, entryName) => {
+  return createRoute(
+    __spreadProps(__spreadValues({}, routeInfo), {
+      index: true,
+      children: void 0
+    }),
+    rootDir,
+    filename,
+    entryName
+  );
+};
+const createRoute = (routeInfo, rootDir, filename, entryName) => {
+  const id = (0, import_utils.getRouteId)(filename, rootDir, entryName);
+  return __spreadProps(__spreadValues({}, routeInfo), {
+    id,
+    type: "nested"
+  });
+};
+const walk = (dirname, rootDir, alias, entryName) => __async(void 0, null, function* () {
+  var _a, _b;
+  if (!(yield import_utils.fs.pathExists(dirname))) {
+    return null;
+  }
+  const isDirectory = (yield import_utils.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: [],
+    isRoot
+  };
+  let pageLoaderFile = "";
+  let pageRoute = null;
+  const items = yield import_utils.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 isDirectory2 = (yield import_utils.fs.stat(itemPath)).isDirectory();
+    if (isDirectory2) {
+      const childRoute = yield walk(itemPath, rootDir, alias, entryName);
+      if (childRoute) {
+        (_a = route.children) == null ? void 0 : _a.push(childRoute);
+      }
+    }
+    if (extname && (!import_constants.JS_EXTENSIONS.includes(extname) || !conventionNames.includes(itemWithoutExt))) {
+      continue;
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.LAYOUT_LOADER_FILE) {
+      if (!route.loader) {
+        route.loader = itemPath;
+      }
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.LAYOUT_FILE) {
+      route._component = (0, import_utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
+      const loaderPath = yield getLoaderPath(itemPath);
+      if (loaderPath) {
+        route.loader = loaderPath;
+      }
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.PAGE_LOADER_FILE) {
+      pageLoaderFile = itemPath;
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.PAGE_FILE) {
+      pageRoute = createIndexRoute(
+        {
+          _component: (0, import_utils2.replaceWithAlias)(alias.basename, itemPath, alias.name)
+        },
+        rootDir,
+        itemPath,
+        entryName
+      );
+      const loaderPath = yield getLoaderPath(itemPath);
+      if (loaderPath) {
+        pageRoute.loader = loaderPath;
+      } else if (pageLoaderFile) {
+        pageRoute.loader = pageLoaderFile;
+      }
+      (_b = route.children) == null ? void 0 : _b.push(pageRoute);
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.LOADING_FILE) {
+      route.loading = (0, import_utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
+    }
+    if (itemWithoutExt === import_constants.NESTED_ROUTE.ERROR_FILE) {
+      route.error = (0, import_utils2.replaceWithAlias)(alias.basename, itemPath, alias.name);
+    }
+  }
+  const finalRoute = createRoute(
+    route,
+    rootDir,
+    path.join(dirname, `${import_constants.NESTED_ROUTE.LAYOUT_FILE}.ts`),
+    entryName
+  );
+  if (isPathlessLayout) {
+    delete finalRoute.path;
+  }
+  return finalRoute;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  walk
+});

package/dist/js/node/analyze/templates.js

@@ -1,14 +1,79 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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());
+  });
+};
+var templates_exports = {};
+__export(templates_exports, {
+  fileSystemRoutes: () => fileSystemRoutes,
+  html: () => html,
+  index: () => index,
+  renderFunction: () => renderFunction,
+  routesForServer: () => routesForServer
 });
-exports.renderFunction = exports.index = exports.html = exports.fileSystemRoutes = void 0;
-
+module.exports = __toCommonJS(templates_exports);
+var import_path = __toESM(require("path"));
+var import_utils = require("@modern-js/utils");
+var import_constants = require("./constants");
 const index = ({
   mountId,
   imports,
-  renderFunction,
+  renderFunction: renderFunction2,
   exportStatement
 }) => `
 const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
@@ -22,30 +87,25 @@ let AppWrapper = null;
 let root = null;
 
 function render() {
-  ${renderFunction}
+  ${renderFunction2}
 }
 
 AppWrapper = render();
 
 ${exportStatement};
 `;
-
-exports.index = index;
-
 const renderFunction = ({
   plugins,
   customBootstrap,
-  fileSystemRoutes
+  fileSystemRoutes: fileSystemRoutes2
 }) => `
   AppWrapper = createApp({
     plugins: [
-     ${plugins.map(({
-  name,
-  options,
-  args
-}) => `${name}({...${options}, ...App?.config?.${args || name}}),`).join('\n')}
+     ${plugins.map(
+  ({ name, options, args }) => `${name}({...${options}, ...App?.config?.${args || name}}),`
+).join("\n")}
     ]
-  })(${fileSystemRoutes ? '' : `App`})
+  })(${fileSystemRoutes2 ? "" : `App`})
 
   if (IS_BROWSER) {
     ${customBootstrap ? `customBootstrap(AppWrapper);` : `bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM);`}
@@ -53,22 +113,19 @@ const renderFunction = ({
 
   return AppWrapper
 `;
-
-exports.renderFunction = renderFunction;
-
-const html = partials => `
+const html = (partials) => `
 <!DOCTYPE html>
 <html>
 <head>
   <%= meta %>
   <title><%= title %></title>
 
-  ${partials.top.join('\n')}
+  ${partials.top.join("\n")}
 
   <script>
     window.__assetPrefix__ = '<%= assetPrefix %>';
-  </script>
-  ${partials.head.join('\n')}
+  <\/script>
+  ${partials.head.join("\n")}
 
   <!--<?- chunksMap.css ?>-->
 </head>
@@ -78,7 +135,7 @@ const html = partials => `
     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')}
+  ${partials.body.join("\n")}
   <!--<?- chunksMap.js ?>-->
   <!--<?- SSRDataScript ?>-->
   <!--<?- bottomTemplate ?>-->
@@ -86,21 +143,237 @@ const html = partials => `
 
 </html>
 `;
-
-exports.html = html;
-
-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')}
+const routesForServer = ({
+  routes,
+  internalDirectory,
+  entryName
+}) => {
+  const loaders = [];
+  const loaderIndexFile = import_path.default.join(
+    internalDirectory,
+    entryName,
+    import_constants.TEMP_LOADERS_DIR,
+    "index.js"
+  );
+  const traverseRouteTree = (route) => {
+    var _a;
+    let children;
+    if ("children" in route && route.children) {
+      children = (_a = route == null ? void 0 : route.children) == null ? void 0 : _a.map(traverseRouteTree);
+    }
+    let loader;
+    if (route.type === "nested") {
+      if (route.loader) {
+        loaders.push(route.loader);
+        loader = `loader_${loaders.length - 1}`;
+      }
+    }
+    const finalRoute = __spreadProps(__spreadValues({}, 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)}`;
+    }
+  }
+  routesCode += `
+];`;
+  let importLoadersCode = "";
+  if (loaders.length > 0) {
+    importLoadersCode = `
+    import { ${loaders.map(
+      (loader, index2) => `loader_${index2}`
+    )} } from "${(0, import_utils.slash)(loaderIndexFile)}"`;
+  }
+  return `
+    ${importLoadersCode}
+    ${routesCode}
+  `;
+};
+const fileSystemRoutes = (_0) => __async(void 0, [_0], function* ({
+  routes,
+  ssrMode,
+  nestedRoutesEntry,
+  entryName,
+  internalDirectory,
+  internalDirAlias
+}) {
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+  const loadersMap = {};
+  const loadersIndexFile = import_path.default.join(
+    internalDirAlias,
+    entryName,
+    import_constants.TEMP_LOADERS_DIR,
+    "index.js"
+  );
+  const loadersMapFile = import_path.default.join(
+    internalDirectory,
+    entryName,
+    import_constants.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}&mapFile=${loadersMapFile}!`;
+    }
+    componentLoaderPath = `${import_path.default.join(
+      __dirname,
+      "../builder/loaders/routerLoader"
+    )}!`;
+  }
+  const traverseRouteTree = (route) => {
+    var _a;
+    let children;
+    if ("children" in route && route.children) {
+      children = (_a = route == null ? void 0 : route.children) == null ? void 0 : _a.map(traverseRouteTree);
+    }
+    let loading;
+    let error;
+    let loader;
+    let component = "";
+    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);
+        const loaderId = loaders.length - 1;
+        loader = `loader_${loaderId}`;
+        loadersMap[loader] = route.id;
+      }
+      if (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 = `lazy(() => import(/* webpackChunkName: "${route.id}" */  '${componentLoaderPath}${route._component}'))`;
+        }
+      }
+    } else if (route._component) {
+      component = `loadable(() => import('${route._component}'))`;
+    }
+    const finalRoute = __spreadProps(__spreadValues({}, route), {
+      loading,
+      loader,
+      error,
+      children
+    });
+    if (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(/"(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 = __spreadProps(__spreadValues({}, route), {
+        component
+      });
+      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, "$1").replace(/"(lazy[^"]*)"/g, "$1")},`;
+    }
+  }
+  routeComponentsCode += `
+];`;
+  const importLoadingCode = loadings.map((loading, index2) => {
+    return `import loading_${index2} from '${loading}';
 `;
-
-exports.fileSystemRoutes = fileSystemRoutes;
+  }).join("");
+  const importErrorComponentsCode = errors.map((error, index2) => {
+    return `import error_${index2} from '${error}';
+`;
+  }).join("");
+  let importLoadersCode = "";
+  if (loaders.length > 0) {
+    importLoadersCode = `
+    import { ${loaders.map(
+      (loader, index2) => `loader_${index2}`
+    )} } from "${(0, import_utils.slash)(dataLoaderPath)}${(0, import_utils.slash)(loadersIndexFile)}"
+  `;
+    const loaderEntryCode = loaders.map((loader, index2) => {
+      return `export * from './loader_${index2}.js';`;
+    }).join("\n");
+    const loaderEntryFile = import_path.default.join(
+      internalDirectory,
+      entryName,
+      import_constants.TEMP_LOADERS_DIR,
+      "entry.js"
+    );
+    yield import_utils.fs.ensureFile(loaderEntryFile);
+    yield import_utils.fs.writeFile(loaderEntryFile, loaderEntryCode);
+    yield import_utils.fs.writeJSON(loadersMapFile, loadersMap);
+    yield Promise.all(
+      loaders.map((loader, index2) => __async(void 0, null, function* () {
+        const name = `loader_${index2}`;
+        const filename = import_path.default.join(
+          internalDirectory,
+          entryName,
+          import_constants.TEMP_LOADERS_DIR,
+          `${name}.js`
+        );
+        let code = "";
+        if (loader.includes(".loader.")) {
+          code = `
+          export { default as ${name} } from '${(0, import_utils.slash)(loader)}'
+        `;
+        } else {
+          code = `
+          export { loader as ${name} } from '${(0, import_utils.slash)(loader)}'
+        `;
+        }
+        yield import_utils.fs.ensureFile(filename);
+        yield import_utils.fs.writeFile(filename, code);
+      }))
+    );
+  }
+  return `
+    ${importLazyCode}
+    ${rootLayoutCode}
+    ${importLoadingCode}
+    ${importErrorComponentsCode}
+    ${importLoadersCode}
+    ${routeComponentsCode}
+  `;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fileSystemRoutes,
+  html,
+  index,
+  renderFunction,
+  routesForServer
+});