@cfdez11/vex 0.7.0 → 0.8.1

package/client/services/navigation.js

@@ -0,0 +1,6 @@
+// Barrel file for vex/navigation imports.
+// Components import { useRouteParams } from "vex/navigation" which esbuild
+// rewrites to /_vexjs/services/navigation.js (external). All re-exports go
+// through navigation/index.js so the browser module cache ensures the same
+// runtime instance is shared with the index.js bootstrap.
+export { useRouteParams, useQueryParams, navigate } from "./navigation/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfdez11/vex",
-  "version": "0.7.0",
+  "version": "0.8.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",

package/server/build-static.js

@@ -38,6 +38,7 @@ let shell = rootTemplate
   .replace(/\{\{props\.children\}\}/g, "");
 
 const frameworkScripts = [
+  `<style>vex-root { display: contents; }</style>`,
   `<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>`,
@@ -46,24 +47,36 @@ const frameworkScripts = [
 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 4: Copy static framework assets (favicon.ico, app.webmanifest) → dist/_vexjs/
+// JS runtime files live in .vexjs/services/ (copied in step 5) — no need to
+// copy CLIENT_DIR/services/ separately.
+console.log("📦 Copying framework assets...");
+for (const asset of ["favicon.ico", "app.webmanifest"]) {
+  try {
+    await fs.copyFile(
+      path.join(CLIENT_DIR, asset),
+      path.join(DIST_DIR, "_vexjs", asset)
+    );
+  } catch {
+    // asset not present — skip
+  }
+}
 
-// Step 5: Copy generated component bundles → dist/_vexjs/_components/
-console.log("📦 Copying component bundles...");
+// Step 5: Copy generated services → dist/_vexjs/services/
+// .vexjs/services/ already contains both framework JS (copied by initializeDirectories)
+// and generated files (_routes.js). One copy covers everything.
+console.log("📦 Copying services...");
 await fs.cp(
-  path.join(GENERATED_DIR, "_components"),
-  path.join(DIST_DIR, "_vexjs", "_components"),
+  path.join(GENERATED_DIR, "services"),
+  path.join(DIST_DIR, "_vexjs", "services"),
   { 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...");
+// Step 6: Copy generated component bundles → dist/_vexjs/_components/
+console.log("📦 Copying component bundles...");
 await fs.cp(
-  path.join(GENERATED_DIR, "services"),
-  path.join(DIST_DIR, "_vexjs", "services"),
+  path.join(GENERATED_DIR, "_components"),
+  path.join(DIST_DIR, "_vexjs", "_components"),
   { recursive: true }
 );
 
@@ -77,7 +90,7 @@ try {
   // no user JS files — that's fine
 }
 
-// Step 8: Copy public/ → dist/ (static assets, CSS)
+// Step 8: Copy public/ → dist/
 console.log("📦 Copying public assets...");
 const publicDir = path.join(PROJECT_ROOT, "public");
 try {
@@ -86,7 +99,7 @@ try {
   // no public/ directory — that's fine
 }
 
-// Step 9: Copy pre-rendered HTML for SSG routes (revalidate: 'never')
+// Step 9: Copy pre-rendered SSG pages
 const CACHE_DIR = path.join(GENERATED_DIR, "_cache");
 const ssgRoutes = serverRoutes.filter(
   (r) => r.meta.revalidate === "never" || r.meta.revalidate === false
@@ -108,7 +121,7 @@ if (ssgRoutes.length > 0) {
   }
 }
 
-// Step 10: Report SSR-only routes that were skipped
+// Step 10: Report SSR-only routes (skipped in static build)
 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:");

package/server/index.js

@@ -29,8 +29,6 @@ if (process.env.NODE_ENV === "production") {
 const app = express();
 
 // Serve generated client component bundles at /_vexjs/_components/
-// Must be registered before the broader /_vexjs static mount below so that
-// .vexjs/_components/ takes priority over anything in CLIENT_DIR/_components/.
 app.use(
   "/_vexjs/_components",
   express.static(path.join(process.cwd(), ".vexjs", "_components"), {
@@ -42,9 +40,9 @@ app.use(
   })
 );
 
-// Serve generated services (e.g. _routes.js) at /_vexjs/services/
-// Also before the broader /_vexjs mount so the generated _routes.js
-// overrides any placeholder that might exist in the framework source.
+// Serve framework runtime JS + generated files (_routes.js) at /_vexjs/services/
+// initializeDirectories() pre-populates this dir with framework files; build()
+// adds generated files (_routes.js). Single source of truth for all /_vexjs/services/*.
 app.use(
   "/_vexjs/services",
   express.static(path.join(process.cwd(), ".vexjs", "services"), {
@@ -56,13 +54,13 @@ app.use(
   })
 );
 
-// Serve framework client runtime files at /_vexjs/
-// (reactive.js, html.js, hydrate.js, navigation/, etc.)
-// User imports like `vex/reactive` are marked external by esbuild and resolved
-// here at runtime — a single shared instance per page load.
+// Serve pre-bundled user JS utility files at /_vexjs/user/
+// Registered before the generic /_vexjs mount so requests don't fall through
+// to CLIENT_DIR unnecessarily. esbuild bundles each file with npm packages
+// inlined; vex/*, @/*, and relative user imports stay external (singletons).
 app.use(
-  "/_vexjs",
-  express.static(CLIENT_DIR, {
+  "/_vexjs/user",
+  express.static(USER_GENERATED_DIR, {
     setHeaders(res, filePath) {
       if (filePath.endsWith(".js")) {
         res.setHeader("Content-Type", "application/javascript");
@@ -71,15 +69,12 @@ app.use(
   })
 );
 
-
-// Serve pre-bundled user JS utility files at /_vexjs/user/
-// These are @/ and relative imports in <script client> blocks. esbuild bundles
-// each file with npm packages inlined; vex/*, @/*, and relative user imports
-// stay external so every component shares the same singleton module instance
-// via the browser's ES module cache.
+// Serve static framework assets (favicon.ico, app.webmanifest) from CLIENT_DIR.
+// Runtime JS files (reactive.js, index.js, etc.) are already in .vexjs/services/
+// via initializeDirectories() and are served by the /_vexjs/services route above.
 app.use(
-  "/_vexjs/user",
-  express.static(USER_GENERATED_DIR, {
+  "/_vexjs",
+  express.static(CLIENT_DIR, {
     setHeaders(res, filePath) {
       if (filePath.endsWith(".js")) {
         res.setHeader("Content-Type", "application/javascript");

package/server/utils/component-processor.js

@@ -564,6 +564,7 @@ async function renderLayouts(pagePath, pageContent, pageHead = {}) {
   // so users don't need to reference framework scripts in their root.html
   const devMode = process.env.NODE_ENV !== "production";
   const frameworkScripts = [
+    `<style>vex-root { display: contents; }</style>`,
     `<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>`,
@@ -832,6 +833,11 @@ export async function generateClientComponentModule({
   // ── 5. Assemble the esbuild entry source ────────────────────────────────────
   // This is a valid ESM module that esbuild will bundle. Imports at the top,
   // hydrateClientComponent exported as a named function.
+  // Add persistent wrapper element anchors the component in the DOM so that
+  // re-renders always have a stable target to replace children into.
+  // Using a plain Element (never a DocumentFragment) avoids the fragment-drain
+  // problem: after marker.replaceWith(fragment) the fragment empties and
+  // disconnects, making subsequent root.replaceWith() calls silently no-op.
   const entrySource = `
 ${[...importLines].join("\n")}
 
@@ -840,20 +846,16 @@ export const metadata = ${JSON.stringify(metadata)};
 export function hydrateClientComponent(marker, incomingProps = {}) {
   ${cleanClientCode}
 
-  let root = null;
+  const wrapper = document.createElement("vex-root");
+  marker.replaceWith(wrapper);
+
   function render() {
     const node = html\`${processedHtml}\`;
-    if (!root) {
-      root = node;
-      marker.replaceWith(node);
-    } else {
-      root.replaceWith(node);
-      root = node;
-    }
+    wrapper.replaceChildren(node);
   }
 
   effect(() => render());
-  return root;
+  return wrapper;
 }
 `.trim();
 

package/server/utils/files.js

@@ -112,7 +112,6 @@ const GENERATED_DIR = path.join(PROJECT_ROOT, ".vexjs");
 const CACHE_DIR = path.join(GENERATED_DIR, "_cache");
 export const CLIENT_COMPONENTS_DIR = path.join(GENERATED_DIR, "_components");
 export const USER_GENERATED_DIR = path.join(GENERATED_DIR, "user");
-const SERVER_UTILS_DIR = path.join(GENERATED_DIR);
 const ROOT_HTML_USER = path.join(PROJECT_ROOT, "root.html");
 const ROOT_HTML_DEFAULT = path.join(FRAMEWORK_DIR, "server", "root.html");
 export const ROOT_HTML_DIR = ROOT_HTML_USER;
@@ -134,14 +133,21 @@ export const ROOT_HTML_DIR = ROOT_HTML_USER;
  */
 export async function initializeDirectories() {
   try {
+    const servicesDir = path.join(GENERATED_DIR, "services");
     await Promise.all([
       fs.mkdir(GENERATED_DIR, { recursive: true }),
       fs.mkdir(CACHE_DIR, { recursive: true }),
       fs.mkdir(CLIENT_COMPONENTS_DIR, { recursive: true }),
       fs.mkdir(USER_GENERATED_DIR, { recursive: true }),
-      fs.mkdir(path.join(GENERATED_DIR, "services"), { recursive: true }),
+      fs.mkdir(servicesDir, { recursive: true }),
     ]);
 
+    // Copy framework client runtime files into .vexjs/services/ so they are
+    // served by the /_vexjs/services static route alongside generated files
+    // like _routes.js. Generated files (prefixed with _) are written later by
+    // the build step and overwrite any stale copies here.
+    await fs.cp(CLIENT_SERVICES_DIR, servicesDir, { recursive: true });
+
     return true;
   } catch (err) {
     console.error("Failed to create cache directory:", err);