@marko/runtime-tags 0.2.1 → 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,
@@ -66,7 +69,8 @@ __export(html_exports, {
   write: () => write,
   writeEffect: () => writeEffect,
   writeExistingScope: () => writeExistingScope,
-  writeScope: () => writeScope
+  writeScope: () => writeScope,
+  writeTrailers: () => writeTrailers
 });
 module.exports = __toCommonJS(html_exports);
 
@@ -94,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);
@@ -1676,6 +1658,7 @@ var State2 = class {
   hasMainRuntime = false;
   hasReorderRuntime = false;
   hasWrittenResume = false;
+  trailerHTML = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1952,18 +1935,29 @@ function prepareChunk(chunk) {
   head.scripts = scripts;
   return head;
 }
-function flushChunk(head) {
+function flushChunk(head, last) {
+  const { boundary } = head;
+  const { state } = boundary;
   const { html, scripts } = head;
-  const { $global: $global2 } = head.boundary.state;
+  const { $global: $global2 } = state;
   const { __flush__ } = $global2;
-  const result = scripts ? html + "<script" + (head.boundary.state.$global.cspNonce ? " nonce=" + escapeAttrValue(head.boundary.state.$global.cspNonce + "") : "") + ">" + scripts + "</script>" : html;
+  let result = html;
   head.html = head.scripts = "";
+  if (scripts) {
+    result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>";
+  }
   if (__flush__) {
     $global2.__flush__ = void 0;
-    return __flush__($global2, result);
+    result = __flush__($global2, result);
+  }
+  if (last && state.trailerHTML) {
+    result += state.trailerHTML;
   }
   return result;
 }
+function writeTrailers(html) {
+  $chunk.boundary.state.trailerHTML += html;
+}
 function concatEffects(a, b) {
   return a ? b ? a + "," + b : a : b;
 }
@@ -2040,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);
@@ -2051,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);
 }
@@ -2077,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);
 }
@@ -2171,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);
           }
@@ -2188,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)}`;
 }
@@ -2398,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;
@@ -2561,7 +2632,7 @@ var ServerRenderResult = class {
             reject(boundary.signal.reason);
           } else {
             head = prepareChunk(head);
-            if (boundary.done) resolve(flushChunk(head));
+            if (boundary.done) resolve(flushChunk(head, true));
           }
         }
       })();
@@ -2586,7 +2657,7 @@ var ServerRenderResult = class {
         head = prepareChunk(head);
       }
       if (write2 || boundary.done) {
-        const html = flushChunk(head);
+        const html = flushChunk(head, boundary.done);
         if (html) onWrite(html);
         if (boundary.done) {
           if (!tick2) offTick(onNext);
@@ -2607,7 +2678,7 @@ var ServerRenderResult = class {
     if (!head) throw new Error("Cannot read from a consumed render result");
     if (head.next) throw new Error("Cannot fork in sync mode");
     this.#head = null;
-    return flushChunk(prepareChunk(head));
+    return flushChunk(prepareChunk(head), true);
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -2634,8 +2705,11 @@ var ServerRenderResult = class {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,
@@ -2658,5 +2732,6 @@ var ServerRenderResult = class {
   write,
   writeEffect,
   writeExistingScope,
-  writeScope
+  writeScope,
+  writeTrailers
 });

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);
@@ -1604,6 +1582,7 @@ var State2 = class {
   hasMainRuntime = false;
   hasReorderRuntime = false;
   hasWrittenResume = false;
+  trailerHTML = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1880,18 +1859,29 @@ function prepareChunk(chunk) {
   head.scripts = scripts;
   return head;
 }
-function flushChunk(head) {
+function flushChunk(head, last) {
+  const { boundary } = head;
+  const { state } = boundary;
   const { html, scripts } = head;
-  const { $global: $global2 } = head.boundary.state;
+  const { $global: $global2 } = state;
   const { __flush__ } = $global2;
-  const result = scripts ? html + "<script" + (head.boundary.state.$global.cspNonce ? " nonce=" + escapeAttrValue(head.boundary.state.$global.cspNonce + "") : "") + ">" + scripts + "</script>" : html;
+  let result = html;
   head.html = head.scripts = "";
+  if (scripts) {
+    result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>";
+  }
   if (__flush__) {
     $global2.__flush__ = void 0;
-    return __flush__($global2, result);
+    result = __flush__($global2, result);
+  }
+  if (last && state.trailerHTML) {
+    result += state.trailerHTML;
   }
   return result;
 }
+function writeTrailers(html) {
+  $chunk.boundary.state.trailerHTML += html;
+}
 function concatEffects(a, b) {
   return a ? b ? a + "," + b : a : b;
 }
@@ -1968,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);
@@ -1979,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);
 }
@@ -2005,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);
 }
@@ -2099,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);
           }
@@ -2116,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)}`;
 }
