xpine 0.0.20 → 0.0.22

package/dist/index.js

@@ -6,11 +6,10 @@ import EventEmitter from "events";
 import chokidar from "chokidar";
 
 // src/scripts/build.ts
-import path3 from "path";
-import fs2 from "fs-extra";
+import path5 from "path";
+import fs5 from "fs-extra";
 import { build } from "esbuild";
-import builtinModules from "builtin-modules";
-import ts2 from "typescript";
+import ts3 from "typescript";
 
 // src/build/typescript-builder.ts
 import ts from "typescript";
@@ -114,17 +113,6 @@ function removeClientScriptInTSXFile(pathName, source) {
     clientDataStart
   };
 }
-function createStaticFile(pathName, source) {
-  source.forEachChild((child) => {
-    if (child.kind === ts.SyntaxKind.ExpressionStatement) {
-      const text = child.getText(source);
-      const cleanedText = text.replace(/["';]/g, "");
-      if (cleanedText === "xpine-static") {
-        console.log("make this file static", pathName);
-      }
-    }
-  });
-}
 
 // src/scripts/build.ts
 import { globSync } from "glob";
@@ -140,6 +128,10 @@ var require_default = createRequire(import.meta.url);
 function getXPineDistDir() {
   const dir = import.meta.dirname;
   const splitDir = dir.split("/xpine/dist");
+  if (splitDir.length === 1) {
+    const splitDirSingle = dir.split("/xpine/");
+    return splitDirSingle[0] + "/xpine/dist";
+  }
   return splitDir[0] + "/xpine/dist";
 }
 
@@ -181,6 +173,9 @@ var configDefaults = {
   get pagesDir() {
     return path2.join(this.srcDir, "./pages");
   },
+  get distPagesDir() {
+    return path2.join(this.distDir, "./pages");
+  },
   get publicDir() {
     return path2.join(this.srcDir, "./public");
   },
@@ -216,21 +211,152 @@ var plugin = (opts = {}) => {
 plugin.postcss = true;
 var remove_layers_default = plugin;
 
+// src/build/esbuild/transformTSXFiles.ts
+import fs2 from "fs-extra";
+import ts2 from "typescript";
+
+// src/util/regex.ts
+var regex_default = {
+  dotTsx: /.tsx/,
+  hasLetters: /[A-Za-z0-9]/g,
+  configFile: /\+config\.[tj]sx?/g,
+  dynamicRoutes: /(\[)(.*?)(\])/g,
+  isDynamicRoute: /\[(.*)\]/g,
+  endsWithTSX: /\.tsx$/,
+  endsWithJSX: /\.jsx$/
+};
+
+// src/util/config-file.ts
+import path3 from "path";
+function sourcePathToDistPath(sourcePath) {
+  return sourcePath?.replace(config.srcDir, config.distDir)?.replace(/\.ts$/, ".js")?.replace(/\.tsx$/, ".js");
+}
+function getConfigFiles(pathName, pageConfigFiles, returnDistPaths = true) {
+  const configs = [];
+  for (const configFile of pageConfigFiles) {
+    const result = path3.relative(pathName, configFile)?.replace(regex_default.configFile, "");
+    const hasLetters = result.match(regex_default.hasLetters);
+    if (!hasLetters) {
+      configs.push(returnDistPaths ? sourcePathToDistPath(configFile) : configFile);
+    }
+  }
+  if (!configs.length) return null;
+  return configs.sort((a, b) => b.length - a.length);
+}
+async function getCompleteConfig(configFiles, cacheKey) {
+  let config2 = {};
+  for (const configFile of configFiles) {
+    config2 = {
+      ...(await import(configFile + `?cache=${cacheKey}`)).default,
+      ...config2
+    };
+  }
+  return config2;
+}
+function isAConfigFile(pathName) {
+  return !!pathName.match(regex_default.configFile);
+}
+
+// src/build/esbuild/transformTSXFiles.ts
+function transformTSXFiles(componentData, pageConfigFiles) {
+  return {
+    name: "transform-tsx-files",
+    setup(build2) {
+      build2.onLoad({ filter: regex_default.dotTsx }, async (args) => {
+        const content = fs2.readFileSync(args.path, "utf-8");
+        const source = ts2.createSourceFile(
+          args.path,
+          content,
+          ts2.ScriptTarget.Latest
+        );
+        const cleanedContent = removeClientScriptInTSXFile(args.path, source);
+        const htmlImportStart = "import { html } from 'xpine';\n";
+        const newContent = `${htmlImportStart}${cleanedContent.content}`;
+        componentData.push({
+          ...args,
+          contents: `${htmlImportStart}${cleanedContent.fullContent}`,
+          clientContent: cleanedContent.clientContent,
+          configFiles: isAConfigFile(args?.path) ? null : getConfigFiles(args.path, pageConfigFiles)
+        });
+        return {
+          contents: newContent,
+          loader: "tsx"
+        };
+      });
+    }
+  };
+}
+
+// src/build/esbuild/addDotJS.ts
+import fs3 from "fs-extra";
+import path4 from "path";
+import builtinModules from "builtin-modules";
+function addDotJS(allPackages2, extensions2, isDev) {
+  const allPackagesIncludingNode = allPackages2.concat(builtinModules);
+  return {
+    name: "add-dot-js",
+    setup(build2) {
+      build2.onResolve({ filter: /.*/ }, (args) => {
+        const hasAtSign = args.path.startsWith("@");
+        const isPackage = hasAtSign ? allPackagesIncludingNode.includes(args.path) : allPackagesIncludingNode.includes(args.path.split("/").shift());
+        if (args.importer && !isPackage) {
+          const calculatedDir = path4.join(args.resolveDir, args.path);
+          let existsAsFile = false;
+          for (const extension of extensions2) {
+            const asFile = calculatedDir + extension;
+            const exists = fs3.existsSync(asFile);
+            if (exists) existsAsFile = true;
+          }
+          let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
+          outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
+          return { path: outputPath + (isDev ? `?cache=${Date.now()}` : ""), external: true };
+        }
+      });
+    }
+  };
+}
+
+// src/build/esbuild/getDataFiles.ts
+import fs4 from "fs-extra";
+function getDataFiles(dataFiles) {
+  return {
+    name: "get-data-files",
+    setup(build2) {
+      build2.onLoad({ filter: /\.data\.(js|mjs|ts)$/ }, (args) => {
+        const contents = fs4.readFileSync(args.path, "utf-8");
+        dataFiles.push({
+          ...args,
+          contents
+        });
+        return {
+          contents,
+          loader: "ts"
+        };
+      });
+    }
+  };
+}
+
+// src/util/constants.ts
+var doctypeHTML = "<!DOCTYPE html>";
+var staticComment = "<!-- static -->";
+
 // src/scripts/build.ts
 var extensions = [".ts", ".tsx"];
-var packageJson = JSON.parse(fs2.readFileSync(config.packageJsonPath, "utf-8"));
+var packageJson = JSON.parse(fs5.readFileSync(config.packageJsonPath, "utf-8"));
 var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
-var allPackagesIncludingNode = allPackages.concat(builtinModules);
 var xpineDistDir = getXPineDistDir();
-async function buildApp(isDev = false) {
+async function buildApp(isDev = false, removePreviousBuild = false) {
   try {
+    if (removePreviousBuild) fs5.removeSync(config.distDir);
     const srcDirFiles = globSync(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev);
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
     await buildClientSideFiles([alpineDataFile], isDev);
-    fs2.removeSync(config.distTempFolder);
+    fs5.removeSync(config.distTempFolder);
     await buildCSS();
     await buildPublicFolderSymlinks();
+    if (!isDev) await buildFilesWithConfigs(componentData);
   } catch (err) {
     console.error("Build failed");
     console.error(err);
@@ -239,8 +365,12 @@ async function buildApp(isDev = false) {
 async function buildAppFiles(files, isDev) {
   const componentData = [];
   const dataFiles = [];
+  const pageConfigFiles = files.filter((file) => {
+    const fileName = file.split("/").at(-1).split(".").shift();
+    return fileName === "+config";
+  });
   const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
-  fs2.ensureDirSync(config.distDir);
+  fs5.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
     format: "esm",
@@ -252,69 +382,9 @@ async function buildAppFiles(files, isDev) {
     jsx: "transform",
     minify: !isDev,
     plugins: [
-      {
-        name: "add-dot-js",
-        setup(build2) {
-          build2.onResolve({ filter: /.*/ }, (args) => {
-            const hasAtSign = args.path.startsWith("@");
-            const isPackage = hasAtSign ? allPackagesIncludingNode.includes(args.path) : allPackagesIncludingNode.includes(args.path.split("/").shift());
-            if (args.importer && !isPackage) {
-              const calculatedDir = path3.join(args.resolveDir, args.path);
-              let existsAsFile = false;
-              for (const extension of extensions) {
-                const asFile = calculatedDir + extension;
-                const exists = fs2.existsSync(asFile);
-                if (exists) existsAsFile = true;
-              }
-              let outputPath = args.path + (existsAsFile ? "" : "/index") + ".js";
-              outputPath = args.path.endsWith(".js") || args.path.endsWith(".mjs") ? args.path : outputPath;
-              return { path: outputPath + (isDev ? `?cache=${Date.now()}` : ""), external: true };
-            }
-          });
-        }
-      },
-      {
-        name: "insert-html-banner-and-remove-client-scripts",
-        setup(build2) {
-          build2.onLoad({ filter: /.tsx/ }, (args) => {
-            const content = fs2.readFileSync(args.path, "utf-8");
-            const source = ts2.createSourceFile(
-              args.path,
-              content,
-              ts2.ScriptTarget.Latest
-            );
-            const cleanedContent = removeClientScriptInTSXFile(args.path, source);
-            createStaticFile(args.path, source);
-            const htmlImportStart = "import { html } from 'xpine';\n";
-            const newContent = `${htmlImportStart}${cleanedContent.content}`;
-            componentData.push({
-              ...args,
-              contents: `${htmlImportStart}${cleanedContent.fullContent}`,
-              clientContent: cleanedContent.clientContent
-            });
-            return {
-              contents: newContent,
-              loader: "tsx"
-            };
-          });
-        }
-      },
-      {
-        name: "get-data-files",
-        setup(build2) {
-          build2.onLoad({ filter: /\.data\.(js|mjs|ts)$/ }, (args) => {
-            const contents = fs2.readFileSync(args.path, "utf-8");
-            dataFiles.push({
-              ...args,
-              contents
-            });
-            return {
-              contents,
-              loader: "ts"
-            };
-          });
-        }
-      }
+      addDotJS(allPackages, extensions, isDev),
+      transformTSXFiles(componentData, pageConfigFiles),
+      getDataFiles(dataFiles)
     ]
   });
   await logSize(config.distDir, "app");
@@ -324,8 +394,8 @@ async function buildAppFiles(files, isDev) {
   };
 }
 async function buildClientSideFiles(alpineDataFiles = [], isDev) {
-  const tempFilePath = path3.join(config.distTempFolder, "./app.ts");
-  fs2.ensureFileSync(tempFilePath);
+  const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
+  fs5.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
   const clientFiles = globSync(
     config.publicDir + "/**/*.{js,ts}",
@@ -354,16 +424,14 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
   await logSize(config.distPublicDir, "client");
 }
 function writeDevServerClientSideCode(tempFilePath) {
-  const devServerPath = path3.join(xpineDistDir, "./src/static/dev-server.js");
-  const content = fs2.readFileSync(devServerPath, "utf-8");
-  fs2.appendFileSync(tempFilePath, `
-` + content);
+  const devServerPath = path5.join(xpineDistDir, "./src/static/dev-server.js");
+  const content = fs5.readFileSync(devServerPath, "utf-8");
+  fs5.appendFileSync(tempFilePath, "\n" + content);
 }
 function writeSpaClientSideCode(tempFilePath) {
-  const spaPath = path3.join(xpineDistDir, "./src/static/spa.js");
-  const content = fs2.readFileSync(spaPath, "utf-8");
-  fs2.appendFileSync(tempFilePath, `
-` + content);
+  const spaPath = path5.join(xpineDistDir, "./src/static/spa.js");
+  const content = fs5.readFileSync(spaPath, "utf-8");
+  fs5.appendFileSync(tempFilePath, "\n" + content);
 }
 async function buildAlpineDataFile(componentData, dataFiles) {
   const output = {
@@ -382,10 +450,10 @@ async function buildAlpineDataFile(componentData, dataFiles) {
   };
   const componentsAndDataFiles = componentData.concat(dataFiles);
   for (const component of componentsAndDataFiles) {
-    const sourceFile = ts2.createSourceFile(
+    const sourceFile = ts3.createSourceFile(
       component.path,
       component.contents,
-      ts2.ScriptTarget.Latest
+      ts3.ScriptTarget.Latest
     );
     const dataFunctionResult = findDataAttributesAndFunctions(sourceFile, sourceFile);
     dataFunctionResults.foundDataAttributes.push(...dataFunctionResult.foundDataAttributes);
@@ -407,18 +475,18 @@ async function buildAlpineDataFile(componentData, dataFiles) {
     output.code.push(`Alpine.data('${dataFunction.name}', ${dataFunction.name});`);
   }
   const result = output.imports.join("\n") + "\n" + output.code.join("\n") + "\n" + output.end.join("\n");
-  fs2.ensureFileSync(config.alpineDataPath);
-  fs2.writeFileSync(config.alpineDataPath, result);
+  fs5.ensureFileSync(config.alpineDataPath);
+  fs5.writeFileSync(config.alpineDataPath, result);
   return config.alpineDataPath;
 }
 async function buildCSS() {
   const cssFiles = globSync(config.srcDir + "/**/*.css");
   for (const file of cssFiles) {
-    const fileContents = fs2.readFileSync(file, "utf-8");
+    const fileContents = fs5.readFileSync(file, "utf-8");
     const result = await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
     const newPath = file.replace(config.srcDir, config.distDir);
-    fs2.ensureFileSync(newPath);
-    fs2.writeFileSync(newPath, result.css);
+    fs5.ensureFileSync(newPath);
+    fs5.writeFileSync(newPath, result.css);
   }
   logSize(config.distPublicDir, "css");
 }
@@ -432,8 +500,8 @@ async function buildPublicFolderSymlinks() {
       const splitNewPath = newPath.split("/");
       splitNewPath.pop();
       const newDir = splitNewPath.join("/");
-      fs2.ensureDirSync(newDir);
-      fs2.symlinkSync(file, newPath);
+      fs5.ensureDirSync(newDir);
+      fs5.symlinkSync(file, newPath);
     } catch {
     }
   }
@@ -444,7 +512,7 @@ async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
     if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
-      size: fs2.statSync(file).size / (1024 * 1e3)
+      size: fs5.statSync(file).size / (1024 * 1e3)
     };
   }).filter(Boolean);
   const totalSize = fileSizes.reduce((total, current) => {
@@ -452,17 +520,91 @@ async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
   }, 0);
   console.info(`[${totalSize.toFixed(3)} MB] Built ${type}`);
 }
+async function buildFilesWithConfigs(componentData) {
+  const now = Date.now();
+  const componentsWithConfigs = componentData.filter((item) => item.configFiles);
+  for (const component of componentsWithConfigs) {
+    let config2 = await getCompleteConfig(component.configFiles, now);
+    const builtComponentPath = sourcePathToDistPath(component.path);
+    const componentImport = await import(builtComponentPath + `?cache=${Date.now()}`);
+    if (componentImport?.config) {
+      config2 = {
+        ...config2,
+        ...componentImport.config
+      };
+    }
+    if (config2?.staticPaths) buildStaticFiles(config2, component, componentImport, builtComponentPath);
+  }
+}
+async function buildStaticFiles(config2, component, componentImport, builtComponentPath) {
+  if (!config2?.staticPaths) return;
+  let componentFileName = component.path.split("/").pop().replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
+  const isDynamicRoute = component.path.match(regex_default.isDynamicRoute);
+  if (isDynamicRoute) {
+    componentFileName = component.path.split("/").filter((dir) => dir.match(regex_default.isDynamicRoute)).join("/").replace(regex_default.endsWithJSX, "").replace(regex_default.endsWithTSX, "");
+  }
+  const componentDynamicPaths = getComponentDynamicPaths(componentFileName);
+  const componentFn = componentImport.default;
+  const outputPath = componentDynamicPaths?.length ? componentDynamicPaths.reduce((total, current) => {
+    return total.replace(`/[${current}]`, "");
+  }, path5.dirname(builtComponentPath)) : path5.dirname(builtComponentPath);
+  if (typeof config2?.staticPaths === "boolean") {
+    try {
+      const req = { params: {} };
+      const data = config2?.data ? await config2.data(req) : null;
+      const staticComponentOutput = await componentFn({ data });
+      fs5.writeFileSync(
+        path5.join(outputPath, "./index.html"),
+        doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data }) : staticComponentOutput) + staticComment
+      );
+    } catch (err) {
+      console.error(err);
+      console.log("Could not build static component", component.path);
+    }
+  } else if (typeof config2?.staticPaths === "function") {
+    const dynamicPaths = await config2.staticPaths();
+    for (const dynamicPath of dynamicPaths) {
+      try {
+        const req = {
+          params: {
+            ...componentDynamicPaths?.length ? dynamicPath : {}
+          }
+        };
+        const data = config2?.data ? await config2.data(req) : null;
+        const staticComponentOutput = await componentFn({ req, data });
+        const updatedOutDir = path5.join(outputPath, `./${componentDynamicPaths.map((key) => dynamicPath[key]).join("/")}`);
+        fs5.ensureDirSync(updatedOutDir);
+        fs5.writeFileSync(
+          path5.join(updatedOutDir, "./index.html"),
+          doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data }) : staticComponentOutput) + staticComment
+        );
+      } catch (err) {
+        console.log("Could not build static component", component.path);
+        console.error(err);
+      }
+    }
+  }
+}
+function getComponentDynamicPaths(componentPath) {
+  const matches = [...componentPath.matchAll(regex_default.dynamicRoutes)];
+  if (!matches?.length) return null;
+  const output = [];
+  for (const match of matches) {
+    output.push(match[2]);
+  }
+  return output;
+}
 
 // src/runDevServer.ts
