@cfdez11/vex 0.1.0 → 0.2.1

package/bin/vex.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+import { spawn } from "child_process";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const serverDir = path.resolve(__dirname, "..", "server");
+
+const [command] = process.argv.slice(2);
+
+const commands = {
+  dev: () =>
+    spawn(
+      "node",
+      ["--watch", path.join(serverDir, "index.js")],
+      { stdio: "inherit" }
+    ),
+
+  build: () =>
+    spawn(
+      "node",
+      [path.join(serverDir, "prebuild.js")],
+      { stdio: "inherit" }
+    ),
+
+  start: () =>
+    spawn(
+      "node",
+      [path.join(serverDir, "index.js")],
+      { stdio: "inherit", env: { ...process.env, NODE_ENV: "production" } }
+    ),
+};
+
+if (!commands[command]) {
+  console.error(`Unknown command: "${command}"\nAvailable: dev, build, start`);
+  process.exit(1);
+}
+
+const child = commands[command]();
+child.on("exit", code => process.exit(code ?? 0));

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@cfdez11/vex",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A vanilla JavaScript meta-framework with file-based routing, SSR/CSR/SSG/ISR and Vue-like reactivity",
   "type": "module",
   "main": "./server/index.js",
   "exports": {
     ".": "./server/index.js"
   },
+  "bin": {
+    "vex": "./bin/vex.js"
+  },
   "files": [
+    "bin",
     "server",
     "client"
   ],

package/server/utils/component-processor.js

@@ -1,7 +1,7 @@
 import { watch } from "fs";
 import path from "path";
 import { compileTemplateToHTML } from "./template.js";
-import { getOriginalRoutePath, getPageFiles, getRoutePath, saveClientComponentModule, saveClientRoutesFile, saveComponentHtmlDisk, saveServerRoutesFile, readFile, getImportData, generateComponentId, adjustClientModulePath, PAGES_DIR, ROOT_HTML_DIR, getLayoutPaths } from "./files.js";
+import { getOriginalRoutePath, getPageFiles, getRoutePath, saveClientComponentModule, saveClientRoutesFile, saveComponentHtmlDisk, saveServerRoutesFile, readFile, getImportData, generateComponentId, adjustClientModulePath, PAGES_DIR, ROOT_HTML_DIR, getLayoutPaths, SRC_DIR, WATCH_IGNORE } from "./files.js";
 import { renderComponents } from "./streaming.js";
 import { getRevalidateSeconds } from "./cache.js";
 import { withCache } from "./data-cache.js";
