@marko/runtime-tags 0.2.2 → 0.2.4

package/dist/debug/dom.js

@@ -83,6 +83,7 @@ __export(dom_exports, {
   styleAttr: () => styleAttr,
   tagVarSignal: () => tagVarSignal,
   tagVarSignalChange: () => tagVarSignalChange,
+  textContent: () => textContent,
   value: () => value
 });
 module.exports = __toCommonJS(dom_exports);
@@ -373,6 +374,7 @@ var Render = class {
             delete this.___renders[this.___renderId];
           } else {
             registeredValues[resumes[i++]](
+              scopeLookup[resumeData],
               scopeLookup[resumeData]
             );
           }
@@ -447,15 +449,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);
     }
@@ -694,7 +697,7 @@ function runEffects(effects = pendingEffects) {
   for (let i = 0; i < effects.length; i += 2 /* Total */) {
     const scope = effects[i];
     const fn = effects[i + 1];
-    fn(scope);
+    fn(scope, scope);
   }
 }
 function runSignals(signals) {
@@ -1297,7 +1300,11 @@ function parseHTML(html2) {
 }
 function parseHTMLOrSingleNode(html2) {
   const content = parseHTML(html2);
-  return content.firstChild === content.lastChild ? content.firstChild || fallback : content;
+  if (!content.firstChild) return fallback;
+  return content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
+  // a single replaced node, in which case the walker can't replace
+  // the node itself.
+  content.firstChild.nodeType !== 8 ? content.firstChild : content;
 }
 
 // src/dom/dom.ts
@@ -1325,6 +1332,12 @@ function data(node, value2) {
     node.data = normalizedValue;
   }
 }
+function textContent(node, value2) {
+  const normalizedValue = normalizeString(value2);
+  if (node.textContent !== normalizedValue) {
+    node.textContent = normalizedValue;
+  }
+}
 function attrs(scope, nodeAccessor, nextAttrs) {
   const el = scope[nodeAccessor];
   for (const { name } of el.attributes) {

package/dist/debug/dom.mjs

@@ -284,6 +284,7 @@ var Render = class {
             delete this.___renders[this.___renderId];
           } else {
             registeredValues[resumes[i++]](
+              scopeLookup[resumeData],
               scopeLookup[resumeData]
             );
           }
@@ -358,15 +359,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);
     }
@@ -605,7 +607,7 @@ function runEffects(effects = pendingEffects) {
   for (let i = 0; i < effects.length; i += 2 /* Total */) {
     const scope = effects[i];
     const fn = effects[i + 1];
-    fn(scope);
+    fn(scope, scope);
   }
 }
 function runSignals(signals) {
@@ -1208,7 +1210,11 @@ function parseHTML(html2) {
 }
 function parseHTMLOrSingleNode(html2) {
   const content = parseHTML(html2);
-  return content.firstChild === content.lastChild ? content.firstChild || fallback : content;
+  if (!content.firstChild) return fallback;
+  return content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
+  // a single replaced node, in which case the walker can't replace
+  // the node itself.
+  content.firstChild.nodeType !== 8 ? content.firstChild : content;
 }
 
 // src/dom/dom.ts
@@ -1236,6 +1242,12 @@ function data(node, value2) {
     node.data = normalizedValue;
   }
 }
