@cfdez11/vex 0.8.1 → 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.1",
+  "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/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];
       }
     }