diff --git a/.changeset/young-carrots-raise.md b/.changeset/young-carrots-raise.md
new file mode 100644
index 0000000000..1f0e0ffa9a
--- /dev/null
+++ b/.changeset/young-carrots-raise.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-tags": patch
+"@marko/runtime-tags": patch
+---
+
+Switch <for> tag output to use a shared runtime.
diff --git a/.sizes.json b/.sizes.json
index 5da9612b2c..3dad979ee1 100644
--- a/.sizes.json
+++ b/.sizes.json
@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 14362,
-        "brotli": 5569
+        "min": 14527,
+        "brotli": 5626
       }
     },
     {
@@ -48,27 +48,27 @@
         "brotli": 609
       },
       "runtime": {
-        "min": 7602,
-        "brotli": 3118
+        "min": 7680,
+        "brotli": 3142
       },
       "total": {
-        "min": 8761,
-        "brotli": 3727
+        "min": 8839,
+        "brotli": 3751
       }
     },
     {
       "name": "comments 💧",
       "user": {
         "min": 995,
-        "brotli": 533
+        "brotli": 542
       },
       "runtime": {
-        "min": 8584,
-        "brotli": 3537
+        "min": 8662,
+        "brotli": 3558
       },
       "total": {
-        "min": 9579,
-        "brotli": 4070
+        "min": 9657,
+        "brotli": 4100
       }
     }
   ]
