@marko/runtime-tags 0.2.2 → 0.2.3

package/dist/debug/dom.js

@@ -447,15 +447,16 @@ var DIRTY = true ? Symbol("dirty") : {};
 function state(valueAccessor, fn, getIntersection) {
   const valueSignal = value(valueAccessor, fn, getIntersection);
   const markAccessor = valueAccessor + "#" /* Mark */;
+  const valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
   return (scope, valueOrOp, valueChange) => {
     if (rendering) {
       const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
       valueSignal(
         scope,
-        valueIsOp || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+        valueIsOp || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
       );
-    } else if (valueChange) {
-      valueChange(valueOrOp);
+    } else if (scope[valueChangeAccessor]) {
+      scope[valueChangeAccessor](valueOrOp);
     } else {
       queueSource(scope, valueSignal, valueOrOp);
     }

package/dist/debug/dom.mjs

@@ -358,15 +358,16 @@ var DIRTY = true ? Symbol("dirty") : {};
 function state(valueAccessor, fn, getIntersection) {
   const valueSignal = value(valueAccessor, fn, getIntersection);
   const markAccessor = valueAccessor + "#" /* Mark */;
+  const valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
   return (scope, valueOrOp, valueChange) => {
     if (rendering) {
       const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
       valueSignal(
         scope,
-        valueIsOp || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+        valueIsOp || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
       );
-    } else if (valueChange) {
-      valueChange(valueOrOp);
+    } else if (scope[valueChangeAccessor]) {
+      scope[valueChangeAccessor](valueOrOp);
     } else {
       queueSource(scope, valueSignal, valueOrOp);
     }

package/dist/debug/html.js

@@ -42,8 +42,11 @@ __export(html_exports, {
   escapeStyle: () => escapeStyle,
   escapeXML: () => escapeXML,
   forIn: () => forIn,
+  forInBy: () => forInBy,
   forOf: () => forOf,
+  forOfBy: () => forOfBy,
   forTo: () => forTo,
+  forToBy: () => forToBy,
   fork: () => fork,
   getScopeById: () => getScopeById,
   markResumeCleanup: () => markResumeCleanup,
@@ -95,28 +98,6 @@ function* attrTagIterator() {
   yield* this[rest];
 }
 
-// src/common/for.ts
-function forIn(obj, cb) {
-  for (const key in obj) {
-    cb(key, obj[key]);
-  }
-}
-function forOf(list, cb) {
-  if (list) {
-    let i = 0;
-    for (const item of list) {
-      cb(item, i++);
-    }
-  }
-}
-function forTo(to, from, step, cb) {
-  const start = from || 0;
-  const delta = step || 1;
-  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
-    cb(start + i * delta);
-  }
-}
-
 // src/common/helpers.ts
 function classValue(value) {
   return toDelimitedString(value, " ", stringifyClassObject);
@@ -2053,10 +2034,13 @@ function optionValueAttr(value) {
 var kSelectedValue = Symbol("selectedValue");
 function controllable_select_value(scopeId, nodeAccessor, value, valueChange, renderBody) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = value;
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 3 /* SelectValue */;
+    writeControlledScope(
+      3 /* SelectValue */,
+      scopeId,
+      nodeAccessor,
+      value,
+      valueChange
+    );
   }
   if (renderBody) {
     withContext(kSelectedValue, value, renderBody);
@@ -2064,25 +2048,37 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
 }
 function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+    writeControlledScope(
+      2 /* InputValue */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      valueChange
+    );
   }
   return escapeTextAreaValue(value);
 }
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+    writeControlledScope(
+      2 /* InputValue */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      valueChange
+    );
   }
   return attr("value", value);
 }
 function controllable_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
   if (checkedChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 0 /* InputChecked */;
+    writeControlledScope(
+      0 /* InputChecked */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      checkedChange
+    );
   }
   return attr("checked", checked);
 }
@@ -2090,21 +2086,25 @@ function controllable_input_checkedValue(scopeId, nodeAccessor, checkedValue, ch
   const multiple = Array.isArray(checkedValue);
   const valueAttr = attr("value", value);
   if (checkedValueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedValueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 1 /* InputCheckedValue */;
-    if (multiple) {
-      scope[nodeAccessor + ":" /* ControlledValue */] = checkedValue;
-    }
+    writeControlledScope(
+      1 /* InputCheckedValue */,
+      scopeId,
+      nodeAccessor,
+      multiple ? checkedValue : void 0,
+      checkedValueChange
+    );
   }
   return (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
 }
 function controllable_detailsOrDialog_open(scopeId, nodeAccessor, open, openChange) {
   if (openChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = open;
-    scope[nodeAccessor + ";" /* ControlledHandler */] = openChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */;
+    writeControlledScope(
+      4 /* DetailsOrDialogOpen */,
+      scopeId,
+      nodeAccessor,
+      open,
+      openChange
+    );
   }
   return attr("open", open);
 }
@@ -2184,7 +2184,13 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       default:
         if (!isVoid(val)) {
           if (isEventHandler(name)) {
-            (events ||= ensureScopeWithId(scopeId)[nodeAccessor + "~" /* EventAttributes */] = {})[getEventHandlerName(name)] = val;
+            if (!events) {
+              events = {};
+              writeScope(scopeId, {
+                [nodeAccessor + "~" /* EventAttributes */]: events
+              });
+            }
+            events[getEventHandlerName(name)] = val;
           } else if (!skip.test(name)) {
             result += nonVoidAttr(name, val);
           }
@@ -2201,6 +2207,13 @@ function partialAttrs(data, skip, nodeAccessor, scopeId, tagName) {
   }
   return attrs(partial, nodeAccessor, scopeId, tagName);
 }
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+  writeScope(scopeId, {
+    [nodeAccessor + "=" /* ControlledType */]: type,
+    [nodeAccessor + ":" /* ControlledValue */]: value,
+    [nodeAccessor + ";" /* ControlledHandler */]: valueChange
+  });
+}
 function stringAttr(name, val) {
   return val && ` ${name}=${escapeAttrValue(val)}`;
 }
@@ -2411,6 +2424,51 @@ var compat = {
   }
 };
 