@@ -80,11 +80,12 @@ if (process.env.NODE_ENV !== "production") {
   // Lazy import — hmr.js is never loaded in production
   const { hmrEmitter } = await import("./hmr.js");
 
-  const watchDirs = [PAGES_DIR, path.join(path.dirname(PAGES_DIR), "components")];
-  for (const dir of watchDirs) {
-    watch(dir, { recursive: true }, async (_, filename) => {
-      if (filename?.endsWith(".vex")) {
-        const fullPath = path.join(dir, filename);
+  // Watch SRC_DIR (configured via vex.config.json `srcDir`, defaults to project root).
+  // Skip any path segment that appears in WATCH_IGNORE to avoid reacting to
+  // changes inside node_modules, build outputs, or other non-source directories.
+  watch(SRC_DIR, { recursive: true }, async (_, filename) => {
+      if (filename?.endsWith(".vex") && !filename.split(path.sep).some(part => WATCH_IGNORE.has(part))) {
+        const fullPath = path.join(SRC_DIR, filename);
 
         // 1. Evict all in-memory caches for this file
         processHtmlFileCache.delete(fullPath);
@@ -101,7 +102,6 @@ if (process.env.NODE_ENV !== "production") {
         hmrEmitter.emit("reload", filename);
       }
     });
-  }
 
   // root.html is a single file — watch it directly
   watch(ROOT_HTML_DIR, async () => {
@@ -971,19 +971,9 @@ async function generateServerComponentHTML(componentPath) {
 export async function processClientComponent(componentName, originalPath, props = {}) {
   const targetId = `client-${componentName}-${Date.now()}`;
 
-  const propsEntries = Object.entries(props)
-    .map(([key, value]) => {
-      // if starts with ${ remove quotes
-      if (typeof value === "string" && value.startsWith("${")) {
-        return `${key}:${value.replace(/^\$\{|\}$/g, "")}`;
-      } else {
-        return `${key}:${JSON.stringify(value)}`;
-      }
-    })
-    .join(",");
-
   const componentImport = generateComponentId(originalPath)
-  const html = `<template id="${targetId}" data-client:component="${componentImport}" data-client:props='${propsEntries ? `\${JSON.stringify({${propsEntries}})}` : "{}"}'></template>`;
+  const propsJson = JSON.stringify(props);
+  const html = `<template id="${targetId}" data-client:component="${componentImport}" data-client:props='${propsJson}'></template>`;
   
   return html;
 }

package/server/utils/files.js

@@ -1,5 +1,5 @@
 import fs from "fs/promises";
-import { watch, existsSync, statSync } from "fs";
+import { watch, existsSync, statSync, readFileSync } from "fs";
 import path from "path";
 import crypto from "crypto";
 import { fileURLToPath, pathToFileURL } from "url";
@@ -18,10 +18,78 @@ const __dirname = path.dirname(__filename);
 // Framework's own directory (packages/vexjs/ — 3 levels up from server/utils/)
 const FRAMEWORK_DIR = path.resolve(__dirname, "..", "..");
 // User's project root (where they run the server)
-const PROJECT_ROOT = process.cwd();
+export const PROJECT_ROOT = process.cwd();
 const ROOT_DIR = PROJECT_ROOT;
 
-export const PAGES_DIR = path.resolve(PROJECT_ROOT, "pages");
+/**
+ * User configuration loaded from `vex.config.json` at the project root.
+ *
+ * Supported fields:
+ *   - `srcDir`      {string}   Subfolder that contains pages/, components/ and
+ *                              all user .vex code. Defaults to "." (project root).
+ *                              Example: "app"  →  pages live at app/pages/
+ *   - `watchIgnore` {string[]} Additional directory names to exclude from the
+ *                              dev file watcher, merged with the built-in list.
+ *                              Example: ["dist", "coverage"]
+ *
+ * The file is optional — if absent, all values fall back to their defaults.
+ */
+let _vexConfig = {};
+try {
+  _vexConfig = JSON.parse(readFileSync(path.join(PROJECT_ROOT, "vex.config.json"), "utf-8"));
+} catch {}
+
+/**
+ * Absolute path to the directory that contains the user's source files
+ * (pages/, components/, and any other .vex folders).
+ *
+ * Derived from `srcDir` in vex.config.json, resolved relative to PROJECT_ROOT.
+ * Defaults to PROJECT_ROOT when `srcDir` is not set.
+ *
+ * Changing this allows users to organise all their app code in a single
+ * subfolder (e.g. `app/`) so the dev watcher only needs to observe that
+ * folder instead of the entire project root.
+ */
+export const SRC_DIR = path.resolve(PROJECT_ROOT, _vexConfig.srcDir || ".");
+
+/**
+ * Set of directory *names* (not paths) that the dev file watcher will skip
+ * when scanning for .vex changes.
+ *
+ * The check is applied to every segment of the changed file's relative path,
+ * so a directory named "dist" is ignored regardless of nesting depth.
+ *
+ * Built-in ignored directories (always excluded):
+ *   - Build outputs:        dist, build, out, .output
+ *   - Framework generated:  .vexjs, public
+ *   - Dependencies:         node_modules
+ *   - Version control:      .git, .svn
+ *   - Test coverage:        coverage, .nyc_output
+ *   - Other fw caches:      .next, .nuxt, .svelte-kit, .astro
+ *   - Misc:                 tmp, temp, .cache, .claude
+ *
+ * Extended via `watchIgnore` in vex.config.json.
+ */
+export const WATCH_IGNORE = new Set([
+  // build outputs
+  "dist", "build", "out", ".output",
+  // framework generated
+  ".vexjs", "public",
+  // dependencies
+  "node_modules",
+  // vcs
+  ".git", ".svn",
+  // test coverage
+  "coverage", ".nyc_output",
+  // other framework caches
+  ".next", ".nuxt", ".svelte-kit", ".astro",
+  // misc
+  "tmp", "temp", ".cache", ".claude",
+  // user-defined extras from vex.config.json
+  ...(_vexConfig.watchIgnore || []),
+]);
+
+export const PAGES_DIR = path.resolve(SRC_DIR, "pages");
 export const SERVER_APP_DIR = path.join(FRAMEWORK_DIR, "server");
 export const CLIENT_DIR = path.join(FRAMEWORK_DIR, "client");
 export const CLIENT_SERVICES_DIR = path.join(CLIENT_DIR, "services");
@@ -98,10 +166,12 @@ export function adjustClientModulePath(modulePath, importStatement) {
   let relative = modulePath.replace(/^vex\//, "").replace(/^\.app\//, "");
   let adjustedPath = `/_vexjs/services/${relative}`;
 
-  // Auto-resolve directory → index.js
+  // Auto-resolve directory → index.js, bare name → .js
   const fsPath = path.join(CLIENT_SERVICES_DIR, relative);
   if (existsSync(fsPath) && statSync(fsPath).isDirectory()) {
     adjustedPath += "/index.js";
+  } else if (!path.extname(adjustedPath)) {
+    adjustedPath += ".js";
   }
 
   const adjustedImportStatement = importStatement.replace(modulePath, adjustedPath);

package/server/utils/router.js

@@ -295,6 +295,7 @@ export async function handlePageRequest(req, res, route) {
   try {
     await renderAndSendPage({ pageName, context, route });
   } catch (e) {
+    console.error(`[500] Error rendering page "${route.path}":`, e);
     // redirect() in a server script throws a structured error.
     // Intercept it before the generic 500 handler so the browser gets a proper redirect.
     if (e.redirect) {
@@ -321,6 +322,7 @@ export async function handlePageRequest(req, res, route) {
         route,
       });
     } catch (err) {
+      console.warn('error}}}}}}}}}}', err)
       console.error(`Failed to render error page: ${err.message}`);
       sendResponse(res, 500, FALLBACK_ERROR_HTML);
     }

package/server/utils/streaming.js

@@ -84,7 +84,7 @@ async function processServerComponents(html, serverComponents) {
     const replacements = [];
     let match;
 
-    while ((match = componentRegex.exec(html)) !== null) {
+    while ((match = componentRegex.exec(processedHtml)) !== null) {
       replacements.push({
         name: componentName,
         attrs: parseAttributes(match[1]),