@@ -2326,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;
@@ -2489,7 +2556,7 @@ var ServerRenderResult = class {
             reject(boundary.signal.reason);
           } else {
             head = prepareChunk(head);
-            if (boundary.done) resolve(flushChunk(head));
+            if (boundary.done) resolve(flushChunk(head, true));
           }
         }
       })();
@@ -2514,7 +2581,7 @@ var ServerRenderResult = class {
         head = prepareChunk(head);
       }
       if (write2 || boundary.done) {
-        const html = flushChunk(head);
+        const html = flushChunk(head, boundary.done);
         if (html) onWrite(html);
         if (boundary.done) {
           if (!tick2) offTick(onNext);
@@ -2535,7 +2602,7 @@ var ServerRenderResult = class {
     if (!head) throw new Error("Cannot read from a consumed render result");
     if (head.next) throw new Error("Cannot fork in sync mode");
     this.#head = null;
-    return flushChunk(prepareChunk(head));
+    return flushChunk(prepareChunk(head), true);
   }
 };
 export {
@@ -2561,8 +2628,11 @@ export {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,
@@ -2585,5 +2655,6 @@ export {
   write,
   writeEffect,
   writeExistingScope,
-  writeScope
+  writeScope,
+  writeTrailers
 };

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/writer.d.ts

@@ -56,6 +56,7 @@ export declare class State {
     hasMainRuntime: boolean;
     hasReorderRuntime: boolean;
     hasWrittenResume: boolean;
+    trailerHTML: string;
     serializer: Serializer;
     writeReorders: Chunk[] | null;
     scopes: Map<number, PartialScope>;
@@ -104,7 +105,8 @@ export declare class Chunk {
     render<T>(renderBody: (val: T) => void, val: T): Chunk;
 }
 export declare function prepareChunk(chunk: Chunk): Chunk;
-export declare function flushChunk(head: Chunk): string;
+export declare function flushChunk(head: Chunk, last: boolean): string;
+export declare function writeTrailers(html: string): void;
 type QueueCallback = (ticked: true) => void;
 export declare function queueTick(cb: QueueCallback): void;
 export declare function offTick(cb: QueueCallback): void;

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, } from "./html/writer";
+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,
@@ -63,7 +66,8 @@ __export(html_exports, {
   write: () => write,
   writeEffect: () => writeEffect,
   writeExistingScope: () => writeExistingScope,
-  writeScope: () => writeScope
+  writeScope: () => writeScope,
+  writeTrailers: () => writeTrailers
 });
 module.exports = __toCommonJS(html_exports);
 
@@ -79,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);
@@ -1119,6 +1105,7 @@ var State2 = class {
   hasMainRuntime = !1;
   hasReorderRuntime = !1;
   hasWrittenResume = !1;
+  trailerHTML = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1272,9 +1259,12 @@ function prepareChunk(chunk) {
   }
   return hasWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), head.html = html, head.scripts = scripts, head;
 }
-function flushChunk(head) {
-  let { html, scripts } = head, { $global: $global2 } = head.boundary.state, { __flush__ } = $global2, result = scripts ? html + "<script" + (head.boundary.state.$global.cspNonce ? " nonce=" + escapeAttrValue(head.boundary.state.$global.cspNonce + "") : "") + ">" + scripts + "</script>" : html;
-  return head.html = head.scripts = "", __flush__ ? ($global2.__flush__ = void 0, __flush__($global2, result)) : result;
+function flushChunk(head, last) {
+  let { boundary } = head, { state } = boundary, { html, scripts } = head, { $global: $global2 } = state, { __flush__ } = $global2, result = html;
+  return head.html = head.scripts = "", scripts && (result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>"), __flush__ && ($global2.__flush__ = void 0, result = __flush__($global2, result)), last && state.trailerHTML && (result += state.trailerHTML), result;
+}
+function writeTrailers(html) {
+  $chunk.boundary.state.trailerHTML += html;
 }
 function concatEffects(a, b) {
   return a ? b ? a + "," + b : a : b;
@@ -1330,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);
@@ -1435,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;
     }
   }
@@ -1447,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)}`;
 }
@@ -1579,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 = {}) {
@@ -1689,7 +1729,7 @@ var ServerRenderResult = class {
         return reject(new Error("Cannot read from a consumed render result"));
       let { boundary } = head;
       (boundary.onNext = () => {
-        boundary.done && (boundary.signal.aborted ? reject(boundary.signal.reason) : (head = prepareChunk(head), boundary.done && resolve(flushChunk(head))));
+        boundary.done && (boundary.signal.aborted ? reject(boundary.signal.reason) : (head = prepareChunk(head), boundary.done && resolve(flushChunk(head, !0))));
       })();
     });
   }
@@ -1708,7 +1748,7 @@ var ServerRenderResult = class {
         head = prepareChunk(head);
       }
       if (write2 || boundary.done) {
-        let html = flushChunk(head);
+        let html = flushChunk(head, boundary.done);
         html && onWrite(html), boundary.done ? (tick2 || offTick(onNext), onClose()) : tick2 = !0;
       } else tick2 && (tick2 = !1, queueTick(onNext));
     };
@@ -1718,7 +1758,7 @@ var ServerRenderResult = class {
     let head = this.#head;
     if (!head) throw new Error("Cannot read from a consumed render result");
     if (head.next) throw new Error("Cannot fork in sync mode");
-    return this.#head = null, flushChunk(prepareChunk(head));
+    return this.#head = null, flushChunk(prepareChunk(head), !0);
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -1745,8 +1785,11 @@ var ServerRenderResult = class {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,
@@ -1769,5 +1812,6 @@ var ServerRenderResult = class {
   write,
   writeEffect,
   writeExistingScope,
-  writeScope
+  writeScope,
+  writeTrailers
 });

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);
@@ -1050,6 +1032,7 @@ var State2 = class {
   hasMainRuntime = !1;
   hasReorderRuntime = !1;
   hasWrittenResume = !1;
+  trailerHTML = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1203,9 +1186,12 @@ function prepareChunk(chunk) {
   }
   return hasWalk && (scripts = concatScripts(scripts, runtimePrefix + ".w()")), head.html = html, head.scripts = scripts, head;
 }
-function flushChunk(head) {
-  let { html, scripts } = head, { $global: $global2 } = head.boundary.state, { __flush__ } = $global2, result = scripts ? html + "<script" + (head.boundary.state.$global.cspNonce ? " nonce=" + escapeAttrValue(head.boundary.state.$global.cspNonce + "") : "") + ">" + scripts + "</script>" : html;
-  return head.html = head.scripts = "", __flush__ ? ($global2.__flush__ = void 0, __flush__($global2, result)) : result;
+function flushChunk(head, last) {
+  let { boundary } = head, { state } = boundary, { html, scripts } = head, { $global: $global2 } = state, { __flush__ } = $global2, result = html;
+  return head.html = head.scripts = "", scripts && (result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>"), __flush__ && ($global2.__flush__ = void 0, result = __flush__($global2, result)), last && state.trailerHTML && (result += state.trailerHTML), result;
+}
+function writeTrailers(html) {
+  $chunk.boundary.state.trailerHTML += html;
 }
 function concatEffects(a, b) {
   return a ? b ? a + "," + b : a : b;
@@ -1261,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);
@@ -1366,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;
     }
   }
@@ -1378,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)}`;
 }