+// src/common/for.ts
+function forIn(obj, cb) {
+  for (const key in obj) {
+    cb(key, obj[key]);
+  }
+}
+function forOf(list, cb) {
+  if (list) {
+    let i = 0;
+    for (const item of list) {
+      cb(item, i++);
+    }
+  }
+}
+function forTo(to, from, step, cb) {
+  const start = from || 0;
+  const delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
+    cb(start + i * delta);
+  }
+}
+
+// src/html/for.ts
+function forOfBy(by, item, index) {
+  if (by) {
+    if (typeof by === "string") {
+      return item[by];
+    }
+    return by(item, index);
+  }
+  return index;
+}
+function forInBy(by, name, value) {
+  if (by) {
+    return by(name, value);
+  }
+  return name;
+}
+function forToBy(by, index) {
+  if (by) {
+    return by(index);
+  }
+  return index;
+}
+
 // src/html/template.ts
 var createTemplate = (templateId, renderer) => {
   renderer.render = render;
@@ -2647,8 +2705,11 @@ var ServerRenderResult = class {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,

package/dist/debug/html.mjs

@@ -22,28 +22,6 @@ function* attrTagIterator() {
   yield* this[rest];
 }
 
-// src/common/for.ts
-function forIn(obj, cb) {
-  for (const key in obj) {
-    cb(key, obj[key]);
-  }
-}
-function forOf(list, cb) {
-  if (list) {
-    let i = 0;
-    for (const item of list) {
-      cb(item, i++);
-    }
-  }
-}
-function forTo(to, from, step, cb) {
-  const start = from || 0;
-  const delta = step || 1;
-  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
-    cb(start + i * delta);
-  }
-}
-
 // src/common/helpers.ts
 function classValue(value) {
   return toDelimitedString(value, " ", stringifyClassObject);
@@ -1980,10 +1958,13 @@ function optionValueAttr(value) {
 var kSelectedValue = Symbol("selectedValue");
 function controllable_select_value(scopeId, nodeAccessor, value, valueChange, renderBody) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = value;
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 3 /* SelectValue */;
+    writeControlledScope(
+      3 /* SelectValue */,
+      scopeId,
+      nodeAccessor,
+      value,
+      valueChange
+    );
   }
   if (renderBody) {
     withContext(kSelectedValue, value, renderBody);
@@ -1991,25 +1972,37 @@ function controllable_select_value(scopeId, nodeAccessor, value, valueChange, re
 }
 function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+    writeControlledScope(
+      2 /* InputValue */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      valueChange
+    );
   }
   return escapeTextAreaValue(value);
 }
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
   if (valueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
+    writeControlledScope(
+      2 /* InputValue */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      valueChange
+    );
   }
   return attr("value", value);
 }
 function controllable_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
   if (checkedChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 0 /* InputChecked */;
+    writeControlledScope(
+      0 /* InputChecked */,
+      scopeId,
+      nodeAccessor,
+      void 0,
+      checkedChange
+    );
   }
   return attr("checked", checked);
 }