diff --git a/.sizes/comments.csr/entry.js b/.sizes/comments.csr/entry.js
index bf3b4fcc65..4e389164fe 100644
--- a/.sizes/comments.csr/entry.js
+++ b/.sizes/comments.csr/entry.js
@@ -16,7 +16,7 @@ import {
   l as b,
   k as f,
   m as p,
-} from "./runtime-BjaWNi13.js";
+} from "./runtime-BVcnvrLh.js";
 const $ = "<ul></ul>",
   h = d(
     2,
diff --git a/.sizes/comments.ssr/entry.js b/.sizes/comments.ssr/entry.js
index f76428734c..4957b3d1a6 100644
--- a/.sizes/comments.ssr/entry.js
+++ b/.sizes/comments.ssr/entry.js
@@ -16,7 +16,7 @@ import {
   k as v,
   l as b,
   m as f,
-} from "./runtime-D1IlB4mV.js";
+} from "./runtime--OdgW4PD.js";
 const h = e(
     2,
     (s) => {
diff --git a/.sizes/dom.js b/.sizes/dom.js
index dc14512f9a..8c8602b76b 100644
--- a/.sizes/dom.js
+++ b/.sizes/dom.js
@@ -1,28 +1,42 @@
-function e(e) {
-  return { u: 1, $global: e };
+function e(e, t) {
+  for (let n in e) t(n, e[n]);
+}
+function t(e, t) {
+  if (e) {
+    let n = 0;
+    for (let r of e) t(r, n++);
+  }
 }
-var t = e({});
-function n(e) {
-  return (t.a = t.b = e), t;
+function n(e, t, n, r) {
+  let i = t || 0,
+    o = n || 1;
+  for (let t = (e - i) / o, n = 0; n <= t; n++) r(i + n * o);
 }
 function r(e) {
-  i(e), e.d?.h?.delete(e);
+  return { u: 1, $global: e };
+}
+var i = r({});
+function o(e) {
+  return (i.a = i.b = e), i;
+}
+function l(e) {
+  f(e), e.d?.h?.delete(e);
   let t = e.x?.c;
   if (t) for (let n of t) n.j?.(e);
   return e;
 }
-function i(e) {
+function f(e) {
   let t = e.h;
-  if (t) for (let e of t) i(e);
+  if (t) for (let e of t) f(e);
   let n = e.l;
   if (n) for (let e of n.values()) e.abort();
 }
-function o(e) {
+function u(e) {
   let t = e.d;
   for (; t && !t.h?.has(e); ) (t.h ||= new Set()).add(e), (t = (e = t).d);
 }
-function l(e) {
-  r(e);
+function a(e) {
+  l(e);
   let t = e.a,
     n = e.b.nextSibling;
   for (; t !== n; ) {
@@ -30,7 +44,7 @@ function l(e) {
     t.remove(), (t = e);
   }
 }
-function f(e, t, n) {
+function c(e, t, n) {
   let r = e.a,
     i = e.b.nextSibling;
   for (; r !== i; ) {
@@ -38,28 +52,28 @@ function f(e, t, n) {
     t.insertBefore(r, n), (r = e);
   }
 }
-function u(e, t) {
+function s(e, t) {
   let n = e.l;
   if (n) {
     let e = n.get(t);
     e && (e.abort(), n.delete(t));
   }
 }
-function a(e, t) {
+function d(e, t) {
   let n = (e.l ||= new Map()),
     r = n.get(t);
-  return r || (o(e), n.set(t, (r = new AbortController()))), r.signal;
+  return r || (u(e), n.set(t, (r = new AbortController()))), r.signal;
 }
-function c(e, t) {
+function g(e, t) {
   return t ? e : "";
 }
-var s = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
-function d(e, t) {
+var p = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
+function h(e, t) {
   return t || 0 === t
-    ? `${e}:${"number" == typeof t && t && !s.test(e) ? t + "px" : t}`
+    ? `${e}:${"number" == typeof t && t && !p.test(e) ? t + "px" : t}`
     : "";
 }
-function g(e, t, n) {
+function b(e, t, n) {
   switch (typeof e) {
     case "string":
       return e;
@@ -69,7 +83,7 @@ function g(e, t, n) {
           i = "";
         if (Array.isArray(e))
           for (let o of e) {
-            let e = g(o, t, n);
+            let e = b(o, t, n);
             "" !== e && ((r += i + e), (i = t));
           }
         else
@@ -82,41 +96,41 @@ function g(e, t, n) {
   }
   return "";
 }
-function h(e) {
+function v(e) {
   if (e) return e.renderBody || e.default || e;
 }
-var p = 2147483647;
-var b = new Map(),
-  v = new WeakMap(),
-  w = { capture: !0 };
-function y(e, t, n) {
-  let r = b.get(t);
-  r || b.set(t, (r = new WeakMap())),
+var y = 2147483647;
+var w = new Map(),
+  m = new WeakMap(),
+  C = { capture: !0 };
+function x(e, t, n) {
+  let r = w.get(t);
+  r || w.set(t, (r = new WeakMap())),
     r.has(e) ||
       (function (e, t) {
         let n = e.getRootNode(),
-          r = v.get(n);
-        r || v.set(n, (r = new Set())),
-          r.has(t) || (r.add(t), n.addEventListener(t, m, w));
+          r = m.get(n);
+        r || m.set(n, (r = new Set())),
+          r.has(t) || (r.add(t), n.addEventListener(t, N, C));
       })(e, t),
     r.set(e, n || void 0);
 }
-function m(e) {
+function N(e) {
   let t = e.target;
   if (t) {
-    let n = b.get(e.type);
+    let n = w.get(e.type);
     if ((n.get(t)?.(e, t), e.bubbles))
       for (; (t = t.parentElement) && !e.cancelBubble; ) n.get(t)?.(e, t);
   }
 }
-var C = document.createTextNode(""),
-  x = new Range();
-function N(e) {
-  return x.createContextualFragment(e);
+var S = document.createTextNode(""),
+  k = new Range();
+function M(e) {
+  return k.createContextualFragment(e);
 }
-var S = /^on[A-Z-]/;
-function k(e, t, n) {
-  M(
+var $ = /^on[A-Z-]/;
+function A(e, t, n) {
+  I(
     e,
     t,
     (function (e) {
@@ -124,34 +138,34 @@ function k(e, t, n) {
     })(n),
   );
 }
-function M(e, t, n) {
+function I(e, t, n) {
   void 0 === n ? e.removeAttribute(t) : e.setAttribute(t, n);
 }
-function $(e, t) {
-  M(
+function B(e, t) {
+  I(
     e,
     "class",
     (function (e) {
-      return g(e, " ", c);
+      return b(e, " ", g);
     })(t) || void 0,
   );
 }
-function A(e, t) {
-  M(
+function E(e, t) {
+  I(
     e,
     "style",
     (function (e) {
-      return g(e, ";", d);
+      return b(e, ";", h);
     })(t) || void 0,
   );
 }
-function I(e, t) {
+function _(e, t) {
   let n = (function (e) {
     return e || 0 === e ? e + "" : "‍";
   })(t);
   e.data !== n && (e.data = n);
 }
-function B(e, t, n) {
+function j(e, t, n) {
   let r,
     i = e[t];
   for (let { name: e } of i.attributes) (n && e in n) || i.removeAttribute(e);
@@ -159,33 +173,33 @@ function B(e, t, n) {
     let t = n[e];
     switch (e) {
       case "class":
-        $(i, t);
+        B(i, t);
         break;
       case "style":
-        A(i, t);
+        E(i, t);
         break;
       case "renderBody":
         break;
       default:
-        S.test(e)
+        $.test(e)
           ? ((r ||= {})["-" === e[2] ? e.slice(3) : e.slice(2).toLowerCase()] =
               t)
-          : k(i, e, t);
+          : A(i, e, t);
     }
   }
   e[t + "~"] = r;
 }
-function E(e, t) {
+function T(e, t) {
   let n = e[t],
     r = e[t + "~"];
-  for (let e in r) y(n, e, r[e]);
+  for (let e in r) x(n, e, r[e]);
 }
-function _(e, t, n) {
+function O(e, t, n) {
   let r = e[n],
     i = e[n + "-"] || r,
     o = r.parentNode,
     l = i.nextSibling,
-    f = N(t || 0 === t ? t + "" : "<!>");
+    f = M(t || 0 === t ? t + "" : "<!>");
   (e[n] = f.firstChild), (e[n + "-"] = f.lastChild), o.insertBefore(f, r);
   let u = r;
   for (; u !== l; ) {
@@ -193,7 +207,7 @@ function _(e, t, n) {
     u.remove(), (u = e);
   }
 }
-function j(e, t, n) {
+function q(e, t, n) {
   let r = e[n],
     i = e[n + "-"],
     o = e[t];
@@ -201,87 +215,87 @@ function j(e, t, n) {
   for (let e in r) o[e] = r[e];
   e[n + "-"] = r;
 }
-function T(e, t, n) {
+function R(e, t, n) {
   let r = e[t];
   r
     ? (Object.assign(r, n), r.onUpdate?.())
     : ((e[t] = n),
       n.onMount?.(),
-      (a(e, "-" + t).onabort = () => n.onDestroy?.()));
+      (d(e, "-" + t).onabort = () => n.onDestroy?.()));
 }
-var O = {},
-  q = {},
-  R = {};
-function D(e, t) {
+var D = {},
+  P = {},
+  W = {};
+function z(e, t) {
   let n = e + "#";
   return (e, r) => {
-    r !== O && void 0 === e[n] && t(e, r);
+    r !== D && void 0 === e[n] && t(e, r);
   };
 }
-function P(e, t) {
+function F(e, t) {
   return (e, n) => {
     t(e, n);
   };
 }
-function W(e, t, n) {
+function L(e, t, n) {
   let r = e + "#",
     i = n && ((e, t) => (i = n())(e, t));
   return (n, o) => {
-    if (o === O) 1 === (n[r] = (n[r] ?? 0) + 1) && i?.(n, O);
-    else if (o !== R) {
+    if (o === D) 1 === (n[r] = (n[r] ?? 0) + 1) && i?.(n, D);
+    else if (o !== W) {
       let l = void 0 !== n[r];
       1 === (n[r] ||= 1) &&
-        (o === q || (l && n[e] === o)
-          ? i?.(n, q)
-          : ((n[e] = o), t?.(n, o), i?.(n, R))),
+        (o === P || (l && n[e] === o)
+          ? i?.(n, P)
+          : ((n[e] = o), t?.(n, o), i?.(n, W))),
         n[r]--;
     }
   };
 }
-var z = 0;
-function F(e, t, n) {
-  let r = "?" + z++,
+var J = 0;
+function U(e, t, n) {
+  let r = "?" + J++,
     i = r + "#",
     o = n && ((e, t) => (o = n())(e, t));
   return (n, l) => {
-    l === O
-      ? 1 === (n[i] = (n[i] ?? 0) + 1) && o?.(n, O)
+    l === D
+      ? 1 === (n[i] = (n[i] ?? 0) + 1) && o?.(n, D)
       : void 0 === n[i]
         ? ((n[i] = e - 1), (n[r] = !0))
         : 0 == --n[i]
-          ? l === R || n[r]
-            ? ((n[r] = !1), t(n, 0), o?.(n, R))
-            : o?.(n, q)
-          : (n[r] ||= l === R);
+          ? l === W || n[r]
+            ? ((n[r] = !1), t(n, 0), o?.(n, W))
+            : o?.(n, P)
+          : (n[r] ||= l === W);
   };
 }
-var L = (e) => e._;
-function J(e, t, n = L, r) {
-  let i = "?" + z++,
+var Z = (e) => e._;
+function G(e, t, n = Z, r) {
+  let i = "?" + J++,
     o = i + 1,
     l = "function" == typeof e ? e : () => e,
     f = r && ((e, t) => (f = r())(e, t));
   return (e, r) => {
-    if (r === O) 1 === (e[o] = (e[o] ?? 0) + 1) && f?.(e, O);
+    if (r === D) 1 === (e[o] = (e[o] ?? 0) + 1) && f?.(e, D);
     else {
       let u, a;
       if (void 0 === e[o]) {
         (u = n(e)), (a = l(e));
         let t = u[a + "#"],
           i = void 0 === t ? !u.u : 0 === t;
-        (e[o] = i ? 1 : 2), (r = R);
+        (e[o] = i ? 1 : 2), (r = W);
       }
       0 == --e[o]
-        ? r === R || e[i]
-          ? ((e[i] = !1), (u ||= n(e)), (a ||= l(e)), t?.(e, u[a]), f?.(e, R))
-          : f?.(e, q)
-        : (e[i] ||= r === R);
+        ? r === W || e[i]
+          ? ((e[i] = !1), (u ||= n(e)), (a ||= l(e)), t?.(e, u[a]), f?.(e, W))
+          : f?.(e, P)
+        : (e[i] ||= r === W);
     }
   };
 }
-function U(e, t, n = L, r) {
+function H(e, t, n = Z, r) {
   let i = "function" == typeof e ? e : () => e,
-    o = J(i, t, n, r),
+    o = G(i, t, n, r),
     l = new WeakMap();
   return (
     (o.g = (e) => {
@@ -298,7 +312,7 @@ function U(e, t, n = L, r) {
     o
   );
 }
-function Z(e, t) {
+function K(e, t) {
   let n = (n, r) => {
     let i = n[t];
     for (let t of e) t(i, r);
@@ -315,117 +329,117 @@ function Z(e, t) {
     n
   );
 }
-function G(e) {
+function Q(e) {
   let t = e + "*";
   return (e, n) => {
     let r = e[t];
     if (r) for (let e of r) e(n);
   };
 }
-function H(e, t, n) {
+function V(e, t, n) {
   e[t]["/"] = (t) => n(e, t);
 }
-var K = (e, t) => e["/"]?.(t),
-  Q = (e, t, n) => {
+var X = (e, t) => e["/"]?.(t),
+  Y = (e, t, n) => {
     let r = e?.c;
     if (r) for (let e of r) e(t, n);
   },
-  V = new WeakMap();
-function X({ $global: e }) {
-  let t = V.get(e) || 0;
-  return V.set(e, t + 1), "c" + e.runtimeId + e.renderId + t.toString(36);
+  ee = new WeakMap();
+function te({ $global: e }) {
+  let t = ee.get(e) || 0;
+  return ee.set(e, t + 1), "c" + e.runtimeId + e.renderId + t.toString(36);
 }
-function Y(e, t) {
+function ne(e, t) {
   return (n, r) => {
     t(n[e], r);
   };
 }
-function ee(e) {
+function re(e) {
   return (t, n) => {
     for (let r of e) r(t, n);
   };
 }
-var te = document.createTreeWalker(document);
-function ne(e) {
+var ie = document.createTreeWalker(document);
+function oe(e) {
   let t = e.length;
   for (; e.charCodeAt(--t) > 47; );
   return e.slice(0, t + 1);
 }
-function re(e, t, n) {
-  (te.currentNode = e),
-    ie(t, n, n, 0),
-    (te.currentNode = document.documentElement);
+function le(e, t, n) {
+  (ie.currentNode = e),
+    fe(t, n, n, 0),
+    (ie.currentNode = document.documentElement);
 }
-function ie(t, n, r, i) {
+function fe(e, t, n, i) {
   let o,
     l = 0,
     f = 0,
     u = 0;
-  for (r !== n && (n.d = r); (o = t.charCodeAt(i++)); )
+  for (n !== t && (t.d = n); (o = e.charCodeAt(i++)); )
     if (((f = l), (l = 0), o >= 117)) l = 10 * f + o - 117;
     else if (o >= 107) {
-      for (o = 10 * f + o - 107; o--; ) te.parentNode();
-      te.nextSibling();
-    } else if (o >= 97) for (o = 10 * f + o - 97; o--; ) te.nextSibling();
-    else if (o >= 67) for (o = 20 * f + o - 67; o--; ) te.nextNode();
-    else if (47 === o) i = ie(t, (n[u++] = e(n.$global)), r, i);
+      for (o = 10 * f + o - 107; o--; ) ie.parentNode();
+      ie.nextSibling();
+    } else if (o >= 97) for (o = 10 * f + o - 97; o--; ) ie.nextSibling();
+    else if (o >= 67) for (o = 20 * f + o - 67; o--; ) ie.nextNode();
+    else if (47 === o) i = fe(e, (t[u++] = r(t.$global)), n, i);
     else {
       if (38 === o) return i;
-      if (32 === o) n[u++] = te.currentNode;
+      if (32 === o) t[u++] = ie.currentNode;
       else {
-        let e = (n[u++] = document.createTextNode("")),
-          t = te.currentNode;
-        t.parentNode.replaceChild(e, t), (te.currentNode = e);
+        let e = (t[u++] = document.createTextNode("")),
+          n = ie.currentNode;
+        n.parentNode.replaceChild(e, n), (ie.currentNode = e);
       }
     }
   return i;
 }
-function oe(t, n, r) {
-  let i = e(n);
-  if (((i._ = i.d = t.y || r), (i.x = t), fe(t, i), t.c))
-    for (let e of t.c) e.g?.(i);
+function ue(e, t, n) {
+  let i = r(t);
+  if (((i._ = i.d = e.y || n), (i.x = e), ce(e, i), e.c))
+    for (let t of e.c) t.g?.(i);
   return i;
 }
-function le(t, n, r) {
-  if ("string" != typeof t) return oe(t, n, r);
-  let i = e(n);
-  return (i._ = i.d = r), (i[0] = i.a = i.b = document.createElement(t)), i;
+function ae(e, t, n) {
+  if ("string" != typeof e) return ue(e, t, n);
+  let i = r(t);
+  return (i._ = i.d = n), (i[0] = i.a = i.b = document.createElement(e)), i;
 }
-function fe(e, t) {
+function ce(e, t) {
   let n = e.k();
   return (
-    re(11 === n.nodeType ? n.firstChild : n, e.z, t),
+    le(11 === n.nodeType ? n.firstChild : n, e.z, t),
     (t.a = 11 === n.nodeType ? n.firstChild : n),
     (t.b = 11 === n.nodeType ? n.lastChild : n),
     e.m && e.m(t),
     n
   );
 }
-function ue(e, t, n) {
+function se(e, t, n) {
   return (r, i) => {
     let o = r[e + "("];
-    if (!o || i === R) return;
+    if (!o || i === W) return;
     let l = r[e + "!"];
-    if (i === O || i === q) return o.e?.(l, i);
+    if (i === D || i === P) return o.e?.(l, i);
     let f = t?.(r);
-    if ("string" == typeof o) B(l, 0, i()), pe(l, 0, f);
+    if ("string" == typeof o) j(l, 0, i()), ye(l, 0, f);
     else if (o.e) {
       let e = i();
       o.e(l, n ? e : [f ? { ...e, renderBody: f } : e]);
     }
   };
 }
-function ae(e, t, n, r, i = 0, o) {
+function de(e, t, n, r, i = 0, o) {
   let l,
     f,
     u = {},
-    a = t ? ne(t) : " ";
+    a = t ? oe(t) : " ";
   return (t) => ({
     n: u,
     A: e,
     z: a,
     m: n,
-    k: se,
+    k: pe,
     y: t,
     B: i,
     C: void 0,
@@ -437,44 +451,44 @@ function ae(e, t, n, r, i = 0, o) {
     },
   });
 }
-function ce(e, t, n, r, i, o) {
-  return ae(e, t, n, r, i, o)();
+function ge(e, t, n, r, i, o) {
+  return de(e, t, n, r, i, o)();
 }
-function se() {
+function pe() {
   return (this.C ||= (function (e) {
-    let t = N(e);
-    return t.firstChild === t.lastChild ? t.firstChild || C : t;
+    let t = M(e);
+    return t.firstChild === t.lastChild ? t.firstChild || S : t;
   })(this.A)).cloneNode(!0);
 }
-var de = function (e, t, r) {
-  let i = e + "(",
-    o = e + "!",
-    u = r && ((e, t) => (u = r())(e, t));
-  return (r, a) => {
-    if (a === R) return;
-    let c = r[i],
-      s = a;
-    if (a !== O && a !== q) {
-      let o = h(a);
-      $e(o, c)
-        ? ((c = r[i] = o),
-          (function (e, t, r) {
-            let i,
-              o = e[t + "!"];
-            r
-              ? ((i = e[t + "!"] = le(r, e.$global, e)), (o = o || n(e[t])))
-              : ((i = n(e[t])), (e[t + "!"] = void 0)),
-              f(i, o.a.parentNode, o.a),
-              l(o);
-          })(r, e, o),
-          t?.(r),
-          (s = R))
-        : (s = q);
+var he = function (e, t, n) {
+  let r = e + "(",
+    i = e + "!",
+    l = n && ((e, t) => (l = n())(e, t));
+  return (n, f) => {
+    if (f === W) return;
+    let u = n[r],
+      s = f;
+    if (f !== D && f !== P) {
+      let i = v(f);
+      Be(i, u)
+        ? ((u = n[r] = i),
+          (function (e, t, n) {
+            let r,
+              i = e[t + "!"];
+            n
+              ? ((r = e[t + "!"] = ae(n, e.$global, e)), (i = i || o(e[t])))
+              : ((r = o(e[t])), (e[t + "!"] = void 0)),
+              c(r, i.a.parentNode, i.a),
+              a(i);
+          })(n, e, i),
+          t?.(n),
+          (s = W))
+        : (s = P);
     }
-    u?.(r, s), Q(c, r[o], s);
+    l?.(n, s), Y(u, n[i], s);
   };
 };
-function ge(e, t) {
+function be(e, t) {
   let n = t + "!",
     r = t + "(";
   return (t, i) => {
@@ -485,165 +499,155 @@ function ge(e, t) {
     }
   };
 }
-var he = function (e, t, n) {
+var ve = function (e, t, n) {
   let r = e + "(",
     i = e + "!",
     o = n && ((e, t) => (o = n())(e, t));
   return (n, l) => {
-    if (l === R) return;
+    if (l === W) return;
     let f = n[r],
       u = l;
-    if (l !== O && l !== q) {
-      let i = h(l);
-      $e(i, f) ? ((f = n[r] = i), pe(n, e, i), t?.(n), (u = R)) : (u = q);
+    if (l !== D && l !== P) {
+      let i = v(l);
+      Be(i, f) ? ((f = n[r] = i), ye(n, e, i), t?.(n), (u = W)) : (u = P);
     }
-    o?.(n, u), Q(f, n[i], u);
+    o?.(n, u), Y(f, n[i], u);
   };
 };
-function pe(e, t, n) {
-  let i = e[t + "!"],
-    o = e[t];
-  if (((o.textContent = ""), n)) {
-    f((e[t + "!"] = le(n, e.$global, e)), o, null);
+function ye(e, t, n) {
+  let r = e[t + "!"],
+    i = e[t];
+  if (((i.textContent = ""), n)) {
+    c((e[t + "!"] = ae(n, e.$global, e)), i, null);
   }
-  i && r(i);
-}
-var be = new Map([[Symbol(), n(void 0)]]),
-  ve = [n(void 0)],
-  we = new Map(),
-  ye = [];
-function me(e, t) {
-  return Ne(e, t, (e, t) => {
-    let [n, r = ke] = e,
-      i = 0;
-    for (let e of n) t(r(e, i), [e, i, n]), i++;
-  });
-}
-function Ce(e, t) {
-  return Ne(e, t, (e, t) => {
-    let [n, r = Me] = e;
-    for (let e in n) {
-      let i = n[e];
-      t(r(e, i), [e, i, n]);
-    }
+  r && l(r);
+}
+var we = new Map([[Symbol(), o(void 0)]]),
+  me = [o(void 0)],
+  Ce = new Map(),
+  xe = [];
+function Ne(e, n) {
+  return Me(e, n, ([e, n = Ae], r) => {
+    t(
+      e,
+      "string" == typeof n
+        ? (e, t) => r(e[n], [e, t])
+        : (e, t) => r(n(e, t), [e, t]),
+    );
   });
 }
-function xe(e, t) {
-  return Ne(e, t, (e, t) => {
-    let [n, r = 0, i = 1, o = Me] = e,
-      l = (n - r) / i;
-    for (let e = 0; e <= l; e++) {
-      let n = r + e * i;
-      t(o(n), [n]);
-    }
-  });
+function Se(t, n) {
+  return Me(t, n, ([t, n = Ie], r) => e(t, (e, t) => r(n(e, t), [e, t])));
 }
-function Ne(e, t, i) {
-  let o = e + "!",
-    u = t.c,
-    a = t.e;
-  return (c, s) => {
-    if (s === R) return;
-    if (s === O || s === q) {
-      let t = c[o] ?? c[e + "("]?.values() ?? [];
-      if (t !== ve)
+function ke(e, t) {
+  return Me(e, t, ([e, t, r, i = Ie], o) => n(e, t, r, (e) => o(i(e), [e])));
+}
+function Me(e, t, n) {
+  let r = e + "!",
+    i = t.c,
+    f = t.e;
+  return (u, s) => {
+    if (s === W) return;
+    if (s === D || s === P) {
+      let t = u[r] ?? u[e + "("]?.values() ?? [];
+      if (t !== me)
         for (let e of t) {
-          a?.(e, s);
-          for (let t of u) t(e, s);
+          f?.(e, s);
+          for (let t of i) t(e, s);
         }
       return;
     }
     let d,
       g,
+      p,
       h,
-      b,
-      v = c[e],
-      w = 8 === v.nodeType || 3 === v.nodeType,
-      y = c[e + "("] || (w ? be : we),
-      m = c[e + "!"] || Array.from(y.values()),
+      b = u[e],
+      v = 8 === b.nodeType || 3 === b.nodeType,
+      w = u[e + "("] || (v ? we : Ce),
+      m = u[e + "!"] || Array.from(w.values()),
       C = !0;
     if (
-      (i(s, (e, n) => {
-        let r = y.get(e),
-          i = q;
-        if ((r || ((r = oe(t, c.$global, c)), (i = R)), a && a(r, n), u))
-          for (let e of u) e(r, i);
+      (n(s, (e, n) => {
+        let r = w.get(e),
+          o = P;
+        if ((r || ((r = ue(t, u.$global, u)), (o = W)), f && f(r, n), i))
+          for (let e of i) e(r, o);
         d ? (d.set(e, r), g.push(r)) : ((d = new Map([[e, r]])), (g = [r]));
       }),
       !d)
     )
-      if (w) (d = be), (g = ve), n(v);
+      if (v) (d = we), (g = me), o(b);
       else {
-        if (t.B) for (let e = 0; e < m.length; e++) r(m[e]);
-        (v.textContent = ""), (d = we), (g = ye), (C = !1);
+        if (t.B) for (let e = 0; e < m.length; e++) l(m[e]);
+        (b.textContent = ""), (d = Ce), (g = xe), (C = !1);
       }
     if (C) {
-      if (w) {
-        y === be && n(v);
+      if (v) {
+        w === we && o(b);
         let e = m[m.length - 1];
-        (h = e.b.nextSibling), (b = e.a.parentNode);
-      } else (h = null), (b = v);
+        (p = e.b.nextSibling), (h = e.a.parentNode);
+      } else (p = null), (h = b);
       !(function (e, t, n, r) {
         let i,
           o,
+          l,
+          f,
           u,
-          a,
-          c,
           s,
           d = 0,
           g = 0,
-          h = t.length - 1,
-          b = n.length - 1,
-          v = t[d],
-          w = n[g],
-          y = t[h],
-          m = n[b];
+          p = t.length - 1,
+          h = n.length - 1,
+          b = t[d],
+          v = n[g],
+          w = t[p],
+          m = n[h];
         e: {
-          for (; v === w; ) {
-            if ((++d, ++g, d > h || g > b)) break e;
-            (v = t[d]), (w = n[g]);
+          for (; b === v; ) {
+            if ((++d, ++g, d > p || g > h)) break e;
+            (b = t[d]), (v = n[g]);
           }
-          for (; y === m; ) {
-            if ((--h, --b, d > h || g > b)) break e;
-            (y = t[h]), (m = n[b]);
+          for (; w === m; ) {
+            if ((--p, --h, d > p || g > h)) break e;
+            (w = t[p]), (m = n[h]);
           }
         }
-        if (d > h) {
-          if (g <= b) {
-            (u = b + 1), (a = u < n.length ? n[u].a : r);
+        if (d > p) {
+          if (g <= h) {
+            (l = h + 1), (f = l < n.length ? n[l].a : r);
             do {
-              f(n[g++], e, a);
-            } while (g <= b);
+              c(n[g++], e, f);
+            } while (g <= h);
           }
-        } else if (g > b)
+        } else if (g > h)
           do {
-            l(t[d++]);
-          } while (d <= h);
+            a(t[d++]);
+          } while (d <= p);
         else {
-          let v = h - d + 1,
-            w = b - g + 1,
-            y = t,
-            m = new Array(w);
-          for (i = 0; i < w; ++i) m[i] = -1;
+          let b = p - d + 1,
+            v = h - g + 1,
+            w = t,
+            m = new Array(v);
+          for (i = 0; i < v; ++i) m[i] = -1;
           let C = 0,
             x = 0,
             N = new Map();
-          for (o = g; o <= b; ++o) N.set(n[o], o);
-          for (i = d; i <= h && x < w; ++i)
-            (c = t[i]),
-              (o = N.get(c)),
+          for (o = g; o <= h; ++o) N.set(n[o], o);
+          for (i = d; i <= p && x < v; ++i)
+            (u = t[i]),
+              (o = N.get(u)),
               void 0 !== o &&
-                ((C = C > o ? p : o),
+                ((C = C > o ? y : o),
                 ++x,
                 (s = n[o]),
                 (m[o - g] = i),
-                (y[i] = null));
-          if (v === t.length && 0 === x) {
-            for (; g < w; ++g) f(n[g], e, r);
-            for (; d < v; ++d) l(t[d]);
+                (w[i] = null));
+          if (b === t.length && 0 === x) {
+            for (; g < v; ++g) c(n[g], e, r);
+            for (; d < b; ++d) a(t[d]);
           } else {
-            for (i = v - x; i > 0; ) (c = y[d++]), null !== c && (l(c), i--);
-            if (C === p) {
+            for (i = b - x; i > 0; ) (u = w[d++]), null !== u && (a(u), i--);
+            if (C === y) {
               let t = (function (e) {
                 let t,
                   n,
@@ -666,111 +670,111 @@ function Ne(e, t, i) {
                   (i[t] = n), (n = r[n]);
                 return i;
               })(m);
-              for (o = t.length - 1, u = n.length, i = w - 1; i >= 0; --i)
+              for (o = t.length - 1, l = n.length, i = v - 1; i >= 0; --i)
                 -1 === m[i] || o < 0 || i !== t[o]
                   ? ((C = i + g),
                     (s = n[C++]),
-                    (a = C < u ? n[C].a : r),
-                    f(s, e, a))
+                    (f = C < l ? n[C].a : r),
+                    c(s, e, f))
                   : --o;
-            } else if (x !== w)
-              for (u = n.length, i = w - 1; i >= 0; --i)
+            } else if (x !== v)
+              for (l = n.length, i = v - 1; i >= 0; --i)
                 -1 === m[i] &&
                   ((C = i + g),
                   (s = n[C++]),
-                  (a = C < u ? n[C].a : r),
-                  f(s, e, a));
+                  (f = C < l ? n[C].a : r),
+                  c(s, e, f));
           }
         }
-      })(b, m, g, h);
+      })(h, m, g, p);
     }
-    (c[e + "("] = d), (c[e + "!"] = g);
+    (u[e + "("] = d), (u[e + "!"] = g);
   };
 }
-function Se(e, t) {
+function $e(e, t) {
   let n = t + "!";
   return (r, i) => {
     let o = r[n] ?? r[t + "("]?.values() ?? [];
-    if (o !== ve) for (let t of o) e(t, i);
+    if (o !== me) for (let t of o) e(t, i);
   };
 }
-function ke(e, t) {
+function Ae(e, t) {
   return t;
 }
-function Me(e) {
+function Ie(e) {
   return e;
 }
-function $e(e, t) {
+function Be(e, t) {
   return e !== t && (e?.n || 0) !== t?.n;
 }
-var Ae,
-  Ie = (() => {
+var Ee,
+  _e = (() => {
     let { port1: e, port2: t } = new MessageChannel();
     return (
       (e.onmessage = () => {
-        (Ae = !1), Re();
+        (Ee = !1), We();
       }),
       t
     );
   })();
-function Be() {
-  Re(), requestAnimationFrame(Ee);
+function je() {
+  We(), requestAnimationFrame(Te);
 }
-function Ee() {
-  Ie.postMessage(0);
+function Te() {
+  _e.postMessage(0);
 }
-var _e = [],
-  je = [];
-function Te(e, t, n, r) {
-  return n ? (n(r), r) : Oe(e, t, r);
+var Oe = [],
+  qe = [];
+function Re(e, t, n, r) {
+  return n ? (n(r), r) : De(e, t, r);
 }
-function Oe(e, t, n) {
-  return Ae || ((Ae = !0), queueMicrotask(Be)), t(e, O), _e.push(e, t, n), n;
+function De(e, t, n) {
+  return Ee || ((Ee = !0), queueMicrotask(je)), t(e, D), Oe.push(e, t, n), n;
 }
-function qe(e, t) {
-  je.push(e, t);
+function Pe(e, t) {
+  qe.push(e, t);
 }
-function Re() {
+function We() {
   try {
-    We();
+    Le();
   } finally {
-    _e = [];
+    Oe = [];
   }
   try {
-    Pe();
+    Fe();
   } finally {
-    je = [];
+    qe = [];
   }
 }
-function De(e) {
-  let t = _e,
-    n = je,
-    r = (je = []);
-  _e = [];
+function ze(e) {
+  let t = Oe,
+    n = qe,
+    r = (qe = []);
+  Oe = [];
   try {
-    e(), We();
+    e(), Le();
   } finally {
-    (_e = t), (je = n);
+    (Oe = t), (qe = n);
   }
   return r;
 }
-function Pe(e = je) {
+function Fe(e = qe) {
   for (let t = 0; t < e.length; t += 2) {
     let n = e[t];
     (0, e[t + 1])(n);
   }
 }
-function We() {
-  for (let e = 0; e < _e.length; e += 3) {
-    let t = _e[e + 0];
-    (0, _e[e + 1])(t, _e[e + 2]);
+function Le() {
+  for (let e = 0; e < Oe.length; e += 3) {
+    let t = Oe[e + 0];
+    (0, Oe[e + 1])(t, Oe[e + 2]);
   }
 }
-var ze = {},
-  Fe = class {
+var Je = {},
+  Ue = class {
     o = [];
     p = {};
-    D = { _: ze };
+    D = { _: Je };
     constructor(e, t, n) {
       (this.E = e), (this.F = t), (this.q = n), (this.s = e[n]), this.t();
     }
@@ -828,45 +832,45 @@ var ze = {},
           }
         }
       }
-      let l = e.r;
-      if (l) {
+      let o = e.r;
+      if (o) {
         e.r = [];
-        let r = l.length,
-          f = 0;
-        for (; f < r; ) {
-          let e = l[f++];
+        let r = o.length,
+          l = 0;
+        for (; l < r; ) {
+          let e = o[l++];
           if ("function" == typeof e) {
             let r = e(t),
-              { $global: l } = n;
-            l ||
-              ((n.$global = l = r.$ || {}),
-              (l.runtimeId = this.F),
-              (l.renderId = this.q));
+              { $global: o } = n;
+            o ||
+              ((n.$global = o = r.$ || {}),
+              (o.runtimeId = this.F),
+              (o.renderId = this.q));
             for (let e in r)
               if ("$" !== e) {
                 let t = r[e],
-                  f = n[e];
-                (t.$global = l), f !== t && (n[e] = Object.assign(t, f));
-                let u = i.get(e);
-                u && ((t.d = r[u]), o(t));
+                  l = n[e];
+                (t.$global = o), l !== t && (n[e] = Object.assign(t, l));
+                let f = i.get(e);
+                f && ((t.d = r[f]), u(t));
               }
           } else
-            f === r || "string" != typeof l[f]
+            l === r || "string" != typeof o[l]
               ? delete this.E[this.q]
-              : ze[l[f++]](n[e]);
+              : Je[o[l++]](n[e]);
         }
       }
     }
   };
-function Le(e, t) {
-  return (ze[e] = t), t;
+function Ze(e, t) {
+  return (Je[e] = t), t;
 }
-function Je(e, t) {
-  return (ze[e] = (e) => (n) => t(e, n)), t;
+function Ge(e, t) {
+  return (Je[e] = (e) => (n) => t(e, n)), t;
 }
-function Ue(e = "M") {
+function He(e = "M") {
   let t,
-    n = (r) => (n[r] = t[r] = new Fe(t, e, r));
+    n = (r) => (n[r] = t[r] = new Ue(t, e, r));
   function r(r) {
     t = r;
     for (let e in r) n(e);
@@ -876,58 +880,58 @@ function Ue(e = "M") {
     ? r(window[e])
     : Object.defineProperty(window, e, { configurable: !0, set: r });
 }
-function Ze(e, t) {
-  return Le(e, t.g), t;
+function Ke(e, t) {
+  return Ze(e, t.g), t;
 }
-function Ge(e, t) {
-  return Le(e, (e) => () => e[t]);
+function Qe(e, t) {
+  return Ze(e, (e) => () => e[t]);
 }
-var He = new Map(),
-  Ke = {
+var Ve = new Map(),
+  Xe = {
     patchConditionals: function (e) {
-      (de = e(de)), (he = e(he));
+      (he = e(he)), (ve = e(ve));
     },
-    queueEffect: qe,
+    queueEffect: Pe,
     init() {
-      Le("$C_s", (e) => {
-        He.set(e.m5c, e);
+      Ze("$C_s", (e) => {
+        Ve.set(e.m5c, e);
       });
     },
     registerRenderer(e) {
-      Le("$C_r", e);
+      Ze("$C_r", e);
     },
-    isOp: (e) => e === O || e === q || e === R,
+    isOp: (e) => e === D || e === P || e === W,
     isRenderer: (e) => void 0 !== e.k,
     getStartNode: (e) => e.a,
     setScopeNodes(e, t, n) {
       (e.a = t), (e.b = n);
     },
     runComponentEffects() {
-      Pe(this.effects);
+      Fe(this.effects);
     },
     resolveRegistered: (e, { runtimeId: t, componentIdPrefix: n }) =>
       Array.isArray(e) && "string" == typeof e[0]
         ? (function (e, t) {
-            let n = ze[e];
+            let n = Je[e];
             return t ? n(t) : n;
           })(e[0], 2 === e.length && window[t]?.["s" === n ? "_" : n]?.p[e[1]])
         : e,
     createRenderer(e, t, n) {
-      let r = ce("", void 0, e, void 0, 1, n && (() => n));
+      let r = ge("", void 0, e, void 0, 1, n && (() => n));
       return (r.k = t), r;
     },
     render(e, t, n, r) {
       let i = t.scope;
-      i || ((i = He.get(t.id)), i && ((t.scope = i), He.delete(t.id)));
-      let o = n.e || Qe,
+      i || ((i = Ve.get(t.id)), i && ((t.scope = i), Ve.delete(t.id)));
+      let o = n.e || Ye,
         l = !1;
       if (
-        ((t.effects = De(() => {
-          if (i) o(i, O), (l = !0);
+        ((t.effects = ze(() => {
+          if (i) o(i, D), (l = !0);
           else {
-            i = t.scope = oe(n, e.global);
+            i = t.scope = ue(n, e.global);
             let r = n.c;
-            if (r) for (let e of r) e(t.scope, q);
+            if (r) for (let e of r) e(t.scope, P);
           }
           o(i, r);
         })),
@@ -936,105 +940,108 @@ var He = new Map(),
         return i.a === i.b ? i.a : i.a.parentNode;
     },
   };
-function Qe() {}
-var Ve = (e, t) => ((e.mount = Xe), (e._ = e), Le(t, e));
-function Xe(t = {}, n, r) {
+function Ye() {}
+var et = (e, t) => ((e.mount = tt), (e._ = e), Ze(t, e));
+function tt(e = {}, t, n) {
   let i,
     o,
-    { $global: f } = t;
-  f
-    ? (({ $global: f, ...t } = t),
-      (f = { runtimeId: "M", renderId: "_", ...f }))
-    : (f = { runtimeId: "M", renderId: "_" });
-  let u = this.e,
-    a = De(() => {
-      (i = e(f)), (o = fe(this, i)), u && u(i, [t]);
+    { $global: l } = e;
+  l
+    ? (({ $global: l, ...e } = e),
+      (l = { runtimeId: "M", renderId: "_", ...l }))
+    : (l = { runtimeId: "M", renderId: "_" });
+  let f = this.e,
+    u = ze(() => {
+      (i = r(l)), (o = ce(this, i)), f && f(i, [e]);
     });
-  switch (r) {
+  switch (n) {
     case "afterbegin":
-      n.insertBefore(o, n.firstChild);
+      t.insertBefore(o, t.firstChild);
       break;
     case "afterend":
-      n.parentElement.insertBefore(o, n.nextSibling);
+      t.parentElement.insertBefore(o, t.nextSibling);
       break;
     case "beforebegin":
-      n.parentElement.insertBefore(o, n);
+      t.parentElement.insertBefore(o, t);
       break;
     default:
-      n.appendChild(o);
+      t.appendChild(o);
   }
   return (
-    Pe(a),
+    Fe(u),
     {
       update: (e) => {
-        u &&
+        f &&
           (function (e) {
-            let t = _e,
-              n = je;
-            (_e = []), (je = []);
+            let t = Oe,
+              n = qe;
+            (Oe = []), (qe = []);
             try {
-              e(), We(), (_e = t), Pe();
+              e(), Le(), (Oe = t), Fe();
             } finally {
-              (_e = t), (je = n);
+              (Oe = t), (qe = n);
             }
           })(() => {
-            u(i, O), u(i, [e]);
+            f(i, D), f(i, [e]);
           });
       },
       destroy: () => {
-        l(i);
+        a(i);
       },
     }
   );
 }
 export {
-  k as attr,
-  B as attrs,
-  E as attrsEvents,
-  P as changeHandler,
-  Z as childClosures,
-  $ as classAttr,
-  J as closure,
-  Ke as compat,
-  de as conditional,
-  he as conditionalOnlyChild,
-  ce as createRenderer,
-  ae as createRendererWithOwner,
-  e as createScope,
-  Ve as createTemplate,
-  I as data,
-  U as dynamicClosure,
-  G as dynamicSubscribers,
-  ue as dynamicTagAttrs,
-  a as getAbortSignal,
-  _ as html,
-  Y as inChild,
-  ge as inConditionalScope,
-  Se as inLoopScope,
-  Ue as init,
-  D as initValue,
-  F as intersection,
-  ee as intersections,
-  T as lifecycle,
-  Ce as loopIn,
-  me as loopOf,
-  xe as loopTo,
-  X as nextTagId,
-  Ge as nodeRef,
-  y as on,
-  De as prepare,
-  j as props,
-  Te as queueControllableSource,
-  qe as queueEffect,
-  Oe as queueSource,
-  Le as register,
-  Je as registerBoundSignal,
-  Ze as registerSubscriber,
-  u as resetAbortSignal,
-  Re as run,
-  Pe as runEffects,
-  H as setTagVar,
-  A as styleAttr,
-  K as tagVarSignal,
-  W as value,
+  A as attr,
+  j as attrs,
+  T as attrsEvents,
+  F as changeHandler,
+  K as childClosures,
+  B as classAttr,
+  G as closure,
+  Xe as compat,
+  he as conditional,
+  ve as conditionalOnlyChild,
+  ge as createRenderer,
+  de as createRendererWithOwner,
+  r as createScope,
+  et as createTemplate,
+  _ as data,
+  H as dynamicClosure,
+  Q as dynamicSubscribers,
+  se as dynamicTagAttrs,
+  e as forIn,
+  t as forOf,
+  n as forTo,
+  d as getAbortSignal,
+  O as html,
+  ne as inChild,
+  be as inConditionalScope,
+  $e as inLoopScope,
+  He as init,
+  z as initValue,
+  U as intersection,
+  re as intersections,
+  R as lifecycle,
+  Se as loopIn,
+  Ne as loopOf,
+  ke as loopTo,
+  te as nextTagId,
+  Qe as nodeRef,
+  x as on,
+  ze as prepare,
+  q as props,
+  Re as queueControllableSource,
+  Pe as queueEffect,
+  De as queueSource,
+  Ze as register,
+  Ge as registerBoundSignal,
+  Ke as registerSubscriber,
+  s as resetAbortSignal,
+  We as run,
+  Fe as runEffects,
+  V as setTagVar,
+  E as styleAttr,
+  X as tagVarSignal,
+  L as value,
 };
diff --git a/packages/runtime-tags/src/common/for.ts b/packages/runtime-tags/src/common/for.ts
new file mode 100644
index 0000000000..fec4b093dd
--- /dev/null
+++ b/packages/runtime-tags/src/common/for.ts
@@ -0,0 +1,34 @@
+type Falsy = undefined | null | false | 0 | "";
+export function forIn<V extends {}>(
+  obj: Falsy | V,
+  cb: <K extends keyof V>(key: K, value: V[K]) => void,
+) {
+  for (const key in obj as V) {
+    cb(key, (obj as V)[key]);
+  }
+}
+
+export function forOf<T, V extends Iterable<T>>(
+  list: Falsy | V,
+  cb: (item: T, index: number) => void,
+) {
+  if (list) {
+    let i = 0;
+    for (const item of list) {
+      cb(item, i++);
+    }
+  }
+}
+
+export function forTo(
+  to: number,
+  from: number | Falsy,
+  step: number | Falsy,
+  cb: (index: number) => void,
+) {
+  const start = from || 0;
+  const delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
+    cb(start + i * delta);
+  }
+}
diff --git a/packages/runtime-tags/src/dom.ts b/packages/runtime-tags/src/dom.ts
index 5b6a7b87a7..20b804fae9 100644
--- a/packages/runtime-tags/src/dom.ts
+++ b/packages/runtime-tags/src/dom.ts
@@ -1,3 +1,4 @@
+export { forIn, forOf, forTo } from "./common/for";
 export type { Scope } from "./common/types";
 export { getAbortSignal, resetAbortSignal } from "./dom/abort-signal";
 export { compat } from "./dom/compat";
diff --git a/packages/runtime-tags/src/dom/control-flow.ts b/packages/runtime-tags/src/dom/control-flow.ts
index 5652315c91..1296923c32 100644
--- a/packages/runtime-tags/src/dom/control-flow.ts
+++ b/packages/runtime-tags/src/dom/control-flow.ts
@@ -1,3 +1,4 @@
+import { forIn, forOf, forTo } from "../common/for";
 import { normalizeDynamicRenderer } from "../common/helpers";
 import { type Accessor, AccessorChar, type Scope } from "../common/types";
 import { reconcile } from "./reconcile";
@@ -22,11 +23,6 @@ import {
   type ValueSignal,
 } from "./signals";
 
-type LoopForEach = (
-  value: unknown[],
-  cb: (key: unknown, args: unknown[]) => void,
-) => void;
-
 export function patchConditionals(
   fn: <T extends typeof conditional | typeof conditionalOnlyChild>(
     cond: T,
@@ -194,56 +190,47 @@ const emptyMap = new Map();
 const emptyArray = [] as Scope[];
 
 export function loopOf(nodeAccessor: Accessor, renderer: Renderer) {
-  return loop(nodeAccessor, renderer, (value, cb) => {
-    const [all, by = bySecondArg] = value as typeof value &
-      [all: unknown[], by?: (item: unknown, index: number) => unknown];
-    let i = 0;
-    for (const item of all) {
-      cb(by(item, i), [item, i, all]);
-      i++;
-    }
-  });
+  return loop<[all: unknown[], by?: (item: unknown, index: number) => unknown]>(
+    nodeAccessor,
+    renderer,
+    ([all, by = bySecondArg], cb) => {
+      if (typeof by === "string") {
+        forOf(all, (item, i) =>
+          cb((item as Record<string, unknown>)[by], [item, i]),
+        );
+      } else {
+        forOf(all, (item, i) => cb(by(item, i), [item, i]));
+      }
+    },
+  );
 }
 
 export function loopIn(nodeAccessor: Accessor, renderer: Renderer) {
-  return loop(nodeAccessor, renderer, (value, cb) => {
-    const [all, by = byFirstArg] = value as typeof value &
-      [all: Record<string, unknown>, by?: (key: string, v: unknown) => unknown];
-    for (const key in all) {
-      const v = all[key];
-      cb(by(key, v), [key, v, all]);
-    }
-  });
+  return loop<[obj: {}, by?: (key: string, v: unknown) => unknown]>(
+    nodeAccessor,
+    renderer,
+    ([obj, by = byFirstArg], cb) =>
+      forIn(obj, (key, value) => cb(by(key, value), [key, value])),
+  );
 }
 
 export function loopTo(nodeAccessor: Accessor, renderer: Renderer) {
-  return loop(nodeAccessor, renderer, (value, cb) => {
-    const [to, from = 0, step = 1, by = byFirstArg] = value as [
-      to: number,
-      from: number,
-      step: number,
-      by?: (v: number) => unknown,
-    ];
-    const steps = (to - from) / step;
-    for (let i = 0; i <= steps; i++) {
-      const v = from + i * step;
-      cb(by(v), [v]);
-    }
-  });
+  return loop<
+    [to: number, from: number, step: number, by?: (v: number) => unknown]
+  >(nodeAccessor, renderer, ([to, from, step, by = byFirstArg], cb) =>
+    forTo(to, from, step, (v) => cb(by(v), [v])),
+  );
 }
 
-function loop(
+function loop<T extends unknown[] = unknown[]>(
   nodeAccessor: Accessor,
   renderer: Renderer,
-  forEach: LoopForEach,
+  forEach: (value: T, cb: (key: unknown, args: unknown[]) => void) => void,
 ) {
   const loopScopeAccessor = nodeAccessor + AccessorChar.LoopScopeArray;
   const closureSignals = renderer.___closureSignals;
   const params = renderer.___args;
-  return (
-    scope: Scope,
-    valueOrOp: [unknown, (...args: unknown[]) => unknown] | SignalOp,
-  ) => {
+  return (scope: Scope, valueOrOp: T | SignalOp) => {
     if (valueOrOp === DIRTY) return;
     if (valueOrOp === MARK || valueOrOp === CLEAN) {
       const loopScopes =
diff --git a/packages/runtime-tags/src/html.ts b/packages/runtime-tags/src/html.ts
index 54ea89bded..e081fcd4e5 100644
--- a/packages/runtime-tags/src/html.ts
+++ b/packages/runtime-tags/src/html.ts
@@ -1,3 +1,4 @@
+export { forIn, forOf, forTo } from "./common/for";
 export { normalizeDynamicRenderer } from "./common/helpers";
 export { attr, attrs, classAttr, styleAttr } from "./html/attrs";
 export { compat } from "./html/compat";
diff --git a/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js
index 6e06ef6025..7dd8cfc3a0 100644
--- a/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js
@@ -1,16 +1,16 @@
-import { nextScopeId as _nextScopeId, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, writeScope as _writeScope, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { nextScopeId as _nextScopeId, forIn as _forIn, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, writeScope as _writeScope, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const _item = [];
   const _scope1_id = _nextScopeId();
-  for (const a in {
+  _forIn({
     a: 1,
     b: 2
-  }) {
+  }, a => {
     const _scope2_id = _nextScopeId();
     _item.push({});
-  }
+  });
   const _childScope = _peekNextScope();
   _hello({
     item: _item,
diff --git a/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js
index cc2b010d2c..70010078e4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js
@@ -1,11 +1,11 @@
-import { write as _write, createRenderer as _createRenderer, register as _register, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, createRenderer as _createRenderer, register as _register, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, forOf as _forOf, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const _col = [];
   const _scope1_id = _nextScopeId();
   const _item = [];
-  for (const color of ["red", "blue", "green"]) {
+  _forOf(["red", "blue", "green"], color => {
     const _scope3_id = _nextScopeId();
     let _ifScopeId, _ifRenderer;
     if (color === "red") {
@@ -45,16 +45,12 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "#text/0(": _ifRenderer,
       "#text/0!": _getScopeById(_ifScopeId)
     });
-  }
-  let _i3 = 0;
-  for (const col of [["a", "b"], ["c", "d"]]) {
+  });
+  _forOf([["a", "b"], ["c", "d"]], (col, i) => {
     const _scope8_id = _nextScopeId();
-    let i = _i3++;
     const _row = [];
-    let _i2 = 0;
-    for (const row of col) {
+    _forOf(col, row => {
       const _scope10_id = _nextScopeId();
-      let _i = _i2++;
       _row.push({
         row: row,
         renderBody: _register(/* @__PURE__ */_createRenderer(() => {
@@ -64,8 +60,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       _writeScope(_scope10_id, {
         "row": row
       });
-      _scope10_.set(_i, _getScopeById(_scope10_id));
-    }
+    });
     _col.push({
       x: i,
       row: _row
@@ -73,7 +68,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     _writeScope(_scope8_id, {
       "col": col
     });
-  }
+  });
   _col.push({
     outside: true,
     row: {
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/components/comments.js b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/components/comments.js
index dae69b5952..07d2d57056 100644
--- a/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/components/comments.js
+++ b/packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/components/comments.js
@@ -1,14 +1,12 @@
-import { write as _write, attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, writeEffect as _writeEffect, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, writeEffect as _writeEffect, forOf as _forOf, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _comments from "./comments.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   _write("<ul>");
   const _forScopeIds = [],
     _scope1_ = new Map();
-  let _i = 0;
-  for (const comment of input.comments) {
+  _forOf(input.comments, (comment, i) => {
     const _scope1_id = _nextScopeId();
-    let i = _i++;
     const id = `${input.path || "c"}-${i}`;
     const open = true;
     _write(`<li${_attr("id", id)}${_attr("hidden", !open)}><span>${_escapeXML(comment.text)}${_markResumeNode(_scope1_id, "#text/1")}</span><button>${_escapeXML(open ? "[-]" : "[+]")}${_markResumeNode(_scope1_id, "#text/3")}</button>${_markResumeNode(_scope1_id, "#button/2")}`);
@@ -39,7 +37,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "_": _ensureScopeWithId(_scope0_id)
     });
     _scope1_.set(i, _getScopeById(_scope1_id));
-  }
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#ul/0", _forScopeIds)}</ul>${_markResumeNode(_scope0_id, "#ul/0")}`);
   _writeScope(_scope0_id, {
     "input": input,
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/html.expected/template.js
index 139b7cd291..d758d0b29d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-for/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { markResumeNode as _markResumeNode, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { markResumeNode as _markResumeNode, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _child from "./components/child.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -6,16 +6,12 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   _write(`<button>Push</button>${_markResumeNode(_scope0_id, "#button/0")}`);
   const _forScopeIds2 = [],
     _scope1_ = new Map();
-  let _i4 = 0;
-  for (const outer of items) {
+  _forOf(items, (outer, _index2) => {
     const _scope1_id = _nextScopeId();
-    let _i3 = _i4++;
     const _forScopeIds = [],
       _scope2_ = new Map();
-    let _i2 = 0;
-    for (const inner of items) {
+    _forOf(items, (inner, _index) => {
       const _scope2_id = _nextScopeId();
-      let _i = _i2++;
       const _childScope = _peekNextScope();
       _child({
         name: `${outer}.${inner}`
@@ -25,8 +21,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
         "#childScope/0": _writeExistingScope(_childScope),
         "_": _ensureScopeWithId(_scope1_id)
       });
-      _scope2_.set(_i, _getScopeById(_scope2_id));
-    }
+      _scope2_.set(_index, _getScopeById(_scope2_id));
+    });
     _forScopeIds2.push(_scope1_id);
     _write(`${_markResumeControlSingleNodeEnd(_scope1_id, "#text/0", _forScopeIds)}`);
     _writeScope(_scope1_id, {
@@ -34,8 +30,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "#text/0(": _scope2_.size ? _scope2_ : undefined,
       "_": _ensureScopeWithId(_scope0_id)
     });
-    _scope1_.set(_i3, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index2, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _forScopeIds2)}`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-nested-for/template.marko_0_items");
   _writeScope(_scope0_id, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/html.expected/template.js
index 86e43acd42..b7933b9924 100644
--- a/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/__snapshots__/html.expected/template.js
@@ -1,20 +1,18 @@
-import { attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, ensureScopeWithId as _ensureScopeWithId, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, ensureScopeWithId as _ensureScopeWithId, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const selected = 0;
   const _scope1_ = new Map();
-  let _i2 = 0;
-  for (const num of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
+  _forOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], (num, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _write(`<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_escapeXML(num)}${_markResumeNode(_scope1_id, "#text/1")}</button>${_markResumeNode(_scope1_id, "#button/0")}`);
     _writeEffect(_scope1_id, "packages/translator-tags/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num");
     _writeScope(_scope1_id, {
       "num": num,
       "_": _ensureScopeWithId(_scope0_id)
     });
-    _scope1_.set(_i, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index, _getScopeById(_scope1_id));
+  });
   _writeScope(_scope0_id, {
     "#text/0(": _scope1_.size ? _scope1_ : undefined
   });
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/html.expected/template.js
index aef58e4e36..daff82f5af 100644
--- a/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const id = 0;
@@ -6,15 +6,13 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   _write("<div>");
   const _forScopeIds = [],
     _scope1_ = new Map();
-  let _i2 = 0;
-  for (const item of items) {
+  _forOf(items, (item, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _forScopeIds.push(_scope1_id);
     _write(`${_escapeXML(item)}${_markResumeNode(_scope1_id, "#text/0")}`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_i, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}<button id=add>Add</button>${_markResumeNode(_scope0_id, "#button/1")}<button id=remove>Remove</button>${_markResumeNode(_scope0_id, "#button/2")}</div>`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_items");
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_id_items");
diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/html.expected/template.js
index 2b1af9ea5e..9ada463431 100644
--- a/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/__snapshots__/html.expected/template.js
@@ -1,23 +1,21 @@
-import { attr as _attr, write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { attr as _attr, write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const open = true;
   const list = [1, 2, 3];
   _write(`<ul${_attr("hidden", !open)}>`);
-  const _forScopeIds = [],
-    _scope1_ = new Map();
   const _by = function (x) {
     return x;
   };
-  let _i2 = 0;
-  for (const x of list) {
+  const _forScopeIds = [],
+    _scope1_ = new Map();
+  _forOf(list, (x, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _forScopeIds.push(_scope1_id);
     _write(`<li>${_escapeXML(x)}${_markResumeNode(_scope1_id, "#text/0")}</li>`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_by(x, _i), _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_by(x, _index), _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#ul/0", _forScopeIds)}</ul>${_markResumeNode(_scope0_id, "#ul/0")}<button id=toggle>Toggle</button>${_markResumeNode(_scope0_id, "#button/1")}<button id=reverse>Reverse</button>${_markResumeNode(_scope0_id, "#button/2")}`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_list");
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_open");
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/html.expected/template.js
index e1c514e98b..7414a8c1ac 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, markResumeScopeStart as _markResumeScopeStart, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlEnd as _markResumeControlEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, markResumeScopeStart as _markResumeScopeStart, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlEnd as _markResumeControlEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _child from "./components/child.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -8,12 +8,10 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     el().innerHTML += '\n' + msg;
   }, "packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0/write", _scope0_id);
   _write(`<button>Toggle</button>${_markResumeNode(_scope0_id, "#button/0")}<div></div>${_markResumeNode(_scope0_id, "#div/1")}`);
-  const _scope1_ = new Map();
   let _k = 0;
-  let _i2 = 0;
-  for (const item of items) {
+  const _scope1_ = new Map();
+  _forOf(items, (item, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _write(`${_markResumeScopeStart(_scope1_id, _k++)}`);
     const _childScope = _peekNextScope();
     _child({
@@ -23,8 +21,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     _writeScope(_scope1_id, {
       "#childScope/0": _writeExistingScope(_childScope)
     });
-    _scope1_.set(_i, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlEnd(_scope0_id, "#text/2")}`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/cleanup-n-child-for-shallow/template.marko_0_items");
   _writeScope(_scope0_id, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/html.expected/template.js
index fe7e96c895..a361de96e6 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _child from "./components/child.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -10,10 +10,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   _write(`<button>Toggle</button>${_markResumeNode(_scope0_id, "#button/0")}<div></div>${_markResumeNode(_scope0_id, "#div/1")}`);
   const _forScopeIds2 = [],
     _scope1_ = new Map();
-  let _i4 = 0;
-  for (const outerItem of items) {
+  _forOf(items, (outerItem, _index2) => {
     const _scope1_id = _nextScopeId();
-    let _i3 = _i4++;
     _write("<div>");
     const _childScope = _peekNextScope();
     _child({
@@ -22,10 +20,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     });
     const _forScopeIds = [],
       _scope2_ = new Map();
-    let _i2 = 0;
-    for (const middleItem of items) {
+    _forOf(items, (middleItem, _index) => {
       const _scope2_id = _nextScopeId();
-      let _i = _i2++;
       _write("<div>");
       const _childScope2 = _peekNextScope();
       _child({
@@ -38,8 +34,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
         "#childScope/0": _writeExistingScope(_childScope2),
         "_": _ensureScopeWithId(_scope1_id)
       });
-      _scope2_.set(_i, _getScopeById(_scope2_id));
-    }
+      _scope2_.set(_index, _getScopeById(_scope2_id));
+    });
     _forScopeIds2.push(_scope1_id);
     _write(`${_markResumeControlSingleNodeEnd(_scope1_id, "#text/1", _forScopeIds)}</div>`);
     _writeScope(_scope1_id, {
@@ -48,8 +44,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "#text/1(": _scope2_.size ? _scope2_ : undefined,
       "_": _ensureScopeWithId(_scope0_id)
     });
-    _scope1_.set(_i3, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index2, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/2", _forScopeIds2)}`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-deep/template.marko_0_items");
   _writeScope(_scope0_id, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/html.expected/template.js
index e3913aa59b..3267cac57e 100644
--- a/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { markResumeNode as _markResumeNode, nodeRef as _nodeRef, register as _register, write as _write, peekNextScope as _peekNextScope, writeExistingScope as _writeExistingScope, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _child from "./components/child.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -10,10 +10,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   _write(`<button>Toggle</button>${_markResumeNode(_scope0_id, "#button/0")}<div></div>${_markResumeNode(_scope0_id, "#div/1")}`);
   const _forScopeIds = [],
     _scope1_ = new Map();
-  let _i2 = 0;
-  for (const item of items) {
+  _forOf(items, (item, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     const _childScope = _peekNextScope();
     _child({
       write: write,
@@ -23,8 +21,8 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     _writeScope(_scope1_id, {
       "#childScope/0": _writeExistingScope(_childScope)
     });
-    _scope1_.set(_i, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/2", _forScopeIds)}`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/cleanup-single-child-for-shallow/template.marko_0_items");
   _writeScope(_scope0_id, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-from/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-from/__snapshots__/html.expected/template.js
index f9cf8ed63f..9824f3cbff 100644
--- a/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-from/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-from/__snapshots__/html.expected/template.js
@@ -1,16 +1,15 @@
-import { write as _write, markResumeScopeStart as _markResumeScopeStart, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlEnd as _markResumeControlEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, markResumeScopeStart as _markResumeScopeStart, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlEnd as _markResumeControlEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forTo as _forTo, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   _write("<div>");
-  const _scope1_ = new Map();
   let _k = 0;
-  for (let _from = input.from ?? 0, _step = input.step ?? 1, _steps = (input.to - _from) / _step, _i = 0; _i <= _steps; _i++) {
+  const _scope1_ = new Map();
+  _forTo(input.to, input.from, input.step, n => {
     const _scope1_id = _nextScopeId();
-    const n = _from + _i * _step;
     _write(`${_markResumeScopeStart(_scope1_id, _k++)}${_escapeXML(n)}${_markResumeNode(_scope1_id, "#text/0")}, `);
     _writeScope(_scope1_id, {});
     _scope1_.set(n, _getScopeById(_scope1_id));
-  }
+  });
   _write(`${_markResumeControlEnd(_scope0_id, "#div/0")}</div>${_markResumeNode(_scope0_id, "#div/0")}`);
   _writeScope(_scope0_id, {
     "#div/0(": _scope1_.size ? _scope1_ : undefined
diff --git a/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-in/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-in/__snapshots__/html.expected/template.js
index 7446ce81c4..5b78b38aed 100644
--- a/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-in/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/create-and-clear-rows-loop-in/__snapshots__/html.expected/template.js
@@ -1,27 +1,26 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forIn as _forIn, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   _write("<div>");
   const _forScopeIds = [],
     _scope1_ = new Map();
-  for (const key in input.children) {
+  _forIn(input.children, (key, text) => {
     const _scope1_id = _nextScopeId();
-    const text = input.children[key];
     _forScopeIds.push(_scope1_id);
     _write(`<p>${_escapeXML(key)}${_markResumeNode(_scope1_id, "#text/0")}: <!>${_escapeXML(text)}${_markResumeNode(_scope1_id, "#text/1")}</p>`);
     _writeScope(_scope1_id, {});
     _scope1_.set(key, _getScopeById(_scope1_id));
-  }
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}`);
   const _forScopeIds2 = [],
     _scope2_ = new Map();
-  for (const key in input.children) {
+  _forIn(input.children, key => {
     const _scope2_id = _nextScopeId();
     _forScopeIds2.push(_scope2_id);
     _write(`<p>${_escapeXML(key)}${_markResumeNode(_scope2_id, "#text/0")}</p>`);
     _writeScope(_scope2_id, {});
     _scope2_.set(key, _getScopeById(_scope2_id));
-  }
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _forScopeIds2)}</div>`);
   _writeScope(_scope0_id, {
     "#text/0(": _scope1_.size ? _scope1_ : undefined,
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/html.expected/template.js
index 6f625a046d..e5e1ce72fa 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-destructure/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, writeEffect as _writeEffect, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const id = 0;
@@ -9,18 +9,17 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   _write("<div>");
   const _forScopeIds = [],
     _scope1_ = new Map();
-  let _i2 = 0;
-  for (const {
-    name,
-    description
-  } of items) {
+  _forOf(items, (_list, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
+    let {
+      name,
+      description
+    } = _list;
     _forScopeIds.push(_scope1_id);
     _write(`<div>${_escapeXML(name)}${_markResumeNode(_scope1_id, "#text/0")}: <!>${_escapeXML(description)}${_markResumeNode(_scope1_id, "#text/1")}</div>`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_i, _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_index, _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}<button id=add>Add</button>${_markResumeNode(_scope0_id, "#button/1")}<button id=remove>Remove</button>${_markResumeNode(_scope0_id, "#button/2")}</div>`);
   _writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/for-destructure/template.marko_0_items");
   _writeScope(_scope0_id, {
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/html.expected/template.js
index f3062289fe..f89b46ea91 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-event-handler/__snapshots__/html.expected/template.js
@@ -1,12 +1,11 @@
-import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, write as _write, ensureScopeWithId as _ensureScopeWithId, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, write as _write, ensureScopeWithId as _ensureScopeWithId, writeEffect as _writeEffect, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forTo as _forTo, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const num = 0;
   const _forScopeIds = [],
     _scope1_ = new Map();
-  for (let _from = 0 ?? 0, _step = 1 ?? 1, _steps = (num - _from) / _step, _i = 0; _i <= _steps; _i++) {
+  _forTo(num, 0, 1, i => {
     const _scope1_id = _nextScopeId();
-    const i = _from + _i * _step;
     _forScopeIds.push(_scope1_id);
     _write(`<button>${_escapeXML(i)}${_markResumeNode(_scope1_id, "#text/1")}</button>${_markResumeNode(_scope1_id, "#button/0")}`);
     _writeEffect(_scope1_id, "packages/translator-tags/src/__tests__/fixtures/for-event-handler/template.marko_1_num");
@@ -14,7 +13,7 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "_": _ensureScopeWithId(_scope0_id)
     });
     _scope1_.set(i, _getScopeById(_scope1_id));
-  }
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}`);
   _writeScope(_scope0_id, {
     "num": num,
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
index bd8807b8ff..0074e8ff10 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
@@ -1,17 +1,17 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, nextScopeId as _nextScopeId, forOf as _forOf, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const arrA = [1, 2, 3];
   _write("<div>");
-  for (const val of arrA) {
+  _forOf(arrA, val => {
     const _scope1_id = _nextScopeId();
     _write(`<div>${_escapeXML(val)}${_markResumeNode(_scope1_id, "#text/0")}</div>`);
-  }
+  });
   _write("</div><div>");
-  for (const val of arrA) {
+  _forOf(arrA, val => {
     const _scope2_id = _nextScopeId();
     _write(`<div>${_escapeXML(val)}${_markResumeNode(_scope2_id, "#text/0")}</div>`);
-  }
+  });
   _write("<div></div></div>");
 });
 export default /* @__PURE__ */_createTemplate(_renderer, "packages/translator-tags/src/__tests__/fixtures/for-tag-siblings/template.marko");
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
index d2daaaae1f..00e12f4ab9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
@@ -1,25 +1,21 @@
-import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, nextScopeId as _nextScopeId, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, nextScopeId as _nextScopeId, forOf as _forOf, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const arrA = [1, 2, 3];
-  let _i = 0;
-  for (const val of arrA) {
+  _forOf(arrA, (val, i) => {
     const _scope1_id = _nextScopeId();
-    let i = _i++;
     _write(`<div>${_escapeXML(i)}${_markResumeNode(_scope1_id, "#text/0")}: <!>${_escapeXML(val)}${_markResumeNode(_scope1_id, "#text/1")}</div>`);
-  }
+  });
   const arrB = [1, 2, 3];
   const _forScopeIds = [],
     _scope2_ = new Map();
-  let _i2 = 0;
-  for (const val of arrB) {
+  _forOf(arrB, (val, i) => {
     const _scope2_id = _nextScopeId();
-    let i = _i2++;
     _forScopeIds.push(_scope2_id);
     _write(`<div>${_escapeXML(i)}${_markResumeNode(_scope2_id, "#text/0")}: <!>${_escapeXML(val)}${_markResumeNode(_scope2_id, "#text/1")}</div>`);
     _writeScope(_scope2_id, {});
     _scope2_.set(i, _getScopeById(_scope2_id));
-  }
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _forScopeIds)}`);
   _writeScope(_scope0_id, {
     "#text/1(": _scope2_.size ? _scope2_ : undefined
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr-sanitized.expected.md
index 9f8a03a398..c4ba455a8d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr-sanitized.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr-sanitized.expected.md
@@ -87,21 +87,6 @@
 <div
   key="other-2"
 />
-<div
-  key="0"
->
-  3: 1
-</div>
-<div
-  key="1"
->
-  3: 2
-</div>
-<div
-  key="2"
->
-  3: 3
-</div>
 <div
   key="a"
 >
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr.expected.md
index 5c70b8e41a..74b63c8c86 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/csr.expected.md
@@ -88,21 +88,6 @@
 <div
   key="other-2"
 />
-<div
-  key="0"
->
-  3: 1
-</div>
-<div
-  key="1"
->
-  3: 2
-</div>
-<div
-  key="2"
->
-  3: 3
-</div>
 <div
   key="a"
 >
@@ -574,5 +559,5 @@ HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
 
 # Mutations
 ```
-inserted #comment0, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15, div16, div17, div18, div19, div20, div21, div22, div23, div24, div25, div26, div27, div28, div29, div30, div31, div32, div33, div34, div35, div36, div37, div38, div39, div40, div41, div42, div43, div44, div45, div46, div47, div48, div49, div50, div51, div52, div53, div54, div55, div56, div57, div58, div59, div60, div61, div62, div63, div64, div65, div66, div67, div68, div69, div70, div71, div72, div73, div74, div75, div76, div77, div78, #comment79, div80, div81, div82, div83, div84, div85, div86, div87, div88, div89, div90, div91, div92, div93, div94, div95, div96, div97, div98, div99, div100, #comment101, div102, div103, div104, div105, div106, div107, div108, div109, div110, div111, div112, div113, div114, div115, div116, div117, div118, div119, div120, div121, div122, #comment123, div124, div125, div126, div127, div128, div129, div130, div131, div132, div133, div134, div135, div136, div137, div138, div139, div140, div141, div142, div143, div144, #comment145, div146, div147, div148, div149, div150, div151, div152, div153, div154, div155, div156, div157, div158, div159, div160, div161, div162, div163, div164, div165, div166, #comment167, div168, div169, div170, div171, div172, div173, div174, div175, div176, div177, div178, div179, div180, div181, div182, div183, div184, div185, div186, div187, div188, #comment189, div190, div191, div192, div193, div194, div195, div196, div197, div198, div199, div200, div201, div202, div203, div204, div205, div206, div207, #text208, #text209, #text210, #text211, #text212, #text213, #text214, #text215, #text216, #text217, #text218, #text219, #text220, #text221, #text222, #text223, #text224, #text225, #text226, #text227, #text228, #text229, #comment230
+inserted #comment0, div1, div2, div3, div4, div5, div6, div7, div8, div9, div10, div11, div12, div13, div14, div15, div16, div17, div18, div19, div20, div21, div22, div23, div24, div25, div26, div27, div28, div29, div30, div31, div32, div33, div34, div35, div36, div37, div38, div39, div40, div41, div42, div43, div44, div45, div46, div47, div48, div49, div50, div51, div52, div53, div54, div55, div56, div57, div58, div59, div60, div61, div62, div63, div64, div65, div66, div67, div68, div69, div70, div71, div72, div73, div74, div75, #comment76, div77, div78, div79, div80, div81, div82, div83, div84, div85, div86, div87, div88, div89, div90, div91, div92, div93, div94, div95, div96, div97, #comment98, div99, div100, div101, div102, div103, div104, div105, div106, div107, div108, div109, div110, div111, div112, div113, div114, div115, div116, div117, div118, div119, #comment120, div121, div122, div123, div124, div125, div126, div127, div128, div129, div130, div131, div132, div133, div134, div135, div136, div137, div138, div139, div140, div141, #comment142, div143, div144, div145, div146, div147, div148, div149, div150, div151, div152, div153, div154, div155, div156, div157, div158, div159, div160, div161, div162, div163, #comment164, div165, div166, div167, div168, div169, div170, div171, div172, div173, div174, div175, div176, div177, div178, div179, div180, div181, div182, div183, div184, div185, #comment186, div187, div188, div189, div190, div191, div192, div193, div194, div195, div196, div197, div198, div199, div200, div201, div202, div203, div204, #text205, #text206, #text207, #text208, #text209, #text210, #text211, #text212, #text213, #text214, #text215, #text216, #text217, #text218, #text219, #text220, #text221, #text222, #text223, #text224, #text225, #text226, #comment227
 ```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected/template.js
index e47e03fc86..e438e758b4 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected/template.js
@@ -1,15 +1,8 @@
-export const _template_ = "<!><!><!><!><!><!><!><!><!><!><!><!>";
-export const _walks_ = /* replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1) */"D%b%b%b%b%b%b%b%b%b%bD";
+export const _template_ = "<!><!><!><!><!><!><!><!><!><!><!>";
+export const _walks_ = /* replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1), replace, over(1) */"D%b%b%b%b%b%b%b%b%bD";
 import { data as _data, attr as _attr, createRenderer as _createRenderer, value as _value, loopTo as _loopTo, loopIn as _loopIn, loopOf as _loopOf, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
-const _forBody11 = /* @__PURE__ */_createRenderer("Hello", "");
 const _forBody10 = /* @__PURE__ */_createRenderer("Hello", "");
-const _i$forBody7 = /* @__PURE__ */_value("i", (_scope, i) => {
-  _attr(_scope["#div/0"], "key", i);
-  _data(_scope["#text/1"], i);
-  _attr(_scope["#div/2"], "key", `other-${i}`);
-});
-const _params_10$forBody = /* @__PURE__ */_value("_params_10", (_scope, _params_10) => _i$forBody7(_scope, _params_10[0]));
-const _forBody9 = /* @__PURE__ */_createRenderer("<div> </div><div></div><div></div>", /* get, next(1), get, out(1), over(1), get */" D lb ", void 0, void 0, void 0, () => _params_10$forBody);
+const _forBody9 = /* @__PURE__ */_createRenderer("Hello", "");
 const _i$forBody6 = /* @__PURE__ */_value("i", (_scope, i) => {
   _attr(_scope["#div/0"], "key", i);
   _data(_scope["#text/1"], i);
@@ -17,37 +10,35 @@ const _i$forBody6 = /* @__PURE__ */_value("i", (_scope, i) => {
 });
 const _params_9$forBody = /* @__PURE__ */_value("_params_9", (_scope, _params_9) => _i$forBody6(_scope, _params_9[0]));
 const _forBody8 = /* @__PURE__ */_createRenderer("<div> </div><div></div><div></div>", /* get, next(1), get, out(1), over(1), get */" D lb ", void 0, void 0, void 0, () => _params_9$forBody);
-const _for$forBody = /* @__PURE__ */_loopTo("#text/3", _forBody8);
 const _i$forBody5 = /* @__PURE__ */_value("i", (_scope, i) => {
   _attr(_scope["#div/0"], "key", i);
   _data(_scope["#text/1"], i);
   _attr(_scope["#div/2"], "key", `other-${i}`);
 });
 const _params_8$forBody = /* @__PURE__ */_value("_params_8", (_scope, _params_8) => _i$forBody5(_scope, _params_8[0]));
+const _forBody7 = /* @__PURE__ */_createRenderer("<div> </div><div></div><div></div>", /* get, next(1), get, out(1), over(1), get */" D lb ", void 0, void 0, void 0, () => _params_8$forBody);
+const _for$forBody = /* @__PURE__ */_loopTo("#text/3", _forBody7);
+const _i$forBody4 = /* @__PURE__ */_value("i", (_scope, i) => {
+  _attr(_scope["#div/0"], "key", i);
+  _data(_scope["#text/1"], i);
+  _attr(_scope["#div/2"], "key", `other-${i}`);
+});
+const _params_7$forBody = /* @__PURE__ */_value("_params_7", (_scope, _params_7) => _i$forBody4(_scope, _params_7[0]));
 const _setup$forBody = _scope => {
   _for$forBody(_scope, [10, 0, 2]);
 };
-const _forBody7 = /* @__PURE__ */_createRenderer("<div> </div><div></div><div></div><!><!>", /* get, next(1), get, out(1), over(1), get, over(1), replace */" D lb b%D", _setup$forBody, void 0, void 0, () => _params_8$forBody);
-const _val$forBody5 = /* @__PURE__ */_value("val", (_scope, val) => _data(_scope["#text/2"], val));
+const _forBody6 = /* @__PURE__ */_createRenderer("<div> </div><div></div><div></div><!><!>", /* get, next(1), get, out(1), over(1), get, over(1), replace */" D lb b%D", _setup$forBody, void 0, void 0, () => _params_7$forBody);
+const _val$forBody4 = /* @__PURE__ */_value("val", (_scope, val) => _data(_scope["#text/2"], val));
 const _key$forBody2 = /* @__PURE__ */_value("key", (_scope, key) => {
   _attr(_scope["#div/0"], "key", key);
   _data(_scope["#text/1"], key);
   _attr(_scope["#div/3"], "key", `other-${key}`);
 });
-const _params_7$forBody = /* @__PURE__ */_value("_params_7", (_scope, _params_7) => {
-  _key$forBody2(_scope, _params_7[0]);
-  _val$forBody5(_scope, _params_7[1]);
-});
-const _forBody6 = /* @__PURE__ */_createRenderer("<div><!>: <!></div><div></div><div></div>", /* get, next(1), replace, over(2), replace, out(1), over(1), get */" D%c%lb ", void 0, void 0, void 0, () => _params_7$forBody);
-const _list$forBody = /* @__PURE__ */_value("list", (_scope, list) => _data(_scope["#text/1"], list.length));
-const _i$forBody4 = /* @__PURE__ */_value("i", (_scope, i) => _attr(_scope["#div/0"], "key", i));
-const _val$forBody4 = /* @__PURE__ */_value("val", (_scope, val) => _data(_scope["#text/2"], val));
 const _params_6$forBody = /* @__PURE__ */_value("_params_6", (_scope, _params_6) => {
-  _val$forBody4(_scope, _params_6[0]);
-  _i$forBody4(_scope, _params_6[1]);
-  _list$forBody(_scope, _params_6[2]);
+  _key$forBody2(_scope, _params_6[0]);
+  _val$forBody4(_scope, _params_6[1]);
 });
-const _forBody5 = /* @__PURE__ */_createRenderer("<div><!>: <!></div>", /* get, next(1), replace, over(2), replace */" D%c%", void 0, void 0, void 0, () => _params_6$forBody);
+const _forBody5 = /* @__PURE__ */_createRenderer("<div><!>: <!></div><div></div><div></div>", /* get, next(1), replace, over(2), replace, out(1), over(1), get */" D%c%lb ", void 0, void 0, void 0, () => _params_6$forBody);
 const _i$forBody3 = /* @__PURE__ */_value("i", (_scope, i) => {
   _attr(_scope["#div/0"], "key", i);
   _data(_scope["#text/1"], i);
@@ -76,24 +67,22 @@ const _params_2$forBody = /* @__PURE__ */_value("_params_2", (_scope, _params_2)
   _i$forBody(_scope, _params_2[1]);
 });
 const _forBody = /* @__PURE__ */_createRenderer("<div><!>: <!></div><div></div><div></div>", /* next(1), replace, over(2), replace */"D%c%", void 0, void 0, void 0, () => _params_2$forBody);
-const _for10 = /* @__PURE__ */_loopTo("#text/9", _forBody11);
 const _for9 = /* @__PURE__ */_loopTo("#text/8", _forBody10);
 const _for8 = /* @__PURE__ */_loopTo("#text/7", _forBody9);
-const _for7 = /* @__PURE__ */_loopTo("#text/6", _forBody7);
-const _for6 = /* @__PURE__ */_loopIn("#text/5", _forBody6);
-const _for5 = /* @__PURE__ */_loopOf("#text/4", _forBody5);
+const _for7 = /* @__PURE__ */_loopTo("#text/6", _forBody8);
+const _for6 = /* @__PURE__ */_loopTo("#text/5", _forBody6);
+const _for5 = /* @__PURE__ */_loopIn("#text/4", _forBody5);
 const _for4 = /* @__PURE__ */_loopOf("#text/3", _forBody4);
 const _for3 = /* @__PURE__ */_loopTo("#text/2", _forBody3);
 const _for2 = /* @__PURE__ */_loopIn("#text/1", _forBody2);
 const _for = /* @__PURE__ */_loopOf("#text/0", _forBody);
 const _obj = /* @__PURE__ */_value("obj", (_scope, obj) => {
   _for2(_scope, [obj]);
-  _for6(_scope, [obj]);
+  _for5(_scope, [obj]);
 });
 const _arr = /* @__PURE__ */_value("arr", (_scope, arr) => {
   _for(_scope, [arr]);
   _for4(_scope, [arr]);
-  _for5(_scope, [arr]);
 });
 export function _setup_(_scope) {
   _arr(_scope, [1, 2, 3]);
@@ -103,9 +92,9 @@ export function _setup_(_scope) {
     c: 1
   });
   _for3(_scope, [10, 0, 2]);
-  _for7(_scope, [10, 0, 2]);
-  _for8(_scope, [0, 10, -2]);
+  _for6(_scope, [10, 0, 2]);
+  _for7(_scope, [0, 10, -2]);
+  _for8(_scope, [10, 0, 1]);
   _for9(_scope, [10, 0, 1]);
-  _for10(_scope, [10, 0, 1]);
 }
 export default /* @__PURE__ */_createTemplate(/* @__PURE__ */_createRenderer(_template_, _walks_, _setup_), "packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko");
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
index b1e821f8c7..05d1975044 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, nextScopeId as _nextScopeId, attr as _attr, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, write as _write, nextScopeId as _nextScopeId, forOf as _forOf, forIn as _forIn, forTo as _forTo, attr as _attr, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const arr = [1, 2, 3];
@@ -7,62 +7,45 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     b: 1,
     c: 1
   };
-  let _i = 0;
-  for (const val of arr) {
+  _forOf(arr, (val, i) => {
     const _scope1_id = _nextScopeId();
-    let i = _i++;
     _write(`<div>${_escapeXML(i)}${_markResumeNode(_scope1_id, "#text/0")}: <!>${_escapeXML(val)}${_markResumeNode(_scope1_id, "#text/1")}</div><div></div><div></div>`);
-  }
-  for (const key in obj) {
+  });
+  _forIn(obj, (key, val) => {
     const _scope2_id = _nextScopeId();
-    const val = obj[key];
     _write(`<div>${_escapeXML(key)}${_markResumeNode(_scope2_id, "#text/0")}: <!>${_escapeXML(val)}${_markResumeNode(_scope2_id, "#text/1")}</div><div></div><div></div>`);
-  }
-  for (let _from = 0 ?? 0, _step = 2 ?? 1, _steps = (10 - _from) / _step, _i2 = 0; _i2 <= _steps; _i2++) {
+  });
+  _forTo(10, 0, 2, i => {
     const _scope3_id = _nextScopeId();
-    const i = _from + _i2 * _step;
     _write(`<div>${_escapeXML(i)}${_markResumeNode(_scope3_id, "#text/0")}</div><div></div><div></div>`);
-  }
-  let _i3 = 0;
-  for (const val of arr) {
+  });
+  _forOf(arr, (val, i) => {
     const _scope4_id = _nextScopeId();
-    let i = _i3++;
     _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope4_id, "#text/1")}: <!>${_escapeXML(val)}${_markResumeNode(_scope4_id, "#text/2")}</div>${_markResumeNode(_scope4_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope4_id, "#div/3")}`);
-  }
-  let _i4 = 0;
-  const list = arr;
-  for (const val of list) {
+  });
+  _forIn(obj, (key, val) => {
     const _scope5_id = _nextScopeId();
-    let i = _i4++;
-    _write(`<div${_attr("key", i)}>${_escapeXML(list.length)}${_markResumeNode(_scope5_id, "#text/1")}: <!>${_escapeXML(val)}${_markResumeNode(_scope5_id, "#text/2")}</div>${_markResumeNode(_scope5_id, "#div/0")}`);
-  }
-  for (const key in obj) {
+    _write(`<div${_attr("key", key)}>${_escapeXML(key)}${_markResumeNode(_scope5_id, "#text/1")}: <!>${_escapeXML(val)}${_markResumeNode(_scope5_id, "#text/2")}</div>${_markResumeNode(_scope5_id, "#div/0")}<div></div><div${_attr("key", `other-${key}`)}></div>${_markResumeNode(_scope5_id, "#div/3")}`);
+  });
+  _forTo(10, 0, 2, i => {
     const _scope6_id = _nextScopeId();
-    const val = obj[key];
-    _write(`<div${_attr("key", key)}>${_escapeXML(key)}${_markResumeNode(_scope6_id, "#text/1")}: <!>${_escapeXML(val)}${_markResumeNode(_scope6_id, "#text/2")}</div>${_markResumeNode(_scope6_id, "#div/0")}<div></div><div${_attr("key", `other-${key}`)}></div>${_markResumeNode(_scope6_id, "#div/3")}`);
-  }
-  for (let _from3 = 0 ?? 0, _step3 = 2 ?? 1, _steps3 = (10 - _from3) / _step3, _i6 = 0; _i6 <= _steps3; _i6++) {
-    const _scope7_id = _nextScopeId();
-    const i = _from3 + _i6 * _step3;
-    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope7_id, "#text/1")}</div>${_markResumeNode(_scope7_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope7_id, "#div/2")}`);
-    for (let _from2 = 0 ?? 0, _step2 = 2 ?? 1, _steps2 = (10 - _from2) / _step2, _i5 = 0; _i5 <= _steps2; _i5++) {
-      const _scope8_id = _nextScopeId();
-      const i = _from2 + _i5 * _step2;
-      _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope8_id, "#text/1")}</div>${_markResumeNode(_scope8_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope8_id, "#div/2")}`);
-    }
-  }
-  for (let _from4 = 10 ?? 0, _step4 = -2 ?? 1, _steps4 = (0 - _from4) / _step4, _i7 = 0; _i7 <= _steps4; _i7++) {
+    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope6_id, "#text/1")}</div>${_markResumeNode(_scope6_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope6_id, "#div/2")}`);
+    _forTo(10, 0, 2, i => {
+      const _scope7_id = _nextScopeId();
+      _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope7_id, "#text/1")}</div>${_markResumeNode(_scope7_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope7_id, "#div/2")}`);
+    });
+  });
+  _forTo(0, 10, -2, i => {
+    const _scope8_id = _nextScopeId();
+    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope8_id, "#text/1")}</div>${_markResumeNode(_scope8_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope8_id, "#div/2")}`);
+  });
+  _forTo(10, 0, 1, () => {
     const _scope9_id = _nextScopeId();
-    const i = _from4 + _i7 * _step4;
-    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markResumeNode(_scope9_id, "#text/1")}</div>${_markResumeNode(_scope9_id, "#div/0")}<div></div><div${_attr("key", `other-${i}`)}></div>${_markResumeNode(_scope9_id, "#div/2")}`);
-  }
-  for (let _from5 = 0 ?? 0, _step5 = 1 ?? 1, _steps5 = (10 - _from5) / _step5, _i8 = 0; _i8 <= _steps5; _i8++) {
-    const _scope10_id = _nextScopeId();
     _write("Hello");
-  }
-  for (let _from6 = 0 ?? 0, _step6 = 1 ?? 1, _steps6 = (10 - _from6) / _step6, _i9 = 0; _i9 <= _steps6; _i9++) {
-    const _scope11_id = _nextScopeId();
+  });
+  _forTo(10, 0, 1, () => {
+    const _scope10_id = _nextScopeId();
     _write("Hello");
-  }
+  });
 });
 export default /* @__PURE__ */_createTemplate(_renderer, "packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko");
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume-sanitized.expected.md
index 9f8a03a398..c4ba455a8d 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume-sanitized.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume-sanitized.expected.md
@@ -87,21 +87,6 @@
 <div
   key="other-2"
 />
-<div
-  key="0"
->
-  3: 1
-</div>
-<div
-  key="1"
->
-  3: 2
-</div>
-<div
-  key="2"
->
-  3: 3
-</div>
 <div
   key="a"
 >
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume.expected.md
index 6dd07c83bf..f9ddfbda19 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/resume.expected.md
@@ -148,9 +148,9 @@
     />
     <!--M_*15 #div/3-->
     <div
-      key="0"
+      key="a"
     >
-      3
+      a
       <!--M_*16 #text/1-->
       : 
       <!---->
@@ -158,652 +158,619 @@
       <!--M_*16 #text/2-->
     </div>
     <!--M_*16 #div/0-->
-    <div
-      key="1"
-    >
-      3
-      <!--M_*17 #text/1-->
-      : 
-      <!---->
-      2
-      <!--M_*17 #text/2-->
-    </div>
-    <!--M_*17 #div/0-->
-    <div
-      key="2"
-    >
-      3
-      <!--M_*18 #text/1-->
-      : 
-      <!---->
-      3
-      <!--M_*18 #text/2-->
-    </div>
-    <!--M_*18 #div/0-->
-    <div
-      key="a"
-    >
-      a
-      <!--M_*19 #text/1-->
-      : 
-      <!---->
-      1
-      <!--M_*19 #text/2-->
-    </div>
-    <!--M_*19 #div/0-->
     <div />
     <div
       key="other-a"
     />
-    <!--M_*19 #div/3-->
+    <!--M_*16 #div/3-->
     <div
       key="b"
     >
       b
-      <!--M_*20 #text/1-->
+      <!--M_*17 #text/1-->
       : 
       <!---->
       1
-      <!--M_*20 #text/2-->
+      <!--M_*17 #text/2-->
     </div>
-    <!--M_*20 #div/0-->
+    <!--M_*17 #div/0-->
     <div />
     <div
       key="other-b"
     />
-    <!--M_*20 #div/3-->
+    <!--M_*17 #div/3-->
     <div
       key="c"
     >
       c
-      <!--M_*21 #text/1-->
+      <!--M_*18 #text/1-->
       : 
       <!---->
       1
-      <!--M_*21 #text/2-->
+      <!--M_*18 #text/2-->
     </div>
-    <!--M_*21 #div/0-->
+    <!--M_*18 #div/0-->
     <div />
     <div
       key="other-c"
     />
-    <!--M_*21 #div/3-->
+    <!--M_*18 #div/3-->
     <div
       key="0"
     >
       0
-      <!--M_*22 #text/1-->
+      <!--M_*19 #text/1-->
     </div>
-    <!--M_*22 #div/0-->
+    <!--M_*19 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*22 #div/2-->
+    <!--M_*19 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*23 #text/1-->
+      <!--M_*20 #text/1-->
     </div>
-    <!--M_*23 #div/0-->
+    <!--M_*20 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*23 #div/2-->
+    <!--M_*20 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*24 #text/1-->
+      <!--M_*21 #text/1-->
     </div>
-    <!--M_*24 #div/0-->
+    <!--M_*21 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*24 #div/2-->
+    <!--M_*21 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*25 #text/1-->
+      <!--M_*22 #text/1-->
     </div>
-    <!--M_*25 #div/0-->
+    <!--M_*22 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*25 #div/2-->
+    <!--M_*22 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*26 #text/1-->
+      <!--M_*23 #text/1-->
     </div>
-    <!--M_*26 #div/0-->
+    <!--M_*23 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*26 #div/2-->
+    <!--M_*23 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*27 #text/1-->
+      <!--M_*24 #text/1-->
     </div>
-    <!--M_*27 #div/0-->
+    <!--M_*24 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*27 #div/2-->
+    <!--M_*24 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*28 #text/1-->
+      <!--M_*25 #text/1-->
     </div>
-    <!--M_*28 #div/0-->
+    <!--M_*25 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*28 #div/2-->
+    <!--M_*25 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*29 #text/1-->
+      <!--M_*26 #text/1-->
     </div>
-    <!--M_*29 #div/0-->
+    <!--M_*26 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*29 #div/2-->
+    <!--M_*26 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*30 #text/1-->
+      <!--M_*27 #text/1-->
     </div>
-    <!--M_*30 #div/0-->
+    <!--M_*27 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*30 #div/2-->
+    <!--M_*27 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*31 #text/1-->
+      <!--M_*28 #text/1-->
     </div>
-    <!--M_*31 #div/0-->
+    <!--M_*28 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*31 #div/2-->
+    <!--M_*28 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*32 #text/1-->
+      <!--M_*29 #text/1-->
     </div>
-    <!--M_*32 #div/0-->
+    <!--M_*29 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*32 #div/2-->
+    <!--M_*29 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*33 #text/1-->
+      <!--M_*30 #text/1-->
     </div>
-    <!--M_*33 #div/0-->
+    <!--M_*30 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*33 #div/2-->
+    <!--M_*30 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*34 #text/1-->
+      <!--M_*31 #text/1-->
     </div>
-    <!--M_*34 #div/0-->
+    <!--M_*31 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*34 #div/2-->
+    <!--M_*31 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*35 #text/1-->
+      <!--M_*32 #text/1-->
     </div>
-    <!--M_*35 #div/0-->
+    <!--M_*32 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*35 #div/2-->
+    <!--M_*32 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*36 #text/1-->
+      <!--M_*33 #text/1-->
     </div>
-    <!--M_*36 #div/0-->
+    <!--M_*33 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*36 #div/2-->
+    <!--M_*33 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*37 #text/1-->
+      <!--M_*34 #text/1-->
     </div>
-    <!--M_*37 #div/0-->
+    <!--M_*34 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*37 #div/2-->
+    <!--M_*34 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*38 #text/1-->
+      <!--M_*35 #text/1-->
     </div>
-    <!--M_*38 #div/0-->
+    <!--M_*35 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*38 #div/2-->
+    <!--M_*35 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*39 #text/1-->
+      <!--M_*36 #text/1-->
     </div>
-    <!--M_*39 #div/0-->
+    <!--M_*36 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*39 #div/2-->
+    <!--M_*36 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*40 #text/1-->
+      <!--M_*37 #text/1-->
     </div>
-    <!--M_*40 #div/0-->
+    <!--M_*37 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*40 #div/2-->
+    <!--M_*37 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*41 #text/1-->
+      <!--M_*38 #text/1-->
     </div>
-    <!--M_*41 #div/0-->
+    <!--M_*38 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*41 #div/2-->
+    <!--M_*38 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*42 #text/1-->
+      <!--M_*39 #text/1-->
     </div>
-    <!--M_*42 #div/0-->
+    <!--M_*39 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*42 #div/2-->
+    <!--M_*39 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*43 #text/1-->
+      <!--M_*40 #text/1-->
     </div>
-    <!--M_*43 #div/0-->
+    <!--M_*40 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*43 #div/2-->
+    <!--M_*40 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*44 #text/1-->
+      <!--M_*41 #text/1-->
     </div>
-    <!--M_*44 #div/0-->
+    <!--M_*41 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*44 #div/2-->
+    <!--M_*41 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*45 #text/1-->
+      <!--M_*42 #text/1-->
     </div>
-    <!--M_*45 #div/0-->
+    <!--M_*42 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*45 #div/2-->
+    <!--M_*42 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*46 #text/1-->
+      <!--M_*43 #text/1-->
     </div>
-    <!--M_*46 #div/0-->
+    <!--M_*43 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*46 #div/2-->
+    <!--M_*43 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*47 #text/1-->
+      <!--M_*44 #text/1-->
     </div>
-    <!--M_*47 #div/0-->
+    <!--M_*44 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*47 #div/2-->
+    <!--M_*44 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*48 #text/1-->
+      <!--M_*45 #text/1-->
     </div>
-    <!--M_*48 #div/0-->
+    <!--M_*45 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*48 #div/2-->
+    <!--M_*45 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*49 #text/1-->
+      <!--M_*46 #text/1-->
     </div>
-    <!--M_*49 #div/0-->
+    <!--M_*46 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*49 #div/2-->
+    <!--M_*46 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*50 #text/1-->
+      <!--M_*47 #text/1-->
     </div>
-    <!--M_*50 #div/0-->
+    <!--M_*47 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*50 #div/2-->
+    <!--M_*47 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*51 #text/1-->
+      <!--M_*48 #text/1-->
     </div>
-    <!--M_*51 #div/0-->
+    <!--M_*48 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*51 #div/2-->
+    <!--M_*48 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*52 #text/1-->
+      <!--M_*49 #text/1-->
     </div>
-    <!--M_*52 #div/0-->
+    <!--M_*49 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*52 #div/2-->
+    <!--M_*49 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*53 #text/1-->
+      <!--M_*50 #text/1-->
     </div>
-    <!--M_*53 #div/0-->
+    <!--M_*50 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*53 #div/2-->
+    <!--M_*50 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*54 #text/1-->
+      <!--M_*51 #text/1-->
     </div>
-    <!--M_*54 #div/0-->
+    <!--M_*51 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*54 #div/2-->
+    <!--M_*51 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*55 #text/1-->
+      <!--M_*52 #text/1-->
     </div>
-    <!--M_*55 #div/0-->
+    <!--M_*52 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*55 #div/2-->
+    <!--M_*52 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*56 #text/1-->
+      <!--M_*53 #text/1-->
     </div>
-    <!--M_*56 #div/0-->
+    <!--M_*53 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*56 #div/2-->
+    <!--M_*53 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*57 #text/1-->
+      <!--M_*54 #text/1-->
     </div>
-    <!--M_*57 #div/0-->
+    <!--M_*54 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*57 #div/2-->
+    <!--M_*54 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*58 #text/1-->
+      <!--M_*55 #text/1-->
     </div>
-    <!--M_*58 #div/0-->
+    <!--M_*55 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*58 #div/2-->
+    <!--M_*55 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*59 #text/1-->
+      <!--M_*56 #text/1-->
     </div>
-    <!--M_*59 #div/0-->
+    <!--M_*56 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*59 #div/2-->
+    <!--M_*56 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*60 #text/1-->
+      <!--M_*57 #text/1-->
     </div>
-    <!--M_*60 #div/0-->
+    <!--M_*57 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*60 #div/2-->
+    <!--M_*57 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*61 #text/1-->
+      <!--M_*58 #text/1-->
     </div>
-    <!--M_*61 #div/0-->
+    <!--M_*58 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*61 #div/2-->
+    <!--M_*58 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*62 #text/1-->
+      <!--M_*59 #text/1-->
     </div>
-    <!--M_*62 #div/0-->
+    <!--M_*59 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*62 #div/2-->
+    <!--M_*59 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*63 #text/1-->
+      <!--M_*60 #text/1-->
     </div>
-    <!--M_*63 #div/0-->
+    <!--M_*60 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*63 #div/2-->
+    <!--M_*60 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*64 #text/1-->
+      <!--M_*61 #text/1-->
     </div>
-    <!--M_*64 #div/0-->
+    <!--M_*61 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*64 #div/2-->
+    <!--M_*61 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*65 #text/1-->
+      <!--M_*62 #text/1-->
     </div>
-    <!--M_*65 #div/0-->
+    <!--M_*62 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*65 #div/2-->
+    <!--M_*62 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*66 #text/1-->
+      <!--M_*63 #text/1-->
     </div>
-    <!--M_*66 #div/0-->
+    <!--M_*63 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*66 #div/2-->
+    <!--M_*63 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*67 #text/1-->
+      <!--M_*64 #text/1-->
     </div>
-    <!--M_*67 #div/0-->
+    <!--M_*64 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*67 #div/2-->
+    <!--M_*64 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*68 #text/1-->
+      <!--M_*65 #text/1-->
     </div>
-    <!--M_*68 #div/0-->
+    <!--M_*65 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*68 #div/2-->
+    <!--M_*65 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*69 #text/1-->
+      <!--M_*66 #text/1-->
     </div>
-    <!--M_*69 #div/0-->
+    <!--M_*66 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*69 #div/2-->
+    <!--M_*66 #div/2-->
     HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
     <script>
       WALKER_RUNTIME("M")("_")
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr-sanitized.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr-sanitized.expected.md
index 2ef8bb8d57..9d84f2ab04 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr-sanitized.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr-sanitized.expected.md
@@ -87,21 +87,6 @@
 <div
   key="other-2"
 />
-<div
-  key="0"
->
-  3: 1
-</div>
-<div
-  key="1"
->
-  3: 2
-</div>
-<div
-  key="2"
->
-  3: 3
-</div>
 <div
   key="a"
 >
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr.expected.md b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr.expected.md
index 2b63e7eeef..a2d56a39a9 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr.expected.md
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div>0<!--M_*1 #text/0-->: <!>1<!--M_*1 #text/1--></div><div></div><div></div><div>1<!--M_*2 #text/0-->: <!>2<!--M_*2 #text/1--></div><div></div><div></div><div>2<!--M_*3 #text/0-->: <!>3<!--M_*3 #text/1--></div><div></div><div></div><div>a<!--M_*4 #text/0-->: <!>1<!--M_*4 #text/1--></div><div></div><div></div><div>b<!--M_*5 #text/0-->: <!>1<!--M_*5 #text/1--></div><div></div><div></div><div>c<!--M_*6 #text/0-->: <!>1<!--M_*6 #text/1--></div><div></div><div></div><div>0<!--M_*7 #text/0--></div><div></div><div></div><div>2<!--M_*8 #text/0--></div><div></div><div></div><div>4<!--M_*9 #text/0--></div><div></div><div></div><div>6<!--M_*10 #text/0--></div><div></div><div></div><div>8<!--M_*11 #text/0--></div><div></div><div></div><div>10<!--M_*12 #text/0--></div><div></div><div></div><div key=0>0<!--M_*13 #text/1-->: <!>1<!--M_*13 #text/2--></div><!--M_*13 #div/0--><div></div><div key=other-0></div><!--M_*13 #div/3--><div key=1>1<!--M_*14 #text/1-->: <!>2<!--M_*14 #text/2--></div><!--M_*14 #div/0--><div></div><div key=other-1></div><!--M_*14 #div/3--><div key=2>2<!--M_*15 #text/1-->: <!>3<!--M_*15 #text/2--></div><!--M_*15 #div/0--><div></div><div key=other-2></div><!--M_*15 #div/3--><div key=0>3<!--M_*16 #text/1-->: <!>1<!--M_*16 #text/2--></div><!--M_*16 #div/0--><div key=1>3<!--M_*17 #text/1-->: <!>2<!--M_*17 #text/2--></div><!--M_*17 #div/0--><div key=2>3<!--M_*18 #text/1-->: <!>3<!--M_*18 #text/2--></div><!--M_*18 #div/0--><div key=a>a<!--M_*19 #text/1-->: <!>1<!--M_*19 #text/2--></div><!--M_*19 #div/0--><div></div><div key=other-a></div><!--M_*19 #div/3--><div key=b>b<!--M_*20 #text/1-->: <!>1<!--M_*20 #text/2--></div><!--M_*20 #div/0--><div></div><div key=other-b></div><!--M_*20 #div/3--><div key=c>c<!--M_*21 #text/1-->: <!>1<!--M_*21 #text/2--></div><!--M_*21 #div/0--><div></div><div key=other-c></div><!--M_*21 #div/3--><div key=0>0<!--M_*22 #text/1--></div><!--M_*22 #div/0--><div></div><div key=other-0></div><!--M_*22 #div/2--><div key=0>0<!--M_*23 #text/1--></div><!--M_*23 #div/0--><div></div><div key=other-0></div><!--M_*23 #div/2--><div key=2>2<!--M_*24 #text/1--></div><!--M_*24 #div/0--><div></div><div key=other-2></div><!--M_*24 #div/2--><div key=4>4<!--M_*25 #text/1--></div><!--M_*25 #div/0--><div></div><div key=other-4></div><!--M_*25 #div/2--><div key=6>6<!--M_*26 #text/1--></div><!--M_*26 #div/0--><div></div><div key=other-6></div><!--M_*26 #div/2--><div key=8>8<!--M_*27 #text/1--></div><!--M_*27 #div/0--><div></div><div key=other-8></div><!--M_*27 #div/2--><div key=10>10<!--M_*28 #text/1--></div><!--M_*28 #div/0--><div></div><div key=other-10></div><!--M_*28 #div/2--><div key=2>2<!--M_*29 #text/1--></div><!--M_*29 #div/0--><div></div><div key=other-2></div><!--M_*29 #div/2--><div key=0>0<!--M_*30 #text/1--></div><!--M_*30 #div/0--><div></div><div key=other-0></div><!--M_*30 #div/2--><div key=2>2<!--M_*31 #text/1--></div><!--M_*31 #div/0--><div></div><div key=other-2></div><!--M_*31 #div/2--><div key=4>4<!--M_*32 #text/1--></div><!--M_*32 #div/0--><div></div><div key=other-4></div><!--M_*32 #div/2--><div key=6>6<!--M_*33 #text/1--></div><!--M_*33 #div/0--><div></div><div key=other-6></div><!--M_*33 #div/2--><div key=8>8<!--M_*34 #text/1--></div><!--M_*34 #div/0--><div></div><div key=other-8></div><!--M_*34 #div/2--><div key=10>10<!--M_*35 #text/1--></div><!--M_*35 #div/0--><div></div><div key=other-10></div><!--M_*35 #div/2--><div key=4>4<!--M_*36 #text/1--></div><!--M_*36 #div/0--><div></div><div key=other-4></div><!--M_*36 #div/2--><div key=0>0<!--M_*37 #text/1--></div><!--M_*37 #div/0--><div></div><div key=other-0></div><!--M_*37 #div/2--><div key=2>2<!--M_*38 #text/1--></div><!--M_*38 #div/0--><div></div><div key=other-2></div><!--M_*38 #div/2--><div key=4>4<!--M_*39 #text/1--></div><!--M_*39 #div/0--><div></div><div key=other-4></div><!--M_*39 #div/2--><div key=6>6<!--M_*40 #text/1--></div><!--M_*40 #div/0--><div></div><div key=other-6></div><!--M_*40 #div/2--><div key=8>8<!--M_*41 #text/1--></div><!--M_*41 #div/0--><div></div><div key=other-8></div><!--M_*41 #div/2--><div key=10>10<!--M_*42 #text/1--></div><!--M_*42 #div/0--><div></div><div key=other-10></div><!--M_*42 #div/2--><div key=6>6<!--M_*43 #text/1--></div><!--M_*43 #div/0--><div></div><div key=other-6></div><!--M_*43 #div/2--><div key=0>0<!--M_*44 #text/1--></div><!--M_*44 #div/0--><div></div><div key=other-0></div><!--M_*44 #div/2--><div key=2>2<!--M_*45 #text/1--></div><!--M_*45 #div/0--><div></div><div key=other-2></div><!--M_*45 #div/2--><div key=4>4<!--M_*46 #text/1--></div><!--M_*46 #div/0--><div></div><div key=other-4></div><!--M_*46 #div/2--><div key=6>6<!--M_*47 #text/1--></div><!--M_*47 #div/0--><div></div><div key=other-6></div><!--M_*47 #div/2--><div key=8>8<!--M_*48 #text/1--></div><!--M_*48 #div/0--><div></div><div key=other-8></div><!--M_*48 #div/2--><div key=10>10<!--M_*49 #text/1--></div><!--M_*49 #div/0--><div></div><div key=other-10></div><!--M_*49 #div/2--><div key=8>8<!--M_*50 #text/1--></div><!--M_*50 #div/0--><div></div><div key=other-8></div><!--M_*50 #div/2--><div key=0>0<!--M_*51 #text/1--></div><!--M_*51 #div/0--><div></div><div key=other-0></div><!--M_*51 #div/2--><div key=2>2<!--M_*52 #text/1--></div><!--M_*52 #div/0--><div></div><div key=other-2></div><!--M_*52 #div/2--><div key=4>4<!--M_*53 #text/1--></div><!--M_*53 #div/0--><div></div><div key=other-4></div><!--M_*53 #div/2--><div key=6>6<!--M_*54 #text/1--></div><!--M_*54 #div/0--><div></div><div key=other-6></div><!--M_*54 #div/2--><div key=8>8<!--M_*55 #text/1--></div><!--M_*55 #div/0--><div></div><div key=other-8></div><!--M_*55 #div/2--><div key=10>10<!--M_*56 #text/1--></div><!--M_*56 #div/0--><div></div><div key=other-10></div><!--M_*56 #div/2--><div key=10>10<!--M_*57 #text/1--></div><!--M_*57 #div/0--><div></div><div key=other-10></div><!--M_*57 #div/2--><div key=0>0<!--M_*58 #text/1--></div><!--M_*58 #div/0--><div></div><div key=other-0></div><!--M_*58 #div/2--><div key=2>2<!--M_*59 #text/1--></div><!--M_*59 #div/0--><div></div><div key=other-2></div><!--M_*59 #div/2--><div key=4>4<!--M_*60 #text/1--></div><!--M_*60 #div/0--><div></div><div key=other-4></div><!--M_*60 #div/2--><div key=6>6<!--M_*61 #text/1--></div><!--M_*61 #div/0--><div></div><div key=other-6></div><!--M_*61 #div/2--><div key=8>8<!--M_*62 #text/1--></div><!--M_*62 #div/0--><div></div><div key=other-8></div><!--M_*62 #div/2--><div key=10>10<!--M_*63 #text/1--></div><!--M_*63 #div/0--><div></div><div key=other-10></div><!--M_*63 #div/2--><div key=10>10<!--M_*64 #text/1--></div><!--M_*64 #div/0--><div></div><div key=other-10></div><!--M_*64 #div/2--><div key=8>8<!--M_*65 #text/1--></div><!--M_*65 #div/0--><div></div><div key=other-8></div><!--M_*65 #div/2--><div key=6>6<!--M_*66 #text/1--></div><!--M_*66 #div/0--><div></div><div key=other-6></div><!--M_*66 #div/2--><div key=4>4<!--M_*67 #text/1--></div><!--M_*67 #div/0--><div></div><div key=other-4></div><!--M_*67 #div/2--><div key=2>2<!--M_*68 #text/1--></div><!--M_*68 #div/0--><div></div><div key=other-2></div><!--M_*68 #div/2--><div key=0>0<!--M_*69 #text/1--></div><!--M_*69 #div/0--><div></div><div key=other-0></div><!--M_*69 #div/2-->HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello<script>WALKER_RUNTIME("M")("_")</script>
+  <div>0<!--M_*1 #text/0-->: <!>1<!--M_*1 #text/1--></div><div></div><div></div><div>1<!--M_*2 #text/0-->: <!>2<!--M_*2 #text/1--></div><div></div><div></div><div>2<!--M_*3 #text/0-->: <!>3<!--M_*3 #text/1--></div><div></div><div></div><div>a<!--M_*4 #text/0-->: <!>1<!--M_*4 #text/1--></div><div></div><div></div><div>b<!--M_*5 #text/0-->: <!>1<!--M_*5 #text/1--></div><div></div><div></div><div>c<!--M_*6 #text/0-->: <!>1<!--M_*6 #text/1--></div><div></div><div></div><div>0<!--M_*7 #text/0--></div><div></div><div></div><div>2<!--M_*8 #text/0--></div><div></div><div></div><div>4<!--M_*9 #text/0--></div><div></div><div></div><div>6<!--M_*10 #text/0--></div><div></div><div></div><div>8<!--M_*11 #text/0--></div><div></div><div></div><div>10<!--M_*12 #text/0--></div><div></div><div></div><div key=0>0<!--M_*13 #text/1-->: <!>1<!--M_*13 #text/2--></div><!--M_*13 #div/0--><div></div><div key=other-0></div><!--M_*13 #div/3--><div key=1>1<!--M_*14 #text/1-->: <!>2<!--M_*14 #text/2--></div><!--M_*14 #div/0--><div></div><div key=other-1></div><!--M_*14 #div/3--><div key=2>2<!--M_*15 #text/1-->: <!>3<!--M_*15 #text/2--></div><!--M_*15 #div/0--><div></div><div key=other-2></div><!--M_*15 #div/3--><div key=a>a<!--M_*16 #text/1-->: <!>1<!--M_*16 #text/2--></div><!--M_*16 #div/0--><div></div><div key=other-a></div><!--M_*16 #div/3--><div key=b>b<!--M_*17 #text/1-->: <!>1<!--M_*17 #text/2--></div><!--M_*17 #div/0--><div></div><div key=other-b></div><!--M_*17 #div/3--><div key=c>c<!--M_*18 #text/1-->: <!>1<!--M_*18 #text/2--></div><!--M_*18 #div/0--><div></div><div key=other-c></div><!--M_*18 #div/3--><div key=0>0<!--M_*19 #text/1--></div><!--M_*19 #div/0--><div></div><div key=other-0></div><!--M_*19 #div/2--><div key=0>0<!--M_*20 #text/1--></div><!--M_*20 #div/0--><div></div><div key=other-0></div><!--M_*20 #div/2--><div key=2>2<!--M_*21 #text/1--></div><!--M_*21 #div/0--><div></div><div key=other-2></div><!--M_*21 #div/2--><div key=4>4<!--M_*22 #text/1--></div><!--M_*22 #div/0--><div></div><div key=other-4></div><!--M_*22 #div/2--><div key=6>6<!--M_*23 #text/1--></div><!--M_*23 #div/0--><div></div><div key=other-6></div><!--M_*23 #div/2--><div key=8>8<!--M_*24 #text/1--></div><!--M_*24 #div/0--><div></div><div key=other-8></div><!--M_*24 #div/2--><div key=10>10<!--M_*25 #text/1--></div><!--M_*25 #div/0--><div></div><div key=other-10></div><!--M_*25 #div/2--><div key=2>2<!--M_*26 #text/1--></div><!--M_*26 #div/0--><div></div><div key=other-2></div><!--M_*26 #div/2--><div key=0>0<!--M_*27 #text/1--></div><!--M_*27 #div/0--><div></div><div key=other-0></div><!--M_*27 #div/2--><div key=2>2<!--M_*28 #text/1--></div><!--M_*28 #div/0--><div></div><div key=other-2></div><!--M_*28 #div/2--><div key=4>4<!--M_*29 #text/1--></div><!--M_*29 #div/0--><div></div><div key=other-4></div><!--M_*29 #div/2--><div key=6>6<!--M_*30 #text/1--></div><!--M_*30 #div/0--><div></div><div key=other-6></div><!--M_*30 #div/2--><div key=8>8<!--M_*31 #text/1--></div><!--M_*31 #div/0--><div></div><div key=other-8></div><!--M_*31 #div/2--><div key=10>10<!--M_*32 #text/1--></div><!--M_*32 #div/0--><div></div><div key=other-10></div><!--M_*32 #div/2--><div key=4>4<!--M_*33 #text/1--></div><!--M_*33 #div/0--><div></div><div key=other-4></div><!--M_*33 #div/2--><div key=0>0<!--M_*34 #text/1--></div><!--M_*34 #div/0--><div></div><div key=other-0></div><!--M_*34 #div/2--><div key=2>2<!--M_*35 #text/1--></div><!--M_*35 #div/0--><div></div><div key=other-2></div><!--M_*35 #div/2--><div key=4>4<!--M_*36 #text/1--></div><!--M_*36 #div/0--><div></div><div key=other-4></div><!--M_*36 #div/2--><div key=6>6<!--M_*37 #text/1--></div><!--M_*37 #div/0--><div></div><div key=other-6></div><!--M_*37 #div/2--><div key=8>8<!--M_*38 #text/1--></div><!--M_*38 #div/0--><div></div><div key=other-8></div><!--M_*38 #div/2--><div key=10>10<!--M_*39 #text/1--></div><!--M_*39 #div/0--><div></div><div key=other-10></div><!--M_*39 #div/2--><div key=6>6<!--M_*40 #text/1--></div><!--M_*40 #div/0--><div></div><div key=other-6></div><!--M_*40 #div/2--><div key=0>0<!--M_*41 #text/1--></div><!--M_*41 #div/0--><div></div><div key=other-0></div><!--M_*41 #div/2--><div key=2>2<!--M_*42 #text/1--></div><!--M_*42 #div/0--><div></div><div key=other-2></div><!--M_*42 #div/2--><div key=4>4<!--M_*43 #text/1--></div><!--M_*43 #div/0--><div></div><div key=other-4></div><!--M_*43 #div/2--><div key=6>6<!--M_*44 #text/1--></div><!--M_*44 #div/0--><div></div><div key=other-6></div><!--M_*44 #div/2--><div key=8>8<!--M_*45 #text/1--></div><!--M_*45 #div/0--><div></div><div key=other-8></div><!--M_*45 #div/2--><div key=10>10<!--M_*46 #text/1--></div><!--M_*46 #div/0--><div></div><div key=other-10></div><!--M_*46 #div/2--><div key=8>8<!--M_*47 #text/1--></div><!--M_*47 #div/0--><div></div><div key=other-8></div><!--M_*47 #div/2--><div key=0>0<!--M_*48 #text/1--></div><!--M_*48 #div/0--><div></div><div key=other-0></div><!--M_*48 #div/2--><div key=2>2<!--M_*49 #text/1--></div><!--M_*49 #div/0--><div></div><div key=other-2></div><!--M_*49 #div/2--><div key=4>4<!--M_*50 #text/1--></div><!--M_*50 #div/0--><div></div><div key=other-4></div><!--M_*50 #div/2--><div key=6>6<!--M_*51 #text/1--></div><!--M_*51 #div/0--><div></div><div key=other-6></div><!--M_*51 #div/2--><div key=8>8<!--M_*52 #text/1--></div><!--M_*52 #div/0--><div></div><div key=other-8></div><!--M_*52 #div/2--><div key=10>10<!--M_*53 #text/1--></div><!--M_*53 #div/0--><div></div><div key=other-10></div><!--M_*53 #div/2--><div key=10>10<!--M_*54 #text/1--></div><!--M_*54 #div/0--><div></div><div key=other-10></div><!--M_*54 #div/2--><div key=0>0<!--M_*55 #text/1--></div><!--M_*55 #div/0--><div></div><div key=other-0></div><!--M_*55 #div/2--><div key=2>2<!--M_*56 #text/1--></div><!--M_*56 #div/0--><div></div><div key=other-2></div><!--M_*56 #div/2--><div key=4>4<!--M_*57 #text/1--></div><!--M_*57 #div/0--><div></div><div key=other-4></div><!--M_*57 #div/2--><div key=6>6<!--M_*58 #text/1--></div><!--M_*58 #div/0--><div></div><div key=other-6></div><!--M_*58 #div/2--><div key=8>8<!--M_*59 #text/1--></div><!--M_*59 #div/0--><div></div><div key=other-8></div><!--M_*59 #div/2--><div key=10>10<!--M_*60 #text/1--></div><!--M_*60 #div/0--><div></div><div key=other-10></div><!--M_*60 #div/2--><div key=10>10<!--M_*61 #text/1--></div><!--M_*61 #div/0--><div></div><div key=other-10></div><!--M_*61 #div/2--><div key=8>8<!--M_*62 #text/1--></div><!--M_*62 #div/0--><div></div><div key=other-8></div><!--M_*62 #div/2--><div key=6>6<!--M_*63 #text/1--></div><!--M_*63 #div/0--><div></div><div key=other-6></div><!--M_*63 #div/2--><div key=4>4<!--M_*64 #text/1--></div><!--M_*64 #div/0--><div></div><div key=other-4></div><!--M_*64 #div/2--><div key=2>2<!--M_*65 #text/1--></div><!--M_*65 #div/0--><div></div><div key=other-2></div><!--M_*65 #div/2--><div key=0>0<!--M_*66 #text/1--></div><!--M_*66 #div/0--><div></div><div key=other-0></div><!--M_*66 #div/2-->HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello<script>WALKER_RUNTIME("M")("_")</script>
 
 
 # Render "End"
@@ -152,9 +152,9 @@
     />
     <!--M_*15 #div/3-->
     <div
-      key="0"
+      key="a"
     >
-      3
+      a
       <!--M_*16 #text/1-->
       : 
       <!---->
@@ -162,652 +162,619 @@
       <!--M_*16 #text/2-->
     </div>
     <!--M_*16 #div/0-->
-    <div
-      key="1"
-    >
-      3
-      <!--M_*17 #text/1-->
-      : 
-      <!---->
-      2
-      <!--M_*17 #text/2-->
-    </div>
-    <!--M_*17 #div/0-->
-    <div
-      key="2"
-    >
-      3
-      <!--M_*18 #text/1-->
-      : 
-      <!---->
-      3
-      <!--M_*18 #text/2-->
-    </div>
-    <!--M_*18 #div/0-->
-    <div
-      key="a"
-    >
-      a
-      <!--M_*19 #text/1-->
-      : 
-      <!---->
-      1
-      <!--M_*19 #text/2-->
-    </div>
-    <!--M_*19 #div/0-->
     <div />
     <div
       key="other-a"
     />
-    <!--M_*19 #div/3-->
+    <!--M_*16 #div/3-->
     <div
       key="b"
     >
       b
-      <!--M_*20 #text/1-->
+      <!--M_*17 #text/1-->
       : 
       <!---->
       1
-      <!--M_*20 #text/2-->
+      <!--M_*17 #text/2-->
     </div>
-    <!--M_*20 #div/0-->
+    <!--M_*17 #div/0-->
     <div />
     <div
       key="other-b"
     />
-    <!--M_*20 #div/3-->
+    <!--M_*17 #div/3-->
     <div
       key="c"
     >
       c
-      <!--M_*21 #text/1-->
+      <!--M_*18 #text/1-->
       : 
       <!---->
       1
-      <!--M_*21 #text/2-->
+      <!--M_*18 #text/2-->
     </div>
-    <!--M_*21 #div/0-->
+    <!--M_*18 #div/0-->
     <div />
     <div
       key="other-c"
     />
-    <!--M_*21 #div/3-->
+    <!--M_*18 #div/3-->
     <div
       key="0"
     >
       0
-      <!--M_*22 #text/1-->
+      <!--M_*19 #text/1-->
     </div>
-    <!--M_*22 #div/0-->
+    <!--M_*19 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*22 #div/2-->
+    <!--M_*19 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*23 #text/1-->
+      <!--M_*20 #text/1-->
     </div>
-    <!--M_*23 #div/0-->
+    <!--M_*20 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*23 #div/2-->
+    <!--M_*20 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*24 #text/1-->
+      <!--M_*21 #text/1-->
     </div>
-    <!--M_*24 #div/0-->
+    <!--M_*21 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*24 #div/2-->
+    <!--M_*21 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*25 #text/1-->
+      <!--M_*22 #text/1-->
     </div>
-    <!--M_*25 #div/0-->
+    <!--M_*22 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*25 #div/2-->
+    <!--M_*22 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*26 #text/1-->
+      <!--M_*23 #text/1-->
     </div>
-    <!--M_*26 #div/0-->
+    <!--M_*23 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*26 #div/2-->
+    <!--M_*23 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*27 #text/1-->
+      <!--M_*24 #text/1-->
     </div>
-    <!--M_*27 #div/0-->
+    <!--M_*24 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*27 #div/2-->
+    <!--M_*24 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*28 #text/1-->
+      <!--M_*25 #text/1-->
     </div>
-    <!--M_*28 #div/0-->
+    <!--M_*25 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*28 #div/2-->
+    <!--M_*25 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*29 #text/1-->
+      <!--M_*26 #text/1-->
     </div>
-    <!--M_*29 #div/0-->
+    <!--M_*26 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*29 #div/2-->
+    <!--M_*26 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*30 #text/1-->
+      <!--M_*27 #text/1-->
     </div>
-    <!--M_*30 #div/0-->
+    <!--M_*27 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*30 #div/2-->
+    <!--M_*27 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*31 #text/1-->
+      <!--M_*28 #text/1-->
     </div>
-    <!--M_*31 #div/0-->
+    <!--M_*28 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*31 #div/2-->
+    <!--M_*28 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*32 #text/1-->
+      <!--M_*29 #text/1-->
     </div>
-    <!--M_*32 #div/0-->
+    <!--M_*29 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*32 #div/2-->
+    <!--M_*29 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*33 #text/1-->
+      <!--M_*30 #text/1-->
     </div>
-    <!--M_*33 #div/0-->
+    <!--M_*30 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*33 #div/2-->
+    <!--M_*30 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*34 #text/1-->
+      <!--M_*31 #text/1-->
     </div>
-    <!--M_*34 #div/0-->
+    <!--M_*31 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*34 #div/2-->
+    <!--M_*31 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*35 #text/1-->
+      <!--M_*32 #text/1-->
     </div>
-    <!--M_*35 #div/0-->
+    <!--M_*32 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*35 #div/2-->
+    <!--M_*32 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*36 #text/1-->
+      <!--M_*33 #text/1-->
     </div>
-    <!--M_*36 #div/0-->
+    <!--M_*33 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*36 #div/2-->
+    <!--M_*33 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*37 #text/1-->
+      <!--M_*34 #text/1-->
     </div>
-    <!--M_*37 #div/0-->
+    <!--M_*34 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*37 #div/2-->
+    <!--M_*34 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*38 #text/1-->
+      <!--M_*35 #text/1-->
     </div>
-    <!--M_*38 #div/0-->
+    <!--M_*35 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*38 #div/2-->
+    <!--M_*35 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*39 #text/1-->
+      <!--M_*36 #text/1-->
     </div>
-    <!--M_*39 #div/0-->
+    <!--M_*36 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*39 #div/2-->
+    <!--M_*36 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*40 #text/1-->
+      <!--M_*37 #text/1-->
     </div>
-    <!--M_*40 #div/0-->
+    <!--M_*37 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*40 #div/2-->
+    <!--M_*37 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*41 #text/1-->
+      <!--M_*38 #text/1-->
     </div>
-    <!--M_*41 #div/0-->
+    <!--M_*38 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*41 #div/2-->
+    <!--M_*38 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*42 #text/1-->
+      <!--M_*39 #text/1-->
     </div>
-    <!--M_*42 #div/0-->
+    <!--M_*39 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*42 #div/2-->
+    <!--M_*39 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*43 #text/1-->
+      <!--M_*40 #text/1-->
     </div>
-    <!--M_*43 #div/0-->
+    <!--M_*40 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*43 #div/2-->
+    <!--M_*40 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*44 #text/1-->
+      <!--M_*41 #text/1-->
     </div>
-    <!--M_*44 #div/0-->
+    <!--M_*41 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*44 #div/2-->
+    <!--M_*41 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*45 #text/1-->
+      <!--M_*42 #text/1-->
     </div>
-    <!--M_*45 #div/0-->
+    <!--M_*42 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*45 #div/2-->
+    <!--M_*42 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*46 #text/1-->
+      <!--M_*43 #text/1-->
     </div>
-    <!--M_*46 #div/0-->
+    <!--M_*43 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*46 #div/2-->
+    <!--M_*43 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*47 #text/1-->
+      <!--M_*44 #text/1-->
     </div>
-    <!--M_*47 #div/0-->
+    <!--M_*44 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*47 #div/2-->
+    <!--M_*44 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*48 #text/1-->
+      <!--M_*45 #text/1-->
     </div>
-    <!--M_*48 #div/0-->
+    <!--M_*45 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*48 #div/2-->
+    <!--M_*45 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*49 #text/1-->
+      <!--M_*46 #text/1-->
     </div>
-    <!--M_*49 #div/0-->
+    <!--M_*46 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*49 #div/2-->
+    <!--M_*46 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*50 #text/1-->
+      <!--M_*47 #text/1-->
     </div>
-    <!--M_*50 #div/0-->
+    <!--M_*47 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*50 #div/2-->
+    <!--M_*47 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*51 #text/1-->
+      <!--M_*48 #text/1-->
     </div>
-    <!--M_*51 #div/0-->
+    <!--M_*48 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*51 #div/2-->
+    <!--M_*48 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*52 #text/1-->
+      <!--M_*49 #text/1-->
     </div>
-    <!--M_*52 #div/0-->
+    <!--M_*49 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*52 #div/2-->
+    <!--M_*49 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*53 #text/1-->
+      <!--M_*50 #text/1-->
     </div>
-    <!--M_*53 #div/0-->
+    <!--M_*50 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*53 #div/2-->
+    <!--M_*50 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*54 #text/1-->
+      <!--M_*51 #text/1-->
     </div>
-    <!--M_*54 #div/0-->
+    <!--M_*51 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*54 #div/2-->
+    <!--M_*51 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*55 #text/1-->
+      <!--M_*52 #text/1-->
     </div>
-    <!--M_*55 #div/0-->
+    <!--M_*52 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*55 #div/2-->
+    <!--M_*52 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*56 #text/1-->
+      <!--M_*53 #text/1-->
     </div>
-    <!--M_*56 #div/0-->
+    <!--M_*53 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*56 #div/2-->
+    <!--M_*53 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*57 #text/1-->
+      <!--M_*54 #text/1-->
     </div>
-    <!--M_*57 #div/0-->
+    <!--M_*54 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*57 #div/2-->
+    <!--M_*54 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*58 #text/1-->
+      <!--M_*55 #text/1-->
     </div>
-    <!--M_*58 #div/0-->
+    <!--M_*55 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*58 #div/2-->
+    <!--M_*55 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*59 #text/1-->
+      <!--M_*56 #text/1-->
     </div>
-    <!--M_*59 #div/0-->
+    <!--M_*56 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*59 #div/2-->
+    <!--M_*56 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*60 #text/1-->
+      <!--M_*57 #text/1-->
     </div>
-    <!--M_*60 #div/0-->
+    <!--M_*57 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*60 #div/2-->
+    <!--M_*57 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*61 #text/1-->
+      <!--M_*58 #text/1-->
     </div>
-    <!--M_*61 #div/0-->
+    <!--M_*58 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*61 #div/2-->
+    <!--M_*58 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*62 #text/1-->
+      <!--M_*59 #text/1-->
     </div>
-    <!--M_*62 #div/0-->
+    <!--M_*59 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*62 #div/2-->
+    <!--M_*59 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*63 #text/1-->
+      <!--M_*60 #text/1-->
     </div>
-    <!--M_*63 #div/0-->
+    <!--M_*60 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*63 #div/2-->
+    <!--M_*60 #div/2-->
     <div
       key="10"
     >
       10
-      <!--M_*64 #text/1-->
+      <!--M_*61 #text/1-->
     </div>
-    <!--M_*64 #div/0-->
+    <!--M_*61 #div/0-->
     <div />
     <div
       key="other-10"
     />
-    <!--M_*64 #div/2-->
+    <!--M_*61 #div/2-->
     <div
       key="8"
     >
       8
-      <!--M_*65 #text/1-->
+      <!--M_*62 #text/1-->
     </div>
-    <!--M_*65 #div/0-->
+    <!--M_*62 #div/0-->
     <div />
     <div
       key="other-8"
     />
-    <!--M_*65 #div/2-->
+    <!--M_*62 #div/2-->
     <div
       key="6"
     >
       6
-      <!--M_*66 #text/1-->
+      <!--M_*63 #text/1-->
     </div>
-    <!--M_*66 #div/0-->
+    <!--M_*63 #div/0-->
     <div />
     <div
       key="other-6"
     />
-    <!--M_*66 #div/2-->
+    <!--M_*63 #div/2-->
     <div
       key="4"
     >
       4
-      <!--M_*67 #text/1-->
+      <!--M_*64 #text/1-->
     </div>
-    <!--M_*67 #div/0-->
+    <!--M_*64 #div/0-->
     <div />
     <div
       key="other-4"
     />
-    <!--M_*67 #div/2-->
+    <!--M_*64 #div/2-->
     <div
       key="2"
     >
       2
-      <!--M_*68 #text/1-->
+      <!--M_*65 #text/1-->
     </div>
-    <!--M_*68 #div/0-->
+    <!--M_*65 #div/0-->
     <div />
     <div
       key="other-2"
     />
-    <!--M_*68 #div/2-->
+    <!--M_*65 #div/2-->
     <div
       key="0"
     >
       0
-      <!--M_*69 #text/1-->
+      <!--M_*66 #text/1-->
     </div>
-    <!--M_*69 #div/0-->
+    <!--M_*66 #div/0-->
     <div />
     <div
       key="other-0"
     />
-    <!--M_*69 #div/2-->
+    <!--M_*66 #div/2-->
     HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
     <script>
       WALKER_RUNTIME("M")("_")
@@ -947,391 +914,367 @@ inserted #document/html0/body1/div51/#text4
 inserted #document/html0/body1/div51/#comment5
 inserted #document/html0/body1/#comment52
 inserted #document/html0/body1/div53
-inserted #document/html0/body1/div53/#text0
-inserted #document/html0/body1/div53/#comment1
-inserted #document/html0/body1/div53/#text2
-inserted #document/html0/body1/div53/#comment3
-inserted #document/html0/body1/div53/#text4
-inserted #document/html0/body1/div53/#comment5
-inserted #document/html0/body1/#comment54
-inserted #document/html0/body1/div55
-inserted #document/html0/body1/div55/#text0
-inserted #document/html0/body1/div55/#comment1
-inserted #document/html0/body1/div55/#text2
-inserted #document/html0/body1/div55/#comment3
-inserted #document/html0/body1/div55/#text4
-inserted #document/html0/body1/div55/#comment5
-inserted #document/html0/body1/#comment56
-inserted #document/html0/body1/div57
-inserted #document/html0/body1/div57/#text0
-inserted #document/html0/body1/div57/#comment1
-inserted #document/html0/body1/div57/#text2
-inserted #document/html0/body1/div57/#comment3
-inserted #document/html0/body1/div57/#text4
-inserted #document/html0/body1/div57/#comment5
-inserted #document/html0/body1/#comment58
+inserted #document/html0/body1/div54
+inserted #document/html0/body1/#comment55
+inserted #document/html0/body1/div56
+inserted #document/html0/body1/div56/#text0
+inserted #document/html0/body1/div56/#comment1
+inserted #document/html0/body1/div56/#text2
+inserted #document/html0/body1/div56/#comment3
+inserted #document/html0/body1/div56/#text4
+inserted #document/html0/body1/div56/#comment5
+inserted #document/html0/body1/#comment57
+inserted #document/html0/body1/div58
 inserted #document/html0/body1/div59
-inserted #document/html0/body1/div60
-inserted #document/html0/body1/#comment61
-inserted #document/html0/body1/div62
-inserted #document/html0/body1/div62/#text0
-inserted #document/html0/body1/div62/#comment1
-inserted #document/html0/body1/div62/#text2
-inserted #document/html0/body1/div62/#comment3
-inserted #document/html0/body1/div62/#text4
-inserted #document/html0/body1/div62/#comment5
-inserted #document/html0/body1/#comment63
+inserted #document/html0/body1/#comment60
+inserted #document/html0/body1/div61
+inserted #document/html0/body1/div61/#text0
+inserted #document/html0/body1/div61/#comment1
+inserted #document/html0/body1/div61/#text2
+inserted #document/html0/body1/div61/#comment3
+inserted #document/html0/body1/div61/#text4
+inserted #document/html0/body1/div61/#comment5
+inserted #document/html0/body1/#comment62
+inserted #document/html0/body1/div63
 inserted #document/html0/body1/div64
-inserted #document/html0/body1/div65
-inserted #document/html0/body1/#comment66
-inserted #document/html0/body1/div67
-inserted #document/html0/body1/div67/#text0
-inserted #document/html0/body1/div67/#comment1
-inserted #document/html0/body1/div67/#text2
-inserted #document/html0/body1/div67/#comment3
-inserted #document/html0/body1/div67/#text4
-inserted #document/html0/body1/div67/#comment5
-inserted #document/html0/body1/#comment68
+inserted #document/html0/body1/#comment65
+inserted #document/html0/body1/div66
+inserted #document/html0/body1/div66/#text0
+inserted #document/html0/body1/div66/#comment1
+inserted #document/html0/body1/#comment67
+inserted #document/html0/body1/div68
 inserted #document/html0/body1/div69
-inserted #document/html0/body1/div70
-inserted #document/html0/body1/#comment71
-inserted #document/html0/body1/div72
-inserted #document/html0/body1/div72/#text0
-inserted #document/html0/body1/div72/#comment1
-inserted #document/html0/body1/#comment73
+inserted #document/html0/body1/#comment70
+inserted #document/html0/body1/div71
+inserted #document/html0/body1/div71/#text0
+inserted #document/html0/body1/div71/#comment1
+inserted #document/html0/body1/#comment72
+inserted #document/html0/body1/div73
 inserted #document/html0/body1/div74
-inserted #document/html0/body1/div75
-inserted #document/html0/body1/#comment76
-inserted #document/html0/body1/div77
-inserted #document/html0/body1/div77/#text0
-inserted #document/html0/body1/div77/#comment1
-inserted #document/html0/body1/#comment78
+inserted #document/html0/body1/#comment75
+inserted #document/html0/body1/div76
+inserted #document/html0/body1/div76/#text0
+inserted #document/html0/body1/div76/#comment1
+inserted #document/html0/body1/#comment77
+inserted #document/html0/body1/div78
 inserted #document/html0/body1/div79
-inserted #document/html0/body1/div80
-inserted #document/html0/body1/#comment81
-inserted #document/html0/body1/div82
-inserted #document/html0/body1/div82/#text0
-inserted #document/html0/body1/div82/#comment1
-inserted #document/html0/body1/#comment83
+inserted #document/html0/body1/#comment80
+inserted #document/html0/body1/div81
+inserted #document/html0/body1/div81/#text0
+inserted #document/html0/body1/div81/#comment1
+inserted #document/html0/body1/#comment82
+inserted #document/html0/body1/div83
 inserted #document/html0/body1/div84
-inserted #document/html0/body1/div85
-inserted #document/html0/body1/#comment86
-inserted #document/html0/body1/div87
-inserted #document/html0/body1/div87/#text0
-inserted #document/html0/body1/div87/#comment1
-inserted #document/html0/body1/#comment88
+inserted #document/html0/body1/#comment85
+inserted #document/html0/body1/div86
+inserted #document/html0/body1/div86/#text0
+inserted #document/html0/body1/div86/#comment1
+inserted #document/html0/body1/#comment87
+inserted #document/html0/body1/div88
 inserted #document/html0/body1/div89
-inserted #document/html0/body1/div90
-inserted #document/html0/body1/#comment91
-inserted #document/html0/body1/div92
-inserted #document/html0/body1/div92/#text0
-inserted #document/html0/body1/div92/#comment1
-inserted #document/html0/body1/#comment93
+inserted #document/html0/body1/#comment90
+inserted #document/html0/body1/div91
+inserted #document/html0/body1/div91/#text0
+inserted #document/html0/body1/div91/#comment1
+inserted #document/html0/body1/#comment92
+inserted #document/html0/body1/div93
 inserted #document/html0/body1/div94
-inserted #document/html0/body1/div95
-inserted #document/html0/body1/#comment96
-inserted #document/html0/body1/div97
-inserted #document/html0/body1/div97/#text0
-inserted #document/html0/body1/div97/#comment1
-inserted #document/html0/body1/#comment98
+inserted #document/html0/body1/#comment95
+inserted #document/html0/body1/div96
+inserted #document/html0/body1/div96/#text0
+inserted #document/html0/body1/div96/#comment1
+inserted #document/html0/body1/#comment97
+inserted #document/html0/body1/div98
 inserted #document/html0/body1/div99
-inserted #document/html0/body1/div100
-inserted #document/html0/body1/#comment101
-inserted #document/html0/body1/div102
-inserted #document/html0/body1/div102/#text0
-inserted #document/html0/body1/div102/#comment1
-inserted #document/html0/body1/#comment103
+inserted #document/html0/body1/#comment100
+inserted #document/html0/body1/div101
+inserted #document/html0/body1/div101/#text0
+inserted #document/html0/body1/div101/#comment1
+inserted #document/html0/body1/#comment102
+inserted #document/html0/body1/div103
 inserted #document/html0/body1/div104
-inserted #document/html0/body1/div105
-inserted #document/html0/body1/#comment106
-inserted #document/html0/body1/div107
-inserted #document/html0/body1/div107/#text0
-inserted #document/html0/body1/div107/#comment1
-inserted #document/html0/body1/#comment108
+inserted #document/html0/body1/#comment105
+inserted #document/html0/body1/div106
+inserted #document/html0/body1/div106/#text0
+inserted #document/html0/body1/div106/#comment1
+inserted #document/html0/body1/#comment107
+inserted #document/html0/body1/div108
 inserted #document/html0/body1/div109
-inserted #document/html0/body1/div110
-inserted #document/html0/body1/#comment111
-inserted #document/html0/body1/div112
-inserted #document/html0/body1/div112/#text0
-inserted #document/html0/body1/div112/#comment1
-inserted #document/html0/body1/#comment113
+inserted #document/html0/body1/#comment110
+inserted #document/html0/body1/div111
+inserted #document/html0/body1/div111/#text0
+inserted #document/html0/body1/div111/#comment1
+inserted #document/html0/body1/#comment112
+inserted #document/html0/body1/div113
 inserted #document/html0/body1/div114
-inserted #document/html0/body1/div115
-inserted #document/html0/body1/#comment116
-inserted #document/html0/body1/div117
-inserted #document/html0/body1/div117/#text0
-inserted #document/html0/body1/div117/#comment1
-inserted #document/html0/body1/#comment118
+inserted #document/html0/body1/#comment115
+inserted #document/html0/body1/div116
+inserted #document/html0/body1/div116/#text0
+inserted #document/html0/body1/div116/#comment1
+inserted #document/html0/body1/#comment117
+inserted #document/html0/body1/div118
 inserted #document/html0/body1/div119
-inserted #document/html0/body1/div120
-inserted #document/html0/body1/#comment121
-inserted #document/html0/body1/div122
-inserted #document/html0/body1/div122/#text0
-inserted #document/html0/body1/div122/#comment1
-inserted #document/html0/body1/#comment123
+inserted #document/html0/body1/#comment120
+inserted #document/html0/body1/div121
+inserted #document/html0/body1/div121/#text0
+inserted #document/html0/body1/div121/#comment1
+inserted #document/html0/body1/#comment122
+inserted #document/html0/body1/div123
 inserted #document/html0/body1/div124
-inserted #document/html0/body1/div125
-inserted #document/html0/body1/#comment126
-inserted #document/html0/body1/div127
-inserted #document/html0/body1/div127/#text0
-inserted #document/html0/body1/div127/#comment1
-inserted #document/html0/body1/#comment128
+inserted #document/html0/body1/#comment125
+inserted #document/html0/body1/div126
+inserted #document/html0/body1/div126/#text0
+inserted #document/html0/body1/div126/#comment1
+inserted #document/html0/body1/#comment127
+inserted #document/html0/body1/div128
 inserted #document/html0/body1/div129
-inserted #document/html0/body1/div130
-inserted #document/html0/body1/#comment131
-inserted #document/html0/body1/div132
-inserted #document/html0/body1/div132/#text0
-inserted #document/html0/body1/div132/#comment1
-inserted #document/html0/body1/#comment133
+inserted #document/html0/body1/#comment130
+inserted #document/html0/body1/div131
+inserted #document/html0/body1/div131/#text0
+inserted #document/html0/body1/div131/#comment1
+inserted #document/html0/body1/#comment132
+inserted #document/html0/body1/div133
 inserted #document/html0/body1/div134
-inserted #document/html0/body1/div135
-inserted #document/html0/body1/#comment136
-inserted #document/html0/body1/div137
-inserted #document/html0/body1/div137/#text0
-inserted #document/html0/body1/div137/#comment1
-inserted #document/html0/body1/#comment138
+inserted #document/html0/body1/#comment135
+inserted #document/html0/body1/div136
+inserted #document/html0/body1/div136/#text0
+inserted #document/html0/body1/div136/#comment1
+inserted #document/html0/body1/#comment137
+inserted #document/html0/body1/div138
 inserted #document/html0/body1/div139
-inserted #document/html0/body1/div140
-inserted #document/html0/body1/#comment141
-inserted #document/html0/body1/div142
-inserted #document/html0/body1/div142/#text0
-inserted #document/html0/body1/div142/#comment1
-inserted #document/html0/body1/#comment143
+inserted #document/html0/body1/#comment140
+inserted #document/html0/body1/div141
+inserted #document/html0/body1/div141/#text0
+inserted #document/html0/body1/div141/#comment1
+inserted #document/html0/body1/#comment142
+inserted #document/html0/body1/div143
 inserted #document/html0/body1/div144
-inserted #document/html0/body1/div145
-inserted #document/html0/body1/#comment146
-inserted #document/html0/body1/div147
-inserted #document/html0/body1/div147/#text0
-inserted #document/html0/body1/div147/#comment1
-inserted #document/html0/body1/#comment148
+inserted #document/html0/body1/#comment145
+inserted #document/html0/body1/div146
+inserted #document/html0/body1/div146/#text0
+inserted #document/html0/body1/div146/#comment1
+inserted #document/html0/body1/#comment147
+inserted #document/html0/body1/div148
 inserted #document/html0/body1/div149
-inserted #document/html0/body1/div150
-inserted #document/html0/body1/#comment151
-inserted #document/html0/body1/div152
-inserted #document/html0/body1/div152/#text0
-inserted #document/html0/body1/div152/#comment1
-inserted #document/html0/body1/#comment153
+inserted #document/html0/body1/#comment150
+inserted #document/html0/body1/div151
+inserted #document/html0/body1/div151/#text0
+inserted #document/html0/body1/div151/#comment1
+inserted #document/html0/body1/#comment152
+inserted #document/html0/body1/div153
 inserted #document/html0/body1/div154
-inserted #document/html0/body1/div155
-inserted #document/html0/body1/#comment156
-inserted #document/html0/body1/div157
-inserted #document/html0/body1/div157/#text0
-inserted #document/html0/body1/div157/#comment1
-inserted #document/html0/body1/#comment158
+inserted #document/html0/body1/#comment155
+inserted #document/html0/body1/div156
+inserted #document/html0/body1/div156/#text0
+inserted #document/html0/body1/div156/#comment1
+inserted #document/html0/body1/#comment157
+inserted #document/html0/body1/div158
 inserted #document/html0/body1/div159
-inserted #document/html0/body1/div160
-inserted #document/html0/body1/#comment161
-inserted #document/html0/body1/div162
-inserted #document/html0/body1/div162/#text0
-inserted #document/html0/body1/div162/#comment1
-inserted #document/html0/body1/#comment163
+inserted #document/html0/body1/#comment160
+inserted #document/html0/body1/div161
+inserted #document/html0/body1/div161/#text0
+inserted #document/html0/body1/div161/#comment1
+inserted #document/html0/body1/#comment162
+inserted #document/html0/body1/div163
 inserted #document/html0/body1/div164
-inserted #document/html0/body1/div165
-inserted #document/html0/body1/#comment166
-inserted #document/html0/body1/div167
-inserted #document/html0/body1/div167/#text0
-inserted #document/html0/body1/div167/#comment1
-inserted #document/html0/body1/#comment168
+inserted #document/html0/body1/#comment165
+inserted #document/html0/body1/div166
+inserted #document/html0/body1/div166/#text0
+inserted #document/html0/body1/div166/#comment1
+inserted #document/html0/body1/#comment167
+inserted #document/html0/body1/div168
 inserted #document/html0/body1/div169
-inserted #document/html0/body1/div170
-inserted #document/html0/body1/#comment171
-inserted #document/html0/body1/div172
-inserted #document/html0/body1/div172/#text0
-inserted #document/html0/body1/div172/#comment1
-inserted #document/html0/body1/#comment173
+inserted #document/html0/body1/#comment170
+inserted #document/html0/body1/div171
+inserted #document/html0/body1/div171/#text0
+inserted #document/html0/body1/div171/#comment1
+inserted #document/html0/body1/#comment172
+inserted #document/html0/body1/div173
 inserted #document/html0/body1/div174
-inserted #document/html0/body1/div175
-inserted #document/html0/body1/#comment176
-inserted #document/html0/body1/div177
-inserted #document/html0/body1/div177/#text0
-inserted #document/html0/body1/div177/#comment1
-inserted #document/html0/body1/#comment178
+inserted #document/html0/body1/#comment175
+inserted #document/html0/body1/div176
+inserted #document/html0/body1/div176/#text0
+inserted #document/html0/body1/div176/#comment1
+inserted #document/html0/body1/#comment177
+inserted #document/html0/body1/div178
 inserted #document/html0/body1/div179
-inserted #document/html0/body1/div180
-inserted #document/html0/body1/#comment181
-inserted #document/html0/body1/div182
-inserted #document/html0/body1/div182/#text0
-inserted #document/html0/body1/div182/#comment1
-inserted #document/html0/body1/#comment183
+inserted #document/html0/body1/#comment180
+inserted #document/html0/body1/div181
+inserted #document/html0/body1/div181/#text0
+inserted #document/html0/body1/div181/#comment1
+inserted #document/html0/body1/#comment182
+inserted #document/html0/body1/div183
 inserted #document/html0/body1/div184
-inserted #document/html0/body1/div185
-inserted #document/html0/body1/#comment186
-inserted #document/html0/body1/div187
-inserted #document/html0/body1/div187/#text0
-inserted #document/html0/body1/div187/#comment1
-inserted #document/html0/body1/#comment188
+inserted #document/html0/body1/#comment185
+inserted #document/html0/body1/div186
+inserted #document/html0/body1/div186/#text0
+inserted #document/html0/body1/div186/#comment1
+inserted #document/html0/body1/#comment187
+inserted #document/html0/body1/div188
 inserted #document/html0/body1/div189
-inserted #document/html0/body1/div190
-inserted #document/html0/body1/#comment191
-inserted #document/html0/body1/div192
-inserted #document/html0/body1/div192/#text0
-inserted #document/html0/body1/div192/#comment1
-inserted #document/html0/body1/#comment193
+inserted #document/html0/body1/#comment190
+inserted #document/html0/body1/div191
+inserted #document/html0/body1/div191/#text0
+inserted #document/html0/body1/div191/#comment1
+inserted #document/html0/body1/#comment192
+inserted #document/html0/body1/div193
 inserted #document/html0/body1/div194
-inserted #document/html0/body1/div195
-inserted #document/html0/body1/#comment196
-inserted #document/html0/body1/div197
-inserted #document/html0/body1/div197/#text0
-inserted #document/html0/body1/div197/#comment1
-inserted #document/html0/body1/#comment198
+inserted #document/html0/body1/#comment195
+inserted #document/html0/body1/div196
+inserted #document/html0/body1/div196/#text0
+inserted #document/html0/body1/div196/#comment1
+inserted #document/html0/body1/#comment197
+inserted #document/html0/body1/div198
 inserted #document/html0/body1/div199
-inserted #document/html0/body1/div200
-inserted #document/html0/body1/#comment201
-inserted #document/html0/body1/div202
-inserted #document/html0/body1/div202/#text0
-inserted #document/html0/body1/div202/#comment1
-inserted #document/html0/body1/#comment203
+inserted #document/html0/body1/#comment200
+inserted #document/html0/body1/div201
+inserted #document/html0/body1/div201/#text0
+inserted #document/html0/body1/div201/#comment1
+inserted #document/html0/body1/#comment202
+inserted #document/html0/body1/div203
 inserted #document/html0/body1/div204
-inserted #document/html0/body1/div205
-inserted #document/html0/body1/#comment206
-inserted #document/html0/body1/div207
-inserted #document/html0/body1/div207/#text0
-inserted #document/html0/body1/div207/#comment1
-inserted #document/html0/body1/#comment208
+inserted #document/html0/body1/#comment205
+inserted #document/html0/body1/div206
+inserted #document/html0/body1/div206/#text0
+inserted #document/html0/body1/div206/#comment1
+inserted #document/html0/body1/#comment207
+inserted #document/html0/body1/div208
 inserted #document/html0/body1/div209
-inserted #document/html0/body1/div210
-inserted #document/html0/body1/#comment211
-inserted #document/html0/body1/div212
-inserted #document/html0/body1/div212/#text0
-inserted #document/html0/body1/div212/#comment1
-inserted #document/html0/body1/#comment213
+inserted #document/html0/body1/#comment210
+inserted #document/html0/body1/div211
+inserted #document/html0/body1/div211/#text0
+inserted #document/html0/body1/div211/#comment1
+inserted #document/html0/body1/#comment212
+inserted #document/html0/body1/div213
 inserted #document/html0/body1/div214
-inserted #document/html0/body1/div215
-inserted #document/html0/body1/#comment216
-inserted #document/html0/body1/div217
-inserted #document/html0/body1/div217/#text0
-inserted #document/html0/body1/div217/#comment1
-inserted #document/html0/body1/#comment218
+inserted #document/html0/body1/#comment215
+inserted #document/html0/body1/div216
+inserted #document/html0/body1/div216/#text0
+inserted #document/html0/body1/div216/#comment1
+inserted #document/html0/body1/#comment217
+inserted #document/html0/body1/div218
 inserted #document/html0/body1/div219
-inserted #document/html0/body1/div220
-inserted #document/html0/body1/#comment221
-inserted #document/html0/body1/div222
-inserted #document/html0/body1/div222/#text0
-inserted #document/html0/body1/div222/#comment1
-inserted #document/html0/body1/#comment223
+inserted #document/html0/body1/#comment220
+inserted #document/html0/body1/div221
+inserted #document/html0/body1/div221/#text0
+inserted #document/html0/body1/div221/#comment1
+inserted #document/html0/body1/#comment222
+inserted #document/html0/body1/div223
 inserted #document/html0/body1/div224
-inserted #document/html0/body1/div225
-inserted #document/html0/body1/#comment226
-inserted #document/html0/body1/div227
-inserted #document/html0/body1/div227/#text0
-inserted #document/html0/body1/div227/#comment1
-inserted #document/html0/body1/#comment228
+inserted #document/html0/body1/#comment225
+inserted #document/html0/body1/div226
+inserted #document/html0/body1/div226/#text0
+inserted #document/html0/body1/div226/#comment1
+inserted #document/html0/body1/#comment227
+inserted #document/html0/body1/div228
 inserted #document/html0/body1/div229
-inserted #document/html0/body1/div230
-inserted #document/html0/body1/#comment231
-inserted #document/html0/body1/div232
-inserted #document/html0/body1/div232/#text0
-inserted #document/html0/body1/div232/#comment1
-inserted #document/html0/body1/#comment233
+inserted #document/html0/body1/#comment230
+inserted #document/html0/body1/div231
+inserted #document/html0/body1/div231/#text0
+inserted #document/html0/body1/div231/#comment1
+inserted #document/html0/body1/#comment232
+inserted #document/html0/body1/div233
 inserted #document/html0/body1/div234
-inserted #document/html0/body1/div235
-inserted #document/html0/body1/#comment236
-inserted #document/html0/body1/div237
-inserted #document/html0/body1/div237/#text0
-inserted #document/html0/body1/div237/#comment1
-inserted #document/html0/body1/#comment238
+inserted #document/html0/body1/#comment235
+inserted #document/html0/body1/div236
+inserted #document/html0/body1/div236/#text0
+inserted #document/html0/body1/div236/#comment1
+inserted #document/html0/body1/#comment237
+inserted #document/html0/body1/div238
 inserted #document/html0/body1/div239
-inserted #document/html0/body1/div240
-inserted #document/html0/body1/#comment241
-inserted #document/html0/body1/div242
-inserted #document/html0/body1/div242/#text0
-inserted #document/html0/body1/div242/#comment1
-inserted #document/html0/body1/#comment243
+inserted #document/html0/body1/#comment240
+inserted #document/html0/body1/div241
+inserted #document/html0/body1/div241/#text0
+inserted #document/html0/body1/div241/#comment1
+inserted #document/html0/body1/#comment242
+inserted #document/html0/body1/div243
 inserted #document/html0/body1/div244
-inserted #document/html0/body1/div245
-inserted #document/html0/body1/#comment246
-inserted #document/html0/body1/div247
-inserted #document/html0/body1/div247/#text0
-inserted #document/html0/body1/div247/#comment1
-inserted #document/html0/body1/#comment248
+inserted #document/html0/body1/#comment245
+inserted #document/html0/body1/div246
+inserted #document/html0/body1/div246/#text0
+inserted #document/html0/body1/div246/#comment1
+inserted #document/html0/body1/#comment247
+inserted #document/html0/body1/div248
 inserted #document/html0/body1/div249
-inserted #document/html0/body1/div250
-inserted #document/html0/body1/#comment251
-inserted #document/html0/body1/div252
-inserted #document/html0/body1/div252/#text0
-inserted #document/html0/body1/div252/#comment1
-inserted #document/html0/body1/#comment253
+inserted #document/html0/body1/#comment250
+inserted #document/html0/body1/div251
+inserted #document/html0/body1/div251/#text0
+inserted #document/html0/body1/div251/#comment1
+inserted #document/html0/body1/#comment252
+inserted #document/html0/body1/div253
 inserted #document/html0/body1/div254
-inserted #document/html0/body1/div255
-inserted #document/html0/body1/#comment256
-inserted #document/html0/body1/div257
-inserted #document/html0/body1/div257/#text0
-inserted #document/html0/body1/div257/#comment1
-inserted #document/html0/body1/#comment258
+inserted #document/html0/body1/#comment255
+inserted #document/html0/body1/div256
+inserted #document/html0/body1/div256/#text0
+inserted #document/html0/body1/div256/#comment1
+inserted #document/html0/body1/#comment257
+inserted #document/html0/body1/div258
 inserted #document/html0/body1/div259
-inserted #document/html0/body1/div260
-inserted #document/html0/body1/#comment261
-inserted #document/html0/body1/div262
-inserted #document/html0/body1/div262/#text0
-inserted #document/html0/body1/div262/#comment1
-inserted #document/html0/body1/#comment263
+inserted #document/html0/body1/#comment260
+inserted #document/html0/body1/div261
+inserted #document/html0/body1/div261/#text0
+inserted #document/html0/body1/div261/#comment1
+inserted #document/html0/body1/#comment262
+inserted #document/html0/body1/div263
 inserted #document/html0/body1/div264
-inserted #document/html0/body1/div265
-inserted #document/html0/body1/#comment266
-inserted #document/html0/body1/div267
-inserted #document/html0/body1/div267/#text0
-inserted #document/html0/body1/div267/#comment1
-inserted #document/html0/body1/#comment268
+inserted #document/html0/body1/#comment265
+inserted #document/html0/body1/div266
+inserted #document/html0/body1/div266/#text0
+inserted #document/html0/body1/div266/#comment1
+inserted #document/html0/body1/#comment267
+inserted #document/html0/body1/div268
 inserted #document/html0/body1/div269
-inserted #document/html0/body1/div270
-inserted #document/html0/body1/#comment271
-inserted #document/html0/body1/div272
-inserted #document/html0/body1/div272/#text0
-inserted #document/html0/body1/div272/#comment1
-inserted #document/html0/body1/#comment273
+inserted #document/html0/body1/#comment270
+inserted #document/html0/body1/div271
+inserted #document/html0/body1/div271/#text0
+inserted #document/html0/body1/div271/#comment1
+inserted #document/html0/body1/#comment272
+inserted #document/html0/body1/div273
 inserted #document/html0/body1/div274
-inserted #document/html0/body1/div275
-inserted #document/html0/body1/#comment276
-inserted #document/html0/body1/div277
-inserted #document/html0/body1/div277/#text0
-inserted #document/html0/body1/div277/#comment1
-inserted #document/html0/body1/#comment278
+inserted #document/html0/body1/#comment275
+inserted #document/html0/body1/div276
+inserted #document/html0/body1/div276/#text0
+inserted #document/html0/body1/div276/#comment1
+inserted #document/html0/body1/#comment277
+inserted #document/html0/body1/div278
 inserted #document/html0/body1/div279
-inserted #document/html0/body1/div280
-inserted #document/html0/body1/#comment281
-inserted #document/html0/body1/div282
-inserted #document/html0/body1/div282/#text0
-inserted #document/html0/body1/div282/#comment1
-inserted #document/html0/body1/#comment283
+inserted #document/html0/body1/#comment280
+inserted #document/html0/body1/div281
+inserted #document/html0/body1/div281/#text0
+inserted #document/html0/body1/div281/#comment1
+inserted #document/html0/body1/#comment282
+inserted #document/html0/body1/div283
 inserted #document/html0/body1/div284
-inserted #document/html0/body1/div285
-inserted #document/html0/body1/#comment286
-inserted #document/html0/body1/div287
-inserted #document/html0/body1/div287/#text0
-inserted #document/html0/body1/div287/#comment1
-inserted #document/html0/body1/#comment288
+inserted #document/html0/body1/#comment285
+inserted #document/html0/body1/div286
+inserted #document/html0/body1/div286/#text0
+inserted #document/html0/body1/div286/#comment1
+inserted #document/html0/body1/#comment287
+inserted #document/html0/body1/div288
 inserted #document/html0/body1/div289
-inserted #document/html0/body1/div290
-inserted #document/html0/body1/#comment291
-inserted #document/html0/body1/div292
-inserted #document/html0/body1/div292/#text0
-inserted #document/html0/body1/div292/#comment1
-inserted #document/html0/body1/#comment293
+inserted #document/html0/body1/#comment290
+inserted #document/html0/body1/div291
+inserted #document/html0/body1/div291/#text0
+inserted #document/html0/body1/div291/#comment1
+inserted #document/html0/body1/#comment292
+inserted #document/html0/body1/div293
 inserted #document/html0/body1/div294
-inserted #document/html0/body1/div295
-inserted #document/html0/body1/#comment296
-inserted #document/html0/body1/div297
-inserted #document/html0/body1/div297/#text0
-inserted #document/html0/body1/div297/#comment1
-inserted #document/html0/body1/#comment298
+inserted #document/html0/body1/#comment295
+inserted #document/html0/body1/div296
+inserted #document/html0/body1/div296/#text0
+inserted #document/html0/body1/div296/#comment1
+inserted #document/html0/body1/#comment297
+inserted #document/html0/body1/div298
 inserted #document/html0/body1/div299
-inserted #document/html0/body1/div300
-inserted #document/html0/body1/#comment301
-inserted #document/html0/body1/div302
-inserted #document/html0/body1/div302/#text0
-inserted #document/html0/body1/div302/#comment1
-inserted #document/html0/body1/#comment303
+inserted #document/html0/body1/#comment300
+inserted #document/html0/body1/div301
+inserted #document/html0/body1/div301/#text0
+inserted #document/html0/body1/div301/#comment1
+inserted #document/html0/body1/#comment302
+inserted #document/html0/body1/div303
 inserted #document/html0/body1/div304
-inserted #document/html0/body1/div305
-inserted #document/html0/body1/#comment306
-inserted #document/html0/body1/div307
-inserted #document/html0/body1/div307/#text0
-inserted #document/html0/body1/div307/#comment1
-inserted #document/html0/body1/#comment308
-inserted #document/html0/body1/div309
-inserted #document/html0/body1/div310
-inserted #document/html0/body1/#comment311
-inserted #document/html0/body1/#text312
-inserted #document/html0/body1/script313
-inserted #document/html0/body1/script313/#text0
+inserted #document/html0/body1/#comment305
+inserted #document/html0/body1/#text306
+inserted #document/html0/body1/script307
+inserted #document/html0/body1/script307/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko b/packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko
index a9414dbf4d..f6ba8b6eea 100644
--- a/packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko
+++ b/packages/translator-tags/src/__tests__/fixtures/for-tag/template.marko
@@ -27,10 +27,6 @@
   <div key=`other-${i}`/>
 </for>
 
-<for|val, i, list| of=arr>
-  <div key=i>${list.length}: ${val}</div>
-</for>
-
 <for|key, val| in=obj>
   <div key=key>${key}: ${val}</div>
   <div/>
diff --git a/packages/translator-tags/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
index e2975035fa..bef692bd1b 100644
--- a/packages/translator-tags/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
@@ -1,24 +1,22 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const {
     children
   } = input;
   _write("<div>");
-  const _forScopeIds = [],
-    _scope1_ = new Map();
   const _by = function (c) {
     return c.id;
   };
-  let _i2 = 0;
-  for (const child of children) {
+  const _forScopeIds = [],
+    _scope1_ = new Map();
+  _forOf(children, (child, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _forScopeIds.push(_scope1_id);
     _write(`${_escapeXML(child.text)}${_markResumeNode(_scope1_id, "#text/0")}`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_by(child, _i), _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_by(child, _index), _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#div/0", _forScopeIds)}</div>${_markResumeNode(_scope0_id, "#div/0")}`);
   _writeScope(_scope0_id, {
     "#div/0(": _scope1_.size ? _scope1_ : undefined
diff --git a/packages/translator-tags/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
index 3709bb99a5..dc08074035 100644
--- a/packages/translator-tags/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
@@ -1,20 +1,18 @@
-import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, write as _write, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, write as _write, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
-  const _forScopeIds = [],
-    _scope1_ = new Map();
   const _by = function (c) {
     return c.id;
   };
-  let _i2 = 0;
-  for (const child of input.children) {
+  const _forScopeIds = [],
+    _scope1_ = new Map();
+  _forOf(input.children, (child, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _forScopeIds.push(_scope1_id);
     _write(`${_escapeXML(child.text)}${_markResumeNode(_scope1_id, "#text/0")}`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_by(child, _i), _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_by(child, _index), _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#text/0", _forScopeIds)}`);
   _writeScope(_scope0_id, {
     "#text/0(": _scope1_.size ? _scope1_ : undefined
diff --git a/packages/translator-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js b/packages/translator-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
index 418cfc22f8..4b5e0cdc4a 100644
--- a/packages/translator-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
+++ b/packages/translator-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
@@ -1,24 +1,22 @@
-import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, escapeXML as _escapeXML, markResumeNode as _markResumeNode, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, writeScope as _writeScope, nextScopeId as _nextScopeId, getScopeById as _getScopeById, forOf as _forOf, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
   const {
     children
   } = input;
   _write("<div>");
-  const _forScopeIds = [],
-    _scope1_ = new Map();
   const _by = function (c) {
     return c.id;
   };
-  let _i2 = 0;
-  for (const child of children) {
+  const _forScopeIds = [],
+    _scope1_ = new Map();
+  _forOf(children, (child, _index) => {
     const _scope1_id = _nextScopeId();
-    let _i = _i2++;
     _forScopeIds.push(_scope1_id);
     _write(`${_escapeXML(child.text)}${_markResumeNode(_scope1_id, "#text/0")}`);
     _writeScope(_scope1_id, {});
-    _scope1_.set(_by(child, _i), _getScopeById(_scope1_id));
-  }
+    _scope1_.set(_by(child, _index), _getScopeById(_scope1_id));
+  });
   _write(`${_markResumeControlSingleNodeEnd(_scope0_id, "#div/0", _forScopeIds)}</div>${_markResumeNode(_scope0_id, "#div/0")}`);
   _writeScope(_scope0_id, {
     "#div/0(": _scope1_.size ? _scope1_ : undefined
diff --git a/packages/translator-tags/src/core/for.ts b/packages/translator-tags/src/core/for.ts
index 3ddac82de7..f5d5bcfa91 100644
--- a/packages/translator-tags/src/core/for.ts
+++ b/packages/translator-tags/src/core/for.ts
@@ -1,5 +1,6 @@
 import {
   assertAllowedAttributes,
+  assertNoArgs,
   assertNoVar,
   getTagDef,
   type Tag,
@@ -7,8 +8,8 @@ import {
 import { types as t } from "@marko/compiler";
 import { AccessorChar, WalkCode } from "@marko/runtime-tags/common/types";
 
+import { getKnownAttrValues } from "../util/get-known-attr-values";
 import { isStatefulReferences } from "../util/is-stateful";
-import { isOutputHTML } from "../util/marko-config";
 import analyzeAttributeTags from "../util/nested-attribute-tags";
 import {
   type Binding,
@@ -37,6 +38,7 @@ import {
   setSubscriberBuilder,
   writeHTMLResumeStatements,
 } from "../util/signals";
+import { translateByTarget } from "../util/visitors";
 import * as walks from "../util/walks";
 import * as writer from "../util/writer";
 import { currentProgramPath } from "../visitors/program";
@@ -45,27 +47,27 @@ import {
   kSerializeMarker,
 } from "../visitors/tag/native-tag";
 
+type ForType = "in" | "of" | "to";
 const kForMarkerBinding = Symbol("for marker binding");
 const kForScopeStartIndex = Symbol("for scope start index");
-
+const kOnlyChildInParent = Symbol("only child in parent");
 declare module "@marko/compiler/dist/types" {
   export interface NodeExtra {
     [kForMarkerBinding]?: Binding;
     [kForScopeStartIndex]?: t.Identifier;
+    [kOnlyChildInParent]?: boolean;
   }
 }
 
 export default {
   analyze(tag) {
     validateFor(tag);
-
-    const isOnlyChild = checkOnlyChild(tag);
     const tagExtra = (tag.node.extra ??= {});
     const tagBody = tag.get("body");
     const section = getOrCreateSection(tag);
     const bodySection = startSection(tagBody)!;
 
-    if (isOnlyChild) {
+    if (isOnlyChildInParent(tag)) {
       const parentTag = tag.parentPath.parent as t.MarkoTag;
       const parentTagName = (parentTag.name as t.StringLiteral)?.value;
       (parentTag.extra ??= {})[kNativeTagBinding] ??= createBinding(
@@ -89,22 +91,22 @@ export default {
     );
     bodySection.upstreamExpression = tagExtra;
   },
-  translate: {
-    enter(tag) {
-      const tagBody = tag.get("body");
-      const bodySection = getSection(tagBody);
-      const tagExtra = tag.node.extra!;
-      const { isOnlyChild } = tagExtra;
-      const isStateful = isStatefulReferences(tagExtra.referencedBindings);
-      const hasNestedAttributeTags =
-        tagExtra.nestedAttributeTags &&
-        Object.keys(tagExtra.nestedAttributeTags).length > 0;
-      setSectionParentIsOwner(bodySection, true);
-      if (!isOnlyChild) {
-        walks.visit(tag, WalkCode.Replace);
-        walks.enterShallow(tag);
-      }
-      if (isOutputHTML()) {
+  translate: translateByTarget({
+    html: {
+      enter(tag) {
+        const tagBody = tag.get("body");
+        const bodySection = getSection(tagBody);
+        const tagExtra = tag.node.extra!;
+        const isStateful = isStatefulReferences(tagExtra.referencedBindings);
+        const hasNestedAttributeTags =
+          tagExtra.nestedAttributeTags &&
+          Object.keys(tagExtra.nestedAttributeTags).length > 0;
+        setSectionParentIsOwner(bodySection, true);
+        if (!isOnlyChildInParent(tag)) {
+          walks.visit(tag, WalkCode.Replace);
+          walks.enterShallow(tag);
+        }
+
         writer.flushBefore(tag);
         if (
           isStateful &&
@@ -118,16 +120,24 @@ export default {
             t.updateExpression("++", tagExtra[kForScopeStartIndex]),
           )}`;
         }
-      }
+      },
+      exit(tag) {
+        translateHTMLExit(tag);
+      },
     },
-    exit(tag) {
-      if (isOutputHTML()) {
-        translateHTML.exit(tag);
-      } else {
-        translateDOM.exit(tag);
-      }
+    dom: {
+      enter(tag) {
+        setSectionParentIsOwner(getSection(tag.get("body")), true);
+        if (!isOnlyChildInParent(tag)) {
+          walks.visit(tag, WalkCode.Replace);
+          walks.enterShallow(tag);
+        }
+      },
+      exit(tag) {
+        translateDOMExit(tag);
+      },
     },
-  },
+  }),
   attributes: {
     of: {
       type: "expression",
@@ -185,444 +195,361 @@ export default {
         "https://markojs.com/docs/core-tags/#iterating-over-an-objects-properties",
     },
     {
-      snippet:
-        "for|${1:index}| from=${2:number} to=${3:number} step=${4:number}",
+      snippet: "for|${1:index}| to=${2:number}",
       descriptionMoreURL:
         "https://markojs.com/docs/core-tags/#iterating-between-a-range-of-numbers",
     },
   ],
-} as Tag;
+} satisfies Tag;
+
+function translateDOMExit(tag: t.NodePath<t.MarkoTag>) {
+  const tagBody = tag.get("body");
+  const tagSection = getSection(tag);
+  const bodySection = getSection(tagBody);
+  const { node } = tag;
+  const tagExtra = node.extra!;
+  const { referencedBindings } = tagExtra;
+  const nodeRef = isOnlyChildInParent(tag)
+    ? tag.parentPath.parent.extra![kNativeTagBinding]!
+    : tag.node.extra![kForMarkerBinding]!;
+  setSubscriberBuilder(tag, (signal: t.Expression) => {
+    return callRuntime("inLoopScope", signal, getScopeAccessorLiteral(nodeRef));
+  });
+
+  const rendererId = t.identifier(bodySection.name);
+  const forType = getForType(node)!;
+  const signal = getSignal(tagSection, nodeRef, "for");
+  signal.build = () => {
+    return callRuntime(
+      forTypeToDOMRuntime(forType),
+      getScopeAccessorLiteral(nodeRef),
+      rendererId,
+    );
+  };
 
-const translateDOM = {
-  exit(tag: t.NodePath<t.MarkoTag>) {
-    const tagBody = tag.get("body");
-    const tagSection = getSection(tag);
-    const bodySection = getSection(tagBody);
-    const { node } = tag;
-    const { attributes } = node;
-    const { isOnlyChild, referencedBindings } = node.extra!;
-    const nodeRef = isOnlyChild
-      ? tag.parentPath.parent.extra![kNativeTagBinding]!
-      : tag.node.extra![kForMarkerBinding]!;
-
-    setSubscriberBuilder(tag, (signal: t.Expression) => {
-      return callRuntime(
-        "inLoopScope",
-        signal,
-        getScopeAccessorLiteral(nodeRef),
-      );
-    });
-
-    tag.remove();
-
-    const rendererId = t.identifier(bodySection.name);
-    const ofAttr = findName(attributes, "of");
-    const toAttr = findName(attributes, "to");
-    const inAttr = findName(attributes, "in");
-    const loopArgs: t.Expression[] = [];
-    let loopKind: "loopOf" | "loopIn" | "loopTo";
-
-    if (ofAttr) {
-      loopKind = "loopOf";
-      loopArgs.push(ofAttr.value);
-    } else if (inAttr) {
-      loopKind = "loopIn";
-      loopArgs.push(inAttr.value);
-    } else if (toAttr) {
-      const fromAttr = findName(attributes, "from");
-      const stepAttr = findName(attributes, "step");
-      loopKind = "loopTo";
-      loopArgs.push(
-        toAttr.value,
-        fromAttr ? fromAttr.value : t.numericLiteral(0),
-        stepAttr ? stepAttr.value : t.numericLiteral(1),
-      );
-    }
+  const paramIdentifiers = Object.values(
+    tagBody.getBindingIdentifiers(),
+  ) as t.Identifier[];
 
-    const byAttr = findName(attributes, "by");
-    if (byAttr) {
-      loopArgs.push(byAttr.value);
+  signal.hasDownstreamIntersections = () => {
+    if (getClosures(bodySection).length > 0) {
+      return true;
     }
 
-    const signal = getSignal(tagSection, nodeRef, "for");
-    signal.build = () => {
-      return callRuntime(
-        loopKind,
-        getScopeAccessorLiteral(nodeRef),
-        rendererId,
-      );
-    };
+    if (paramIdentifiers.length) {
+      const binding = paramIdentifiers[0].extra!.binding!;
+      for (const { referencedBindings } of binding.downstreamExpressions) {
+        if (
+          getSignal(
+            bodySection,
+            referencedBindings,
+          ).hasDownstreamIntersections()
+        ) {
+          return true;
+        }
+      }
+    }
 
-    const paramIdentifiers = Object.values(
-      tagBody.getBindingIdentifiers(),
-    ) as t.Identifier[];
+    return false;
+  };
 
-    signal.hasDownstreamIntersections = () => {
-      if (getClosures(bodySection).length > 0) {
-        return true;
-      }
+  const forAttrs = getKnownAttrValues(node);
+  const loopArgs = getBaseArgsInForTag(forType, forAttrs);
+  if (forAttrs.by) {
+    loopArgs.push(forAttrs.by);
+  }
 
-      if (paramIdentifiers.length) {
-        const binding = paramIdentifiers[0].extra!.binding!;
-        for (const { referencedBindings } of binding.downstreamExpressions) {
-          if (
-            getSignal(
-              bodySection,
-              referencedBindings,
-            ).hasDownstreamIntersections()
-          ) {
-            return true;
-          }
-        }
-      }
+  addValue(tagSection, referencedBindings, signal, t.arrayExpression(loopArgs));
 
-      return false;
-    };
+  tag.remove();
+}
 
-    addValue(
-      tagSection,
-      referencedBindings,
-      signal,
-      t.arrayExpression(loopArgs),
-    );
-  },
-};
+function translateHTMLExit(tag: t.NodePath<t.MarkoTag>) {
+  const tagBody = tag.get("body");
+  const tagSection = getSection(tag);
+  const bodySection = getSection(tagBody);
+  const { node } = tag;
+  const tagExtra = node.extra!;
+  const isStateful = isStatefulReferences(tagExtra.referencedBindings);
+  const nodeRef = isOnlyChildInParent(tag)
+    ? tag.parentPath.parent.extra![kNativeTagBinding]!
+    : tag.node.extra![kForMarkerBinding]!;
+  const forAttrs = getKnownAttrValues(node);
+  const forType = getForType(node)!;
+  const params = node.body.params;
+  const statements: t.Statement[] = [];
+  const bodyStatements = node.body.body as t.Statement[];
+  const hasStatefulClosures = checkStatefulClosures(bodySection, true);
+  const hasNestedAttributeTags =
+    tagExtra.nestedAttributeTags &&
+    Object.keys(tagExtra.nestedAttributeTags).length > 0;
+  let keyExpression: t.Expression | undefined;
+
+  if (isStateful && isOnlyChildInParent(tag)) {
+    tag.parentPath.parent.extra![kSerializeMarker] = true;
+  }
 
-const translateHTML = {
-  exit(tag: t.NodePath<t.MarkoTag>) {
-    const tagBody = tag.get("body");
-    const tagSection = getSection(tag);
-    const bodySection = getSection(tagBody);
-    const { node } = tag;
-    const {
-      attributes,
-      body: { body, params },
-    } = node;
-    const tagExtra = node.extra!;
-    const { isOnlyChild } = tagExtra;
-    const isStateful = isStatefulReferences(tagExtra.referencedBindings);
-    const hasNestedAttributeTags =
-      tagExtra.nestedAttributeTags &&
-      Object.keys(tagExtra.nestedAttributeTags).length > 0;
-    const nodeRef = isOnlyChild
-      ? tag.parentPath.parent.extra![kNativeTagBinding]!
-      : tag.node.extra![kForMarkerBinding]!;
-    const ofAttr = findName(attributes, "of");
-    const inAttr = findName(attributes, "in");
-    const toAttr = findName(attributes, "to");
-    const byAttr = findName(attributes, "by");
-    const block = t.blockStatement(body);
-    const write = writer.writeTo(tag);
-    const replacement: t.Node[] = [];
-    const hasStatefulClosures = checkStatefulClosures(bodySection, true);
-    let byParams: t.Expression[];
-    let keyExpression: t.Expression | undefined = t.identifier("NOO");
+  if (isStateful || hasStatefulClosures) {
+    setForceResumeScope(bodySection);
+  }
 
-    if (isStateful && isOnlyChild) {
-      tag.parentPath.parent.extra![kSerializeMarker] = true;
-    }
+  if (tagExtra[kForScopeStartIndex]) {
+    statements.push(
+      t.variableDeclaration("let", [
+        t.variableDeclarator(
+          tagExtra[kForScopeStartIndex],
+          t.numericLiteral(0),
+        ),
+      ]),
+    );
+  }
 
-    if (isStateful || hasStatefulClosures) {
-      setForceResumeScope(bodySection);
+  if ((isStateful || hasStatefulClosures) && !hasNestedAttributeTags) {
+    const singleNodeOptimization =
+      bodySection.content === null || bodySection.content.singleChild;
+    const defaultParamNames = (
+      {
+        of: ["list", "index"],
+        in: ["key", "value"],
+        to: ["value"],
+      } as const
+    )[forType];
+    const defaultByParamIndex = forType === "of" ? 1 : 0;
+    const requiredParamsIndex = forAttrs.by
+      ? defaultParamNames.length - 1
+      : defaultByParamIndex;
+
+    for (let i = 0; i <= requiredParamsIndex; i++) {
+      const existingParam = params[i];
+      if (!existingParam || !t.isIdentifier(existingParam)) {
+        const id = (params[i] = currentProgramPath.scope.generateUidIdentifier(
+          defaultParamNames[i],
+        ));
+
+        if (existingParam) {
+          bodyStatements.unshift(
+            t.variableDeclaration("let", [
+              t.variableDeclarator(existingParam, id),
+            ]),
+          );
+        }
+      }
     }
 
-    if (byAttr && isStateful) {
+    if (forAttrs.by) {
+      // TODO: handle `by` being undefined or a string.
       const byIdentifier = currentProgramPath.scope.generateUidIdentifier("by");
-      replacement.push(
+      statements.push(
         t.variableDeclaration("const", [
-          t.variableDeclarator(byIdentifier, byAttr.value!),
+          t.variableDeclarator(byIdentifier, forAttrs.by),
         ]),
       );
-      byParams = [];
-      keyExpression = t.callExpression(byIdentifier, byParams);
+      keyExpression = t.callExpression(byIdentifier, params as t.Identifier[]);
+    } else {
+      keyExpression = params[defaultByParamIndex] as t.Identifier;
     }
 
-    if (inAttr) {
-      const [keyParam, valParam] = params;
-
-      keyExpression = keyParam as t.Identifier;
+    const write = writer.writeTo(tag);
+    const forScopeIdsIdentifier =
+      tag.scope.generateUidIdentifier("forScopeIds");
+    const forScopesIdentifier = getScopeIdentifier(bodySection);
+
+    statements.push(
+      t.variableDeclaration(
+        "const",
+        [
+          isStateful &&
+            singleNodeOptimization &&
+            t.variableDeclarator(forScopeIdsIdentifier, t.arrayExpression([])),
+          t.variableDeclarator(
+            forScopesIdentifier,
+            t.newExpression(t.identifier("Map"), []),
+          ),
+        ].filter(Boolean) as t.VariableDeclarator[],
+      ),
+    );
 
-      if (valParam) {
-        // TODO: account for keyParam being a non identifier.
-        block.body.unshift(
-          t.variableDeclaration("const", [
-            t.variableDeclarator(
-              valParam,
-              t.memberExpression(inAttr.value!, keyParam as t.Identifier, true),
+    if (isStateful) {
+      if (singleNodeOptimization) {
+        bodyStatements.push(
+          t.expressionStatement(
+            t.callExpression(
+              t.memberExpression(forScopeIdsIdentifier, t.identifier("push")),
+              [getScopeIdIdentifier(bodySection)],
             ),
-          ]),
+          ),
         );
+        write`${callRuntime(
+          "markResumeControlSingleNodeEnd",
+          getScopeIdIdentifier(tagSection),
+          getScopeAccessorLiteral(nodeRef),
+          forScopeIdsIdentifier,
+        )}`;
+      } else {
+        write`${callRuntime(
+          "markResumeControlEnd",
+          getScopeIdIdentifier(tagSection),
+          getScopeAccessorLiteral(nodeRef),
+        )}`;
       }
+    }
+    getSerializedScopeProperties(tagSection).set(
+      t.stringLiteral(
+        getScopeAccessorLiteral(nodeRef).value + AccessorChar.LoopScopeMap,
+      ),
+      t.conditionalExpression(
+        t.memberExpression(forScopesIdentifier, t.identifier("size")),
+        forScopesIdentifier,
+        t.identifier("undefined"),
+      ),
+    );
+  }
 
-      replacement.push(
-        t.forInStatement(
-          t.variableDeclaration("const", [t.variableDeclarator(keyParam)]),
-          inAttr.value!,
-          block,
+  writer.flushInto(tag);
+  // TODO: this is a hack to get around the fact that we don't have a way to
+  // know if a scope requires dynamic subscriptions
+  setSubscriberBuilder(tag, (() => {}) as any);
+  writeHTMLResumeStatements(tagBody);
+
+  if (keyExpression && (isStateful || hasStatefulClosures)) {
+    bodyStatements.push(
+      t.expressionStatement(
+        t.callExpression(
+          t.memberExpression(
+            getScopeIdentifier(bodySection),
+            t.identifier("set"),
+          ),
+          [
+            keyExpression!,
+            callRuntime("getScopeById", getScopeIdIdentifier(bodySection)),
+          ],
         ),
-      );
-    } else if (ofAttr) {
-      let ofAttrValue = ofAttr.value!;
-      // eslint-disable-next-line prefer-const
-      let [valParam, indexParam, loopParam] = params;
-
-      if (!t.isIdentifier(valParam) && byParams!) {
-        const tempValParam =
-          currentProgramPath.scope.generateUidIdentifier("v");
-        block.body.unshift(
-          t.variableDeclaration("const", [
-            t.variableDeclarator(valParam, tempValParam),
-          ]),
-        );
-        valParam = tempValParam;
-      }
-
-      if (indexParam || isStateful || hasStatefulClosures) {
-        indexParam ??= currentProgramPath.scope.generateUidIdentifier("i");
-        const indexName = tag.scope.generateUidIdentifierBasedOnNode(
-          indexParam,
-          "i",
-        );
-        replacement.push(
-          t.variableDeclaration("let", [
-            t.variableDeclarator(indexName, t.numericLiteral(0)),
-          ]),
-        );
-
-        block.body.unshift(
-          t.variableDeclaration("let", [
-            t.variableDeclarator(
-              indexParam,
-              t.updateExpression("++", indexName),
-            ),
-          ]),
-        );
-      }
-
-      if (loopParam) {
-        if (t.isIdentifier(loopParam)) {
-          ofAttrValue = loopParam;
-        }
+      ),
+    );
+  }
 
-        replacement.push(
-          t.variableDeclaration("const", [
-            t.variableDeclarator(loopParam, ofAttr.value),
-          ]),
-        );
-      }
+  statements.push(
+    buildForRuntimeCall(forType, forAttrs, params, bodyStatements),
+  );
 
-      if (byParams!) {
-        byParams.push(valParam as t.Identifier, indexParam as t.Identifier);
-      } else {
-        keyExpression = indexParam as t.Identifier;
-      }
+  for (const replacement of tag.replaceWithMultiple(statements)) {
+    replacement.skip();
+  }
+}
 
-      replacement.push(
-        t.forOfStatement(
-          t.variableDeclaration("const", [t.variableDeclarator(valParam)]),
-          ofAttrValue,
-          block,
-        ),
-      );
-    } else if (toAttr) {
-      const stepValue =
-        findName(attributes, "step")?.value ?? t.numericLiteral(1);
-      const fromValue =
-        findName(attributes, "from")?.value ?? t.numericLiteral(0);
-      let [indexParam] = params;
-      const stepsName = tag.scope.generateUidIdentifier("steps");
-      const indexName = tag.scope.generateUidIdentifier("i");
-      const stepName = tag.scope.generateUidIdentifier("step");
-      const fromName = tag.scope.generateUidIdentifier("from");
-
-      if (indexParam || isStateful || hasStatefulClosures) {
-        indexParam ??= currentProgramPath.scope.generateUidIdentifier("i");
-        keyExpression = indexParam as t.Identifier;
-        block.body.unshift(
-          t.variableDeclaration("const", [
-            t.variableDeclarator(
-              indexParam,
-              t.binaryExpression(
-                "+",
-                fromName,
-                t.binaryExpression("*", indexName, stepName),
-              ),
-            ),
-          ]),
-        );
-      }
+function validateFor(tag: t.NodePath<t.MarkoTag>) {
+  const tagExtra = (tag.node.extra ??= {});
+  const isAttrTag =
+    tagExtra.nestedAttributeTags &&
+    Object.keys(tagExtra.nestedAttributeTags).length > 0;
 
-      replacement.push(
-        t.forStatement(
-          t.variableDeclaration("let", [
-            t.variableDeclarator(
-              fromName,
-              t.logicalExpression("??", fromValue, t.numericLiteral(0)),
-            ),
-            t.variableDeclarator(
-              stepName,
-              t.logicalExpression("??", stepValue, t.numericLiteral(1)),
-            ),
-            t.variableDeclarator(
-              stepsName,
-              t.binaryExpression(
-                "/",
-                t.binaryExpression("-", toAttr.value, fromName),
-                stepName,
-              ),
-            ),
-            t.variableDeclarator(indexName, t.numericLiteral(0)),
-          ]),
-          t.binaryExpression("<=", indexName, stepsName),
-          t.updateExpression("++", indexName),
-          block,
-        ),
+  let allowAttrs: string[];
+  assertNoVar(tag);
+  assertNoArgs(tag);
+
+  switch (getForType(tag.node)) {
+    case "of":
+      allowAttrs = ["of"];
+      break;
+    case "in":
+      allowAttrs = ["in"];
+      break;
+    case "to":
+      allowAttrs = ["to", "from", "step"];
+      break;
+    default:
+      throw tag.buildCodeFrameError(
+        "Invalid `for` tag, missing an `of=`, `in=`, `to=` attribute.",
       );
-    }
+  }
 
-    if (tagExtra[kForScopeStartIndex]) {
-      replacement.unshift(
-        t.variableDeclaration("let", [
-          t.variableDeclarator(
-            tagExtra[kForScopeStartIndex],
-            t.numericLiteral(0),
-          ),
-        ]),
-      );
-    }
+  if (!isAttrTag) {
+    allowAttrs.push("by");
+  }
 
-    if ((isStateful || hasStatefulClosures) && !hasNestedAttributeTags) {
-      const singleNodeOptimization =
-        bodySection.content === null || bodySection.content.singleChild;
-      const forScopeIdsIdentifier =
-        tag.scope.generateUidIdentifier("forScopeIds");
-      const forScopesIdentifier = getScopeIdentifier(bodySection);
+  assertAllowedAttributes(tag, allowAttrs);
+}
 
-      replacement.unshift(
-        t.variableDeclaration(
-          "const",
-          [
-            isStateful &&
-              singleNodeOptimization &&
-              t.variableDeclarator(
-                forScopeIdsIdentifier,
-                t.arrayExpression([]),
-              ),
-            t.variableDeclarator(
-              forScopesIdentifier,
-              t.newExpression(t.identifier("Map"), []),
-            ),
-          ].filter(Boolean) as t.VariableDeclarator[],
-        ),
-      );
+export function buildForRuntimeCall(
+  type: ForType,
+  attrs: Record<string, t.Expression>,
+  params: t.ArrowFunctionExpression["params"],
+  statements: t.Statement[],
+) {
+  return t.expressionStatement(
+    callRuntime(
+      forTypeToRuntime(type),
+      ...getBaseArgsInForTag(type, attrs),
+      t.arrowFunctionExpression(params, t.blockStatement(statements)),
+    ),
+  );
+}
 
-      if (isStateful) {
-        if (singleNodeOptimization) {
-          block.body.push(
-            t.expressionStatement(
-              t.callExpression(
-                t.memberExpression(forScopeIdsIdentifier, t.identifier("push")),
-                [getScopeIdIdentifier(bodySection)],
-              ),
-            ),
-          );
-          write`${callRuntime(
-            "markResumeControlSingleNodeEnd",
-            getScopeIdIdentifier(tagSection),
-            getScopeAccessorLiteral(nodeRef),
-            forScopeIdsIdentifier,
-          )}`;
-        } else {
-          write`${callRuntime(
-            "markResumeControlEnd",
-            getScopeIdIdentifier(tagSection),
-            getScopeAccessorLiteral(nodeRef),
-          )}`;
-        }
+export function getForType(tag: t.MarkoTag): ForType | undefined {
+  for (const attr of tag.attributes) {
+    if (attr.type === "MarkoAttribute") {
+      switch (attr.name) {
+        case "of":
+        case "in":
+        case "to":
+          return attr.name;
       }
-      getSerializedScopeProperties(tagSection).set(
-        t.stringLiteral(
-          getScopeAccessorLiteral(nodeRef).value + AccessorChar.LoopScopeMap,
-        ),
-        t.conditionalExpression(
-          t.memberExpression(forScopesIdentifier, t.identifier("size")),
-          forScopesIdentifier,
-          t.identifier("undefined"),
-        ),
-      );
     }
-
-    writer.flushInto(tag);
-    // TODO: this is a hack to get around the fact that we don't have a way to
-    // know if a scope requires dynamic subscriptions
-    setSubscriberBuilder(tag, (() => {}) as any);
-    writeHTMLResumeStatements(tagBody);
-
-    if (isStateful || hasStatefulClosures) {
-      tag.node.body.body.push(
-        t.expressionStatement(
-          t.callExpression(
-            t.memberExpression(
-              getScopeIdentifier(bodySection),
-              t.identifier("set"),
-            ),
-            [
-              keyExpression!,
-              callRuntime("getScopeById", getScopeIdIdentifier(bodySection)),
-            ],
-          ),
-        ) as any,
-      );
-    }
-
-    tag.replaceWithMultiple(replacement);
-  },
-};
-
-function findName(
-  arr: (t.MarkoAttribute | t.MarkoSpreadAttribute)[],
-  value: string,
-) {
-  return arr.find((obj) => t.isMarkoAttribute(obj) && obj.name === value);
+  }
 }
 
-function validateFor(tag: t.NodePath<t.MarkoTag>) {
-  const attrs = tag.node.attributes;
-  const hasParams = tag.node.body.params.length > 0;
+function forTypeToRuntime(type: ForType) {
+  switch (type) {
+    case "of":
+      return "forOf";
+    case "in":
+      return "forIn";
+    case "to":
+      return "forTo";
+  }
+}
 
-  assertNoVar(tag);
+function forTypeToDOMRuntime(type: ForType) {
+  switch (type) {
+    case "of":
+      return "loopOf";
+    case "in":
+      return "loopIn";
+    case "to":
+      return "loopTo";
+  }
+}
 
-  if (findName(attrs, "of")) {
-    assertAllowedAttributes(tag, ["of", "by"]);
-    if (!hasParams) {
-      throw tag.buildCodeFrameError(
-        "Invalid `for of` tag, missing `|value, index|` params.",
-      );
-    }
-  } else if (findName(attrs, "in")) {
-    assertAllowedAttributes(tag, ["in", "by"]);
-    if (!hasParams) {
-      throw tag.buildCodeFrameError(
-        "Invalid `for in` tag, missing `|key, value|` params.",
-      );
-    }
-  } else if (findName(attrs, "to")) {
-    assertAllowedAttributes(tag, ["from", "to", "step", "by"]);
-  } else {
-    throw tag.buildCodeFrameError(
-      "Invalid `for` tag, missing an `of=`, `in=` or `to=` attribute.",
-    );
+function getBaseArgsInForTag(
+  type: ForType,
+  attrs: Record<string, t.Expression>,
+) {
+  switch (type) {
+    case "in":
+      return [attrs.in];
+    case "of":
+      return [attrs.of];
+    case "to":
+      return [
+        attrs.to,
+        attrs.from || t.numericLiteral(0),
+        attrs.step || t.numericLiteral(1),
+      ];
   }
 }
 
-function checkOnlyChild(tag: t.NodePath<t.MarkoTag>) {
+function isOnlyChildInParent(tag: t.NodePath<t.MarkoTag>) {
   const extra = tag.node.extra!;
+  if (extra[kOnlyChildInParent] !== undefined) {
+    return extra[kOnlyChildInParent];
+  }
+
   if (
     t.isMarkoTag(tag.parentPath?.parent) &&
     getTagDef(tag.parentPath!.parentPath! as t.NodePath<t.MarkoTag>)?.html
   ) {
-    return (extra.isOnlyChild =
+    return (extra[kOnlyChildInParent] =
       (tag.parent as t.MarkoTagBody).body.length === 1);
   }
-  return (extra.isOnlyChild = false);
+  return (extra[kOnlyChildInParent] = false);
 }
diff --git a/packages/translator-tags/src/util/get-known-attr-values.ts b/packages/translator-tags/src/util/get-known-attr-values.ts
new file mode 100644
index 0000000000..415f14cf72
--- /dev/null
+++ b/packages/translator-tags/src/util/get-known-attr-values.ts
@@ -0,0 +1,11 @@
+import type { types as t } from "@marko/compiler";
+export function getKnownAttrValues(tag: t.MarkoTag) {
+  const attrs: Record<string, t.Expression> = {};
+  for (const attr of tag.attributes) {
+    if (attr.type === "MarkoAttribute") {
+      attrs[attr.name] = attr.value;
+    }
+  }
+
+  return attrs;
+}
diff --git a/packages/translator-tags/src/util/visitors.ts b/packages/translator-tags/src/util/visitors.ts
index 11a175e230..f549eb56b3 100644
--- a/packages/translator-tags/src/util/visitors.ts
+++ b/packages/translator-tags/src/util/visitors.ts
@@ -1,5 +1,8 @@
 import type { types as t } from "@marko/compiler";
 
+import { isOutputHTML } from "./marko-config";
+import * as hooks from "./plugin-hooks";
+
 export type VisitorType = "migrate" | "transform" | "analyze" | "translate";
 export type TemplateVisitor<T extends t.Node> = Partial<
   Record<VisitorType, t.VisitNode<unknown, T>>
@@ -25,3 +28,20 @@ export function extractVisitors<
   }
   return result;
 }
+
+export function translateByTarget<T extends t.Node>({
+  html,
+  dom,
+}: {
+  dom: t.VisitNode<unknown, T>;
+  html: t.VisitNode<unknown, T>;
+}) {
+  return {
+    enter(path: t.NodePath<T>) {
+      hooks.enter(isOutputHTML() ? html : dom, path);
+    },
+    exit(path: t.NodePath<T>) {
+      hooks.exit(isOutputHTML() ? html : dom, path);
+    },
+  } as const;
+}