@ape-egg/vibe 4.2.0 → 4.2.1

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 4.2.0** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
+**Version 4.2.1** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
 
 ## Security model & CSP
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "description": "Runtime-first reactivity for plain HTML \u2014 no build step, no virtual DOM, no new syntax to learn",
   "main": "index.js",

package/runtime/constants.js

@@ -1,4 +1,4 @@
-export const VERSION = '4.2.0';
+export const VERSION = '4.2.1';
 
 export const DEBUGGER_NAME = '[vibe-debug]:';
 export const FOUC_CLASS_OR_ATTR = 'vibe-fouc';

package/runtime/iterate.js

@@ -23,6 +23,8 @@ import {
   ITER_PROP_PATH,
   COMPONENT_ID_ATTR,
   COMPONENT_SRC_SELECTOR,
+  DEFER_ATTR_PREFIX,
+  INTERNAL_ATTR_PREFIX,
 } from './constants.js';
 
 import * as compiled from './pre-compiled-iterations.js';
@@ -71,6 +73,14 @@ const BATCH_ATTR_BINDING_REGEX = new RegExp(
   String.raw`(\s)([\w-]+)="@\[(${BATCH_BINDING_INNER})\]"`,
   'g',
 );
+const DEFERRED_ATTR_REGEX = new RegExp(
+  String.raw`(\s)${DEFER_ATTR_PREFIX}(?!${INTERNAL_ATTR_PREFIX.slice(DEFER_ATTR_PREFIX.length)})(?=[\w-])`,
+  'g',
+);
+const realAttrName = (name) =>
+  name.startsWith(DEFER_ATTR_PREFIX) && !name.startsWith(INTERNAL_ATTR_PREFIX)
+    ? name.slice(DEFER_ATTR_PREFIX.length)
+    : name;
 
 const mapTagSpans = (html, fn) => {
   let out = '';
@@ -131,13 +141,14 @@ export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, ancho
     const attrs = [...el.attributes];
     for (let a = 0; a < attrs.length; a++) {
       const attr = attrs[a];
-      if (!DOM_PROPERTIES.includes(attr.name)) continue;
+      const prop = realAttrName(attr.name);
+      if (!DOM_PROPERTIES.includes(prop)) continue;
       const m = attr.value.match(PURE_BINDING_REGEX);
       if (!m) continue;
       let expr = m[1];
       if (componentId) expr = expr.replace(THIS_PROP_REGEX, `$['${componentId}'].$1`);
       indexes.push(domPropertyWrites.length);
-      domPropertyWrites.push({ prop: attr.name, expr });
+      domPropertyWrites.push({ prop, expr });
     }
     if (indexes.length > 0) {
       el.setAttribute(BATCH_ATTR, indexes.join(','));
@@ -172,7 +183,7 @@ export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys, ancho
   let code = escaped;
 
   let needsCiWalker = false;
-  code = mapTagSpans(code, (tag) => tag.replace(BATCH_NAME_BINDING_REGEX, (_, _ws, expr) => {
+  code = mapTagSpans(code, (tag) => tag.replace(DEFERRED_ATTR_REGEX, '$1').replace(BATCH_NAME_BINDING_REGEX, (_, _ws, expr) => {
     let decExpr = decodeEntities(expr);
     if (decExpr.includes('[') || decExpr.includes('(')) {
       return nameBindingEmit(decExpr);