@@ -2017,21 +2010,25 @@ function controllable_input_checkedValue(scopeId, nodeAccessor, checkedValue, ch
   const multiple = Array.isArray(checkedValue);
   const valueAttr = attr("value", value);
   if (checkedValueChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedValueChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 1 /* InputCheckedValue */;
-    if (multiple) {
-      scope[nodeAccessor + ":" /* ControlledValue */] = checkedValue;
-    }
+    writeControlledScope(
+      1 /* InputCheckedValue */,
+      scopeId,
+      nodeAccessor,
+      multiple ? checkedValue : void 0,
+      checkedValueChange
+    );
   }
   return (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
 }
 function controllable_detailsOrDialog_open(scopeId, nodeAccessor, open, openChange) {
   if (openChange) {
-    const scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = open;
-    scope[nodeAccessor + ";" /* ControlledHandler */] = openChange;
-    scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */;
+    writeControlledScope(
+      4 /* DetailsOrDialogOpen */,
+      scopeId,
+      nodeAccessor,
+      open,
+      openChange
+    );
   }
   return attr("open", open);
 }
@@ -2111,7 +2108,13 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       default:
         if (!isVoid(val)) {
           if (isEventHandler(name)) {
-            (events ||= ensureScopeWithId(scopeId)[nodeAccessor + "~" /* EventAttributes */] = {})[getEventHandlerName(name)] = val;
+            if (!events) {
+              events = {};
+              writeScope(scopeId, {
+                [nodeAccessor + "~" /* EventAttributes */]: events
+              });
+            }
+            events[getEventHandlerName(name)] = val;
           } else if (!skip.test(name)) {
             result += nonVoidAttr(name, val);
           }
@@ -2128,6 +2131,13 @@ function partialAttrs(data, skip, nodeAccessor, scopeId, tagName) {
   }
   return attrs(partial, nodeAccessor, scopeId, tagName);
 }
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+  writeScope(scopeId, {
+    [nodeAccessor + "=" /* ControlledType */]: type,
+    [nodeAccessor + ":" /* ControlledValue */]: value,
+    [nodeAccessor + ";" /* ControlledHandler */]: valueChange
+  });
+}
 function stringAttr(name, val) {
   return val && ` ${name}=${escapeAttrValue(val)}`;
 }
@@ -2338,6 +2348,51 @@ var compat = {
   }
 };
 
