@modern-js/app-tools 2.4.0 → 2.5.0-alpha.0

package/dist/esm-node/analyze/isDefaultExportFunction.js

@@ -0,0 +1,42 @@
+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);
+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;
+};
+export {
+  isDefaultExportFunction
+};

package/dist/esm-node/analyze/makeLegalIdentifier.js

@@ -0,0 +1,13 @@
+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(" "));
+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 || "_";
+}
+export {
+  makeLegalIdentifier
+};

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

@@ -0,0 +1,150 @@
+import * as path from "path";
+import { fs, getRouteId } from "@modern-js/utils";
+import { JS_EXTENSIONS, NESTED_ROUTE } from "./constants";
+import { replaceWithAlias } from "./utils";
+const conventionNames = Object.values(NESTED_ROUTE);
+const replaceDynamicPath = (routePath) => {
+  return routePath.replace(/\[(.*?)\]/g, ":$1");
+};
+const createIndexRoute = (routeInfo, rootDir, filename, entryName) => {
+  return createRoute(
+    {
+      ...routeInfo,
+      index: true,
+      children: void 0
+    },
+    rootDir,
+    filename,
+    entryName
+  );
+};
+const createRoute = (routeInfo, rootDir, filename, entryName) => {
+  const id = getRouteId(filename, rootDir, entryName);
+  return {
+    ...routeInfo,
+    id,
+    type: "nested"
+  };
+};
+const walk = async (dirname, rootDir, alias, entryName) => {
+  var _a, _b, _c, _d;
+  if (!await fs.pathExists(dirname)) {
+    return null;
+  }
+  const isDirectory = (await 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;
+  let splatLoaderFile = "";
+  let splatRoute = null;
+  const items = await 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 = (await fs.stat(itemPath)).isDirectory();
+    if (isDirectory2) {
+      const childRoute = await walk(itemPath, rootDir, alias, entryName);
+      if (childRoute) {
+        (_a = route.children) == null ? void 0 : _a.push(childRoute);
+      }
+    }
+    if (extname && (!JS_EXTENSIONS.includes(extname) || !conventionNames.includes(itemWithoutExt))) {
+      continue;
+    }
+    if (itemWithoutExt === NESTED_ROUTE.LAYOUT_LOADER_FILE) {
+      if (!route.loader) {
+        route.loader = itemPath;
+      }
+    }
+    if (itemWithoutExt === NESTED_ROUTE.LAYOUT_FILE) {
+      route._component = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+    if (itemWithoutExt === NESTED_ROUTE.PAGE_LOADER_FILE) {
+      pageLoaderFile = itemPath;
+    }
+    if (itemWithoutExt === NESTED_ROUTE.PAGE_FILE) {
+      pageRoute = createIndexRoute(
+        {
+          _component: replaceWithAlias(alias.basename, itemPath, alias.name)
+        },
+        rootDir,
+        itemPath,
+        entryName
+      );
+      if (pageLoaderFile) {
+        pageRoute.loader = pageLoaderFile;
+      }
+      (_b = route.children) == null ? void 0 : _b.push(pageRoute);
+    }
+    if (itemWithoutExt === NESTED_ROUTE.SPLATE_LOADER_FILE) {
+      splatLoaderFile = itemPath;
+    }
+    if (itemWithoutExt === NESTED_ROUTE.SPLATE_FILE) {
+      splatRoute = createRoute(
+        {
+          _component: replaceWithAlias(alias.basename, itemPath, alias.name),
+          path: "*"
+        },
+        rootDir,
+        itemPath,
+        entryName
+      );
+      if (splatLoaderFile) {
+        splatRoute.loader = splatLoaderFile;
+      }
+      (_c = route.children) == null ? void 0 : _c.push(splatRoute);
+    }
+    if (itemWithoutExt === NESTED_ROUTE.LOADING_FILE) {
+      route.loading = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+    if (itemWithoutExt === NESTED_ROUTE.ERROR_FILE) {
+      route.error = replaceWithAlias(alias.basename, itemPath, alias.name);
+    }
+  }
+  let finalRoute = createRoute(
+    route,
+    rootDir,
+    path.join(dirname, `${NESTED_ROUTE.LAYOUT_FILE}.ts`),
+    entryName
+  );
+  if (isPathlessLayout) {
+    delete finalRoute.path;
+  }
+  route.children = (_d = route.children) == null ? void 0 : _d.filter((childRoute) => childRoute);
+  if (route.children && route.children.length === 0 && !route.index) {
+    return null;
+  }
+  if (finalRoute.children && finalRoute.children.length === 1 && !finalRoute._component) {
+    const childRoute = finalRoute.children[0];
+    if (childRoute.path === "*") {
+      const path2 = `${finalRoute.path || ""}/${childRoute.path || ""}`;
+      finalRoute = {
+        ...childRoute,
+        path: path2
+      };
+    }
+  }
+  return finalRoute;
+};
+export {
+  walk
+};

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

@@ -0,0 +1,297 @@
+import path from "path";
+import { fs, slash } from "@modern-js/utils";
+import { APP_CONFIG_NAME, TEMP_LOADERS_DIR } from "./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
+}) => {
+  const bootstrap = "bootstrap(AppWrapper, MOUNT_ID, root, ReactDOM)";
+  return `
+  const finalAppConfig = {
+    ...App.config,
+    ...typeof ${APP_CONFIG_NAME} === 'function' ? ${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});` : `${bootstrap};`}
+  }
+
+  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,
+  metaName
+}) => {
+  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 = {
+      ...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 "${slash(loader)}"`;
+    }).join("\n");
+  }
+  const exportCode = `
+    export { handleRequest } from '@modern-js/plugin-data-loader/runtime';
+  `;
+  return `
+    ${importLoadersCode}
+    ${routesCode}
+    ${exportCode}
+  `;
+};
+const fileSystemRoutes = async ({
+  routes,
+  ssrMode,
+  nestedRoutesEntry,
+  entryName,
+  internalDirectory
+}) => {
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+  const loadersMap = {};
+  const loadersMapFile = path.join(
+    internalDirectory,
+    entryName,
+    TEMP_LOADERS_DIR,
+    "map.json"
+  );
+  const importLazyCode = `
+    import { lazy } from "react";
+    import loadable, { lazy as loadableLazy } from "@modern-js/runtime/loadable"
+  `;
+  let rootLayoutCode = ``;
+  const getDataLoaderPath = (loaderId) => {
+    if (!ssrMode) {
+      return "";
+    }
+    let dataLoaderPath = require.resolve("@modern-js/plugin-data-loader/loader");
+    if (nestedRoutesEntry) {
+      dataLoaderPath = `${slash(dataLoaderPath)}?mapFile=${slash(
+        loadersMapFile
+      )}&loaderId=${loaderId}!`;
+    }
+    return dataLoaderPath;
+  };
+  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}" */  '${route._component}')`;
+          component = `loadable(${lazyImport})`;
+        } else {
+          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+          component = `lazy(${lazyImport})`;
+        }
+      }
+    } else if (route._component) {
+      lazyImport = `() => import('${route._component}')`;
+      component = `loadable(${lazyImport})`;
+    }
+    const finalRoute = {
+      ...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 = {
+        ...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
+      )}${slash(loaderInfo.filePath)}";
+`;
+    } else {
+      importLoadersCode += `import ${key} from "${getDataLoaderPath(
+        key
+      )}${slash(loaderInfo.filePath)}";
+`;
+    }
+  }
+  await fs.ensureFile(loadersMapFile);
+  await fs.writeJSON(loadersMapFile, loadersMap);
+  return `
+    ${importLazyCode}
+    ${rootLayoutCode}
+    ${importLoadingCode}
+    ${importErrorComponentsCode}
+    ${importLoadersCode}
+    ${routeComponentsCode}
+  `;
+};
+export {
+  fileSystemRoutes,
+  html,
+  index,
+  renderFunction,
+  routesForServer
+};

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

@@ -0,0 +1,121 @@
+import fs from "fs";
+import path from "path";
+import { isReact18, normalizeToPosixPath, fs as fse } from "@modern-js/utils";
+import { transform } from "esbuild";
+import { parse } from "es-module-lexer";
+import {
+  FILE_SYSTEM_ROUTES_FILE_NAME,
+  JS_EXTENSIONS,
+  LOADER_EXPORT_NAME
+} from "./constants";
+const walkDirectory = (dir) => fs.readdirSync(dir).reduce((previous, filename) => {
+  const filePath = path.join(dir, filename);
+  if (fs.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: isReact18(path.join(internalDirectory, "../../")) ? "react-dom/client" : "react-dom"
+    },
+    {
+      specifiers: [{ imported: "createApp" }, { imported: "bootstrap" }],
+      value: "@modern-js/runtime"
+    },
+    customBootstrap && {
+      specifiers: [{ local: "customBootstrap" }],
+      value: normalizeToPosixPath(
+        customBootstrap.replace(srcDirectory, internalSrcAlias)
+      )
+    }
+  ].filter(Boolean);
+  if (fileSystemRoutes) {
+    const route = {
+      specifiers: [{ imported: "routes" }],
+      value: normalizeToPosixPath(
+        `${internalDirAlias}/${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME.replace(
+          ".js",
+          ""
+        )}`
+      )
+    };
+    if (fileSystemRoutes.globalApp) {
+      imports.push({
+        specifiers: [{ local: "App" }],
+        value: normalizeToPosixPath(
+          fileSystemRoutes.globalApp.replace(srcDirectory, internalSrcAlias)
+        )
+      });
+    } else {
+      route.initialize = "const App = false;";
+    }
+    imports.push(route);
+  } else {
+    imports.push({
+      specifiers: [{ local: "App" }],
+      value: 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(path.extname(filePath))) {
+    return true;
+  }
+  return false;
+};
+const replaceWithAlias = (base, filePath, alias) => normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
+const parseModule = async ({
+  source,
+  filename
+}) => {
+  let content = source;
+  if (JS_EXTENSIONS.some((ext) => filename.endsWith(ext))) {
+    const result = await transform(content, {
+      loader: path.extname(filename).slice(1),
+      format: "esm"
+    });
+    content = result.code;
+  }
+  return await parse(content);
+};
+const hasLoader = async (filename) => {
+  const source = await fse.readFile(filename);
+  const [, moduleExports] = await parseModule({
+    source: source.toString(),
+    filename
+  });
+  return moduleExports.some((e) => e.n === LOADER_EXPORT_NAME);
+};
+const getServerLoadersFile = (internalDirectory, entryName) => {
+  return path.join(internalDirectory, entryName, "route-server-loaders.js");
+};
+export {
+  getDefaultImports,
+  getServerLoadersFile,
+  hasLoader,
+  isPageComponentFile,
+  parseModule,
+  replaceWithAlias,
+  walkDirectory
+};

package/dist/esm-node/builder/builder-rspack/index.js

@@ -0,0 +1,8 @@
+import { builderRspackProvider } from "@modern-js/builder-rspack-provider";
+import { generateBuilder } from "../generator";
+function createRspackBuilderForModern(options) {
+  return generateBuilder(options, builderRspackProvider);
+}
+export {
+  createRspackBuilderForModern
+};

package/dist/esm-node/builder/builder-webpack/builderPlugins/compatModern.js

@@ -0,0 +1,41 @@
+import { join } from "path";
+import { createCopyPattern } from "../../shared";
+import { RouterPlugin } from "../webpackPlugins";
+const PluginCompatModern = (options) => ({
+  name: "builder-plugin-compat-modern",
+  setup(api) {
+    const { normalizedConfig: modernConfig, appContext } = options;
+    api.modifyWebpackChain((chain, { CHAIN_ID }) => {
+      var _a;
+      chain.resolve.modules.add("node_modules").add(join(api.context.rootPath, "node_modules"));
+      if (chain.plugins.has(CHAIN_ID.PLUGIN.COPY)) {
+        const defaultCopyPattern = createCopyPattern(
+          appContext,
+          modernConfig,
+          "public",
+          chain
+        );
+        chain.plugin(CHAIN_ID.PLUGIN.COPY).tap((args) => {
+          var _a2;
+          return [
+            {
+              patterns: [...((_a2 = args[0]) == null ? void 0 : _a2.patterns) || [], defaultCopyPattern]
+            }
+          ];
+        });
+      }
+      const { entrypoints } = appContext;
+      const existNestedRoutes = entrypoints.some(
+        (entrypoint) => entrypoint.nestedRoutesEntry
+      );
+      const routerConfig = (_a = modernConfig == null ? void 0 : modernConfig.runtime) == null ? void 0 : _a.router;
+      const routerManifest = Boolean(routerConfig == null ? void 0 : routerConfig.manifest);
+      if (existNestedRoutes || routerManifest) {
+        chain.plugin("route-plugin").use(RouterPlugin);
+      }
+    });
+  }
+});
+export {
+  PluginCompatModern
+};