@cfdez11/vex 0.5.0 → 0.6.0

package/client/services/hydrate-client-components.js

@@ -78,12 +78,12 @@
   // Start observing the document for new nodes
   observer.observe(document, { childList: true, subtree: true });
 
-  // Hydrate existing components on DOMContentLoaded or immediately if already interactive
+  // Hydrate existing components on DOMContentLoaded or immediately if already interactive.
+  // The observer is intentionally NOT disconnected here — it must stay active to catch
+  // components inserted after DOMContentLoaded (nested CSR components, Suspense streaming,
+  // SPA navigations). The `data-hydrated` guard in hydrateMarker prevents double-hydration.
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => {
-      hydrateComponents();
-      observer.disconnect();
-    });
+    document.addEventListener("DOMContentLoaded", () => hydrateComponents());
   } else {
     hydrateComponents();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfdez11/vex",
-  "version": "0.5.0",
+  "version": "0.6.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",
@@ -22,6 +22,7 @@
   "license": "MIT",
   "dependencies": {
     "dom-serializer": "^2.0.0",
+    "dotenv": "^16.0.0",
     "esbuild": "^0.25.0",
     "express": "^5.2.1",
     "htmlparser2": "^10.0.0"

package/server/build-static.js

@@ -1,3 +1,4 @@
+import "dotenv/config";
 import fs from "fs/promises";
 import path from "path";
 import { build } from "./utils/component-processor.js";

package/server/index.js

@@ -1,3 +1,4 @@
+import "dotenv/config";
 import express from "express";
 import path from "path";
 import { pathToFileURL } from "url";
@@ -115,7 +116,7 @@ app.use(async (req, res) => {
   res.status(404).send("Page not found");
 });
 
-const PORT = process.env.PORT || 3001;
+const PORT = process.env.VEX_PORT || process.env.PORT || 3001;
 app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);
 });

package/server/prebuild.js

@@ -1,3 +1,4 @@
+import "dotenv/config";
 import { build } from "./utils/component-processor.js";
 import { initializeDirectories } from "./utils/files.js";
 

package/server/utils/component-processor.js

@@ -177,7 +177,7 @@ const getScriptImports = async (script, isClientSide = false, filePath = null) =
   while ((match = importRegex.exec(script)) !== null) {
     const [importStatement, defaultImport, namedImports, modulePath] = match;
 
-    const { path, fileUrl } = await getImportData(modulePath);
+    const { path, fileUrl } = await getImportData(modulePath, filePath);
 
     if (path.endsWith(".vex")) {
       // Recursively process HTML component
@@ -989,7 +989,7 @@ async function generateServerComponentHTML(componentPath) {
  * and runtime interpolations (e.g., `${variable}`).
  *
  * @param {string} componentName - The logical name of the component.
- * @param {string} originalPath - The original file path of the component.
+ * @param {string} componentAbsPath - The absolute file path of the component (resolved by getImportData).
  * @param {Record<string, any>} [props={}] - An object of props to pass to the component.
  *                                            Values can be literals or template
  *                                            interpolations (`${…}`) for dynamic evaluation.
@@ -997,10 +997,13 @@ async function generateServerComponentHTML(componentPath) {
  * @returns {Promise<string>} A promise that resolves to a string containing
  *                            the `<template>` HTML for hydration.
  */
-export async function processClientComponent(componentName, originalPath, props = {}) {
+export async function processClientComponent(componentName, componentAbsPath, props = {}) {
   const targetId = `client-${componentName}-${Date.now()}`;
 
-  const componentImport = generateComponentId(originalPath)
+  // componentAbsPath is the absolute resolved path — generateComponentId strips ROOT_DIR
+  // internally, so this produces the same hash as the bundle filename written by
+  // generateComponentAndFillCache (which also calls generateComponentId with the abs path).
+  const componentImport = generateComponentId(componentAbsPath);
   const propsJson = serializeClientComponentProps(props);
   const html = `<template id="${targetId}" data-client:component="${componentImport}" data-client:props='${propsJson}'></template>`;
   

package/server/utils/files.js

@@ -811,7 +811,7 @@ export async function saveClientComponentModule(componentName, jsModuleCode) {
  *   importPath: string
  * }}
  */
-export async function getImportData(importPath) {
+export async function getImportData(importPath, callerFilePath = null) {
   let resolvedPath;
   if (importPath.startsWith("vex/server/")) {
     resolvedPath = path.resolve(FRAMEWORK_DIR, importPath.replace("vex/server/", "server/"));
@@ -821,6 +821,11 @@ export async function getImportData(importPath) {
     resolvedPath = path.resolve(FRAMEWORK_DIR, importPath.replace(".app/server/", "server/"));
   } else if (importPath.startsWith(".app/")) {
     resolvedPath = path.resolve(FRAMEWORK_DIR, importPath.replace(".app/", ""));
+  } else if ((importPath.startsWith("./") || importPath.startsWith("../")) && callerFilePath) {
+    // Relative import — resolve against the caller component's directory, not ROOT_DIR.
+    // Without this, `import Foo from './foo.vex'` inside a nested component would be
+    // resolved from the project root instead of from the file that contains the import.
+    resolvedPath = path.resolve(path.dirname(callerFilePath), importPath);
   } else {
     resolvedPath = path.resolve(ROOT_DIR, importPath);
   }

package/server/utils/streaming.js

@@ -128,7 +128,7 @@ async function renderClientComponents(html, clientComponents) {
   let processedHtml = html;
   const allScripts = [];
 
-  for (const [componentName, { originalPath }] of clientComponents.entries()) {
+  for (const [componentName, { path: componentAbsPath }] of clientComponents.entries()) {
     const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
     const componentRegex = new RegExp(
@@ -156,7 +156,7 @@ async function renderClientComponents(html, clientComponents) {
     for (let i = replacements.length - 1; i >= 0; i--) {
       const { start, end, attrs } = replacements[i];
 
-      const htmlComponent = await processClientComponent(componentName, originalPath, attrs);
+      const htmlComponent = await processClientComponent(componentName, componentAbsPath, attrs);
 
       processedHtml =
         processedHtml.slice(0, start) +