+// src/common/for.ts
+function forIn(obj, cb) {
+  for (const key in obj) {
+    cb(key, obj[key]);
+  }
+}
+function forOf(list, cb) {
+  if (list) {
+    let i = 0;
+    for (const item of list) {
+      cb(item, i++);
+    }
+  }
+}
+function forTo(to, from, step, cb) {
+  const start = from || 0;
+  const delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
+    cb(start + i * delta);
+  }
+}
+
+// src/html/for.ts
+function forOfBy(by, item, index) {
+  if (by) {
+    if (typeof by === "string") {
+      return item[by];
+    }
+    return by(item, index);
+  }
+  return index;
+}
+function forInBy(by, name, value) {
+  if (by) {
+    return by(name, value);
+  }
+  return name;
+}
+function forToBy(by, index) {
+  if (by) {
+    return by(index);
+  }
+  return index;
+}
+
 // src/html/template.ts
 var createTemplate = (templateId, renderer) => {
   renderer.render = render;
@@ -2573,8 +2628,11 @@ export {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,

package/dist/dom.js

@@ -299,11 +299,11 @@ function nodeRef(id, key) {
 // src/dom/signals.ts
 var MARK = {}, CLEAN = {}, DIRTY = {};
 function state(valueAccessor, fn, getIntersection) {
-  let valueSignal = value(valueAccessor, fn, getIntersection), markAccessor = valueAccessor + "#" /* Mark */;
+  let valueSignal = value(valueAccessor, fn, getIntersection), markAccessor = valueAccessor + "#" /* Mark */, valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
   return (scope, valueOrOp, valueChange) => (rendering ? valueSignal(
     scope,
-    valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
-  ) : valueChange ? valueChange(valueOrOp) : queueSource(scope, valueSignal, valueOrOp), valueOrOp);
+    valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+  ) : scope[valueChangeAccessor] ? scope[valueChangeAccessor](valueOrOp) : queueSource(scope, valueSignal, valueOrOp), valueOrOp);
 }
 function value(valueAccessor, fn, getIntersection) {
   let markAccessor = valueAccessor + "#" /* Mark */, intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));

package/dist/dom.mjs

@@ -213,11 +213,11 @@ function nodeRef(id, key) {
 // src/dom/signals.ts
 var MARK = {}, CLEAN = {}, DIRTY = {};
 function state(valueAccessor, fn, getIntersection) {
-  let valueSignal = value(valueAccessor, fn, getIntersection), markAccessor = valueAccessor + "#" /* Mark */;
+  let valueSignal = value(valueAccessor, fn, getIntersection), markAccessor = valueAccessor + "#" /* Mark */, valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
   return (scope, valueOrOp, valueChange) => (rendering ? valueSignal(
     scope,
-    valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
-  ) : valueChange ? valueChange(valueOrOp) : queueSource(scope, valueSignal, valueOrOp), valueOrOp);
+    valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+  ) : scope[valueChangeAccessor] ? scope[valueChangeAccessor](valueOrOp) : queueSource(scope, valueSignal, valueOrOp), valueOrOp);
 }
 function value(valueAccessor, fn, getIntersection) {
   let markAccessor = valueAccessor + "#" /* Mark */, intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));

package/dist/html/for.d.ts

@@ -0,0 +1,4 @@
+export { forIn, forOf, forTo } from "../common/for";
+export declare function forOfBy(by: unknown, item: any, index: unknown): any;
+export declare function forInBy(by: unknown, name: string, value: unknown): any;
+export declare function forToBy(by: unknown, index: number): any;

package/dist/html.d.ts

@@ -1,9 +1,9 @@
 export { attrTag, attrTags } from "./common/attr-tag";
-export { forIn, forOf, forTo } from "./common/for";
 export { normalizeDynamicRenderer } from "./common/helpers";
 export { attr, attrs, classAttr, controllable_detailsOrDialog_open, controllable_input_checked, controllable_input_checkedValue, controllable_input_value, controllable_select_value, controllable_textarea_value, optionValueAttr, partialAttrs, styleAttr, } from "./html/attrs";
 export { compat } from "./html/compat";
 export { escapeScript, escapeStyle, escapeXML, toString } from "./html/content";
 export { createRenderer, dynamicTagArgs, dynamicTagInput, } from "./html/dynamic-tag";
+export { forIn, forInBy, forOf, forOfBy, forTo, forToBy } from "./html/for";
 export { createTemplate } from "./html/template";
 export { $global, ensureScopeWithId, fork, getScopeById, markResumeCleanup, markResumeControlEnd, markResumeControlSingleNodeEnd, markResumeNode, markResumeScopeStart, nextScopeId, nextTagId, nodeRef, peekNextScope, register, tryCatch, tryPlaceholder, write, writeEffect, writeExistingScope, writeScope, writeTrailers, } from "./html/writer";

package/dist/html.js