-import path5 from "path";
+import path7 from "path";
 
 // src/util/env.ts
 import dotenv from "dotenv";
-import path4 from "path";
+import path6 from "path";
 import { GetSecretValueCommand, SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
 async function setupEnv() {
   if (process.env.HAS_SETUP_ENV) return;
-  dotenv.config({ path: path4.join(config.rootDir, `./.env.${process.env.STAGE || "dev"}`) });
+  dotenv.config({ path: path6.join(config.rootDir, `./.env.${process.env.STAGE || "dev"}`) });
   await loadSecretsManagerSecrets();
   process.env.HAS_SETUP_ENV = "true";
 }
@@ -491,26 +633,33 @@ async function loadSecretsManagerSecrets() {
 await setupEnv();
 async function runDevServer() {
   process.env.NODE_ENV = "development";
-  const startServer = (await import(config.serverDistAppPath + `?cache=${Date.now()}`)).default;
+  const rebuildEmitter = createRebuildEmitter();
   await buildApp(true);
+  const startServer = (await import(config.serverDistAppPath + `?cache=${Date.now()}`)).default;
   let appServer = await startServer();
   const watcher = chokidar.watch(config.srcDir, {
     ignoreInitial: true,
     // Ignore map and prisma files
-    ignored: (pathName) => pathName.endsWith(".map") || pathName.startsWith(path5.join(config.serverDir, "./prisma"))
+    ignored: (pathName) => pathName.endsWith(".map") || pathName.startsWith(path7.join(config.serverDir, "./prisma"))
   });
-  watcher.on("all", async (event, path6) => {
-    const shouldReloadServer = path6.startsWith(config.serverDir) && !path6.startsWith(config.runDir) || ["add", "unlink"].includes(event) && path6.startsWith(config.pagesDir);
+  watcher.on("all", async (event, path9) => {
+    const shouldReloadServer = path9.startsWith(config.serverDir) && !path9.startsWith(config.runDir) || ["add", "unlink"].includes(event) && path9.startsWith(config.pagesDir);
     if (shouldReloadServer) {
-      await appServer.server.close();
-      await buildApp(true);
-      const startServer2 = (await import(config.serverDistAppPath + `?cache=${Date.now()}`)).default;
-      appServer = await startServer2();
+      await asyncServerClose(appServer.server);
+      rebuildEmitter.emit("rebuild-server");
       return;
     }
     await buildApp(true);
     refreshEmitter.emit("refresh");
   });
+  rebuildEmitter.on("done", async () => {
+    await rebuildServer();
+  });
+  async function rebuildServer() {
+    await buildApp(true);
+    const startServer2 = (await import(config.serverDistAppPath + `?cache=${Date.now()}`)).default;
+    appServer = await startServer2();
+  }
   const wsApp = express();
   const wsServer = http.createServer(wsApp);
   expressWs(wsApp, wsServer);
@@ -530,6 +679,37 @@ async function runDevServer() {
     console.info(`Dev server listening on port ${wsPort}`);
   });
 }
+function asyncServerClose(server) {
+  return new Promise((resolve, reject) => {
+    server.close();
+    resolve(true);
+  });
+}
+function createRebuildEmitter(delay = 500) {
+  class RebuildEmitter extends EventEmitter {
+  }
+  ;
+  const rebuildEmitter = new RebuildEmitter();
+  let start = 0;
+  let hasEmitted = false;
+  rebuildEmitter.on("rebuild-server", () => {
+    hasEmitted = false;
+    trigger();
+  });
+  function trigger() {
+    start = Date.now();
+    const interval = setInterval(() => {
+      if (hasEmitted) return;
+      const now = Date.now();
+      if (now - start >= delay) {
+        rebuildEmitter.emit("done");
+        clearInterval(interval);
+        hasEmitted = true;
+      }
+    }, 100);
+  }
+  return rebuildEmitter;
+}
 
 // src/express.ts
 import express2 from "express";
@@ -574,33 +754,48 @@ function getTokenFromRequest(req) {
 
 // src/express.ts
 import requestIP from "request-ip";
-var doctypeHTML = "<!DOCTYPE html>";
+import fs6 from "fs-extra";
+import path8 from "path";
 async function createRouter() {
+  const isDev = process.env.NODE_ENV === "development";
   const methods = ["get", "post", "put", "patch", "delete"];
   const router = express2.Router();
   const routes = globSync2(config.pagesDir + "/**/*.{tsx,ts}");
   const routeMap = routes.map((route) => {
+    const routeFormatted = route.split(config.pagesDir).pop().replace(".tsx", "").replace(".js", "").replace(".ts", "");
+    if (routeFormatted.endsWith("+config")) return;
+    const routeFormattedWithIndex = routeFormatted.replace(/\/index$/g, "");
     return {
-      route: route.split(config.pagesDir).pop().replace(".tsx", "").replace(".js", "").replace(".ts", "").replace("/index", "/"),
+      route: routeFormattedWithIndex,
       path: route.replace(config.srcDir, config.distDir).replace(".tsx", ".js").replace(".ts", ".js"),
       originalRoute: route
     };
-  });
+  }).filter(Boolean);
   const routeResults = [];
+  const configFiles = globSync2(config.pagesDir + "/**/+config.{tsx,ts}");
   for (const route of routeMap) {
     const isJSX = route.originalRoute.endsWith(".tsx") || route.originalRoute.endsWith(".jsx");
-    const routeItem = process.env.NODE_ENV === "development" ? null : (await import(route.path)).default;
-    const slugRoute = route.route.toLowerCase().replace(/[ ]/g, "");
+    const slugRoute = route.route.replace(/[ ]/g, "");
     const foundMethod = methods.find((method) => slugRoute.endsWith(`.${method}`));
-    const isDynamicRoute = slugRoute.match(/\[(.*)\]/g);
+    const isDynamicRoute = slugRoute.match(regex_default.isDynamicRoute);
     let formattedRouteItem = slugRoute;
     if (foundMethod) formattedRouteItem = formattedRouteItem.split(".").shift();
     if (isDynamicRoute) {
-      const result = [...formattedRouteItem.matchAll(/(\[)(.*?)(\])/g)];
+      const result = [...formattedRouteItem.matchAll(regex_default.dynamicRoutes)];
       for (const match of result) {
         formattedRouteItem = formattedRouteItem.replace(match[0], ":" + match[2]);
       }
     }
+    const componentImport = isDev ? null : await import(route.path);
+    const componentFn = componentImport?.default;
+    const configFilePaths = getConfigFiles(route.originalRoute, configFiles);
+    let config2 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
+    if (componentImport?.config) {
+      config2 = {
+        ...config2,
+        ...componentImport.config
+      };
+    }
     routeResults.push({
       formattedRouteItem,
       foundMethod,
@@ -608,19 +803,38 @@ async function createRouter() {
     });
     router[foundMethod || "get"](formattedRouteItem, async (req, res) => {
       try {
-        if (routeItem) {
+        const staticPath = routeHasStaticPath(formattedRouteItem, req.params);
+        if (staticPath && !isDev) {
+          res.sendFile(staticPath);
+          return;
+        }
+        if (componentFn && !isDev) {
           if (isJSX) {
-            res.send(doctypeHTML + await routeItem(req, res));
+            const data = config2?.data ? await config2.data(req) : null;
+            const originalResult = await componentFn({ req, res, data });
+            const output = config2?.wrapper ? await config2.wrapper({ req, children: originalResult, config: config2, data }) : originalResult;
+            res.send(doctypeHTML + output);
           } else {
-            await routeItem(req, res);
+            await componentFn(req, res);
           }
           return;
         }
-        const defaultRouteImport = (await import(route.path + `?cache=${Date.now()}`)).default;
+        const componentImportDev = await import(route.path + `?cache=${Date.now()}`);
+        const componentFnDev = componentImportDev.default;
         if (isJSX) {
-          res.send(doctypeHTML + await defaultRouteImport(req, res));
+          let config3 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
+          if (componentImportDev?.config) {
+            config3 = {
+              ...config3,
+              ...componentImportDev.config
+            };
+          }
+          const data = config3?.data ? await config3.data(req) : null;
+          const originalResult = await componentFnDev({ req, res, data });
+          const output = config3?.wrapper ? await config3.wrapper({ req, children: originalResult, config: config3, data }) : originalResult;
+          res.send(doctypeHTML + output);
         } else {
-          await defaultRouteImport(req, res);
+          await componentFnDev(req, res);
         }
       } catch (err) {
         console.error(err);
@@ -655,7 +869,7 @@ async function createXPineRouter(app, beforeErrorRoute) {
     router(req, res, next);
   });
   const found404 = routeResults?.find((item) => item?.formattedRouteItem === "/404");
-  const import404 = process.env.NODE_ENV === "development" ? null : (await import(found404.route.path)).default;
+  const import404 = process.env.NODE_ENV === "development" || !found404 ? null : (await import(found404.route.path)).default;
   if (beforeErrorRoute) beforeErrorRoute(app);
   app.use(async function(req, res) {
     res.status(404);
@@ -669,6 +883,17 @@ async function createXPineRouter(app, beforeErrorRoute) {
     }
   });
 }
+function routeHasStaticPath(route, params) {
+  const paramEntries = Object.entries(params);
+  let routeToStaticPath = route;
+  for (const [key, value] of paramEntries) {
+    routeToStaticPath = routeToStaticPath.replace(`:${key}`, value);
+  }
+  routeToStaticPath += "/index.html";
+  const outputPath = path8.join(config.distPagesDir, routeToStaticPath);
+  if (fs6.existsSync(outputPath)) return outputPath;
+  return false;
+}
 
 // src/util/html.ts
 var html = class {
@@ -699,14 +924,18 @@ export {
   JSXRuntime,
   buildApp,
   buildCSS,
+  buildFilesWithConfigs,
   buildPublicFolderSymlinks,
+  buildStaticFiles,
   config,
   createRouter,
   createXPineRouter,
   fromRoot,
+  getComponentDynamicPaths,
   getTokenFromRequest,
   html,
   logSize,
+  routeHasStaticPath,
   runDevServer,
   setupEnv,
   signUser,