@cfdez11/vex 0.2.1 → 0.3.0

package/client/services/reactive.js

@@ -89,6 +89,14 @@ export function reactive(obj) {
     get(target, prop) {
       // Handle primitive value conversion (for template literals, etc.)
       if (target.__isPrimitive && prop === Symbol.toPrimitive) {
+        // Track "value" dependency so effects using ${counter} re-run on change
+        if (activeEffect) {
+          if (!depsMap.has("value")) depsMap.set("value", new Set());
+          const depSet = depsMap.get("value");
+          depSet.add(activeEffect);
+          if (!activeEffect.deps) activeEffect.deps = [];
+          activeEffect.deps.push(depSet);
+        }
         return () => target.value;
       }
 
@@ -180,11 +188,19 @@ export function computed(getter) {
     value = getter();
   });
 
-  return {
-    get value() {
-      return value;
+  return new Proxy({}, {
+    get(_, prop) {
+      if (prop === Symbol.toPrimitive) {
+        return () => value;
+      }
+      if (prop === "value") {
+        return value;
+      }
+      // Delegate any other access (e.g. .map, .length) to the underlying value
+      const v = value?.[prop];
+      return typeof v === "function" ? v.bind(value) : v;
     },
-  };
+  });
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfdez11/vex",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A vanilla JavaScript meta-framework with file-based routing, SSR/CSR/SSG/ISR and Vue-like reactivity",
   "type": "module",
   "main": "./server/index.js",

package/server/index.js

@@ -1,8 +1,9 @@
+import fs from "fs/promises";
 import express from "express";
 import path from "path";
 import { pathToFileURL } from "url";
 import { handlePageRequest, revalidatePath } from "./utils/router.js";
-import { initializeDirectories, CLIENT_DIR } from "./utils/files.js";
+import { initializeDirectories, CLIENT_DIR, SRC_DIR } from "./utils/files.js";
 
 await initializeDirectories();
 
@@ -63,6 +64,49 @@ app.use(
   })
 );
 