@@ -39,8 +39,11 @@ __export(html_exports, {
   escapeStyle: () => escapeStyle,
   escapeXML: () => escapeXML,
   forIn: () => forIn,
+  forInBy: () => forInBy,
   forOf: () => forOf,
+  forOfBy: () => forOfBy,
   forTo: () => forTo,
+  forToBy: () => forToBy,
   fork: () => fork,
   getScopeById: () => getScopeById,
   markResumeCleanup: () => markResumeCleanup,
@@ -80,24 +83,6 @@ function* attrTagIterator() {
   yield this, yield* this[rest];
 }
 
-// src/common/for.ts
-function forIn(obj, cb) {
-  for (let key in obj)
-    cb(key, obj[key]);
-}
-function forOf(list, cb) {
-  if (list) {
-    let i = 0;
-    for (let item of list)
-      cb(item, i++);
-  }
-}
-function forTo(to, from, step, cb) {
-  let start = from || 0, delta = step || 1;
-  for (let steps = (to - start) / delta, i = 0; i <= steps; i++)
-    cb(start + i * delta);
-}
-
 // src/common/helpers.ts
 function classValue(value) {
   return toDelimitedString(value, " ", stringifyClassObject);
@@ -1335,47 +1320,59 @@ function optionValueAttr(value) {
 }
 var kSelectedValue = Symbol("selectedValue");
 function controllable_select_value(scopeId, nodeAccessor, value, valueChange, renderBody) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = value, scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 3 /* SelectValue */;
-  }
-  renderBody && withContext(kSelectedValue, value, renderBody);
+  valueChange && writeControlledScope(
+    3 /* SelectValue */,
+    scopeId,
+    nodeAccessor,
+    value,
+    valueChange
+  ), renderBody && withContext(kSelectedValue, value, renderBody);
 }
 function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
-  }
-  return escapeTextAreaValue(value);
+  return valueChange && writeControlledScope(
+    2 /* InputValue */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    valueChange
+  ), escapeTextAreaValue(value);
 }
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
-  }
-  return attr("value", value);
+  return valueChange && writeControlledScope(
+    2 /* InputValue */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    valueChange
+  ), attr("value", value);
 }
 function controllable_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-  if (checkedChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange, scope[nodeAccessor + "=" /* ControlledType */] = 0 /* InputChecked */;
-  }
-  return attr("checked", checked);
+  return checkedChange && writeControlledScope(
+    0 /* InputChecked */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    checkedChange
+  ), attr("checked", checked);
 }
 function controllable_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
   let multiple = Array.isArray(checkedValue), valueAttr = attr("value", value);
-  if (checkedValueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedValueChange, scope[nodeAccessor + "=" /* ControlledType */] = 1 /* InputCheckedValue */, multiple && (scope[nodeAccessor + ":" /* ControlledValue */] = checkedValue);
-  }
-  return (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
+  return checkedValueChange && writeControlledScope(
+    1 /* InputCheckedValue */,
+    scopeId,
+    nodeAccessor,
+    multiple ? checkedValue : void 0,
+    checkedValueChange
+  ), (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
 }
 function controllable_detailsOrDialog_open(scopeId, nodeAccessor, open, openChange) {
-  if (openChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = open, scope[nodeAccessor + ";" /* ControlledHandler */] = openChange, scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */;
-  }
-  return attr("open", open);
+  return openChange && writeControlledScope(
+    4 /* DetailsOrDialogOpen */,
+    scopeId,
+    nodeAccessor,
+    open,
+    openChange
+  ), attr("open", open);
 }
 function attr(name, val) {
   return isVoid(val) ? "" : nonVoidAttr(name, val);
@@ -1440,7 +1437,9 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       case "renderBody":
         break;
       default:
-        isVoid(val) || (isEventHandler(name) ? (events ||= ensureScopeWithId(scopeId)[nodeAccessor + "~" /* EventAttributes */] = {})[getEventHandlerName(name)] = val : skip.test(name) || (result += nonVoidAttr(name, val)));
+        isVoid(val) || (isEventHandler(name) ? (events || (events = {}, writeScope(scopeId, {
+          [nodeAccessor + "~" /* EventAttributes */]: events
+        })), events[getEventHandlerName(name)] = val) : skip.test(name) || (result += nonVoidAttr(name, val)));
         break;
     }
   }