@@ -1510,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 = {}) {
@@ -1620,7 +1656,7 @@ var ServerRenderResult = class {
         return reject(new Error("Cannot read from a consumed render result"));
       let { boundary } = head;
       (boundary.onNext = () => {
-        boundary.done && (boundary.signal.aborted ? reject(boundary.signal.reason) : (head = prepareChunk(head), boundary.done && resolve(flushChunk(head))));
+        boundary.done && (boundary.signal.aborted ? reject(boundary.signal.reason) : (head = prepareChunk(head), boundary.done && resolve(flushChunk(head, !0))));
       })();
     });
   }
@@ -1639,7 +1675,7 @@ var ServerRenderResult = class {
         head = prepareChunk(head);
       }
       if (write2 || boundary.done) {
-        let html = flushChunk(head);
+        let html = flushChunk(head, boundary.done);
         html && onWrite(html), boundary.done ? (tick2 || offTick(onNext), onClose()) : tick2 = !0;
       } else tick2 && (tick2 = !1, queueTick(onNext));
     };
@@ -1649,7 +1685,7 @@ var ServerRenderResult = class {
     let head = this.#head;
     if (!head) throw new Error("Cannot read from a consumed render result");
     if (head.next) throw new Error("Cannot fork in sync mode");
-    return this.#head = null, flushChunk(prepareChunk(head));
+    return this.#head = null, flushChunk(prepareChunk(head), !0);
   }
 };
 export {
@@ -1675,8 +1711,11 @@ export {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,
@@ -1699,5 +1738,6 @@ export {
   write,
   writeEffect,
   writeExistingScope,
-  writeScope
+  writeScope,
+  writeTrailers
 };

package/package.json

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