+// Serve user JS utility files at /_vexjs/user/* with import rewriting
+app.get("/_vexjs/user/*splat", async (req, res) => {
+  const splat = req.params.splat;
+  const relPath = Array.isArray(splat) ? splat.join("/") : splat;
+  const filePath = path.resolve(path.join(SRC_DIR, relPath));
+  // Prevent path traversal outside SRC_DIR
+  if (!filePath.startsWith(SRC_DIR + path.sep) && filePath !== SRC_DIR) {
+    return res.status(403).send("Forbidden");
+  }
+  try {
+    let content = await fs.readFile(filePath, "utf-8");
+    // Rewrite imports to browser-accessible paths
+    content = content.replace(
+      /^(\s*import\s+[^'"]*from\s+)['"]([^'"]+)['"]/gm,
+      (match, prefix, modulePath) => {
+        if (modulePath.startsWith("vex/") || modulePath.startsWith(".app/")) {
+          let mod = modulePath.replace(/^vex\//, "").replace(/^\.app\//, "");
+          if (!path.extname(mod)) mod += ".js";
+          return `${prefix}'/_vexjs/services/${mod}'`;
+        }
+        if (modulePath.startsWith("@/") || modulePath === "@") {
+          let resolved = path.resolve(SRC_DIR, modulePath.replace(/^@\//, "").replace(/^@$/, ""));
+          if (!path.extname(resolved)) resolved += ".js";
+          const rel = path.relative(SRC_DIR, resolved).replace(/\\/g, "/");
+          return `${prefix}'/_vexjs/user/${rel}'`;
+        }
+        if (modulePath.startsWith("./") || modulePath.startsWith("../")) {
+          const fileDir = path.dirname(filePath);
+          let resolved = path.resolve(fileDir, modulePath);
+          if (!path.extname(resolved)) resolved += ".js";
+          const rel = path.relative(SRC_DIR, resolved).replace(/\\/g, "/");
+          return `${prefix}'/_vexjs/user/${rel}'`;
+        }
+        return match;
+      }
+    );
+    res.setHeader("Content-Type", "application/javascript");
+    res.send(content);
+  } catch {
+    res.status(404).send("Not found");
+  }
+});
+
 // Serve user's public directory at /
 app.use("/", express.static(path.join(process.cwd(), "public")));
 

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, SRC_DIR, WATCH_IGNORE } 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, WATCH_IGNORE_FILES } from "./files.js";
 import { renderComponents } from "./streaming.js";
 import { getRevalidateSeconds } from "./cache.js";
 import { withCache } from "./data-cache.js";
@@ -83,8 +83,14 @@ if (process.env.NODE_ENV !== "production") {
   // 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.
+  // Individual file patterns can be excluded via `watchIgnoreFiles` in vex.config.json.
   watch(SRC_DIR, { recursive: true }, async (_, filename) => {
-      if (filename?.endsWith(".vex") && !filename.split(path.sep).some(part => WATCH_IGNORE.has(part))) {
+      if (!filename) return;
+      if (filename.split(path.sep).some(part => WATCH_IGNORE.has(part))) return;
+      const normalizedFilename = filename.replace(/\\/g, "/");
+      if (WATCH_IGNORE_FILES.some(pattern => path.matchesGlob(normalizedFilename, pattern))) return;
+
+      if (filename.endsWith(".vex")) {
         const fullPath = path.join(SRC_DIR, filename);
 
         // 1. Evict all in-memory caches for this file
@@ -100,6 +106,9 @@ if (process.env.NODE_ENV !== "production") {
 
         // 3. Notify connected browsers to reload
         hmrEmitter.emit("reload", filename);
+      } else if (filename.endsWith(".js")) {
+        // User utility file changed — reload browsers (served dynamically, no bundle to regenerate)
+        hmrEmitter.emit("reload", filename);
       }
     });
 
@@ -145,7 +154,7 @@ const DEFAULT_METADATA = {
  *   }>
  * }>}
  */
-const getScriptImports = async (script, isClientSide = false) => {
+const getScriptImports = async (script, isClientSide = false, filePath = null) => {
   const componentRegistry = new Map();
   const imports = {};
   const clientImports = {};
@@ -182,21 +191,22 @@ const getScriptImports = async (script, isClientSide = false) => {
       }
     } else if (defaultImport) {
       // client side default imports and named imports
-      const adjustedClientModule = adjustClientModulePath(modulePath, importStatement);
+      const adjustedClientModule = adjustClientModulePath(modulePath, importStatement, filePath);
       clientImports[defaultImport || namedImports] = {
         fileUrl,
         originalPath: adjustedClientModule.path,
         importStatement: adjustedClientModule.importStatement,
+        originalImportStatement: importStatement,
       };
     } else {
       namedImports.split(",").forEach((name) => {
         const trimmedName = name.trim();
-        // if import module path is .app/file_name.js add .app/client/services/file_name.js
-      const adjustedClientModule = adjustClientModulePath(modulePath, importStatement);
+        const adjustedClientModule = adjustClientModulePath(modulePath, importStatement, filePath);
         clientImports[trimmedName] = {
-          fileUrl,      
+          fileUrl,
           originalPath: adjustedClientModule.path,
           importStatement: adjustedClientModule.importStatement,
+          originalImportStatement: importStatement,
         };
       });
     }
@@ -311,7 +321,7 @@ async function _processHtmlFile(filePath) {
   }
 
   if (clientMatch) {
-    const { componentRegistry, clientImports: newClientImports } = await getScriptImports(clientMatch[1], true);
+    const { componentRegistry, clientImports: newClientImports } = await getScriptImports(clientMatch[1], true, filePath);
     clientComponents = componentRegistry;
     clientImports = newClientImports;
   }
@@ -412,6 +422,7 @@ export async function renderHtmlFile(filePath, context = {}, extraComponentData
  */
 function generateClientScriptTags({
   clientCode,
+  clientImports = {},
   clientComponentsScripts = [],
   clientComponents = new Map(),
 }) {
@@ -421,6 +432,13 @@ function generateClientScriptTags({
     clientCode = clientCode.replace(`${importStatement};`, '').replace(importStatement, "");
   }
 
+  // Rewrite framework and user utility imports to browser-accessible paths
+  for (const importData of Object.values(clientImports)) {
+    if (importData.originalImportStatement && importData.importStatement !== importData.originalImportStatement) {
+      clientCode = clientCode.replace(importData.originalImportStatement, importData.importStatement);
+    }
+  }
+
   const clientCodeWithoutComponentImports = clientCode
     .split("\n")
     .filter((line) => !/^\s*import\s+.*['"].*\.vex['"]/.test(line))
@@ -459,11 +477,12 @@ function generateClientScriptTags({
  * }>
  */
 async function renderPage(pagePath, ctx, awaitSuspenseComponents = false, extraComponentData = {}) {
-  const { 
-    html, 
-    metadata, 
-    clientCode, 
-    serverComponents, 
+  const {
+    html,
+    metadata,
+    clientCode,
+    clientImports,
+    serverComponents,
     clientComponents,
   } = await renderHtmlFile(pagePath, ctx, extraComponentData);
 
@@ -482,6 +501,7 @@ async function renderPage(pagePath, ctx, awaitSuspenseComponents = false, extraC
     html: htmlWithComponents,
     metadata,
     clientCode,
+    clientImports,
     serverComponents,
     clientComponents,
     suspenseComponents,
@@ -582,6 +602,7 @@ export async function renderPageWithLayout(pagePath, ctx = {}, awaitSuspenseComp
     html: pageHtml,
     metadata,
     clientCode,
+    clientImports,
     serverComponents,
     clientComponents,
     suspenseComponents,
@@ -592,6 +613,7 @@ export async function renderPageWithLayout(pagePath, ctx = {}, awaitSuspenseComp
   // Wrap in layout
   const clientScripts = generateClientScriptTags({
     clientCode,
+    clientImports,
     clientComponentsScripts,
     clientComponents,
   });

package/server/utils/files.js

@@ -85,10 +85,24 @@ export const WATCH_IGNORE = new Set([
   ".next", ".nuxt", ".svelte-kit", ".astro",
   // misc
   "tmp", "temp", ".cache", ".claude",
-  // user-defined extras from vex.config.json
-  ...(_vexConfig.watchIgnore || []),
+  // user-defined extras from vex.config.json.
+  // Simple names (no /, *, .) are treated as directory names here.
+  ...(_vexConfig.watchIgnore || []).filter(p => !/[\/\*\.]/.test(p)),
 ]);
 
+/**
+ * Glob patterns derived from `watchIgnore` entries in vex.config.json that
+ * contain path separators, wildcards, or dots — i.e. file-level patterns.
+ *
+ * Simple directory names in the same array go to WATCH_IGNORE instead.
+ *
+ *   "watchIgnore": ["utils/legacy.js", "components/wip/**", "wip"]
+ *   → "wip"               added to WATCH_IGNORE  (directory name)
+ *   → "utils/legacy.js"   added to WATCH_IGNORE_FILES (glob pattern)
+ *   → "components/wip/**" added to WATCH_IGNORE_FILES (glob pattern)
+ */
+export const WATCH_IGNORE_FILES = (_vexConfig.watchIgnore || []).filter(p => /[\/\*\.]/.test(p));
+
 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");
@@ -158,11 +172,39 @@ export async function initializeDirectories() {
  * console.log(result.importStatement); 
  * // "import userController from '/.app/client/services/reactive.js';"
  */
-export function adjustClientModulePath(modulePath, importStatement) {
+export function adjustClientModulePath(modulePath, importStatement, componentFilePath = null) {
   if (modulePath.startsWith("/_vexjs/")) {
     return { path: modulePath, importStatement };
   }
 
+  // User imports — relative (e.g. "../utils/context") or @ alias (e.g. "@/utils/context")
+  // — served via /_vexjs/user/
+  const isRelative = (modulePath.startsWith("./") || modulePath.startsWith("../")) && componentFilePath;
+  const isAtAlias = modulePath.startsWith("@/") || modulePath === "@";
+  if (isRelative || isAtAlias) {
+    let resolvedPath;
+    if (isAtAlias) {
+      resolvedPath = path.resolve(SRC_DIR, modulePath.replace(/^@\//, "").replace(/^@$/, ""));
+    } else {
+      const componentDir = path.dirname(componentFilePath);
+      resolvedPath = path.resolve(componentDir, modulePath);
+    }
+    if (!path.extname(resolvedPath)) {
+      if (existsSync(resolvedPath + ".js")) {
+        resolvedPath += ".js";
+      } else if (existsSync(path.join(resolvedPath, "index.js"))) {
+        resolvedPath = path.join(resolvedPath, "index.js");
+      } else {
+        resolvedPath += ".js";
+      }
+    }
+    const relativePath = path.relative(SRC_DIR, resolvedPath).replace(/\\/g, "/");
+    const adjustedPath = `/_vexjs/user/${relativePath}`;
+    const adjustedImportStatement = importStatement.replace(modulePath, adjustedPath);
+    return { path: adjustedPath, importStatement: adjustedImportStatement };
+  }
+
+  // Framework imports (vex/ and .app/)
   let relative = modulePath.replace(/^vex\//, "").replace(/^\.app\//, "");
   let adjustedPath = `/_vexjs/services/${relative}`;
 

package/server/utils/template.js

@@ -77,9 +77,12 @@ function parseHTMLToNodes(html) {
  */
 function processNode(node, scope, previousRendered = false) {
   if (node.type === "text") {
-    node.data = node.data.replace(/\{\{(.+?)\}\}/g, (_, expr) =>
-      getDataValue(expr.trim(), scope)
-    );
+    // Replace {{expr}} with its value from scope (SSR interpolation).
+    // The lookbehind (?<!\\) skips escaped \{{expr}}, which are then
+    // unescaped to literal {{expr}} by the second replace.
+    node.data = node.data
+      .replace(/(?<!\\)\{\{(.+?)\}\}/g, (_, expr) => getDataValue(expr.trim(), scope))
+      .replace(/\\\{\{/g, "{{");
     return node;
   }
 
@@ -88,9 +91,9 @@ function processNode(node, scope, previousRendered = false) {
 
     for (const [attrName, attrValue] of Object.entries(attrs)) {
       if (typeof attrValue === "string") {
-        attrs[attrName] = attrValue.replace(/\{\{(.+?)\}\}/g, (_, expr) =>
-          getDataValue(expr.trim(), scope)
-        );
+        attrs[attrName] = attrValue
+          .replace(/(?<!\\)\{\{(.+?)\}\}/g, (_, expr) => getDataValue(expr.trim(), scope))
+          .replace(/\\\{\{/g, "{{");
       }
     }