@@ -1452,6 +1451,13 @@ function partialAttrs(data, skip, nodeAccessor, scopeId, tagName) {
     skip[key] || (partial[key] = data[key]);
   return attrs(partial, nodeAccessor, scopeId, tagName);
 }
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+  writeScope(scopeId, {
+    [nodeAccessor + "=" /* ControlledType */]: type,
+    [nodeAccessor + ":" /* ControlledValue */]: value,
+    [nodeAccessor + ";" /* ControlledHandler */]: valueChange
+  });
+}
 function stringAttr(name, val) {
   return val && ` ${name}=${escapeAttrValue(val)}`;
 }
@@ -1584,6 +1590,35 @@ var K_TAGS_API_STATE = Symbol(), COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap()
   }
 };
 
+// src/common/for.ts
+function forIn(obj, cb) {
+  for (let key in obj)
+    cb(key, obj[key]);
+}
+function forOf(list, cb) {
+  if (list) {
+    let i = 0;
+    for (let item of list)
+      cb(item, i++);
+  }
+}
+function forTo(to, from, step, cb) {
+  let start = from || 0, delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++)
+    cb(start + i * delta);
+}
+
+// src/html/for.ts
+function forOfBy(by, item, index) {
+  return by ? typeof by == "string" ? item[by] : by(item, index) : index;
+}
+function forInBy(by, name, value) {
+  return by ? by(name, value) : name;
+}
+function forToBy(by, index) {
+  return by ? by(index) : index;
+}
+
 // src/html/template.ts
 var createTemplate = (templateId, renderer) => (renderer.render = render, renderer._ = renderer, register2(renderer, templateId));
 function render(input = {}) {
@@ -1750,8 +1785,11 @@ var ServerRenderResult = class {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,

package/dist/html.mjs

@@ -10,24 +10,6 @@ function* attrTagIterator() {
   yield this, yield* this[rest];
 }
 
-// src/common/for.ts
-function forIn(obj, cb) {
-  for (let key in obj)
-    cb(key, obj[key]);
-}
-function forOf(list, cb) {
-  if (list) {
-    let i = 0;
-    for (let item of list)
-      cb(item, i++);
-  }
-}
-function forTo(to, from, step, cb) {
-  let start = from || 0, delta = step || 1;
-  for (let steps = (to - start) / delta, i = 0; i <= steps; i++)
-    cb(start + i * delta);
-}
-
 // src/common/helpers.ts
 function classValue(value) {
   return toDelimitedString(value, " ", stringifyClassObject);
@@ -1265,47 +1247,59 @@ function optionValueAttr(value) {
 }
 var kSelectedValue = Symbol("selectedValue");
 function controllable_select_value(scopeId, nodeAccessor, value, valueChange, renderBody) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = value, scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 3 /* SelectValue */;
-  }
-  renderBody && withContext(kSelectedValue, value, renderBody);
+  valueChange && writeControlledScope(
+    3 /* SelectValue */,
+    scopeId,
+    nodeAccessor,
+    value,
+    valueChange
+  ), renderBody && withContext(kSelectedValue, value, renderBody);
 }
 function controllable_textarea_value(scopeId, nodeAccessor, value, valueChange) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
-  }
-  return escapeTextAreaValue(value);
+  return valueChange && writeControlledScope(
+    2 /* InputValue */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    valueChange
+  ), escapeTextAreaValue(value);
 }
 function controllable_input_value(scopeId, nodeAccessor, value, valueChange) {
-  if (valueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange, scope[nodeAccessor + "=" /* ControlledType */] = 2 /* InputValue */;
-  }
-  return attr("value", value);
+  return valueChange && writeControlledScope(
+    2 /* InputValue */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    valueChange
+  ), attr("value", value);
 }
 function controllable_input_checked(scopeId, nodeAccessor, checked, checkedChange) {
-  if (checkedChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange, scope[nodeAccessor + "=" /* ControlledType */] = 0 /* InputChecked */;
-  }
-  return attr("checked", checked);
+  return checkedChange && writeControlledScope(
+    0 /* InputChecked */,
+    scopeId,
+    nodeAccessor,
+    void 0,
+    checkedChange
+  ), attr("checked", checked);
 }
 function controllable_input_checkedValue(scopeId, nodeAccessor, checkedValue, checkedValueChange, value) {
   let multiple = Array.isArray(checkedValue), valueAttr = attr("value", value);
-  if (checkedValueChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ";" /* ControlledHandler */] = checkedValueChange, scope[nodeAccessor + "=" /* ControlledType */] = 1 /* InputCheckedValue */, multiple && (scope[nodeAccessor + ":" /* ControlledValue */] = checkedValue);
-  }
-  return (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
+  return checkedValueChange && writeControlledScope(
+    1 /* InputCheckedValue */,
+    scopeId,
+    nodeAccessor,
+    multiple ? checkedValue : void 0,
+    checkedValueChange
+  ), (multiple ? checkedValue.includes(value) : checkedValue === value) ? valueAttr + " checked" : valueAttr;
 }
 function controllable_detailsOrDialog_open(scopeId, nodeAccessor, open, openChange) {
-  if (openChange) {
-    let scope = ensureScopeWithId(scopeId);
-    scope[nodeAccessor + ":" /* ControlledValue */] = open, scope[nodeAccessor + ";" /* ControlledHandler */] = openChange, scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */;
-  }
-  return attr("open", open);
+  return openChange && writeControlledScope(
+    4 /* DetailsOrDialogOpen */,
+    scopeId,
+    nodeAccessor,
+    open,
+    openChange
+  ), attr("open", open);
 }
 function attr(name, val) {
   return isVoid(val) ? "" : nonVoidAttr(name, val);
@@ -1370,7 +1364,9 @@ function attrs(data, nodeAccessor, scopeId, tagName) {
       case "renderBody":
         break;
       default:
-        isVoid(val) || (isEventHandler(name) ? (events ||= ensureScopeWithId(scopeId)[nodeAccessor + "~" /* EventAttributes */] = {})[getEventHandlerName(name)] = val : skip.test(name) || (result += nonVoidAttr(name, val)));
+        isVoid(val) || (isEventHandler(name) ? (events || (events = {}, writeScope(scopeId, {
+          [nodeAccessor + "~" /* EventAttributes */]: events
+        })), events[getEventHandlerName(name)] = val) : skip.test(name) || (result += nonVoidAttr(name, val)));
         break;
     }
   }
