@modern-js/app-tools 2.32.0 → 2.32.1-alpha.0

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

@@ -0,0 +1,365 @@
+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
+});
+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: renderFunction2,
+  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() {
+  ${renderFunction2}
+}
+
+AppWrapper = render();
+
+${exportStatement};
+`;
+const renderFunction = ({
+  plugins,
+  customBootstrap,
+  fileSystemRoutes: fileSystemRoutes2
+}) => {
+  return `
+  const finalAppConfig = {
+    ...App.config,
+    ...typeof ${import_constants.APP_CONFIG_NAME} === 'function' ? ${import_constants.APP_CONFIG_NAME}() : {},
+  }
+
+  AppWrapper = createApp({
+    plugins: [
+     ${plugins.map(
+    ({ name, options, args }) => `${name}({...${options}, ...finalAppConfig?.${args || name}}),`
+  ).join("\n")}
+    ]
+  })(${fileSystemRoutes2 ? "" : `App`})
+
+
+  if(!AppWrapper.init && typeof appInit !== 'undefined') {
+    AppWrapper.init = appInit;
+  }
+
+
+  if (IS_BROWSER) {
+    ${customBootstrap ? `customBootstrap(AppWrapper);` : `bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM);`}
+  }
+
+  return AppWrapper
+`;
+};
+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>
+`;
+const routesForServer = ({
+  routes
+}) => {
+  const loaders = [];
+  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 = loaders.map((loader, index2) => {
+      return `import loader_${index2} from "${(0, import_utils.slash)(loader)}"`;
+    }).join("\n");
+  }
+  return `
+    ${importLoadersCode}
+    ${routesCode}
+  `;
+};
+const fileSystemRoutes = (_0) => __async(void 0, [_0], function* ({
+  routes,
+  ssrMode,
+  nestedRoutesEntry,
+  entryName,
+  internalDirectory
+}) {
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+  const loadersMap = {};
+  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 componentLoaderPath = "";
+  const getDataLoaderPath = (loaderId) => {
+    if (!ssrMode) {
+      return "";
+    }
+    let dataLoaderPath = require.resolve("@modern-js/plugin-data-loader/loader");
+    if (nestedRoutesEntry) {
+      dataLoaderPath = `${(0, import_utils.slash)(dataLoaderPath)}?mapFile=${(0, import_utils.slash)(
+        loadersMapFile
+      )}&loaderId=${loaderId}!`;
+    }
+    return dataLoaderPath;
+  };
+  if (ssrMode) {
+    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 = "";
+    let lazyImport = null;
+    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] = {
+          routeId: route.id,
+          filePath: route.loader,
+          inline: false
+        };
+      }
+      if (route._component) {
+        if (route.isRoot) {
+          rootLayoutCode = `import RootLayout from '${route._component}'`;
+          component = `RootLayout`;
+        } else if (ssrMode === "string") {
+          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${componentLoaderPath}${route._component}')`;
+          component = `loadable(${lazyImport})`;
+        } else {
+          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${componentLoaderPath}${route._component}')`;
+          component = `lazy(${lazyImport})`;
+        }
+      }
+    } else if (route._component) {
+      lazyImport = `() => import('${route._component}')`;
+      component = `loadable(${lazyImport})`;
+    }
+    const finalRoute = __spreadProps(__spreadValues({}, route), {
+      lazyImport,
+      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(/"(\(\)[^,]+)",/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}';
+`;
+  }).join("");
+  const importErrorComponentsCode = errors.map((error, index2) => {
+    return `import error_${index2} from '${error}';
+`;
+  }).join("");
+  let importLoadersCode = "";
+  for (const [key, loaderInfo] of Object.entries(loadersMap)) {
+    if (loaderInfo.inline) {
+      importLoadersCode += `import { loader as ${key} } from "${getDataLoaderPath(
+        key
+      )}${(0, import_utils.slash)(loaderInfo.filePath)}";
+`;
+    } else {
+      importLoadersCode += `import ${key} from "${getDataLoaderPath(
+        key
+      )}${(0, import_utils.slash)(loaderInfo.filePath)}";
+`;
+    }
+  }
+  yield import_utils.fs.ensureFile(loadersMapFile);
+  yield import_utils.fs.writeJSON(loadersMapFile, loadersMap);
+  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
+});

package/dist/js/node/analyze/utils.js

@@ -0,0 +1,172 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 utils_exports = {};
+__export(utils_exports, {
+  getDefaultImports: () => getDefaultImports,
+  getServerLoadersFile: () => getServerLoadersFile,
+  hasLoader: () => hasLoader,
+  isPageComponentFile: () => isPageComponentFile,
+  parseModule: () => parseModule,
+  replaceWithAlias: () => replaceWithAlias,
+  walkDirectory: () => walkDirectory
+});
+module.exports = __toCommonJS(utils_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_utils = require("@modern-js/utils");
+var import_esbuild = require("esbuild");
+var import_es_module_lexer = require("es-module-lexer");
+var import_constants = require("./constants");
+const walkDirectory = (dir) => import_fs.default.readdirSync(dir).reduce((previous, filename) => {
+  const filePath = import_path.default.join(dir, filename);
+  if (import_fs.default.statSync(filePath).isDirectory()) {
+    return [...previous, ...walkDirectory(filePath)];
+  } else {
+    return [...previous, filePath];
+  }
+}, []);
+const getDefaultImports = ({
+  entrypoint,
+  srcDirectory,
+  internalSrcAlias,
+  internalDirAlias,
+  internalDirectory
+}) => {
+  const { entryName, fileSystemRoutes, customBootstrap, entry } = entrypoint;
+  const imports = [
+    {
+      specifiers: [{ local: "React" }],
+      value: "react"
+    },
+    {
+      specifiers: [{ local: "ReactDOM" }],
+      value: (0, import_utils.isReact18)(import_path.default.join(internalDirectory, "../../")) ? "react-dom/client" : "react-dom"
+    },
+    {
+      specifiers: [{ imported: "createApp" }, { imported: "bootstrap" }],
+      value: "@modern-js/runtime"
+    },
+    customBootstrap && {
+      specifiers: [{ local: "customBootstrap" }],
+      value: (0, import_utils.normalizeToPosixPath)(
+        customBootstrap.replace(srcDirectory, internalSrcAlias)
+      )
+    }
+  ].filter(Boolean);
+  if (fileSystemRoutes) {
+    const route = {
+      specifiers: [{ imported: "routes" }],
+      value: (0, import_utils.normalizeToPosixPath)(
+        `${internalDirAlias}/${entryName}/${import_constants.FILE_SYSTEM_ROUTES_FILE_NAME.replace(
+          ".js",
+          ""
+        )}`
+      )
+    };
+    if (fileSystemRoutes.globalApp) {
+      imports.push({
+        specifiers: [{ local: "App" }],
+        value: (0, import_utils.normalizeToPosixPath)(
+          fileSystemRoutes.globalApp.replace(srcDirectory, internalSrcAlias)
+        )
+      });
+    } else {
+      route.initialize = "const App = false;";
+    }
+    imports.push(route);
+  } else {
+    imports.push({
+      specifiers: [{ local: "App" }],
+      value: (0, import_utils.normalizeToPosixPath)(
+        entry.replace(srcDirectory, internalSrcAlias)
+      )
+    });
+  }
+  return imports;
+};
+const isPageComponentFile = (filePath) => {
+  if (/\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/.test(filePath)) {
+    return false;
+  }
+  if ([".js", ".jsx", ".ts", ".tsx"].includes(import_path.default.extname(filePath))) {
+    return true;
+  }
+  return false;
+};
+const replaceWithAlias = (base, filePath, alias) => (0, import_utils.normalizeToPosixPath)(import_path.default.join(alias, import_path.default.relative(base, filePath)));
+const parseModule = (_0) => __async(void 0, [_0], function* ({
+  source,
+  filename
+}) {
+  let content = source;
+  if (import_constants.JS_EXTENSIONS.some((ext) => filename.endsWith(ext))) {
+    const result = yield (0, import_esbuild.transform)(content, {
+      loader: import_path.default.extname(filename).slice(1),
+      format: "esm"
+    });
+    content = result.code;
+  }
+  return yield (0, import_es_module_lexer.parse)(content);
+});
+const hasLoader = (filename) => __async(void 0, null, function* () {
+  const source = yield import_utils.fs.readFile(filename);
+  const [, moduleExports] = yield parseModule({
+    source: source.toString(),
+    filename
+  });
+  return moduleExports.some((e) => e.n === import_constants.LOADER_EXPORT_NAME);
+});
+const getServerLoadersFile = (internalDirectory, entryName) => {
+  return import_path.default.join(internalDirectory, entryName, "route-server-loaders.js");
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDefaultImports,
+  getServerLoadersFile,
+  hasLoader,
+  isPageComponentFile,
+  parseModule,
+  replaceWithAlias,
+  walkDirectory
+});