@cfdez11/vex 0.8.0 → 0.8.2

package/README.md

@@ -697,6 +697,11 @@ 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
+- [ ] Refactor client component prop pipeline: evaluate `:props` expressions directly in `streaming.js` with the page scope instead of going through `template.js` → `String()` → `JSON.stringify` → `JSON.parse`. Eliminates the unnecessary serialization round-trip for array/object props.
+- [ ] esbuild minification: enable `minify: true` in `generateClientBundle` and `buildUserFile` for production builds. Zero-cost win — esbuild is already in the pipeline.
+- [ ] esbuild source maps: enable `sourcemap: "inline"` in dev mode so browser devtools show original source instead of the bundle.
+- [ ] esbuild browser target: add `target: ["es2020"]` (or configurable) to transpile modern syntax for broader browser compatibility.
+- [ ] esbuild code splitting: shared npm packages (e.g. `date-fns`) are currently inlined into every component bundle separately. Code splitting would emit a shared chunk, reducing total download size when multiple components share the same dependency.
 - [ ] Devtools
 - [ ] Typescript in framework
 - [ ] Allow typescript to devs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfdez11/vex",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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>`,

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/streaming.js

@@ -28,12 +28,20 @@ import {
  * //   id: 'my-component'
  * // }
  */
+function decodeAttrValue(raw) {
+  const decoded = raw.replace(/"/g, '"');
+  if (decoded.startsWith("[") || decoded.startsWith("{")) {
+    try { return JSON.parse(decoded); } catch {}
+  }
+  return decoded;
+}
+
 function parseAttributes(rawAttrs) {
   const attrs = {};
   const regex =
     /:([\w-]+)=(?:"([^"]*)"|'([^']*)')|@([\w-]+)=(?:"([^"]*)"|'([^']*)')|([\w:-]+)=(?:"([^"]*)"|'([^']*)')/g;
   let match;
-  
+
   while ((match = regex.exec(rawAttrs)) !== null) {
     if (match[1]) {
       // Dynamic prop :prop
@@ -42,8 +50,8 @@ function parseAttributes(rawAttrs) {
       // Event handler @event
       attrs[match[4]] = match[5] ?? match[6] ?? "";
     } else if (match[7]) {
-      // Static prop
-      attrs[match[7]] = match[8] ?? match[9] ?? "";
+      // Static prop — decode " and recover arrays/objects serialized by template.js
+      attrs[match[7]] = decodeAttrValue(match[8] ?? match[9] ?? "");
     }
   }
 

package/server/utils/template.js

@@ -154,15 +154,23 @@ function processNode(node, scope, previousRendered = false) {
         const isSuspenseFallback =
           name === ":fallback" && node.name === "Suspense";
         const realName = name.slice(1);
-        attrs[realName] = !isSuspenseFallback
-          ? String(getDataValue(value, scope))
-          : value;
+        if (!isSuspenseFallback) {
+          const val = getDataValue(value, scope);
+          attrs[realName] = (val !== null && val !== undefined && typeof val === "object")
+            ? JSON.stringify(val)
+            : String(val ?? "");
+        } else {
+          attrs[realName] = value;
+        }
         delete attrs[name];
       }
 
       if (name.startsWith("x-bind:")) {
         const realName = name.slice(7);
-        attrs[realName] = String(getDataValue(value, scope));
+        const val = getDataValue(value, scope);
+        attrs[realName] = (val !== null && val !== undefined && typeof val === "object")
+          ? JSON.stringify(val)
+          : String(val ?? "");
         delete attrs[name];
       }
     }