@@ -1382,6 +1378,13 @@ function partialAttrs(data, skip, nodeAccessor, scopeId, tagName) {
     skip[key] || (partial[key] = data[key]);
   return attrs(partial, nodeAccessor, scopeId, tagName);
 }
+function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+  writeScope(scopeId, {
+    [nodeAccessor + "=" /* ControlledType */]: type,
+    [nodeAccessor + ":" /* ControlledValue */]: value,
+    [nodeAccessor + ";" /* ControlledHandler */]: valueChange
+  });
+}
 function stringAttr(name, val) {
   return val && ` ${name}=${escapeAttrValue(val)}`;
 }
@@ -1514,6 +1517,35 @@ var K_TAGS_API_STATE = Symbol(), COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap()
   }
 };
 
+// src/common/for.ts
+function forIn(obj, cb) {
+  for (let key in obj)
+    cb(key, obj[key]);
+}
+function forOf(list, cb) {
+  if (list) {
+    let i = 0;
+    for (let item of list)
+      cb(item, i++);
+  }
+}
+function forTo(to, from, step, cb) {
+  let start = from || 0, delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++)
+    cb(start + i * delta);
+}
+
+// src/html/for.ts
+function forOfBy(by, item, index) {
+  return by ? typeof by == "string" ? item[by] : by(item, index) : index;
+}
+function forInBy(by, name, value) {
+  return by ? by(name, value) : name;
+}
+function forToBy(by, index) {
+  return by ? by(index) : index;
+}
+
 // src/html/template.ts
 var createTemplate = (templateId, renderer) => (renderer.render = render, renderer._ = renderer, register2(renderer, templateId));
 function render(input = {}) {
@@ -1679,8 +1711,11 @@ export {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marko/runtime-tags",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",