+function textContent(node, value2) {
+  const normalizedValue = normalizeString(value2);
+  if (node.textContent !== normalizedValue) {
+    node.textContent = normalizedValue;
+  }
+}
 function attrs(scope, nodeAccessor, nextAttrs) {
   const el = scope[nodeAccessor];
   for (const { name } of el.attributes) {
@@ -2072,5 +2084,6 @@ export {
   styleAttr,
   tagVarSignal,
   tagVarSignalChange,
+  textContent,
   value
 };

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);
@@ -1668,6 +1649,9 @@ var State2 = class {
   constructor($global2) {
     this.$global = $global2;
     this.$global = $global2;
+    if ($global2.cspNonce) {
+      this.nonceAttr = " " + escapeAttrValue($global2.cspNonce + "");
+    }
   }
   tagIndex = 0;
   scopeIndex = 0;
@@ -1678,6 +1662,7 @@ var State2 = class {
   hasReorderRuntime = false;
   hasWrittenResume = false;
   trailerHTML = "";
+  nonceAttr = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1851,8 +1836,7 @@ function prepareChunk(chunk) {
   const head = chunk.consume();
   const { boundary, effects } = head;
   const { state } = boundary;
-  const { $global: $global2, runtimePrefix, serializer } = state;
-  const nonceAttr = $global2.cspNonce ? " nonce=" + escapeAttrValue($global2.cspNonce + "") : "";
+  const { $global: $global2, runtimePrefix, serializer, nonceAttr } = state;
   let { html, scripts } = head;
   let hasWalk = false;
   head.effects = "";
@@ -1963,7 +1947,7 @@ function flushChunk(head, last) {
   let result = html;
   head.html = head.scripts = "";
   if (scripts) {
-    result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>";
+    result += "<script" + state.nonceAttr + ">" + scripts + "</script>";
   }
   if (__flush__) {
     $global2.__flush__ = void 0;
@@ -2053,10 +2037,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 +2051,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 +2089,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 +2187,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 +2210,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 +2427,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 +2708,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);
@@ -1595,6 +1573,9 @@ var State2 = class {
   constructor($global2) {
     this.$global = $global2;
     this.$global = $global2;
+    if ($global2.cspNonce) {
+      this.nonceAttr = " " + escapeAttrValue($global2.cspNonce + "");
+    }
   }
   tagIndex = 0;
   scopeIndex = 0;
@@ -1605,6 +1586,7 @@ var State2 = class {
   hasReorderRuntime = false;
   hasWrittenResume = false;
   trailerHTML = "";
+  nonceAttr = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1778,8 +1760,7 @@ function prepareChunk(chunk) {
   const head = chunk.consume();
   const { boundary, effects } = head;
   const { state } = boundary;
-  const { $global: $global2, runtimePrefix, serializer } = state;
-  const nonceAttr = $global2.cspNonce ? " nonce=" + escapeAttrValue($global2.cspNonce + "") : "";
+  const { $global: $global2, runtimePrefix, serializer, nonceAttr } = state;
   let { html, scripts } = head;
   let hasWalk = false;
   head.effects = "";
@@ -1890,7 +1871,7 @@ function flushChunk(head, last) {
   let result = html;
   head.html = head.scripts = "";
   if (scripts) {
-    result += ($global2.cspNonce ? "<script nonce=" + escapeAttrValue($global2.cspNonce + "") + ">" : "<script>") + scripts + "</script>";
+    result += "<script" + state.nonceAttr + ">" + scripts + "</script>";
   }
   if (__flush__) {
     $global2.__flush__ = void 0;
@@ -1980,10 +1961,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 +1975,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 +2013,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 +2111,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 +2134,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 +2351,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 +2631,11 @@ export {
   escapeStyle,
   escapeXML,
   forIn,
+  forInBy,
   forOf,
+  forOfBy,
   forTo,
+  forToBy,
   fork,
   getScopeById,
   markResumeCleanup,

package/dist/dom/dom.d.ts

@@ -5,6 +5,7 @@ export declare function setAttribute(element: Element, name: string, value: stri
 export declare function classAttr(element: Element, value: unknown): void;
 export declare function styleAttr(element: Element, value: unknown): void;
 export declare function data(node: Text | Comment, value: unknown): void;
+export declare function textContent(node: ParentNode, value: unknown): void;
 export declare function attrs(scope: Scope, nodeAccessor: Accessor, nextAttrs: Record<string, unknown>): void;
 export declare function partialAttrs(scope: Scope, nodeAccessor: Accessor, nextAttrs: Record<string, unknown>, skip: Record<string, 1>): void;
 export declare function attrsEvents(scope: Scope, nodeAccessor: Accessor): void;

package/dist/dom/parse-html.d.ts

@@ -1,5 +1,5 @@
 export declare function parseHTML(html: string): DocumentFragment;
-export declare function parseHTMLOrSingleNode(html: string): Node & {
+export declare function parseHTMLOrSingleNode(html: string): Text | (Node & {
     firstChild?: ChildNode;
     lastChild?: ChildNode;
-};
+});

package/dist/dom.d.ts

@@ -5,7 +5,7 @@ export { getAbortSignal, resetAbortSignal } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
 export { conditional, conditionalOnlyChild, inConditionalScope, inLoopScope, loopIn, loopOf, loopTo, } from "./dom/control-flow";
 export { controllable_detailsOrDialog_open, controllable_detailsOrDialog_open_effect, controllable_input_checked, controllable_input_checked_effect, controllable_input_checkedValue, controllable_input_checkedValue_effect, controllable_input_value, controllable_input_value_effect, controllable_select_value, controllable_select_value_effect, controllable_textarea_value, controllable_textarea_value_effect, } from "./dom/controllable";
-export { attr, attrs, attrsEvents, classAttr, data, html, lifecycle, partialAttrs, props, styleAttr, } from "./dom/dom";
+export { attr, attrs, attrsEvents, classAttr, data, html, lifecycle, partialAttrs, props, styleAttr, textContent, } from "./dom/dom";
 export { on } from "./dom/event";
 export { run } from "./dom/queue";
 export { createRenderer, createRendererWithOwner, dynamicTagAttrs, } from "./dom/renderer";

package/dist/dom.js

@@ -80,6 +80,7 @@ __export(dom_exports, {
   styleAttr: () => styleAttr,
   tagVarSignal: () => tagVarSignal,
   tagVarSignalChange: () => tagVarSignalChange,
+  textContent: () => textContent,
   value: () => value
 });
 module.exports = __toCommonJS(dom_exports);
@@ -254,6 +255,7 @@ var registeredValues = {}, Render = class {
                 cleanupOwnerId && (scope.d = scopes[cleanupOwnerId], onDestroy(scope));
               }
           } else i === len || typeof resumes[i] != "string" ? delete this.z[this.o] : registeredValues[resumes[i++]](
+            scopeLookup[resumeData],
             scopeLookup[resumeData]
           );
         }
@@ -299,11 +301,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));
@@ -444,7 +446,7 @@ function prepareEffects(fn) {
 function runEffects(effects = pendingEffects) {
   for (let i = 0; i < effects.length; i += 2 /* Total */) {
     let scope = effects[i], fn = effects[i + 1];
-    fn(scope);
+    fn(scope, scope);
   }
 }
 function runSignals(signals) {
@@ -814,7 +816,10 @@ function parseHTML(html2) {
 }
 function parseHTMLOrSingleNode(html2) {
   let content = parseHTML(html2);
-  return content.firstChild === content.lastChild ? content.firstChild || fallback : content;
+  return content.firstChild ? content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
+  // a single replaced node, in which case the walker can't replace
+  // the node itself.
+  content.firstChild.nodeType !== 8 ? content.firstChild : content : fallback;
 }
 
 // src/dom/dom.ts
@@ -834,6 +839,10 @@ function data(node, value2) {
   let normalizedValue = normalizeString(value2);
   node.data !== normalizedValue && (node.data = normalizedValue);
 }
+function textContent(node, value2) {
+  let normalizedValue = normalizeString(value2);
+  node.textContent !== normalizedValue && (node.textContent = normalizedValue);
+}
 function attrs(scope, nodeAccessor, nextAttrs) {
   let el = scope[nodeAccessor];
   for (let { name } of el.attributes)

package/dist/dom.mjs

@@ -168,6 +168,7 @@ var registeredValues = {}, Render = class {
                 cleanupOwnerId && (scope.d = scopes[cleanupOwnerId], onDestroy(scope));
               }
           } else i === len || typeof resumes[i] != "string" ? delete this.z[this.o] : registeredValues[resumes[i++]](
+            scopeLookup[resumeData],
             scopeLookup[resumeData]
           );
         }
@@ -213,11 +214,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));
@@ -358,7 +359,7 @@ function prepareEffects(fn) {
 function runEffects(effects = pendingEffects) {
   for (let i = 0; i < effects.length; i += 2 /* Total */) {
     let scope = effects[i], fn = effects[i + 1];
-    fn(scope);
+    fn(scope, scope);
   }
 }
 function runSignals(signals) {
@@ -728,7 +729,10 @@ function parseHTML(html2) {
 }
 function parseHTMLOrSingleNode(html2) {
   let content = parseHTML(html2);
-  return content.firstChild === content.lastChild ? content.firstChild || fallback : content;
+  return content.firstChild ? content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
+  // a single replaced node, in which case the walker can't replace
+  // the node itself.
+  content.firstChild.nodeType !== 8 ? content.firstChild : content : fallback;
 }
 
 // src/dom/dom.ts
@@ -748,6 +752,10 @@ function data(node, value2) {
   let normalizedValue = normalizeString(value2);
   node.data !== normalizedValue && (node.data = normalizedValue);
 }
+function textContent(node, value2) {
+  let normalizedValue = normalizeString(value2);
+  node.textContent !== normalizedValue && (node.textContent = normalizedValue);
+}
 function attrs(scope, nodeAccessor, nextAttrs) {
   let el = scope[nodeAccessor];
   for (let { name } of el.attributes)
@@ -1337,5 +1345,6 @@ export {
   styleAttr,
   tagVarSignal,
   tagVarSignalChange,
+  textContent,
   value
 };

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

@@ -57,6 +57,7 @@ export declare class State {
     hasReorderRuntime: boolean;
     hasWrittenResume: boolean;
     trailerHTML: string;
+    nonceAttr: string;
     serializer: Serializer;
     writeReorders: Chunk[] | null;
     scopes: Map<number, PartialScope>;

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);
@@ -1110,7 +1095,7 @@ function tryCatch(renderBody, renderCatch) {
 var State2 = class {
   constructor($global2) {
     this.$global = $global2;
-    this.$global = $global2;
+    this.$global = $global2, $global2.cspNonce && (this.nonceAttr = " " + escapeAttrValue($global2.cspNonce + ""));
   }
   tagIndex = 0;
   scopeIndex = 0;
@@ -1121,6 +1106,7 @@ var State2 = class {
   hasReorderRuntime = !1;
   hasWrittenResume = !1;
   trailerHTML = "";
+  nonceAttr = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1235,7 +1221,7 @@ var State2 = class {
   }
 };
 function prepareChunk(chunk) {
-  let head = chunk.consume(), { boundary, effects } = head, { state } = boundary, { $global: $global2, runtimePrefix, serializer } = state, nonceAttr = $global2.cspNonce ? " nonce=" + escapeAttrValue($global2.cspNonce + "") : "", { html, scripts } = head, hasWalk = !1;
+  let head = chunk.consume(), { boundary, effects } = head, { state } = boundary, { $global: $global2, runtimePrefix, serializer, nonceAttr } = state, { html, scripts } = head, hasWalk = !1;
   head.effects = "", state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(
     scripts,
     WALKER_RUNTIME_CODE + '("' + $global2.runtimeId + '")("' + $global2.renderId + '")'
@@ -1276,7 +1262,7 @@ function prepareChunk(chunk) {
 }
 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;
+  return head.html = head.scripts = "", scripts && (result += "<script" + state.nonceAttr + ">" + 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;
@@ -1335,47 +1321,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 +1438,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 +1452,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 +1591,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 +1786,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);
@@ -1040,7 +1022,7 @@ function tryCatch(renderBody, renderCatch) {
 var State2 = class {
   constructor($global2) {
     this.$global = $global2;
-    this.$global = $global2;
+    this.$global = $global2, $global2.cspNonce && (this.nonceAttr = " " + escapeAttrValue($global2.cspNonce + ""));
   }
   tagIndex = 0;
   scopeIndex = 0;
@@ -1051,6 +1033,7 @@ var State2 = class {
   hasReorderRuntime = !1;
   hasWrittenResume = !1;
   trailerHTML = "";
+  nonceAttr = "";
   serializer = new Serializer();
   writeReorders = null;
   scopes = /* @__PURE__ */ new Map();
@@ -1165,7 +1148,7 @@ var State2 = class {
   }
 };
 function prepareChunk(chunk) {
-  let head = chunk.consume(), { boundary, effects } = head, { state } = boundary, { $global: $global2, runtimePrefix, serializer } = state, nonceAttr = $global2.cspNonce ? " nonce=" + escapeAttrValue($global2.cspNonce + "") : "", { html, scripts } = head, hasWalk = !1;
+  let head = chunk.consume(), { boundary, effects } = head, { state } = boundary, { $global: $global2, runtimePrefix, serializer, nonceAttr } = state, { html, scripts } = head, hasWalk = !1;
   head.effects = "", state.needsMainRuntime && !state.hasMainRuntime && (state.hasMainRuntime = !0, scripts = concatScripts(
     scripts,
     WALKER_RUNTIME_CODE + '("' + $global2.runtimeId + '")("' + $global2.renderId + '")'
@@ -1206,7 +1189,7 @@ function prepareChunk(chunk) {
 }
 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;
+  return head.html = head.scripts = "", scripts && (result += "<script" + state.nonceAttr + ">" + 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;
@@ -1265,47 +1248,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 +1365,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 +1379,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 +1518,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 +1712,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.4",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",