@cfdez11/vex 0.2.1 → 0.4.0

package/README.md

@@ -686,6 +686,12 @@ sequenceDiagram
 - [x] `vex.config.json` — configurable `srcDir` and `watchIgnore`
 - [x] Published to npm as `@cfdez11/vex`
 - [x] VS Code extension with syntax highlighting and go-to-definition
+- [ ] Devtools
+- [ ] Typescript in framework
+- [ ] Allow typescript to devs
+- [ ] Improve extension (hightlight, redirects, etc)
+- [ ] Create theme syntax
+- [ ] Create docs page
 - [ ] Authentication middleware
 - [ ] CDN cache integration
 - [ ] Fix Suspense marker replacement with multi-root templates

package/bin/vex.js

@@ -9,7 +9,25 @@ const serverDir = path.resolve(__dirname, "..", "server");
 
 const [command] = process.argv.slice(2);
 
+/**
+ * Available CLI commands.
+ *
+ * Each entry is a factory function that calls `spawn()` to launch a child
+ * process and returns the ChildProcess handle.
+ *
+ * `spawn(command, args, options)` forks a new OS process running `command`
+ * with the given `args`. It is non-blocking: the parent (this CLI) keeps
+ * running while the child executes. The returned ChildProcess emits an
+ * "exit" event when the child terminates, which we use to forward its exit
+ * code so the shell sees the correct status (e.g. for CI).
+ *
+ * `stdio: "inherit"` wires the child's stdin/stdout/stderr directly to the
+ * terminal that launched the CLI. Without it the child's output would be
+ * captured internally and never displayed. "inherit" is equivalent to
+ * passing [process.stdin, process.stdout, process.stderr].
+ */
 const commands = {
+  /** Start the dev server with Node's built-in file watcher (--watch restarts on .js changes). */
   dev: () =>
     spawn(
       "node",
@@ -17,6 +35,7 @@ const commands = {
       { stdio: "inherit" }
     ),
 
+  /** Run the prebuild: scan pages/, generate component bundles and route registries. */
   build: () =>
     spawn(
       "node",
@@ -24,16 +43,25 @@ const commands = {
       { stdio: "inherit" }
     ),
 
+  /** Start the production server. Sets NODE_ENV=production to disable HMR and file watchers. */
   start: () =>
     spawn(
       "node",
       [path.join(serverDir, "index.js")],
       { stdio: "inherit", env: { ...process.env, NODE_ENV: "production" } }
     ),
+
+  /** Run the static build: prebuild + copy assets to dist/ for deployment without a server. */
+  "build:static": () =>
+    spawn(
+      "node",
+      [path.join(serverDir, "build-static.js")],
+      { stdio: "inherit" }
+    ),
 };
 
 if (!commands[command]) {
-  console.error(`Unknown command: "${command}"\nAvailable: dev, build, start`);
+  console.error(`Unknown command: "${command}"\nAvailable: dev, build, build:static, start`);
   process.exit(1);
 }
 

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.4.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/build-static.js

@@ -0,0 +1,202 @@
+import fs from "fs/promises";
+import path from "path";
+import { build } from "./utils/component-processor.js";
+import {
+  initializeDirectories,
+  CLIENT_DIR,
+  SRC_DIR,
+  PROJECT_ROOT,
+  getRootTemplate,
+  WATCH_IGNORE,
+  generateComponentId,
+} from "./utils/files.js";
+
+const GENERATED_DIR = path.join(PROJECT_ROOT, ".vexjs");
+const DIST_DIR = path.join(PROJECT_ROOT, "dist");
+
+console.log("🔨 Starting static build...");
+
+// Step 1: Prebuild (components + routes)
+console.log("📁 Initializing directories...");
+await initializeDirectories();
+
+console.log("⚙️  Generating components and routes...");
+const { serverRoutes } = await build();
+
+// Step 2: Create dist/ structure (clean start)
+console.log("🗂️  Creating dist/ structure...");
+await fs.rm(DIST_DIR, { recursive: true, force: true });
+await fs.mkdir(path.join(DIST_DIR, "_vexjs", "_components"), { recursive: true });
+await fs.mkdir(path.join(DIST_DIR, "_vexjs", "user"), { recursive: true });
+
+// Step 3: Generate dist/index.html shell
+console.log("📄 Generating index.html shell...");
+const rootTemplate = await getRootTemplate();
+let shell = rootTemplate
+  .replace(/\{\{metadata\.title\}\}/g, "App")
+  .replace(/\{\{metadata\.description\}\}/g, "")
+  .replace(/\{\{props\.children\}\}/g, "");
+
+const frameworkScripts = [
+  `<script type="module" src="/_vexjs/services/index.js"></script>`,
+  `<script src="/_vexjs/services/hydrate-client-components.js"></script>`,
+  `<script src="/_vexjs/services/hydrate.js" id="hydrate-script"></script>`,
+].join("\n  ");
+
+shell = shell.replace("</head>", `  ${frameworkScripts}\n</head>`);
+await fs.writeFile(path.join(DIST_DIR, "index.html"), shell, "utf-8");
+
+// Step 4: Copy framework client files → dist/_vexjs/
+console.log("📦 Copying framework client files...");
+await fs.cp(CLIENT_DIR, path.join(DIST_DIR, "_vexjs"), { recursive: true });
+
+// Step 5: Copy generated component bundles → dist/_vexjs/_components/
+console.log("📦 Copying component bundles...");
+await fs.cp(
+  path.join(GENERATED_DIR, "_components"),
+  path.join(DIST_DIR, "_vexjs", "_components"),
+  { recursive: true }
+);
+
+// Step 6: Copy generated services (includes _routes.js) → dist/_vexjs/services/
+// This overwrites the framework-level services dir copy with the generated routes
+console.log("📦 Copying generated services...");
+await fs.cp(
+  path.join(GENERATED_DIR, "services"),
+  path.join(DIST_DIR, "_vexjs", "services"),
+  { recursive: true }
+);
+
+// Step 7: Copy user JS files with import rewriting → dist/_vexjs/user/
+console.log("📦 Processing user JS files...");
+await copyUserJsFiles(SRC_DIR, path.join(DIST_DIR, "_vexjs", "user"));
+
+// Step 8: Copy public/ → dist/ (static assets, CSS)
+console.log("📦 Copying public assets...");
+const publicDir = path.join(PROJECT_ROOT, "public");
+try {
+  await fs.cp(publicDir, DIST_DIR, { recursive: true });
+} catch {
+  // no public/ directory — that's fine
+}
+
+// Step 9: Copy pre-rendered HTML for SSG routes (revalidate: 'never')
+const CACHE_DIR = path.join(GENERATED_DIR, "_cache");
+const ssgRoutes = serverRoutes.filter(
+  (r) => r.meta.revalidate === "never" || r.meta.revalidate === false
+);
+if (ssgRoutes.length > 0) {
+  console.log("📄 Copying pre-rendered SSG pages...");
+  for (const route of ssgRoutes) {
+    const cacheFile = path.join(CACHE_DIR, `${generateComponentId(route.serverPath)}.html`);
+    try {
+      const html = await fs.readFile(cacheFile, "utf-8");
+      const routeSegment = route.serverPath === "/" ? "" : route.serverPath;
+      const destPath = path.join(DIST_DIR, routeSegment, "index.html");
+      await fs.mkdir(path.dirname(destPath), { recursive: true });
+      await fs.writeFile(destPath, html, "utf-8");
+      console.log(`   ✓ ${route.serverPath}`);
+    } catch {
+      console.warn(`   ✗ ${route.serverPath} (no cached HTML found)`);
+    }
+  }
+}
+
+// Step 10: Report SSR-only routes that were skipped
+const ssrOnlyRoutes = serverRoutes.filter((r) => r.meta.ssr);
+if (ssrOnlyRoutes.length > 0) {
+  console.warn("\n⚠️  The following routes require a server and were NOT included in the static build:");
+  for (const r of ssrOnlyRoutes) {
+    console.warn(`   ${r.path} (SSR)`);
+  }
+  console.warn("   These routes will show a 404 in the static build.\n");
+}
+
+console.log("✅ Static build complete! Output: dist/");
+console.log("\nTo serve locally:  npx serve dist");
+console.log("Static host note:  configure your host to serve dist/index.html for all 404s (SPA fallback).");
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Recursively walks SRC_DIR, rewrites imports in every .js file,
+ * and writes results to destDir preserving the relative path structure.
+ *
+ * Skips directories listed in WATCH_IGNORE (node_modules, dist, .vexjs, etc.).
+ *
+ * @param {string} srcDir  Absolute path to user source root (SRC_DIR)
+ * @param {string} destDir Absolute path to dist/_vexjs/user/
+ */
+async function copyUserJsFiles(srcDir, destDir) {
+  let entries;
+  try {
+    entries = await fs.readdir(srcDir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+
+  for (const entry of entries) {
+    if (WATCH_IGNORE.has(entry.name)) continue;
+
+    const fullSrc = path.join(srcDir, entry.name);
+    const relToSrcDir = path.relative(SRC_DIR, fullSrc).replace(/\\/g, "/");
+    const fullDest = path.join(destDir, relToSrcDir);
+
+    if (entry.isDirectory()) {
+      await copyUserJsFiles(fullSrc, destDir);
+    } else if (entry.name.endsWith(".js")) {
+      let content;
+      try {
+        content = await fs.readFile(fullSrc, "utf-8");
+      } catch {
+        continue;
+      }
+
+      content = rewriteUserImports(content, fullSrc, srcDir);
+
+      await fs.mkdir(path.dirname(fullDest), { recursive: true });
+      await fs.writeFile(fullDest, content, "utf-8");
+    }
+  }
+}
+
+/**
+ * Rewrites import paths in a user JS file so they work in the browser.
+ * Mirrors the runtime rewriting done by the /_vexjs/user/* Express handler.
+ *
+ * - `vex/` and `.app/` → `/_vexjs/services/`
+ * - `@/` (project alias) → `/_vexjs/user/`
+ * - relative `./` or `../` → `/_vexjs/user/`
+ * - external bare specifiers (e.g. npm packages) → left as-is
+ *
+ * @param {string} content  File source
+ * @param {string} filePath Absolute path of the file being rewritten
+ * @param {string} srcDir   Absolute SRC_DIR root
+ * @returns {string} Rewritten source
+ */
+function rewriteUserImports(content, filePath, srcDir) {
+  return 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(srcDir, modulePath.replace(/^@\//, "").replace(/^@$/, ""));
+        if (!path.extname(resolved)) resolved += ".js";
+        const rel = path.relative(srcDir, 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(srcDir, resolved).replace(/\\/g, "/");
+        return `${prefix}'/_vexjs/user/${rel}'`;
+      }
+      return match;
+    }
+  );
+}

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, "{{");
       }
     }