fix: handle await closures, delay renders in pending scopes

.changeset/open-facts-obey.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Handle updating closures in a pending await and delay running renders in pending scopes

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 20156,
+        "min": 20366,
-        "brotli": 7726
+        "brotli": 7839
       }
     },
     {
@@ -18,27 +18,27 @@
         "brotli": 140
       },
       "runtime": {
-        "min": 4043,
+        "min": 4076,
-        "brotli": 1820
+        "brotli": 1832
       },
       "total": {
-        "min": 4217,
+        "min": 4250,
-        "brotli": 1960
+        "brotli": 1972
       }
     },
     {
       "name": "counter 💧",
       "user": {
         "min": 96,
-        "brotli": 89
+        "brotli": 87
       },
       "runtime": {
-        "min": 2191,
+        "min": 2209,
-        "brotli": 1154
+        "brotli": 1163
       },
       "total": {
-        "min": 2287,
+        "min": 2305,
-        "brotli": 1243
+        "brotli": 1250
       }
     },
     {
@@ -48,27 +48,27 @@
         "brotli": 398
       },
       "runtime": {
-        "min": 7099,
+        "min": 7132,
-        "brotli": 3111
+        "brotli": 3114
       },
       "total": {
-        "min": 7834,
+        "min": 7867,
-        "brotli": 3509
+        "brotli": 3512
       }
     },
     {
       "name": "comments 💧",
       "user": {
         "min": 130,
-        "brotli": 116
+        "brotli": 115
       },
       "runtime": {
-        "min": 2343,
+        "min": 2361,
-        "brotli": 1196
+        "brotli": 1204
       },
       "total": {
-        "min": 2473,
+        "min": 2491,
-        "brotli": 1312
+        "brotli": 1319
       }
     }
   ]

.sizes/comments.ssr/entry.js

@@ -1,4 +1,4 @@
-// size: 130 (min) 116 (brotli)
+// size: 130 (min) 115 (brotli)
 const $for_content__open__script = _script("a0", ($scope) =>
     _on($scope.c, "click", function () {
       $for_content__open($scope, !$scope.m);

.sizes/counter.ssr/entry.js

@@ -1,4 +1,4 @@
-// size: 96 (min) 89 (brotli)
+// size: 96 (min) 87 (brotli)
 const $clickCount__script = _script("a0", ($scope) =>
     _on($scope.a, "click", function () {
       $clickCount($scope, $scope.c + 1);

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 20156 (min) 7726 (brotli)
+// size: 20366 (min) 7839 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs) {
@@ -76,7 +76,7 @@ function normalizeDynamicRenderer(value) {
   if (value) {
     if ("string" == typeof value) return value;
     let normalized = value.content || value.default || value;
-    if ("g" in normalized) return normalized;
+    if ("f" in normalized) return normalized;
   }
 }
 var decodeAccessor = (num) =>
@@ -240,7 +240,6 @@ function init(runtimeId = "M") {
                 (
                   branchId,
                   branch,
-                  childBranch,
                   endedBranches,
                   accessor,
                   singleNode,
@@ -270,6 +269,8 @@ function init(runtimeId = "M") {
                         (branch = scopeLookup[branchId] ||= { L: branchId }),
                       ),
                       (branch.F = branch),
+                      (branch.O = render.p?.[branchId]) &&
+                        (branch.O.m = render.m),
                       singleNode)
                     ) {
                       for (
@@ -296,8 +297,8 @@ function init(runtimeId = "M") {
                             ? startVisit
                             : parent.insertBefore(new Text(), visit)));
                     for (; i && orphanBranches[--i].L > branchId; )
-                      (((childBranch = orphanBranches.pop()).N = branch),
+                      ((orphanBranches[i].N = branch),
-                        (branch.D ||= new Set()).add(childBranch));
+                        (branch.D ||= new Set()).add(orphanBranches.pop()));
                     nextToken();
                   }
                   (endedBranches &&
@@ -745,9 +746,9 @@ function subscribeToScopeSet(ownerScope, accessor, scope) {
     ));
 }
 function _closure(...closureSignals) {
-  let [{ l: ___scopeInstancesAccessor, n: ___signalIndexAccessor }] =
+  let [{ k: ___scopeInstancesAccessor, l: ___signalIndexAccessor }] =
     closureSignals;
-  for (let i = closureSignals.length; i--; ) closureSignals[i].t = i;
+  for (let i = closureSignals.length; i--; ) closureSignals[i].q = i;
   return (scope) => {
     if (scope[___scopeInstancesAccessor])
       for (let childScope of scope[___scopeInstancesAccessor])
@@ -759,20 +760,21 @@ function _closure(...closureSignals) {
           );
   };
 }
-function _closure_get(valueAccessor, fn, getOwnerScope) {
+function _closure_get(valueAccessor, fn, getOwnerScope, resumeId) {
   valueAccessor = decodeAccessor(valueAccessor);
   let closureSignal = (scope) => {
-    ((scope[closureSignal.n] = closureSignal.t),
+    ((scope[closureSignal.l] = closureSignal.q),
       fn(scope),
       subscribeToScopeSet(
         getOwnerScope ? getOwnerScope(scope) : scope._,
-        closureSignal.l,
+        closureSignal.k,
         scope,
       ));
   };
   return (
-    (closureSignal.l = "B" + valueAccessor),
+    (closureSignal.k = "B" + valueAccessor),
-    (closureSignal.n = "C" + valueAccessor),
+    (closureSignal.l = "C" + valueAccessor),
+    resumeId && _resume(resumeId, closureSignal),
     closureSignal
   );
 }
@@ -891,12 +893,12 @@ function _content(id, template, walks, setup, params, dynamicScopesAccessor) {
         walk((branch.S = branch.K = new Text()), walks, branch);
       };
   return (owner) => ({
-    g: id,
+    f: id,
     h: clone,
     e: owner,
     j: setup,
-    a: params,
+    b: params,
-    b: dynamicScopesAccessor,
+    d: dynamicScopesAccessor,
   });
 }
 function _content_resume(
@@ -919,8 +921,8 @@ function _content_closures(renderer, closureFns) {
   return (owner, closureValues) => {
     let instance = renderer(owner);
     return (
-      (instance.o = closureSignals),
+      (instance.n = closureSignals),
-      (instance.u = closureValues),
+      (instance.t = closureValues),
       instance
     );
   };
@@ -1097,13 +1099,13 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 function _attr_content(scope, nodeAccessor, value) {
   let content = (function (value) {
       let renderer = normalizeDynamicRenderer(value);
-      if (renderer && renderer.g) return renderer;
+      if (renderer && renderer.f) return renderer;
     })(value),
     rendererAccessor = "D" + nodeAccessor;
-  scope[rendererAccessor] !== (scope[rendererAccessor] = content?.g) &&
+  scope[rendererAccessor] !== (scope[rendererAccessor] = content?.f) &&
     (setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch),
-    content?.b &&
+    content?.d &&
-      subscribeToScopeSet(content.e, content.b, scope["A" + nodeAccessor]));
+      subscribeToScopeSet(content.e, content.d, scope["A" + nodeAccessor]));
 }
 function _attrs_script(scope, nodeAccessor) {
   let el = scope[nodeAccessor],
@@ -1181,132 +1183,127 @@ function toInsertNode(startNode, endNode) {
 }
 function _await_promise(nodeAccessor, params) {
   let promiseAccessor = "L" + (nodeAccessor = decodeAccessor(nodeAccessor)),
-    branchAccessor = "A" + nodeAccessor,
+    branchAccessor = "A" + nodeAccessor;
-    rendererAccessor = "D" + nodeAccessor;
   return (
     _enable_catch(),
     (scope, promise) => {
-      let awaitCounter,
+      let awaitBranch = scope[branchAccessor],
-        renderData,
+        tryBranch = findBranchWithKey(scope, "Q") || awaitBranch,
-        tryWithPlaceholder = findBranchWithKey(scope, "Q");
+        awaitCounter = tryBranch.O;
-      tryWithPlaceholder
+      (awaitCounter?.i ||
-        ? ((renderData =
+        (awaitCounter = tryBranch.O =
-            self[tryWithPlaceholder.$.runtimeId]?.[
+          {
-              tryWithPlaceholder.$.renderId
+            i: 0,
-            ]),
+            c() {
-          (awaitCounter = tryWithPlaceholder.O ||=
+              if (--awaitCounter.i) return 1;
-            renderData?.p?.[tryWithPlaceholder.L]),
+              if (tryBranch === scope[branchAccessor])
-          awaitCounter?.i ||
+                scope[nodeAccessor].parentNode &&
-            (awaitCounter = tryWithPlaceholder.O =
+                  scope[nodeAccessor].replaceWith(
-              {
+                    scope[branchAccessor].S.parentNode,
-                d: 1,
+                  );
-                i: 0,
+              else {
-                c() {
+                let placeholderBranch = tryBranch.P;
-                  if (!--awaitCounter.i) {
+                placeholderBranch &&
-                    let placeholderBranch = tryWithPlaceholder.P;
+                  ((tryBranch.P = 0),
-                    ((tryWithPlaceholder.P = 0),
+                  placeholderBranch.S.parentNode.insertBefore(
-                      placeholderBranch &&
+                    tryBranch.S.parentNode,
-                        (placeholderBranch.S.parentNode.insertBefore(
+                    placeholderBranch.S,
-                          tryWithPlaceholder.S.parentNode,
+                  ),
-                          placeholderBranch.S,
+                  removeAndDestroyBranch(placeholderBranch));
-                        ),
+              }
-                        removeAndDestroyBranch(placeholderBranch)),
+              queueEffect(tryBranch, (scope2) => {
-                      queueEffect(tryWithPlaceholder, (scope2) => {
+                let pendingEffects2 = scope2.J;
-                        let pendingEffects2 = scope2.J;
+                pendingEffects2 &&
-                        pendingEffects2 &&
+                  ((scope2.J = []), runEffects(pendingEffects2, 1));
-                          ((scope2.J = []), runEffects(pendingEffects2, !0));
+              });
-                      }));
+            },
-                  }
+          }),
-                },
+        placeholderShown.add(pendingEffects),
-              }),
+        scope[promiseAccessor] ||
-          placeholderShown.add(pendingEffects),
+          (awaitBranch && (awaitBranch.W ||= []),
-          !scope[promiseAccessor] &&
+          awaitCounter.i++ ||
-            !awaitCounter.i++ &&
             requestAnimationFrame(
               () =>
                 awaitCounter.i &&
                 runEffects(
                   prepareEffects(() =>
                     queueRender(
-                      tryWithPlaceholder,
+                      tryBranch === awaitBranch ? scope : tryBranch,
                       () => {
-                        (insertBranchBefore(
+                        tryBranch.Q
-                          (tryWithPlaceholder.P = createAndSetupBranch(
+                          ? (insertBranchBefore(
-                            scope.$,
+                              (tryBranch.P = createAndSetupBranch(
-                            tryWithPlaceholder.Q,
+                                scope.$,
-                            tryWithPlaceholder._,
+                                tryBranch.Q,
-                            tryWithPlaceholder.S.parentNode,
+                                tryBranch._,
-                          )),
+                                tryBranch.S.parentNode,
-                          tryWithPlaceholder.S.parentNode,
+                              )),
-                          tryWithPlaceholder.S,
+                              tryBranch.S.parentNode,
-                        ),
+                              tryBranch.S,
-                          tempDetachBranch(tryWithPlaceholder));
+                            ),
+                            tempDetachBranch(tryBranch))
+                          : awaitBranch.V ||
+                            (awaitBranch.S.parentNode.insertBefore(
+                              scope[nodeAccessor],
+                              awaitBranch.S,
+                            ),
+                            tempDetachBranch(tryBranch));
                       },
                       -1,
                     ),
                   ),
                 ),
-            ))
+            )));
-        : scope[branchAccessor] &&
-          !scope[promiseAccessor] &&
-          (scope[branchAccessor].S.parentNode.insertBefore(
-            scope[nodeAccessor],
-            scope[branchAccessor].S,
-          ),
-          tempDetachBranch(scope[branchAccessor]));
       let thisPromise = (scope[promiseAccessor] = promise.then(
         (data) => {
-          thisPromise === scope[promiseAccessor] &&
+          if (thisPromise === scope[promiseAccessor]) {
+            let referenceNode = scope[nodeAccessor];
             ((scope[promiseAccessor] = 0),
-            schedule(),
+              queueMicrotask(run),
-            queueRender(
+              queueRender(
-              scope,
+                scope,
-              () => {
+                () => {
-                if (
+                  ((awaitBranch = scope[branchAccessor]).V &&
-                  (scope[branchAccessor]
+                    (pendingScopes.push(awaitBranch),
-                    ? tryWithPlaceholder ||
+                    setupBranch(awaitBranch.V, awaitBranch),
-                      scope[nodeAccessor].replaceWith(
+                    (awaitBranch.V = 0),
-                        scope[branchAccessor].S.parentNode,
+                    insertBranchBefore(
-                      )
+                      awaitBranch,
-                    : (insertBranchBefore(
+                      scope[nodeAccessor].parentNode,
-                        (scope[branchAccessor] = createAndSetupBranch(
+                      scope[nodeAccessor],
-                          scope.$,
+                    ),
-                          scope[rendererAccessor],
+                    referenceNode.remove()),
-                          scope,
+                    params?.(awaitBranch, [data]));
-                          scope[nodeAccessor].parentNode,
+                  let pendingRenders2 = awaitBranch.W;
-                        )),
+                  if (
-                        scope[nodeAccessor].parentNode,
+                    ((awaitBranch.W = 0),
-                        scope[nodeAccessor],
+                    pendingRenders2?.forEach(queuePendingRender),
-                      ),
+                    placeholderShown.add(pendingEffects),
-                      scope[nodeAccessor].remove()),
-                  params?.(scope[branchAccessor], [data]),
-                  awaitCounter &&
-                    (placeholderShown.add(pendingEffects),
                     awaitCounter.c(),
-                    !awaitCounter.d))
+                    awaitCounter.m)
-                ) {
+                  ) {
-                  let fnScopes = new Map(),
+                    let fnScopes = new Map(),
-                    effects = renderData.m();
+                      effects = awaitCounter.m();
-                  for (let i = 0; i < pendingEffects.length; ) {
+                    for (let i = 0; i < pendingEffects.length; ) {
-                    let fn = pendingEffects[i++],
+                      let fn = pendingEffects[i++],
-                      scopes = fnScopes.get(fn);
+                        scopes = fnScopes.get(fn);
-                    (scopes || fnScopes.set(fn, (scopes = new Set())),
+                      (scopes || fnScopes.set(fn, (scopes = new Set())),
-                      scopes.add(pendingEffects[i++]));
+                        scopes.add(pendingEffects[i++]));
+                    }
+                    for (let i = 0; i < effects.length; ) {
+                      let fn = effects[i++],
+                        scope2 = effects[i++];
+                      fnScopes.get(fn)?.has(scope2) || queueEffect(scope2, fn);
+                    }
                   }
-                  for (let i = 0; i < effects.length; ) {
+                },
-                    let fn = effects[i++],
+                -1,
-                      scope2 = effects[i++];
+              ));
-                    fnScopes.get(fn)?.has(scope2) || queueEffect(scope2, fn);
+          }
-                  }
-                }
-              },
-              -1,
-            ));
         },
         (error) => {
           thisPromise === scope[promiseAccessor] &&
-            (awaitCounter && (awaitCounter.i = 0),
+            ((awaitCounter.i = scope[promiseAccessor] = 0),
-            (scope[promiseAccessor] = 0),
             schedule(),
             queueRender(scope, renderCatch, -1, error));
         },
@@ -1315,10 +1312,16 @@ function _await_promise(nodeAccessor, params) {
   );
 }
 function _await_content(nodeAccessor, template, walks, setup) {
-  let rendererAccessor = "D" + decodeAccessor(nodeAccessor),
+  let branchAccessor = "A" + (nodeAccessor = decodeAccessor(nodeAccessor)),
     renderer = _content("", template, walks, setup)();
   return (scope) => {
-    scope[rendererAccessor] = renderer;
+    (((scope[branchAccessor] = createBranch(
+      scope.$,
+      renderer,
+      scope,
+      scope[nodeAccessor].parentNode,
+    )).V = renderer),
+      pendingScopes.pop());
   };
 }
 function _try(nodeAccessor, template, walks, setup) {
@@ -1356,7 +1359,7 @@ function renderCatch(scope, error) {
         tryWithCatch.E,
         createAndSetupBranch,
       ),
-      tryWithCatch.E.a?.(owner["A" + tryWithCatch.C], [error]));
+      tryWithCatch.E.b?.(owner["A" + tryWithCatch.C], [error]));
   }
 }
 function _if(nodeAccessor, ...branchesArgs) {
@@ -1390,7 +1393,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
       if (
         scope[rendererAccessor] !==
           (scope[rendererAccessor] =
-            normalizedRenderer?.g || normalizedRenderer) ||
+            normalizedRenderer?.f || normalizedRenderer) ||
         (getContent && !normalizedRenderer && !scope[childScopeAccessor])
       )
         if (
@@ -1413,18 +1416,18 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
               content,
               createAndSetupBranch,
             ),
-              content.b &&
+              content.d &&
                 subscribeToScopeSet(
                   content.e,
-                  content.b,
+                  content.d,
                   scope[childScopeAccessor].Aa,
                 ));
           }
         } else
-          normalizedRenderer?.b &&
+          normalizedRenderer?.d &&
             subscribeToScopeSet(
               normalizedRenderer.e,
-              normalizedRenderer.b,
+              normalizedRenderer.d,
               scope[childScopeAccessor],
             );
       if (normalizedRenderer) {
@@ -1439,14 +1442,14 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
             (childScope.Ia || childScope.Ea) &&
               queueEffect(childScope, dynamicTagScript));
         else {
-          for (let accessor in normalizedRenderer.o)
+          for (let accessor in normalizedRenderer.n)
-            normalizedRenderer.o[accessor](
+            normalizedRenderer.n[accessor](
               childScope,
-              normalizedRenderer.u[accessor],
+              normalizedRenderer.t[accessor],
             );
-          if (normalizedRenderer.a)
+          if (normalizedRenderer.b)
             if (inputIsArgs)
-              normalizedRenderer.a(
+              normalizedRenderer.b(
                 childScope,
                 normalizedRenderer._ ? args[0] : args,
               );
@@ -1454,7 +1457,7 @@ var _dynamic_tag = function (nodeAccessor, getContent, getTagVar, inputIsArgs) {
               let inputWithContent = getContent
                 ? { ...args, content: getContent(scope) }
                 : args || {};
-              normalizedRenderer.a(
+              normalizedRenderer.b(
                 childScope,
                 normalizedRenderer._ ? inputWithContent : [inputWithContent],
               );
@@ -1728,7 +1731,8 @@ function bySecondArg(_item, index) {
 function byFirstArg(name) {
   return name;
 }
-var rendering,
+var asyncRendersLookup,
+  rendering,
   pendingRenders = [],
   pendingRendersLookup = new Map(),
   caughtError = new WeakSet(),
@@ -1738,48 +1742,53 @@ var rendering,
   scopeKeyOffset = 1e3;
 function queueRender(scope, signal, signalKey, value, scopeKey = scope.L) {
   let key = scopeKey * scopeKeyOffset + signalKey,
-    existingRender = signalKey >= 0 && pendingRendersLookup.get(key);
+    render = signalKey >= 0 && pendingRendersLookup.get(key);
-  if (existingRender) existingRender.q = value;
+  render
-  else {
+    ? (render.o = value)
-    let render = { f: key, k: scope, x: signal, q: value },
+    : (queuePendingRender((render = { a: key, g: scope, u: signal, o: value })),
-      i = pendingRenders.push(render) - 1;
+      signalKey >= 0 && pendingRendersLookup.set(key, render));
-    for (; i; ) {
+}
-      let parentIndex = (i - 1) >> 1,
+function queuePendingRender(render) {
-        parent = pendingRenders[parentIndex];
+  let i = pendingRenders.push(render) - 1;
-      if (key - parent.f >= 0) break;
+  for (; i; ) {
-      ((pendingRenders[i] = parent), (i = parentIndex));
+    let parentIndex = (i - 1) >> 1,
-    }
+      parent = pendingRenders[parentIndex];
-    (signalKey >= 0 && pendingRendersLookup.set(key, render),
+    if (render.a - parent.a >= 0) break;
-      (pendingRenders[i] = render));
+    ((pendingRenders[i] = parent), (i = parentIndex));
   }
+  pendingRenders[i] = render;
 }
 function queueEffect(scope, fn) {
   pendingEffects.push(fn, scope);
 }
 function run() {
   let effects = pendingEffects;
+  asyncRendersLookup = new Map();
   try {
     ((rendering = 1), runRenders());
   } finally {
-    ((pendingRenders = []),
+    ((pendingRendersLookup = asyncRendersLookup),
-      (pendingRendersLookup = new Map()),
+      (asyncRendersLookup = rendering = 0),
-      (pendingEffects = []),
+      (pendingRenders = []),
-      (rendering = 0));
+      (pendingEffects = []));
   }
   runEffects(effects);
 }
 function prepareEffects(fn) {
   let prevRenders = pendingRenders,
-    prevRendersLookup = pendingRendersLookup,
     prevEffects = pendingEffects,
+    prevLookup = asyncRendersLookup,
     preparedEffects = (pendingEffects = []);
-  ((pendingRenders = []), (pendingRendersLookup = new Map()));
+  ((pendingRenders = []),
+    (asyncRendersLookup = pendingRendersLookup),
+    (pendingRendersLookup = new Map()));
   try {
     ((rendering = 1), fn(), runRenders());
   } finally {
     ((rendering = 0),
+      (pendingRendersLookup = asyncRendersLookup),
+      (asyncRendersLookup = prevLookup),
       (pendingRenders = prevRenders),
-      (pendingRendersLookup = prevRendersLookup),
       (pendingEffects = prevEffects));
   }
   return preparedEffects;
@@ -1794,27 +1803,27 @@ function runRenders() {
     if (render !== item) {
       let i = 0,
         mid = pendingRenders.length >> 1,
-        key = (pendingRenders[0] = item).f;
+        key = (pendingRenders[0] = item).a;
       for (; i < mid; ) {
         let bestChild = 1 + (i << 1),
           right = bestChild + 1;
         if (
           (right < pendingRenders.length &&
-            pendingRenders[right].f - pendingRenders[bestChild].f < 0 &&
+            pendingRenders[right].a - pendingRenders[bestChild].a < 0 &&
             (bestChild = right),
-          pendingRenders[bestChild].f - key >= 0)
+          pendingRenders[bestChild].a - key >= 0)
         )
           break;
         ((pendingRenders[i] = pendingRenders[bestChild]), (i = bestChild));
       }
       pendingRenders[i] = item;
     }
-    render.k.F?.I || runRender(render);
+    render.g.F?.I || runRender(render);
   }
   for (let scope of pendingScopes) scope.H = 0;
   pendingScopes = [];
 }
-var runRender = (render) => render.x(render.k, render.q),
+var runRender = (render) => render.u(render.g, render.o),
   _enable_catch = () => {
     ((_enable_catch = () => {}), enableBranches());
     let handlePendingTry = (fn, scope, branch) => {
@@ -1843,9 +1852,18 @@ var runRender = (render) => render.x(render.k, render.q),
     )(runEffects)),
       (runRender = ((runRender2) => (render) => {
         try {
+          let branch = render.g.F;
+          for (; branch; ) {
+            if (branch.W)
+              return (
+                asyncRendersLookup.set(render.a, render),
+                branch.W.push(render)
+              );
+            branch = branch.N;
+          }
           runRender2(render);
         } catch (error) {
-          renderCatch(render.k, error);
+          renderCatch(render.g, error);
         }
       })(runRender)));
   };
@@ -1934,7 +1952,7 @@ var classIdToBranch = new Map(),
                 renderer.e,
                 document.body,
               ))),
-            renderer.a?.(branch, renderer._ ? args[0] : args));
+            renderer.b?.(branch, renderer._ ? args[0] : args));
         })),
         created)
       )
@@ -1972,7 +1990,7 @@ function mount(input = {}, reference, position) {
         (nextSibling = reference.nextSibling));
   }
   let curValue,
-    args = this.a,
+    args = this.b,
     effects = prepareEffects(() => {
       ((branch = createBranch($global, this, void 0, parentNode)),
         (branch.T = (newValue) => {

.sizes/name-cache.json

@@ -1 +1 @@
-{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"o","$_assert_hoist":"i","$forIn":"l","$forOf":"u","$forTo":"f","$forUntil":"a","$_call":"c","$stringifyClassObject":"s","$stringifyStyleObject":"d","$toDelimitedString":"h","$isEventHandler":"p","$getEventHandlerName":"g","$normalizeDynamicRenderer":"v","$decodeAccessor":"b","$toArray":"m","$push":"S","$defaultDelegator":"y","$_on":"A","$createDelegator":"k","$handleDelegated":"C","$stripSpacesAndPunctuation":"N","$nextScopeId":"_","$createScope":"w","$skipScope":"E","$findBranchWithKey":"I","$destroyBranch":"M","$destroyNestedBranches":"x","$removeAndDestroyBranch":"F","$insertBranchBefore":"L","$tempDetachBranch":"T","$walker":"$","$walk":"O","$walkInternal":"D","$branchesEnabled":"K","$isResuming":"G","$registeredValues":"R","$enableBranches":"B","$init":"H","$_resume":"U","$_var_resume":"V","$_el":"P","$_attr_input_checked":"W","$_attr_input_checked_script":"j","$_attr_input_checkedValue":"q","$_attr_input_checkedValue_script":"J","$_attr_input_value":"Q","$_attr_input_value_script":"X","$_attr_select_value":"Z","$_attr_select_value_script":"z","$setSelectOptions":"Y","$_attr_details_or_dialog_open":"ee","$_attr_details_or_dialog_open_script":"te","$inputType":"ne","$setValueAndUpdateSelection":"re","$setCheckboxValue":"oe","$controllableDelegate":"ie","$syncControllable":"le","$handleChange":"ue","$handleFormReset":"fe","$hasValueChanged":"ae","$hasCheckboxChanged":"ce","$hasSelectChanged":"se","$hasFormElementChanged":"de","$normalizeStrProp":"he","$normalizeBoolProp":"pe","$toValueProp":"ge","$isScheduled":"ve","$channel":"be","$parsers":"me","$parseHTML":"Se","$schedule":"ye","$flushAndWaitFrame":"Ae","$triggerMacroTask":"ke","$_let":"Ce","$_const":"Ne","$_or":"_e","$_for_closure":"we","$_if_closure":"Ee","$subscribeToScopeSet":"Ie","$_closure":"Me","$_closure_get":"xe","$_child_setup":"Fe","$_var":"Le","$_return":"Te","$_return_change":"$e","$_var_change":"Oe","$tagIdsByGlobal":"De","$_id":"Ke","$_script":"Ge","$_el_read":"Re","$traverseAllHoisted":"Be","$_hoist":"He","$createBranch":"Ue","$createAndSetupBranch":"Ve","$setupBranch":"Pe","$_content":"We","$_content_resume":"je","$_content_closures":"qe","$cloneCache":"Je","$_attr":"Qe","$setAttribute":"Xe","$_attr_class":"Ze","$_attr_class_items":"ze","$_attr_class_item":"Ye","$_attr_style":"et","$_attr_style_items":"tt","$_attr_style_item":"nt","$_text":"rt","$_text_content":"ot","$_attrs":"it","$_attrs_content":"lt","$hasAttrAlias":"ut","$_attrs_partial":"ft","$_attrs_partial_content":"at","$attrsInternal":"ct","$_attr_content":"st","$_attrs_script":"dt","$_html":"ht","$normalizeAttrValue":"pt","$normalizeString":"gt","$_lifecycle":"vt","$removeChildNodes":"bt","$insertChildNodes":"mt","$toInsertNode":"St","$_await":"yt","$_try":"At","$renderCatch":"kt","$_if":"Ct","$_dynamic_tag":"Nt","$_resume_dynamic_tag":"_t","$dynamicTagScript":"wt","$setConditionalRenderer":"Et","$_for_of":"It","$_for_in":"Mt","$_for_to":"xt","$_for_until":"Ft","$loop":"Lt","$createBranchWithTagNameOrRenderer":"Tt","$bySecondArg":"$t","$byFirstArg":"Ot","$rendering":"Dt","$pendingRenders":"Kt","$pendingRendersLookup":"Gt","$caughtError":"Rt","$placeholderShown":"Bt","$pendingEffects":"Ht","$pendingScopes":"Ut","$scopeKeyOffset":"Vt","$queueRender":"Pt","$queueEffect":"Wt","$run":"jt","$prepareEffects":"qt","$runEffects":"Jt","$runRenders":"Qt","$runRender":"Xt","$_enable_catch":"Zt","$$signalReset":"zt","$$signal":"Yt","$abort":"en","$classIdToBranch":"tn","$compat":"nn","$_template":"rn","$mount":"on","$$clickCount__script":"ta","$$clickCount":"aa","$$setup":"na","$forEach":"ln","$$if_content__setup":"sa","$$if_content__comment_comments":"ca","$$if_content__id":"ia","$$for_content__id":"la","$$for_content__input_path__OR__i":"ma","$$for_content__input_path":"oa","$$for_content__i":"ua","$$for_content__open__script":"ba","$$for_content__open":"ea","$$for_content__setup":"_a","$$for_content__comment_text":"da","$$for_content__if":"fa","$$for_content__comment_comments":"ha","$$for_content__$params":"ja","$$for_content__comment":"pa","$$for":"ga","$$input_comments":"ka","$$input_path":"ra","$isInit":"un","$runResumeEffects":"fn","$_await_promise":"an","$_await_content":"cn","$$input$1":"xa","$_title":"sn","$_to_text":"dn","$_attr_nonce":"hn"}}}
+{"vars":{"props":{"$empty":"e","$rest":"t","$attrTag":"n","$attrTags":"r","$attrTagIterator":"i","$_assert_hoist":"o","$forIn":"l","$forOf":"u","$forTo":"f","$forUntil":"a","$_call":"c","$stringifyClassObject":"s","$stringifyStyleObject":"d","$toDelimitedString":"h","$isEventHandler":"p","$getEventHandlerName":"g","$normalizeDynamicRenderer":"v","$decodeAccessor":"b","$toArray":"m","$push":"S","$defaultDelegator":"y","$_on":"A","$createDelegator":"N","$handleDelegated":"k","$stripSpacesAndPunctuation":"C","$nextScopeId":"_","$createScope":"w","$skipScope":"E","$findBranchWithKey":"T","$destroyBranch":"I","$destroyNestedBranches":"F","$removeAndDestroyBranch":"M","$insertBranchBefore":"x","$tempDetachBranch":"L","$walker":"$","$walk":"O","$walkInternal":"D","$branchesEnabled":"K","$isResuming":"V","$registeredValues":"G","$enableBranches":"R","$init":"B","$runResumeEffects":"H","$_resume":"U","$_var_resume":"q","$_el":"P","$_attr_input_checked":"j","$_attr_input_checked_script":"W","$_attr_input_checkedValue":"J","$_attr_input_checkedValue_script":"Q","$_attr_input_value":"X","$_attr_input_value_script":"Z","$_attr_select_value":"z","$_attr_select_value_script":"Y","$setSelectOptions":"ee","$_attr_details_or_dialog_open":"te","$_attr_details_or_dialog_open_script":"ne","$inputType":"re","$setValueAndUpdateSelection":"ie","$setCheckboxValue":"oe","$controllableDelegate":"le","$syncControllable":"ue","$handleChange":"fe","$handleFormReset":"ae","$hasValueChanged":"ce","$hasCheckboxChanged":"se","$hasSelectChanged":"de","$hasFormElementChanged":"he","$normalizeStrProp":"pe","$normalizeBoolProp":"ge","$toValueProp":"ve","$isScheduled":"be","$channel":"me","$parsers":"Se","$parseHTML":"ye","$schedule":"Ae","$flushAndWaitFrame":"Ne","$triggerMacroTask":"ke","$_let":"Ce","$_const":"_e","$_or":"we","$_for_closure":"Ee","$_if_closure":"Te","$subscribeToScopeSet":"Ie","$_closure":"Fe","$_closure_get":"Me","$_child_setup":"xe","$_var":"Le","$_return":"$e","$_return_change":"Oe","$_var_change":"De","$tagIdsByGlobal":"Ke","$_id":"Ve","$_script":"Ge","$_el_read":"Re","$traverseAllHoisted":"Be","$_hoist":"He","$createBranch":"Ue","$createAndSetupBranch":"qe","$setupBranch":"Pe","$_content":"je","$_content_resume":"We","$_content_closures":"Je","$cloneCache":"Qe","$_to_text":"Xe","$_attr":"Ze","$setAttribute":"ze","$_attr_class":"Ye","$_attr_class_items":"et","$_attr_class_item":"tt","$_attr_style":"nt","$_attr_style_items":"rt","$_attr_style_item":"it","$_text":"ot","$_text_content":"lt","$_attrs":"ut","$_attrs_content":"ft","$hasAttrAlias":"at","$_attrs_partial":"ct","$_attrs_partial_content":"st","$attrsInternal":"dt","$_attr_content":"ht","$_attrs_script":"pt","$_html":"gt","$normalizeAttrValue":"vt","$normalizeString":"bt","$_lifecycle":"mt","$removeChildNodes":"St","$insertChildNodes":"yt","$toInsertNode":"At","$_await_promise":"Nt","$_await_content":"kt","$_try":"Ct","$renderCatch":"_t","$_if":"wt","$_dynamic_tag":"Et","$_resume_dynamic_tag":"Tt","$dynamicTagScript":"It","$setConditionalRenderer":"Ft","$_for_of":"Mt","$_for_in":"xt","$_for_to":"Lt","$_for_until":"$t","$loop":"Ot","$createBranchWithTagNameOrRenderer":"Dt","$bySecondArg":"Kt","$byFirstArg":"Vt","$asyncRendersLookup":"Gt","$rendering":"Rt","$pendingRenders":"Bt","$pendingRendersLookup":"Ht","$caughtError":"Ut","$placeholderShown":"qt","$pendingEffects":"Pt","$pendingScopes":"jt","$scopeKeyOffset":"Wt","$queueRender":"Jt","$queuePendingRender":"Qt","$queueEffect":"Xt","$run":"Zt","$prepareEffects":"zt","$runEffects":"Yt","$runRenders":"en","$runRender":"tn","$_enable_catch":"nn","$$signalReset":"rn","$$signal":"on","$abort":"ln","$classIdToBranch":"un","$compat":"fn","$_template":"an","$mount":"cn","$$clickCount__script":"ta","$$clickCount":"aa","$$setup":"na","$forEach":"sn","$$if_content__setup":"sa","$$if_content__comment_comments":"ia","$$if_content__id":"ca","$$for_content__id":"la","$$for_content__input_path__OR__i":"ma","$$for_content__input_path":"oa","$$for_content__i":"ua","$$for_content__open__script":"ba","$$for_content__open":"ea","$$for_content__setup":"_a","$$for_content__comment_text":"da","$$for_content__if":"fa","$$for_content__comment_comments":"ha","$$for_content__$params":"ja","$$for_content__comment":"pa","$$for":"ra","$$input_comments":"ga","$$input_path":"ka","$_attr_nonce":"dn"}}}

package-lock.json

@@ -51,7 +51,7 @@
         "lint-staged": "^16.2.6",
         "mocha": "^11.7.5",
         "mocha-autotest": "^1.1.3",
-        "mocha-snap": "^5.0.0",
+        "mocha-snap": "^5.0.1",
         "prettier": "^3.6.2",
         "prettier-plugin-packagejson": "^2.5.19",
         "pretty-format": "^30.2.0",
@@ -7706,9 +7706,9 @@
       }
     },
     "node_modules/mocha-snap": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/mocha-snap/-/mocha-snap-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/mocha-snap/-/mocha-snap-5.0.1.tgz",
-      "integrity": "sha512-tl0iQb2zkN1pE1vzQSSnuEyR8GkB/uECMdvK5dcXPEjC316K4bzNd36TgLEXadMyQDhy0ny6FZxChm6rJAs9+Q==",
+      "integrity": "sha512-uEBt7J6qDm9ACi0+RhW1VkR8ER9GqwTW3iKE/O2Q07u8jxVentb7OfpAnWRnDmbP//K517olc7VlX1GG52Lc2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -66,7 +66,7 @@
     "lint-staged": "^16.2.6",
     "mocha": "^11.7.5",
     "mocha-autotest": "^1.1.3",
-    "mocha-snap": "^5.0.0",
+    "mocha-snap": "^5.0.1",
     "prettier": "^3.6.2",
     "prettier-plugin-packagejson": "^2.5.19",
     "pretty-format": "^30.2.0",

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr-sanitized.expected.md

@@ -6,6 +6,16 @@
 ```
 
 
+# Render ASYNC
+```html
+<div
+  data-level="4"
+>
+  LOADING...
+</div>
+```
+
+
 # Render ASYNC
 ```html
 <div
@@ -48,6 +58,24 @@
 ```
 
 
+# Render ASYNC
+```html
+<div
+  data-level="4"
+>
+  <div
+    data-level="3"
+  >
+    <div
+      data-level="2"
+    >
+      LOADING...
+    </div>
+  </div>
+</div>
+```
+
+
 # Render ASYNC
 ```html
 <div

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/csr.expected.md

@@ -17,6 +17,27 @@
 INSERT #comment0, #comment1, div, #comment2, #comment3
 ```
 
+# Render ASYNC
+```html
+<!---->
+<!---->
+<div
+  data-level="4"
+>
+  LOADING...
+</div>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT div/#text
+REMOVE #document-fragment/#comment0 after div/#text
+REMOVE #document-fragment/#text after div/#text
+REMOVE #document-fragment/#comment1 after div/#text
+```
+
 # Render ASYNC
 ```html
 <!---->
@@ -43,8 +64,8 @@ INSERT #comment0, #comment1, div, #comment2, #comment3
 
 # Mutations
 ```
-INSERT div/#comment1, div/#comment2, #text, div/#comment3, div/#comment4
+INSERT div/#comment0, div/#comment1, div/#comment2, #text, div/#comment3, div/#comment4, div/#comment5
-REMOVE #text after div/#comment4
+REMOVE #text after div/#comment5
 INSERT div/div
 REMOVE #text after div/div
 UPDATE div/div[data-level] null => "3"
@@ -128,6 +149,47 @@ INSERT div/div/div/#comment0, div/div/div/#text, div/div/div/#comment1
 REMOVE #text after div/div/div/#comment1
 ```
 
+# Render ASYNC
+```html
+<!---->
+<!---->
+<div
+  data-level="4"
+>
+  <!---->
+  <!---->
+  <!---->
+  <div
+    data-level="3"
+  >
+    <!---->
+    <!---->
+    <!---->
+    <div
+      data-level="2"
+    >
+      LOADING...
+    </div>
+    <!---->
+    <!---->
+    <!---->
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT div/div/div/#text
+REMOVE #document-fragment/#comment0 after div/div/div/#text
+REMOVE #document-fragment/#text after div/div/div/#text
+REMOVE #document-fragment/#comment1 after div/div/div/#text
+```
+
 # Render ASYNC
 ```html
 <!---->
@@ -174,8 +236,8 @@ REMOVE #text after div/div/div/#comment1
 
 # Mutations
 ```
-INSERT div/div/div/#comment1, div/div/div/#comment2, #text, div/div/div/#comment3, div/div/div/#comment4
+INSERT div/div/div/#comment0, div/div/div/#comment1, div/div/div/#comment2, #text, div/div/div/#comment3, div/div/div/#comment4, div/div/div/#comment5
-REMOVE #text after div/div/div/#comment4
+REMOVE #text after div/div/div/#comment5
 INSERT div/div/div/div
 REMOVE #text after div/div/div/div
 UPDATE div/div/div/div[data-level] null => "1"

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/dom.expected/tags/recurse.js

@@ -1,6 +1,7 @@
 export const $template = "<!><!><!>";
 export const $walks = /* over(1), replace, over(2) */"b%c";
 export const $setup = () => {};
+import { resolveAfter } from "../../../utils/resolve";
 import * as _ from "@marko/runtime-tags/debug/dom";
 _._enable_catch();
 const $placeholder_content = _._content_resume("__tests__/tags/recurse.marko_4_content", "LOADING...", /* over(1) */"b");
@@ -8,12 +9,12 @@ const $await_content__setup = $scope => {
   $setup($scope["#childScope/0"]);
   $await_content__input_level($scope);
 };
-const $await_content__input_level = /* @__PURE__ */_._closure_get("input_level", $scope => $input_level($scope["#childScope/0"], $scope._._._.input_level - 1), $scope => $scope._._._);
+const $await_content__input_level = /* @__PURE__ */_._closure_get("input_level", $scope => $input_level($scope["#childScope/0"], $scope._._._.input_level - 1), $scope => $scope._._._, "__tests__/tags/recurse.marko_3_input_level");
 const $await_content = /* @__PURE__ */_._await_content("#text/0", `<!>${$template}<!>`, /* over(1), <recurse>, over(1) */`b/${$walks}&b`, $await_content__setup);
 const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0");
 const $try_content__setup = $scope => {
   $await_content($scope);
-  $try_content__await_promise($scope, new Promise(setImmediate));
+  $try_content__await_promise($scope, resolveAfter(0, 1));
 };
 const $if_content__input_level = /* @__PURE__ */_._if_closure("#text/0", 0, $scope => _._attr($scope["#div/0"], "data-level", $scope._.input_level));
 const $if_content__try = /* @__PURE__ */_._try("#text/1", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/html.expected/tags/recurse.js

@@ -1,3 +1,4 @@
+import { resolveAfter } from "../../../utils/resolve";
 import * as _ from "@marko/runtime-tags/debug/html";
 const $content = input => {
   const $scope0_reason = _._scope_reason();
@@ -10,23 +11,24 @@ const $content = input => {
       _._try($scope1_id, "#text/1", _._content_resume("__tests__/tags/recurse.marko_2_content", () => {
         const $scope2_id = _._scope_id();
         const $scope2_reason = _._scope_reason();
-        _._await($scope2_id, "#text/0", new Promise(setImmediate), () => {
+        _._await($scope2_id, "#text/0", resolveAfter(0, 1), () => {
           const $scope3_id = _._scope_id();
+          _._serialize_if($scope0_reason, /* input.level */0) && _._script($scope3_id, "__tests__/tags/recurse.marko_3_input_level");
           const $childScope = _._peek_scope_id();
           _._set_serialize_reason(_._serialize_guard($scope0_reason, /* input.level */0));
           $content({
             level: input.level - 1
           });
-          _._serialize_if($scope0_reason, /* input.level */0) && _._subscribe($input_level__closures, _._scope($scope3_id, {
+          _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope3_id, {
             _: _._scope_with_id($scope2_id),
             "#childScope/0": _._serialize_if($scope0_reason, /* input.level */0) && _._existing_scope($childScope),
             "ClosureSignalIndex:input_level": _._serialize_if($scope0_reason, /* input.level */0) && 0
-          }, "__tests__/tags/recurse.marko", "5:7"));
+          }, "__tests__/tags/recurse.marko", "6:7");
           _._resume_branch($scope3_id);
         }, _._serialize_guard($scope0_reason, /* input.level */0));
         _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope2_id, {
           _: _._scope_with_id($scope1_id)
-        }, "__tests__/tags/recurse.marko", "3:5");
+        }, "__tests__/tags/recurse.marko", "4:5");
       }, $scope1_id), {
         placeholder: _.attrTag({
           content: _._content_resume("__tests__/tags/recurse.marko_4_content", () => {
@@ -38,7 +40,7 @@ const $content = input => {
       _._html(`</div>${_._el_resume($scope1_id, "#div/0", _._serialize_guard($scope0_reason, /* input.level */0))}`);
       _._serialize_if($scope0_reason, /* input.level */0) && _._scope($scope1_id, {
         _: _._scope_with_id($scope0_id)
-      }, "__tests__/tags/recurse.marko", "1:1");
+      }, "__tests__/tags/recurse.marko", "2:1");
       return 0;
     }
   }, $scope0_id, "#text/0", _._serialize_guard($scope0_reason, /* input.level */0), _._serialize_guard($scope0_reason, /* input.level */0), _._serialize_guard($scope0_reason, /* input.level */0), 0, 1);

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume-sanitized.expected.md

@@ -1,5 +1,69 @@
 # Render
 ```html
+<div
+  data-level="4"
+>
+  LOADING...
+</div>
+```
+
+
+# Render FLUSH
+```html
+<div
+  data-level="4"
+>
+  <div
+    data-level="3"
+  >
+    LOADING...
+  </div>
+</div>
+```
+
+
+# Render FLUSH
+```html
+<div
+  data-level="4"
+>
+  <div
+    data-level="3"
+  >
+    <div
+      data-level="2"
+    >
+      LOADING...
+    </div>
+  </div>
+</div>
+```
+
+
+# Render FLUSH
+```html
+<div
+  data-level="4"
+>
+  <div
+    data-level="3"
+  >
+    <div
+      data-level="2"
+    >
+      <div
+        data-level="1"
+      >
+        LOADING...
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+
+# Render FLUSH
+```html
 <div
   data-level="4"
 >

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/resume.expected.md

@@ -1,5 +1,202 @@
 # Render
 ```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <!--M_!^4-->
+      LOADING...
+      <!--M_!4-->
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/div/#text1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <div
+        data-level="3"
+      >
+        <!--M_[-->
+        <!--M_!^9-->
+        LOADING...
+        <!--M_!9-->
+        <!--M_]8 #text/1 9-->
+      </div>
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.f), _.e));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div
+INSERT html/body/div/div/#comment0
+INSERT html/body/div/div/#comment1
+INSERT html/body/div/div/#text0
+INSERT html/body/div/div/#comment2
+INSERT html/body/div/div/#comment3
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/#comment0
+REMOVE #comment after html/body/div/#comment0
+INSERT html/body/div/div
+REMOVE t after html/body/script0
+INSERT html/body/div/div/#text1
+INSERT html/body/script1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <div
+        data-level="3"
+      >
+        <!--M_[-->
+        <div
+          data-level="2"
+        >
+          <!--M_[-->
+          <!--M_!^14-->
+          LOADING...
+          <!--M_!14-->
+          <!--M_]13 #text/1 14-->
+        </div>
+        <!--M_]8 #text/1 9-->
+      </div>
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.f), _.e));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.h = [4, _.g = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.i = {}
+      }], _.g["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.i), _.h));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div/div
+INSERT html/body/div/div/div/#comment0
+INSERT html/body/div/div/div/#comment1
+INSERT html/body/div/div/div/#text0
+INSERT html/body/div/div/div/#comment2
+INSERT html/body/div/div/div/#comment3
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script1
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/div/#comment0
+REMOVE #comment after html/body/div/div/#comment0
+INSERT html/body/div/div/div
+REMOVE t after html/body/script1
+INSERT html/body/div/div/div/#text1
+INSERT html/body/script2
+```
+
+# Render FLUSH
+```html
 <html>
   <head>
     <style
@@ -25,11 +222,14 @@
             data-level="1"
           >
             <!--M_[-->
-            <!--M_]16 #text/1 17-->
+            <!--M_!^19-->
+            LOADING...
+            <!--M_!19-->
+            <!--M_]18 #text/1 19-->
           </div>
-          <!--M_]12 #text/1 13-->
+          <!--M_]13 #text/1 14-->
         </div>
-        <!--M_]7 #text/1 8-->
+        <!--M_]8 #text/1 9-->
       </div>
       <!--M_]3 #text/1 4-->
     </div>
@@ -40,13 +240,17 @@
         "#PlaceholderContent": _.c = {}
       }], _.a["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.c), _.b), _ =&gt; (_.e = [3, _.d = {
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.f = {}
       }], _.d["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.f), _.e)];
+        ](_.f), _.e));
-      REORDER_RUNTIME(M._);
       M._.w()
     </script>
     <script>
@@ -55,7 +259,109 @@
         "#PlaceholderContent": _.i = {}
       }], _.g["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.i), _.h), _ =&gt; (_.k = [3, _.j = {
+        ](_.i), _.h));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.k = [4, _.j = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.l = {}
+      }], _.j["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.l), _.k));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div/div/div
+INSERT html/body/div/div/div/div/#comment0
+INSERT html/body/div/div/div/div/#comment1
+INSERT html/body/div/div/div/div/#text0
+INSERT html/body/div/div/div/div/#comment2
+INSERT html/body/div/div/div/div/#comment3
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script2
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/div/div/#comment0
+REMOVE #comment after html/body/div/div/div/#comment0
+INSERT html/body/div/div/div/div
+REMOVE t after html/body/script2
+INSERT html/body/div/div/div/div/#text1
+INSERT html/body/script3
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <div
+        data-level="3"
+      >
+        <!--M_[-->
+        <div
+          data-level="2"
+        >
+          <!--M_[-->
+          <div
+            data-level="1"
+          >
+            <!--M_[-->
+            <!--M_]18 #text/1 19-->
+          </div>
+          <!--M_]13 #text/1 14-->
+        </div>
+        <!--M_]8 #text/1 9-->
+      </div>
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.f), _.e));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.h = [4, _.g = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.i = {}
+      }], _.g["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.i), _.h));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.k = [4, _.j = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.l = {}
       }], _.j["#PlaceholderContent"] = _._[
@@ -69,3 +375,13 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT t
+REMOVE t after html/body/script3
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/div/div/div/#comment0
+REMOVE #comment after html/body/div/div/div/div/#comment0
+INSERT html/body/script4
+```

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/ssr-sanitized.expected.md

@@ -1,3 +1,13 @@
+# Render ASYNC
+```html
+<div
+  data-level="4"
+>
+  LOADING...
+</div>
+```
+
+
 # Render ASYNC
 ```html
 <div
@@ -12,6 +22,24 @@
 ```
 
 
+# Render ASYNC
+```html
+<div
+  data-level="4"
+>
+  <div
+    data-level="3"
+  >
+    <div
+      data-level="2"
+    >
+      LOADING...
+    </div>
+  </div>
+</div>
+```
+
+
 # Render ASYNC
 ```html
 <div
@@ -34,7 +62,7 @@
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 <div
   data-level="4"

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/ssr.expected.md

@@ -1,16 +1,26 @@
 # Write
 ```html
-  <div data-level=4><!--M_[--><div data-level=3><!--M_[--><!--M_!^8-->LOADING...<!--M_!8--><!--M_]7 #text/1 8--></div><!--M_]3 #text/1 4--></div><style M_>t{display:none}</style><t M_=8><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,3,_.a={"#BranchAccessor":"#text/1","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.c),_.b),_=>(_.e=[3,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.f),_.e)];REORDER_RUNTIME(M._);M._.w()</script>
+  <div data-level=4><!--M_[--><!--M_!^4-->LOADING...<!--M_!4--><!--M_]3 #text/1 4--></div><style M_>t{display:none}</style><t M_=4><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,3,_.a={"#BranchAccessor":"#text/1","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
 ```
 
 # Write
 ```html
-  <t M_=b><div data-level=2><!--M_[--><div data-level=1><!--M_[--><!--M_!^17-->LOADING...<!--M_!17--><!--M_]16 #text/1 17--></div><!--M_]12 #text/1 13--></div></t><t M_=17><!--M_#c--></t><script>M._.r.push(_=>(_.h=[4,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.i),_.h),_=>(_.k=[3,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.l),_.k));M._.w()</script>
+  <t M_=b><div data-level=3><!--M_[--><!--M_!^9-->LOADING...<!--M_!9--><!--M_]8 #text/1 9--></div></t><t M_=9><!--M_#c--></t><script>M._.r.push(_=>(_.e=[4,_.d={"#BranchAccessor":"#text/1","#PlaceholderContent":_.f={}}],_.d["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.f),_.e));M._.w()</script>
 ```
 
 # Write
 ```html
-  <t M_=c></t><script>M._.w()</script>
+  <t M_=c><div data-level=2><!--M_[--><!--M_!^14-->LOADING...<!--M_!14--><!--M_]13 #text/1 14--></div></t><t M_=14><!--M_#d--></t><script>M._.r.push(_=>(_.h=[4,_.g={"#BranchAccessor":"#text/1","#PlaceholderContent":_.i={}}],_.g["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.i),_.h));M._.w()</script>
+```
+
+# Write
+```html
+  <t M_=d><div data-level=1><!--M_[--><!--M_!^19-->LOADING...<!--M_!19--><!--M_]18 #text/1 19--></div></t><t M_=19><!--M_#e--></t><script>M._.r.push(_=>(_.k=[4,_.j={"#BranchAccessor":"#text/1","#PlaceholderContent":_.l={}}],_.j["#PlaceholderContent"]=_._["__tests__/tags/recurse.marko_4_content"](_.l),_.k));M._.w()</script>
+```
+
+# Write
+```html
+  <t M_=e></t><script>M._.w()</script>
 ```
 
 # Render ASYNC
@@ -28,15 +38,9 @@
       data-level="4"
     >
       <!--M_[-->
-      <div
+      <!--M_!^4-->
-        data-level="3"
+      LOADING...
-      >
+      <!--M_!4-->
-        <!--M_[-->
-        <!--M_!^8-->
-        LOADING...
-        <!--M_!8-->
-        <!--M_]7 #text/1 8-->
-      </div>
       <!--M_]3 #text/1 4-->
     </div>
     <script>
@@ -46,12 +50,7 @@
         "#PlaceholderContent": _.c = {}
       }], _.a["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.c), _.b), _ =&gt; (_.e = [3, _.d = {
+        ](_.c), _.b)];
-        "#BranchAccessor": "#text/1",
-        "#PlaceholderContent": _.f = {}
-      }], _.d["#PlaceholderContent"] = _._[
-        "__tests__/tags/recurse.marko_4_content"
-        ](_.f), _.e)];
       REORDER_RUNTIME(M._);
       M._.w()
     </script>
@@ -66,13 +65,10 @@ INSERT html/head
 INSERT html/body
 INSERT html/body/div
 INSERT html/body/div/#comment0
-INSERT html/body/div/div
-INSERT html/body/div/div/#comment0
-INSERT html/body/div/div/#comment1
-INSERT html/body/div/div/#text
-INSERT html/body/div/div/#comment2
-INSERT html/body/div/div/#comment3
 INSERT html/body/div/#comment1
+INSERT html/body/div/#text
+INSERT html/body/div/#comment2
+INSERT html/body/div/#comment3
 INSERT html/head/style
 INSERT html/head/style/#text
 INSERT t
@@ -102,22 +98,10 @@ INSERT html/body/script
         data-level="3"
       >
         <!--M_[-->
-        <div
+        <!--M_!^9-->
-          data-level="2"
+        LOADING...
-        >
+        <!--M_!9-->
-          <!--M_[-->
+        <!--M_]8 #text/1 9-->
-          <div
-            data-level="1"
-          >
-            <!--M_[-->
-            <!--M_!^17-->
-            LOADING...
-            <!--M_!17-->
-            <!--M_]16 #text/1 17-->
-          </div>
-          <!--M_]12 #text/1 13-->
-        </div>
-        <!--M_]7 #text/1 8-->
       </div>
       <!--M_]3 #text/1 4-->
     </div>
@@ -128,27 +112,102 @@ INSERT html/body/script
         "#PlaceholderContent": _.c = {}
       }], _.a["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.c), _.b), _ =&gt; (_.e = [3, _.d = {
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.f = {}
       }], _.d["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.f), _.e)];
+        ](_.f), _.e));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div
+INSERT html/body/div/div/#comment0
+INSERT html/body/div/div/#comment1
+INSERT html/body/div/div/#text
+INSERT html/body/div/div/#comment2
+INSERT html/body/div/div/#comment3
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/#comment0
+REMOVE #comment after html/body/div/#comment0
+INSERT html/body/div/div
+REMOVE t after html/body/script0
+INSERT html/body/script1
+```
+
+# Render ASYNC
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <div
+        data-level="3"
+      >
+        <!--M_[-->
+        <div
+          data-level="2"
+        >
+          <!--M_[-->
+          <!--M_!^14-->
+          LOADING...
+          <!--M_!14-->
+          <!--M_]13 #text/1 14-->
+        </div>
+        <!--M_]8 #text/1 9-->
+      </div>
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
       REORDER_RUNTIME(M._);
       M._.w()
     </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.f), _.e));
+      M._.w()
+    </script>
     <script>
       M._.r.push(_ =&gt; (_.h = [4, _.g = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.i = {}
       }], _.g["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.i), _.h), _ =&gt; (_.k = [3, _.j = {
+        ](_.i), _.h));
-        "#BranchAccessor": "#text/1",
-        "#PlaceholderContent": _.l = {}
-      }], _.j["#PlaceholderContent"] = _._[
-        "__tests__/tags/recurse.marko_4_content"
-        ](_.l), _.k));
       M._.w()
     </script>
   </body>
@@ -160,22 +219,19 @@ INSERT html/body/script
 INSERT t
 INSERT html/body/div/div/div
 INSERT html/body/div/div/div/#comment0
-INSERT html/body/div/div/div/div
-INSERT html/body/div/div/div/div/#comment0
-INSERT html/body/div/div/div/div/#comment1
-INSERT html/body/div/div/div/div/#text
-INSERT html/body/div/div/div/div/#comment2
-INSERT html/body/div/div/div/div/#comment3
 INSERT html/body/div/div/div/#comment1
+INSERT html/body/div/div/div/#text
+INSERT html/body/div/div/div/#comment2
+INSERT html/body/div/div/div/#comment3
 INSERT t
 INSERT t/#comment
-REMOVE t after html/body/script0
+REMOVE t after html/body/script1
 REMOVE #text after #comment
 REMOVE #comment after html/body/div/div/#comment0
 REMOVE #comment after html/body/div/div/#comment0
 INSERT html/body/div/div/div
-REMOVE t after html/body/script0
+REMOVE t after html/body/script1
-INSERT html/body/script1
+INSERT html/body/script2
 ```
 
 # Render ASYNC
@@ -205,11 +261,14 @@ INSERT html/body/script1
             data-level="1"
           >
             <!--M_[-->
-            <!--M_]16 #text/1 17-->
+            <!--M_!^19-->
+            LOADING...
+            <!--M_!19-->
+            <!--M_]18 #text/1 19-->
           </div>
-          <!--M_]12 #text/1 13-->
+          <!--M_]13 #text/1 14-->
         </div>
-        <!--M_]7 #text/1 8-->
+        <!--M_]8 #text/1 9-->
       </div>
       <!--M_]3 #text/1 4-->
     </div>
@@ -220,13 +279,17 @@ INSERT html/body/script1
         "#PlaceholderContent": _.c = {}
       }], _.a["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.c), _.b), _ =&gt; (_.e = [3, _.d = {
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.f = {}
       }], _.d["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.f), _.e)];
+        ](_.f), _.e));
-      REORDER_RUNTIME(M._);
       M._.w()
     </script>
     <script>
@@ -235,7 +298,108 @@ INSERT html/body/script1
         "#PlaceholderContent": _.i = {}
       }], _.g["#PlaceholderContent"] = _._[
         "__tests__/tags/recurse.marko_4_content"
-        ](_.i), _.h), _ =&gt; (_.k = [3, _.j = {
+        ](_.i), _.h));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.k = [4, _.j = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.l = {}
+      }], _.j["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.l), _.k));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div/div/div
+INSERT html/body/div/div/div/div/#comment0
+INSERT html/body/div/div/div/div/#comment1
+INSERT html/body/div/div/div/div/#text
+INSERT html/body/div/div/div/div/#comment2
+INSERT html/body/div/div/div/div/#comment3
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script2
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/div/div/#comment0
+REMOVE #comment after html/body/div/div/div/#comment0
+INSERT html/body/div/div/div/div
+REMOVE t after html/body/script2
+INSERT html/body/script3
+```
+
+# Render End
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <div
+      data-level="4"
+    >
+      <!--M_[-->
+      <div
+        data-level="3"
+      >
+        <!--M_[-->
+        <div
+          data-level="2"
+        >
+          <!--M_[-->
+          <div
+            data-level="1"
+          >
+            <!--M_[-->
+            <!--M_]18 #text/1 19-->
+          </div>
+          <!--M_]13 #text/1 14-->
+        </div>
+        <!--M_]8 #text/1 9-->
+      </div>
+      <!--M_]3 #text/1 4-->
+    </div>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 3, _.a = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [4, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.f), _.e));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.h = [4, _.g = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.i = {}
+      }], _.g["#PlaceholderContent"] = _._[
+        "__tests__/tags/recurse.marko_4_content"
+        ](_.i), _.h));
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.k = [4, _.j = {
         "#BranchAccessor": "#text/1",
         "#PlaceholderContent": _.l = {}
       }], _.j["#PlaceholderContent"] = _._[
@@ -253,9 +417,9 @@ INSERT html/body/script1
 # Mutations
 ```
 INSERT t
-REMOVE t after html/body/script1
+REMOVE t after html/body/script3
 REMOVE #text after #comment
 REMOVE #comment after html/body/div/div/div/div/#comment0
 REMOVE #comment after html/body/div/div/div/div/#comment0
-INSERT html/body/script2
+INSERT html/body/script4
 ```

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko

@@ -1,6 +1,7 @@
+import { resolveAfter } from "../../../utils/resolve";
 if=input.level
   div data-level=input.level
     try
       @placeholder -- LOADING...
-      await=new Promise(setImmediate)
+      await=resolveAfter(0, 1)
         recurse level=input.level - 1

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/test.ts

@@ -1,3 +1,3 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(4)];
+export const steps = [{}, flush, flush, flush, flush, wait(5)];

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/csr-sanitized.expected.md

@@ -52,6 +52,29 @@ container.querySelector("button").click();
 <button>
   increment
 </button>
+<p>
+  1 * 3 = 2
+</p>
+<p>
+  2 * 3 = 4
+</p>
+<p>
+  3 * 3 = 6
+</p>
+<p>
+  4 * 3 = 8
+</p>
+<p>
+  5 * 3 = 10
+</p>
+```
+
+
+# Render ASYNC
+```html
+<button>
+  increment
+</button>
 <p>
   1 * 3 = 
 </p>

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/csr.expected.md

@@ -74,6 +74,37 @@ container.querySelector("button").click();
 <button>
   increment
 </button>
+<p>
+  1 * 3 = 2
+</p>
+<p>
+  2 * 3 = 4
+</p>
+<p>
+  3 * 3 = 6
+</p>
+<p>
+  4 * 3 = 8
+</p>
+<p>
+  5 * 3 = 10
+</p>
+```
+
+# Mutations
+```
+UPDATE p0/#text1 "2" => "3"
+UPDATE p1/#text1 "2" => "3"
+UPDATE p2/#text1 "2" => "3"
+UPDATE p3/#text1 "2" => "3"
+UPDATE p4/#text1 "2" => "3"
+```
+
+# Render ASYNC
+```html
+<button>
+  increment
+</button>
 <p>
   1 * 3 = 
 </p>
@@ -93,11 +124,6 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-UPDATE p0/#text1 "2" => "3"
-UPDATE p1/#text1 "2" => "3"
-UPDATE p2/#text1 "2" => "3"
-UPDATE p3/#text1 "2" => "3"
-UPDATE p4/#text1 "2" => "3"
 INSERT p0/#text3
 REMOVE #document-fragment/#text after p0/#text3
 INSERT p1/#text3
@@ -136,17 +162,12 @@ REMOVE #document-fragment/#text after p4/#text3
 ```
 REMOVE #text after p0/#text2
 INSERT p0/#text3
-UPDATE p0/#text3 "2" => "3"
 REMOVE #text after p4/#text2
 INSERT p4/#text3
-UPDATE p4/#text3 "10" => "15"
 REMOVE #text after p3/#text2
 INSERT p3/#text3
-UPDATE p3/#text3 "8" => "12"
 REMOVE #text after p2/#text2
 INSERT p2/#text3
-UPDATE p2/#text3 "6" => "9"
 REMOVE #text after p1/#text2
 INSERT p1/#text3
-UPDATE p1/#text3 "4" => "6"
 ```

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/resume-sanitized.expected.md

@@ -3,6 +3,17 @@
 <button>
   increment
 </button>
+<p>
+  1 * 2 = 
+</p>
+```
+
+
+# Render FLUSH
+```html
+<button>
+  increment
+</button>
 <p>
   1 * 2 = 2
 </p>
@@ -29,6 +40,29 @@ container.querySelector("button").click();
 <button>
   increment
 </button>
+<p>
+  1 * 3 = 2
+</p>
+<p>
+  2 * 3 = 4
+</p>
+<p>
+  3 * 3 = 6
+</p>
+<p>
+  4 * 3 = 8
+</p>
+<p>
+  5 * 3 = 10
+</p>
+```
+
+
+# Render ASYNC
+```html
+<button>
+  increment
+</button>
 <p>
   1 * 3 = 
 </p>

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/resume.expected.md

@@ -1,5 +1,33 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    <button>
+      increment
+    </button>
+    <!--M_*1 #button/0-->
+    <p>
+      1 * 
+      <!---->
+      2
+      <!--M_*1 #text/1-->
+       = 
+      <script>
+        WALKER_RUNTIME("M")("_");
+        M._.r = [_ =&gt; (_.a = [0,
+        {
+          n: 2
+        }])]
+      </script>
+    </p>
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
 <html>
   <head />
   <body>
@@ -84,12 +112,160 @@
 </html>
 ```
 
+# Mutations
+```
+INSERT html/body/p0/#comment2
+INSERT html/body/p0/#text3
+INSERT html/body/p0/#comment3
+INSERT html/body/p0/#comment4
+INSERT html/body/p1
+INSERT html/body/p1/#text0
+INSERT html/body/p1/#comment0
+INSERT html/body/p1/#text1
+INSERT html/body/p1/#comment1
+INSERT html/body/p1/#text2
+INSERT html/body/p1/#comment2
+INSERT html/body/p1/#text3
+INSERT html/body/p1/#comment3
+INSERT html/body/p1/#comment4
+INSERT html/body/p2
+INSERT html/body/p2/#text0
+INSERT html/body/p2/#comment0
+INSERT html/body/p2/#text1
+INSERT html/body/p2/#comment1
+INSERT html/body/p2/#text2
+INSERT html/body/p2/#comment2
+INSERT html/body/p2/#text3
+INSERT html/body/p2/#comment3
+INSERT html/body/p2/#comment4
+INSERT html/body/p3
+INSERT html/body/p3/#text0
+INSERT html/body/p3/#comment0
+INSERT html/body/p3/#text1
+INSERT html/body/p3/#comment1
+INSERT html/body/p3/#text2
+INSERT html/body/p3/#comment2
+INSERT html/body/p3/#text3
+INSERT html/body/p3/#comment3
+INSERT html/body/p3/#comment4
+INSERT html/body/p4
+INSERT html/body/p4/#text0
+INSERT html/body/p4/#comment0
+INSERT html/body/p4/#text1
+INSERT html/body/p4/#comment1
+INSERT html/body/p4/#text2
+INSERT html/body/p4/#comment2
+INSERT html/body/p4/#text3
+INSERT html/body/p4/#comment3
+INSERT html/body/p4/#comment4
+INSERT html/body/p0/#text4
+INSERT html/body/p1/#text4
+INSERT html/body/p2/#text4
+INSERT html/body/p3/#text4
+INSERT html/body/p4/#text4
+INSERT html/body/script
+```
 
 # Render
 ```js
 container.querySelector("button").click();
 ```
 ```html
+<html>
+  <head />
+  <body>
+    <button>
+      increment
+    </button>
+    <!--M_*1 #button/0-->
+    <p>
+      1 * 
+      <!---->
+      3
+      <!--M_*1 #text/1-->
+       = 
+      <script>
+        WALKER_RUNTIME("M")("_");
+        M._.r = [_ =&gt; (_.a = [0,
+        {
+          n: 2
+        }])]
+      </script>
+      <!--M_[-->
+      2
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/2 2-->
+    </p>
+    <p>
+      2 * 
+      <!---->
+      3
+      <!--M_*1 #text/3-->
+       = 
+      <!--M_[-->
+      4
+      <!--M_*3 #text/0-->
+      <!--M_]1 #text/4 3-->
+    </p>
+    <p>
+      3 * 
+      <!---->
+      3
+      <!--M_*1 #text/5-->
+       = 
+      <!--M_[-->
+      6
+      <!--M_*4 #text/0-->
+      <!--M_]1 #text/6 4-->
+    </p>
+    <p>
+      4 * 
+      <!---->
+      3
+      <!--M_*1 #text/7-->
+       = 
+      <!--M_[-->
+      8
+      <!--M_*5 #text/0-->
+      <!--M_]1 #text/8 5-->
+    </p>
+    <p>
+      5 * 
+      <!---->
+      3
+      <!--M_*1 #text/9-->
+       = 
+      <!--M_[-->
+      10
+      <!--M_*6 #text/0-->
+      <!--M_]1 #text/10 6-->
+    </p>
+    <script>
+      M._.r.push(_ =&gt; (_.b = [
+        {}]), _ =&gt; (_.c = [
+        {}]), _ =&gt; (_.d = [
+        {}]), _ =&gt; (_.e = [
+        {}]), _ =&gt; (_.f = [
+        {}]),
+        "__tests__/template.marko_0_n 1"
+        );
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+UPDATE html/body/p0/#text1 "2" => "3"
+UPDATE html/body/p1/#text1 "2" => "3"
+UPDATE html/body/p2/#text1 "2" => "3"
+UPDATE html/body/p3/#text1 "2" => "3"
+UPDATE html/body/p4/#text1 "2" => "3"
+```
+
+# Render ASYNC
+```html
 <html>
   <head />
   <body>
@@ -161,11 +337,6 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-UPDATE html/body/p0/#text1 "2" => "3"
-UPDATE html/body/p1/#text1 "2" => "3"
-UPDATE html/body/p2/#text1 "2" => "3"
-UPDATE html/body/p3/#text1 "2" => "3"
-UPDATE html/body/p4/#text1 "2" => "3"
 REMOVE html/body/p0/#comment2 after #document-fragment/#text1
 INSERT html/body/p0/#comment2
 REMOVE #document-fragment/#comment0 after html/body/p0/#comment2
@@ -283,17 +454,12 @@ REMOVE #document-fragment/#text1 after html/body/p4/#comment2
 ```
 REMOVE #comment after html/body/p0/script
 INSERT html/body/p0/#comment2, html/body/p0/#text3, html/body/p0/#comment3, html/body/p0/#text4
-UPDATE html/body/p0/#text3 "2" => "3"
 REMOVE #comment after html/body/p4/#text2
 INSERT html/body/p4/#comment2, html/body/p4/#text3, html/body/p4/#comment3, html/body/p4/#text4
-UPDATE html/body/p4/#text3 "10" => "15"
 REMOVE #comment after html/body/p3/#text2
 INSERT html/body/p3/#comment2, html/body/p3/#text3, html/body/p3/#comment3, html/body/p3/#text4
-UPDATE html/body/p3/#text3 "8" => "12"
 REMOVE #comment after html/body/p2/#text2
 INSERT html/body/p2/#comment2, html/body/p2/#text3, html/body/p2/#comment3, html/body/p2/#text4
-UPDATE html/body/p2/#text3 "6" => "9"
 REMOVE #comment after html/body/p1/#text2
 INSERT html/body/p1/#comment2, html/body/p1/#text3, html/body/p1/#comment3, html/body/p1/#text4
-UPDATE html/body/p1/#text3 "4" => "6"
 ```

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr-sanitized.expected.md

@@ -9,7 +9,7 @@
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 <button>
   increment

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/__snapshots__/ssr.expected.md

@@ -52,7 +52,7 @@ INSERT html/body/p/#text2
 INSERT html/body/p/script
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head />

packages/runtime-tags/src/__tests__/fixtures/async-multi-resolve-in-order-and-update/test.ts

@@ -1,6 +1,8 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(6), click, wait(6)];
+export const steps = [{}, flush, wait(3), click, wait(4)];
+
+export const skip_equivalent = true; // in-order streaming
 
 function click(container: Element) {
   container.querySelector("button")!.click();

packages/runtime-tags/src/__tests__/fixtures/async-nested-resolve-in-order/__snapshots__/resume-sanitized.expected.md

@@ -1,4 +1,22 @@
 # Render
 ```html
+a
+```
+
+
+# Render FLUSH
+```html
+ab
+```
+
+
+# Render FLUSH
+```html
+abc
+```
+
+
+# Render FLUSH
+```html
 abcdefghijklm
 ```

packages/runtime-tags/src/__tests__/fixtures/async-nested-resolve-in-order/__snapshots__/resume.expected.md

@@ -1,5 +1,46 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    a
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
+<html>
+  <head />
+  <body>
+    ab
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head />
+  <body>
+    abc
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text2
+```
+
+# Render FLUSH
+```html
 <html>
   <head />
   <body>
@@ -7,3 +48,8 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT html/body/#text3
+```

packages/runtime-tags/src/__tests__/fixtures/async-nested-resolve-in-order/__snapshots__/ssr-sanitized.expected.md

@@ -16,7 +16,7 @@ abc
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 abcdefghijklm
 ```

packages/runtime-tags/src/__tests__/fixtures/async-nested-resolve-in-order/__snapshots__/ssr.expected.md

@@ -66,7 +66,7 @@ INSERT html/body/#text1
 INSERT html/body/#text2
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head />

packages/runtime-tags/src/__tests__/fixtures/async-nested-resolve-in-order/test.ts

@@ -1,3 +1,5 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(4)];
+export const steps = [{}, flush, flush, flush, wait(4)];
+
+export const skip_equivalent = true; // in-order streaming

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/resume-sanitized.expected.md

@@ -1,4 +1,10 @@
 # Render
+
+
+# Render FLUSH
+
+
+# Render FLUSH
 ```html
 <div>
   Resolved A: A Value

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/resume.expected.md

@@ -1,5 +1,84 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    <!--M_[-->
+    <!--M_!^b-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.d = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#CatchContent": _.e = {}
+      }, _.b = {
+        "#BranchAccessor": "#text/1"
+      }, _.c = {
+        "#BranchAccessor": "#text/2"
+      }], _.a["#CatchContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.e), _.b["#CatchContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.e), _.c["#CatchContent"] = _._[
+        "__tests__/template.marko_8_content"
+        ](_.e), _.d)]
+    </script>
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^b-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.d = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#CatchContent": _.e = {}
+      }, _.b = {
+        "#BranchAccessor": "#text/1"
+      }, _.c = {
+        "#BranchAccessor": "#text/2"
+      }], _.a["#CatchContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.e), _.b["#CatchContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.e), _.c["#CatchContent"] = _._[
+        "__tests__/template.marko_8_content"
+        ](_.e), _.d)]
+    </script>
+    <script>
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/head/style
+INSERT html/head/style/#text
+INSERT t
+INSERT t/#text
+REMOVE html/head/style after html/body/script0
+INSERT html/head/style
+REMOVE t after html/body/script0
+INSERT html/body/script1
+```
+
+# Render FLUSH
+```html
 <html>
   <head>
     <style
@@ -64,6 +143,36 @@
 </html>
 ```
 
+# Mutations
+```
+INSERT html/body/div0
+INSERT html/body/div0/#text
+INSERT html/body/#comment2
+INSERT html/body/#comment3
+INSERT html/body/#comment4
+INSERT #comment
+INSERT #comment
+INSERT html/body/#comment5
+INSERT html/body/#comment6
+INSERT html/body/#comment7
+INSERT html/body/#comment8
+INSERT html/body/div1
+INSERT html/body/div1/#text
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/#comment9
+INSERT html/body/#comment10
+INSERT html/body/#comment11
+INSERT html/body/#comment12
+REMOVE #comment after html/body/#comment4
+REMOVE #comment after html/body/#comment4
+INSERT html/body/#text1
+INSERT html/body/#text0
+INSERT html/body/#text2
+INSERT html/body/#text3
+INSERT html/body/#text4
+INSERT html/body/script2
+```
 
 # Render
 ```js

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/ssr-sanitized.expected.md

@@ -4,7 +4,7 @@
 # Render ASYNC
 
 
-# Render ASYNC
+# Render End
 ```html
 <div>
   Resolved A: A Value

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/ssr.expected.md

@@ -101,7 +101,7 @@ REMOVE t after html/body/script0
 INSERT html/body/script1
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head>

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/test.ts

@@ -1,6 +1,6 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(4), click];
+export const steps = [{}, flush, flush, wait(4), click];
 
 function click(container: Element) {
   container.querySelector("button")!.click();

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/resume-sanitized.expected.md

@@ -1,4 +1,10 @@
 # Render
+
+
+# Render FLUSH
+
+
+# Render FLUSH
 ```html
 <div>
   Resolved A: A Value

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/resume.expected.md

@@ -1,5 +1,76 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    <!--M_[-->
+    <!--M_!^b-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.c = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#CatchContent": _.d = {}
+      }, _.b = {
+        "#BranchAccessor": "#text/1"
+      }], _.a["#CatchContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.d), _.b["#CatchContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.d), _.c)]
+    </script>
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^b-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.c = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#CatchContent": _.d = {}
+      }, _.b = {
+        "#BranchAccessor": "#text/1"
+      }], _.a["#CatchContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.d), _.b["#CatchContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.d), _.c)]
+    </script>
+    <script>
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/head/style
+INSERT html/head/style/#text
+INSERT t
+INSERT t/#text
+REMOVE html/head/style after html/body/script0
+INSERT html/head/style
+REMOVE t after html/body/script0
+INSERT html/body/script1
+```
+
+# Render FLUSH
+```html
 <html>
   <head>
     <style
@@ -42,3 +113,21 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT html/body/div
+INSERT html/body/div/#text
+INSERT html/body/#comment2
+INSERT html/body/#comment3
+INSERT html/body/#comment4
+INSERT #comment
+INSERT #comment
+INSERT html/body/#comment5
+REMOVE #comment after html/body/#comment4
+REMOVE #comment after html/body/#comment4
+INSERT html/body/#text1
+INSERT html/body/#text0
+INSERT html/body/#text2
+INSERT html/body/script2
+```

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/ssr-sanitized.expected.md

@@ -4,7 +4,7 @@
 # Render ASYNC
 
 
-# Render ASYNC
+# Render End
 ```html
 <div>
   Resolved A: A Value

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/ssr.expected.md

@@ -93,7 +93,7 @@ REMOVE t after html/body/script0
 INSERT html/body/script1
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head>

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/test.ts

@@ -1,3 +1,3 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(4)];
+export const steps = [{}, flush, flush, wait(4)];

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/csr-sanitized.expected.md

@@ -16,17 +16,6 @@ LOADING A1
 ```
 
 
-# Render ASYNC
-```html
-<div
-  class="a"
-  level="1"
->
-  LOADING A2
-</div>
-```
-
-
 # Render ASYNC
 ```html
 <div
@@ -76,27 +65,6 @@ LOADING A1
 ```
 
 
-# Render ASYNC
-```html
-<div
-  class="a"
-  level="1"
->
-  <div
-    class="a"
-    level="2"
-  >
-    <div
-      class="b"
-      level="3"
-    >
-      LOADING B2
-    </div>
-  </div>
-</div>
-```
-
-
 # Render ASYNC
 ```html
 <div

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/csr.expected.md

@@ -49,28 +49,6 @@ INSERT div/#comment0, div/#text, div/#comment1
 REMOVE #text after div/#comment1
 ```
 
-# Render ASYNC
-```html
-<!---->
-<!---->
-<div
-  class="a"
-  level="1"
->
-  LOADING A2
-</div>
-<!---->
-<!---->
-```
-
-# Mutations
-```
-INSERT div/#text
-REMOVE #document-fragment/#comment0 after div/#text
-REMOVE #document-fragment/#text after div/#text
-REMOVE #document-fragment/#comment1 after div/#text
-```
-
 # Render ASYNC
 ```html
 <!---->
@@ -95,8 +73,9 @@ REMOVE #document-fragment/#comment1 after div/#text
 
 # Mutations
 ```
-INSERT div/#comment0, div/div, div/#comment1
+INSERT div/div
-REMOVE #text after div/#comment1
+REMOVE #text after div/div
+UPDATE div/div[class] null => "a"
 INSERT div/div/#comment0, div/div/#text, div/div/#comment1
 REMOVE #text after div/div/#comment1
 ```
@@ -167,42 +146,6 @@ INSERT div/div/div/#comment0, div/div/div/#text, div/div/div/#comment1
 REMOVE #text after div/div/div/#comment1
 ```
 
-# Render ASYNC
-```html
-<!---->
-<!---->
-<div
-  class="a"
-  level="1"
->
-  <!---->
-  <div
-    class="a"
-    level="2"
-  >
-    <!---->
-    <div
-      class="b"
-      level="3"
-    >
-      LOADING B2
-    </div>
-    <!---->
-  </div>
-  <!---->
-</div>
-<!---->
-<!---->
-```
-
-# Mutations
-```
-INSERT div/div/div/#text
-REMOVE #document-fragment/#comment0 after div/div/div/#text
-REMOVE #document-fragment/#text after div/div/div/#text
-REMOVE #document-fragment/#comment1 after div/div/div/#text
-```
-
 # Render ASYNC
 ```html
 <!---->
@@ -238,6 +181,7 @@ REMOVE #document-fragment/#comment1 after div/div/div/#text
 
 # Mutations
 ```
-INSERT div/div/div/#comment0, div/div/div/div, div/div/div/#comment1
+INSERT div/div/div/div
-REMOVE #text after div/div/div/#comment1
+REMOVE #text after div/div/div/div
+UPDATE div/div/div/div[class] null => "b"
 ```

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/dom.expected/template.hydrate.js

@@ -1,6 +1,6 @@
-// size: 182 (min) 82 (brotli)
+// size: 182 (min) 83 (brotli)
 (_._enable_catch(),
   _._content_resume("a0", "LOADING B2", "b"),
   _._content_resume("a1", "LOADING B1", "b"),
-  _._content_resume("a2", "LOADING A2", "b"),
+  _._content_resume("a4", "LOADING A2", "b"),
-  _._content_resume("a3", "LOADING A1", "b"));
+  _._content_resume("a5", "LOADING A1", "b"));

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/dom.expected/template.js

@@ -13,7 +13,7 @@ const $try_content4__setup = $scope => {
   $await_content4($scope);
   $try_content4__promiseB($scope);
 };
-const $try_content4__promiseB = /* @__PURE__ */_._closure_get("promiseB", $scope => $try_content4__await_promise($scope, $scope._._._.promiseB), $scope => $scope._._._);
+const $try_content4__promiseB = /* @__PURE__ */_._closure_get("promiseB", $scope => $try_content4__await_promise($scope, $scope._._._.promiseB), $scope => $scope._._._, "__tests__/template.marko_9_promiseB");
 const $await_content3__value = /* @__PURE__ */_._const("value", $scope => _._attr_class($scope["#div/0"], $scope.value));
 const $await_content3__try = /* @__PURE__ */_._try("#text/1", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content4__setup);
 const $await_content3__setup = $scope => {
@@ -30,7 +30,7 @@ const $try_content3__setup = $scope => {
   $await_content3($scope);
   $try_content3__promiseB($scope);
 };
-const $try_content3__promiseB = /* @__PURE__ */_._closure_get("promiseB", $scope => $try_content3__await_promise($scope, $scope._.promiseB));
+const $try_content3__promiseB = /* @__PURE__ */_._closure_get("promiseB", $scope => $try_content3__await_promise($scope, $scope._.promiseB), 0, "__tests__/template.marko_7_promiseB");
 const $await_content2__value = /* @__PURE__ */_._const("value", $scope => _._attr_class($scope["#div/0"], $scope.value));
 const $await_content2__promiseB = /* @__PURE__ */_._const("promiseB");
 const $await_content2__try = /* @__PURE__ */_._try("#text/1", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content3__setup);
@@ -51,7 +51,7 @@ const $try_content2__setup = $scope => {
   $await_content2($scope);
   $try_content2__promiseA($scope);
 };
-const $try_content2__promiseA = /* @__PURE__ */_._closure_get("promiseA", $scope => $try_content2__await_promise($scope, $scope._._._.promiseA), $scope => $scope._._._);
+const $try_content2__promiseA = /* @__PURE__ */_._closure_get("promiseA", $scope => $try_content2__await_promise($scope, $scope._._._.promiseA), $scope => $scope._._._, "__tests__/template.marko_3_promiseA");
 const $await_content__value = /* @__PURE__ */_._const("value", $scope => _._attr_class($scope["#div/0"], $scope.value));
 const $await_content__try = /* @__PURE__ */_._try("#text/1", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content2__setup);
 const $await_content__setup = $scope => {
@@ -68,7 +68,7 @@ const $try_content__setup = $scope => {
   $await_content($scope);
   $try_content__promiseA($scope);
 };
-const $try_content__promiseA = /* @__PURE__ */_._closure_get("promiseA", $scope => $try_content__await_promise($scope, $scope._.promiseA));
+const $try_content__promiseA = /* @__PURE__ */_._closure_get("promiseA", $scope => $try_content__await_promise($scope, $scope._.promiseA), 0, "__tests__/template.marko_1_promiseA");
 const $promiseA = /* @__PURE__ */_._const("promiseA");
 const $try = /* @__PURE__ */_._try("#text/0", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);
 export function $setup($scope) {

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/resume-sanitized.expected.md

@@ -1,5 +1,27 @@
 # Render
 ```html
+LOADING A1
+```
+
+
+# Render FLUSH
+```html
+<div
+  class="a"
+  level="1"
+>
+  <div
+    class="a"
+    level="2"
+  >
+    LOADING B1
+  </div>
+</div>
+```
+
+
+# Render FLUSH
+```html
 <div
   class="a"
   level="1"

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/resume.expected.md

@@ -1,5 +1,125 @@
 # Render
 ```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^2-->
+    LOADING A1
+    <!--M_!2-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <div
+      class="a"
+      level="1"
+    >
+      <!--M_[-->
+      <div
+        class="a"
+        level="2"
+      >
+        <!--M_[-->
+        <!--M_!^7-->
+        LOADING B1
+        <!--M_!7-->
+        <!--M_]6 #text/1 7-->
+      </div>
+      <!--M_]4 #text/1 5-->
+    </div>
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_4_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [2, _.d = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.f = {}
+      }], _.d["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_5_content"
+        ](_.f), _.e), _ =&gt; (_.h = [1, _.g = {
+        "#BranchAccessor": "#text/1",
+        "#PlaceholderContent": _.i = {}
+      }], _.g["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_10_content"
+        ](_.i), _.h));
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div
+INSERT html/body/div/#comment0
+INSERT html/body/div/div
+INSERT html/body/div/div/#comment0
+INSERT html/body/div/div/#comment1
+INSERT html/body/div/div/#text0
+INSERT html/body/div/div/#comment2
+INSERT html/body/div/div/#comment3
+INSERT html/body/div/#comment1
+INSERT t
+INSERT t/#comment
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/div
+REMOVE t after html/body/script0
+INSERT html/body/div/div/#text1
+INSERT html/body/div/#text
+INSERT html/body/script1
+```
+
+# Render FLUSH
+```html
 <html>
   <head>
     <style
@@ -73,3 +193,19 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/div/div/div
+INSERT html/body/div/div/div/#comment0
+INSERT html/body/div/div/div/div
+INSERT html/body/div/div/div/#comment1
+REMOVE t after html/body/script1
+REMOVE #text after #comment
+REMOVE #comment after html/body/div/div/#comment0
+REMOVE #comment after html/body/div/div/#comment0
+INSERT html/body/div/div/div
+INSERT html/body/div/div/div/#text
+INSERT html/body/script2
+```

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/ssr-sanitized.expected.md

@@ -20,7 +20,7 @@ LOADING A1
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 <div
   class="a"

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/__snapshots__/ssr.expected.md

@@ -146,7 +146,7 @@ REMOVE t after html/body/script0
 INSERT html/body/script1
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head>

packages/runtime-tags/src/__tests__/fixtures/async-reorder-nested-batched-resolve/test.ts

@@ -1,3 +1,3 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(4)];
+export const steps = [{}, flush, flush, wait(4)];

packages/runtime-tags/src/__tests__/fixtures/async-resolve-in-order/__snapshots__/resume-sanitized.expected.md

@@ -1,4 +1,16 @@
 # Render
 ```html
+a
+```
+
+
+# Render FLUSH
+```html
+abc
+```
+
+
+# Render FLUSH
+```html
 abcde
 ```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-in-order/__snapshots__/resume.expected.md

@@ -1,5 +1,31 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    a
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
+<html>
+  <head />
+  <body>
+    abc
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
 <html>
   <head />
   <body>
@@ -7,3 +33,8 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT html/body/#text2
+```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-in-order/__snapshots__/ssr-sanitized.expected.md

@@ -10,7 +10,7 @@ abc
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 abcde
 ```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-in-order/__snapshots__/ssr.expected.md

@@ -46,7 +46,7 @@ INSERT html/body/#text
 INSERT html/body/#text1
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head />

packages/runtime-tags/src/__tests__/fixtures/async-resolve-in-order/test.ts

@@ -1,3 +1,5 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(3)];
+export const steps = [{}, flush, flush, wait(3)];
+
+export const skip_equivalent = true; // in-order streaming

packages/runtime-tags/src/__tests__/fixtures/async-resolve-out-of-order/__snapshots__/resume-sanitized.expected.md

@@ -1,4 +1,10 @@
 # Render
 ```html
+a
+```
+
+
+# Render FLUSH
+```html
 abcde
 ```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-out-of-order/__snapshots__/resume.expected.md

@@ -1,5 +1,16 @@
 # Render
 ```html
+<html>
+  <head />
+  <body>
+    a
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
 <html>
   <head />
   <body>
@@ -7,3 +18,8 @@
   </body>
 </html>
 ```
+
+# Mutations
+```
+INSERT html/body/#text1
+```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-out-of-order/__snapshots__/ssr-sanitized.expected.md

@@ -4,7 +4,7 @@ a
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 abcde
 ```

packages/runtime-tags/src/__tests__/fixtures/async-resolve-out-of-order/__snapshots__/ssr.expected.md

@@ -26,7 +26,7 @@ INSERT html/body
 INSERT html/body/#text
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head />

packages/runtime-tags/src/__tests__/fixtures/async-resolve-out-of-order/test.ts

@@ -1,3 +1,5 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(3)];
+export const steps = [{}, flush, wait(3)];
+
+export const skip_equivalent = true; // in-order streaming

packages/runtime-tags/src/__tests__/fixtures/async-state/__snapshots__/resume-sanitized.expected.md

@@ -3,6 +3,15 @@
 <button>
   inc
 </button>
+LOADING...
+```
+
+
+# Render FLUSH
+```html
+<button>
+  inc
+</button>
 0
 ```
 

packages/runtime-tags/src/__tests__/fixtures/async-state/__snapshots__/resume.expected.md

@@ -1,5 +1,51 @@
 # Render
 ```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <button>
+      inc
+    </button>
+    <!--M_*1 #button/0-->
+    <!--M_[-->
+    <!--M_!^2-->
+    LOADING...
+    <!--M_!2-->
+    <!--M_]1 #text/1 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.c = [0, _.a = {
+          clickCount: 0,
+          "ClosureScopes:clickCount": _.d = new Set
+        }, _.b = {
+          _: _.a,
+          "ClosureSignalIndex:clickCount": 0,
+          "#BranchAccessor": "#text/1"
+        }], _.b["#PlaceholderContent"] = _._[
+          "__tests__/template.marko_2_content"
+          ](_.a), (_.d).add(_.b), _.c),
+        "__tests__/template.marko_0_clickCount 1"
+      ];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
 <html>
   <head>
     <style
@@ -45,6 +91,21 @@
 </html>
 ```
 
+# Mutations
+```
+INSERT t
+INSERT html/body/#comment2
+INSERT html/body/#text0
+INSERT html/body/#comment3
+INSERT html/body/#comment4
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment1
+REMOVE #comment after html/body/#comment1
+INSERT html/body/#comment2, html/body/#text0, html/body/#comment3, html/body/#comment4
+INSERT html/body/#text1
+INSERT html/body/script1
+```
 
 # Render
 ```js

packages/runtime-tags/src/__tests__/fixtures/async-state/__snapshots__/ssr-sanitized.expected.md

@@ -7,7 +7,7 @@ LOADING...
 ```
 
 
-# Render ASYNC
+# Render End
 ```html
 <button>
   inc

packages/runtime-tags/src/__tests__/fixtures/async-state/__snapshots__/ssr.expected.md

@@ -72,7 +72,7 @@ REMOVE t after html/body/#comment4
 INSERT html/body/script
 ```
 
-# Render ASYNC
+# Render End
 ```html
 <html>
   <head>

packages/runtime-tags/src/__tests__/fixtures/async-state/test.ts

@@ -1,6 +1,6 @@
-import { wait } from "../../utils/resolve";
+import { flush, wait } from "../../utils/resolve";
 
-export const steps = [{}, wait(1), click, wait(1), click, wait(1)];
+export const steps = [{}, flush, wait(1), click, wait(1), click, wait(1)];
 
 function click(container: Element) {
   container.querySelector("button")!.click();

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/.name-cache.json

@@ -0,0 +1,13 @@
+{
+  "vars": {
+    "props": {
+      "$_": "t",
+      "$init": "o",
+      "$$if_content__value": "a",
+      "$$if_content__setup": "e",
+      "$$if": "m",
+      "$$value__script": "r",
+      "$$value": "i"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,68 @@
+# Render
+```html
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span>
+  2
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<span>
+  3
+</span>
+```
+
+
+# Render ASYNC
+```html
+<button>
+  3
+</button>
+<span>
+  Hello
+</span>
+<span>
+  3
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  4
+</button>
+<span>
+  Hello
+</span>
+<span>
+  4
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/csr.expected.md

@@ -0,0 +1,98 @@
+# Render
+```html
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+<!---->
+```
+
+# Mutations
+```
+INSERT button, #text, span, #comment
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span>
+  2
+</span>
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "1" => "2"
+UPDATE span/#text "1" => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<span>
+  3
+</span>
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "2" => "3"
+UPDATE span/#text "2" => "3"
+```
+
+# Render ASYNC
+```html
+<button>
+  3
+</button>
+<span>
+  Hello
+</span>
+<span>
+  3
+</span>
+<!---->
+```
+
+# Mutations
+```
+INSERT span0
+REMOVE #text after span0
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  4
+</button>
+<span>
+  Hello
+</span>
+<span>
+  4
+</span>
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "3" => "4"
+UPDATE span1/#text "3" => "4"
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,18 @@
+// size: 213 (min) 153 (brotli)
+const $if_content__value = _._if_closure(3, 0, ($scope) =>
+    _._text($scope.a, $scope._.e),
+  ),
+  $if_content__setup = $if_content__value,
+  $if = _._if(3, "<span> </span>", "D l", $if_content__setup),
+  $value__script = _._script("a0", ($scope) =>
+    _._on($scope.a, "click", function () {
+      $value($scope, $scope.e + 1);
+    }),
+  ),
+  $value = _._let(4, ($scope) => {
+    (_._text($scope.b, $scope.e),
+      $if($scope, $scope.e ? 0 : 1),
+      $if_content__value($scope),
+      $value__script($scope));
+  });
+init();

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/dom.expected/template.js

@@ -0,0 +1,24 @@
+export const $template = "<button> </button><!><!><!>";
+export const $walks = /* get, next(1), get, out(1), replace, over(1), replace, over(2) */" D l%b%c";
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $if_content__value = /* @__PURE__ */_._if_closure("#text/3", 0, $scope => _._text($scope["#text/0"], $scope._.value));
+const $if_content__setup = $if_content__value;
+const $if = /* @__PURE__ */_._if("#text/3", "<span> </span>", /* next(1), get, out(1) */"D l", $if_content__setup);
+const $value__script = _._script("__tests__/template.marko_0_value", $scope => _._on($scope["#button/0"], "click", function () {
+  $value($scope, $scope.value + 1);
+}));
+const $value = /* @__PURE__ */_._let("value/4", $scope => {
+  _._text($scope["#text/1"], $scope.value);
+  $if($scope, $scope.value ? 0 : 1);
+  $if_content__value($scope);
+  $value__script($scope);
+});
+const $await_content = /* @__PURE__ */_._await_content("#text/2", "<span>Hello</span>", /* over(1) */"b");
+const $await_promise = /* @__PURE__ */_._await_promise("#text/2");
+export function $setup($scope) {
+  $await_content($scope);
+  $value($scope, 1);
+  $await_promise($scope, resolveAfter(0, 3));
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/html.expected/template.js

@@ -0,0 +1,28 @@
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  let value = 1;
+  _._html(`<button>${_._escape(value)}${_._el_resume($scope0_id, "#text/1")}</button>${_._el_resume($scope0_id, "#button/0")}`);
+  _._await($scope0_id, "#text/2", resolveAfter(0, 3), () => {
+    const $scope2_id = _._scope_id();
+    _._html("<span>Hello</span>");
+  }, 0);
+  _._if(() => {
+    if (value) {
+      const $scope1_id = _._scope_id();
+      _._html(`<span>${_._escape(value)}${_._el_resume($scope1_id, "#text/0")}</span>`);
+      _._scope($scope1_id, {
+        _: _._scope_with_id($scope0_id)
+      }, "__tests__/template.marko", "6:1");
+      return 0;
+    }
+  }, $scope0_id, "#text/3", 1, /* value */1, /* value */1, 0, 1);
+  _._script($scope0_id, "__tests__/template.marko_0_value");
+  _._scope($scope0_id, {
+    value
+  }, "__tests__/template.marko", 0, {
+    value: "2:5"
+  });
+  _._resume_branch($scope0_id);
+});

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,59 @@
+# Render
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render FLUSH
+```html
+<button>
+  1
+</button>
+<span>
+  Hello
+</span>
+<span>
+  1
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span>
+  Hello
+</span>
+<span>
+  2
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/resume.expected.md

@@ -0,0 +1,172 @@
+# Render
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+  </body>
+</html>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+  </body>
+</html>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+  </body>
+</html>
+```
+
+
+# Render FLUSH
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+    <span>
+      Hello
+    </span>
+    <span>
+      1
+      <!--M_*2 #text/0-->
+    </span>
+    <!--M_|1 #text/3 2-->
+    <script>
+      M._.r.push(
+        "__tests__/template.marko_0_value 1"
+        );
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/span0
+INSERT html/body/span0/#text
+INSERT html/body/span1
+INSERT html/body/span1/#text
+INSERT html/body/span1/#comment
+INSERT html/body/#comment1
+INSERT html/body/script1
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      2
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+    <span>
+      Hello
+    </span>
+    <span>
+      2
+    </span>
+    <!--M_|1 #text/3 2-->
+    <script>
+      M._.r.push(
+        "__tests__/template.marko_0_value 1"
+        );
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+UPDATE html/body/button/#text "1" => "2"
+INSERT html/body/span1
+REMOVE span after html/body/span1
+UPDATE html/body/span1/#text " " => "2"
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,20 @@
+# Render ASYNC
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render End
+```html
+<button>
+  1
+</button>
+<span>
+  Hello
+</span>
+<span>
+  1
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/__snapshots__/ssr.expected.md

@@ -0,0 +1,92 @@
+# Write
+```html
+  <button>1<!--M_*1 #text/1--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,_.a={value:1},{_:_.a}])]</script>
+```
+
+# Write
+```html
+  <span>Hello</span><span>1<!--M_*2 #text/0--></span><!--M_|1 #text/3 2--><script>M._.r.push("__tests__/template.marko_0_value 1");M._.w()</script>
+```
+
+# Render ASYNC
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/button/#comment
+INSERT html/body/#comment
+INSERT html/body/script
+```
+
+# Render End
+```html
+<html>
+  <head />
+  <body>
+    <button>
+      1
+      <!--M_*1 #text/1-->
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, _.a = {
+        value: 1
+      },
+      {
+        _: _.a
+      }])]
+    </script>
+    <span>
+      Hello
+    </span>
+    <span>
+      1
+      <!--M_*2 #text/0-->
+    </span>
+    <!--M_|1 #text/3 2-->
+    <script>
+      M._.r.push(
+        "__tests__/template.marko_0_value 1"
+        );
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/span0
+INSERT html/body/span0/#text
+INSERT html/body/span1
+INSERT html/body/span1/#text
+INSERT html/body/span1/#comment
+INSERT html/body/#comment1
+INSERT html/body/script1
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/template.marko

@@ -0,0 +1,7 @@
+import { resolveAfter } from "../../utils/resolve";
+let/value=1
+button onClick() { value++ } -- ${value}
+await=resolveAfter(0, 3)
+  span -- Hello
+if=value
+  span -- ${value}

packages/runtime-tags/src/__tests__/fixtures/await-closure-in-order/test.ts

@@ -0,0 +1,18 @@
+import { flush, wait } from "../../utils/resolve";
+
+export const steps = [
+  {},
+  wait(1),
+  click,
+  wait(1),
+  click,
+  wait(1),
+  flush,
+  click,
+];
+
+export const skip_equivalent = true; // in-order streaming
+
+function click(container: Element) {
+  container.querySelector("button")!.click();
+}

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/.name-cache.json

@@ -0,0 +1,12 @@
+{
+  "vars": {
+    "props": {
+      "$_": "_",
+      "$init": "t",
+      "$$await_content__value": "e",
+      "$$value__closure": "o",
+      "$$value__script": "r",
+      "$$value": "a"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,15 @@
+# Render
+
+
+# Render ASYNC
+```html
+loading...
+```
+
+
+# Render ASYNC
+```html
+<span>
+  1
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/csr.expected.md

@@ -0,0 +1,45 @@
+# Render
+```html
+<!---->
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment0, #comment1, #text, #comment2, #comment3
+```
+
+# Render ASYNC
+```html
+<!---->
+loading...
+<!---->
+```
+
+# Mutations
+```
+INSERT #text
+REMOVE #document-fragment/#comment0 after #text
+REMOVE #document-fragment/#text after #text
+REMOVE #document-fragment/#comment1 after #text
+```
+
+# Render ASYNC
+```html
+<!---->
+<!---->
+<span>
+  1
+</span>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment1, span, #comment2
+REMOVE #text after #comment2
+UPDATE span/#text " " => "1"
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,2 @@
+// size: 59 (min) 58 (brotli)
+(_._enable_catch(), _._content_resume("a0", "loading...", "b"));

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/dom.expected/template.js

@@ -0,0 +1,25 @@
+export const $template = "<!><!><!>";
+export const $walks = /* over(1), replace, over(2) */"b%c";
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/dom";
+_._enable_catch();
+const $placeholder_content = _._content_resume("__tests__/template.marko_3_content", "loading...", /* over(1) */"b");
+const $await_content__value = /* @__PURE__ */_._closure_get("value", $scope => _._text($scope["#text/0"], $scope._._.value), $scope => $scope._._, "__tests__/template.marko_2_value");
+const $await_content__setup = $await_content__value;
+const $await_content = /* @__PURE__ */_._await_content("#text/0", "<span> </span>", /* next(1), get, out(1) */"D l", $await_content__setup);
+const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0");
+const $try_content__setup = $scope => {
+  $await_content($scope);
+  $try_content__await_promise($scope, resolveAfter(0, 1));
+};
+const $value = /* @__PURE__ */_._let("value/1");
+const $try = /* @__PURE__ */_._try("#text/0", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);
+export function $setup($scope) {
+  $value($scope, 1);
+  $try($scope, {
+    placeholder: _.attrTag({
+      content: $placeholder_content($scope)
+    })
+  });
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/html.expected/template.js

@@ -0,0 +1,22 @@
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  let value = 1;
+  _._try($scope0_id, "#text/0", _._content_resume("__tests__/template.marko_1_content", () => {
+    const $scope1_id = _._scope_id();
+    _._await($scope1_id, "#text/0", resolveAfter(0, 1), () => {
+      const $scope2_id = _._scope_id();
+      _._html(`<span>${_._escape(value)}</span>`);
+      _._resume_branch($scope2_id);
+    }, 0);
+  }, $scope0_id), {
+    placeholder: _.attrTag({
+      content: _._content_resume("__tests__/template.marko_3_content", () => {
+        const $scope3_id = _._scope_id();
+        _._html("loading...");
+      }, $scope0_id)
+    })
+  });
+  _._resume_branch($scope0_id);
+});

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,12 @@
+# Render
+```html
+loading...
+```
+
+
+# Render FLUSH
+```html
+<span>
+  1
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/resume.expected.md

@@ -0,0 +1,82 @@
+# Render
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^2-->
+    loading...
+    <!--M_!2-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_3_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <span>
+      1
+    </span>
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_3_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/span
+INSERT html/body/span/#text
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/span
+INSERT html/body/script1
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,12 @@
+# Render ASYNC
+```html
+loading...
+```
+
+
+# Render End
+```html
+<span>
+  1
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/__snapshots__/ssr.expected.md

@@ -0,0 +1,107 @@
+# Write
+```html
+  <!--M_[--><!--M_!^2-->loading...<!--M_!2--><!--M_]1 #text/0 2--><style M_>t{display:none}</style><t M_=2><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_3_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
+```
+
+# Write
+```html
+  <t M_=b><span>1</span></t><script>M._.w()</script>
+```
+
+# Render ASYNC
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^2-->
+    loading...
+    <!--M_!2-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_3_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/#comment0
+INSERT html/body/#comment1
+INSERT html/body/#text
+INSERT html/body/#comment2
+INSERT html/body/#comment3
+INSERT html/head/style
+INSERT html/head/style/#text
+INSERT t
+INSERT t/#comment
+REMOVE html/head/style after html/body/#comment3
+INSERT html/head/style
+REMOVE t after html/body/#comment3
+INSERT html/body/script
+```
+
+# Render End
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <span>
+      1
+    </span>
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_3_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/span
+INSERT html/body/span/#text
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/span
+INSERT html/body/script1
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/template.marko

@@ -0,0 +1,6 @@
+import { resolveAfter } from "../../utils/resolve";
+let/value=1
+try
+  @placeholder -- loading...
+  await=resolveAfter(0, 1)
+    span -- ${value}

packages/runtime-tags/src/__tests__/fixtures/await-closure-inert/test.ts

@@ -0,0 +1,3 @@
+import { flush, wait } from "../../utils/resolve";
+
+export const steps = [{}, flush, wait(1)];

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/.name-cache.json

@@ -0,0 +1,13 @@
+{
+  "vars": {
+    "props": {
+      "$_": "t",
+      "$init": "a",
+      "$$if_content__value": "o",
+      "$$if_content__setup": "_",
+      "$$await_content__if": "n",
+      "$$await_content__value__script": "e",
+      "$$await_content__value": "m"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,46 @@
+# Render
+
+
+# Render ASYNC
+```html
+loading...
+```
+
+
+# Render ASYNC
+```html
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span>
+  2
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<span>
+  3
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/csr.expected.md

@@ -0,0 +1,100 @@
+# Render
+```html
+<!---->
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment0, #comment1, #text, #comment2, #comment3
+```
+
+# Render ASYNC
+```html
+<!---->
+loading...
+<!---->
+```
+
+# Mutations
+```
+INSERT #text
+REMOVE #document-fragment/#comment0 after #text
+REMOVE #document-fragment/#text after #text
+REMOVE #document-fragment/#comment1 after #text
+```
+
+# Render ASYNC
+```html
+<!---->
+<!---->
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment1, button, #text, #comment2, #comment3
+REMOVE #text after #comment3
+UPDATE button/#text " " => "1"
+INSERT span
+REMOVE #text after span
+UPDATE span/#text " " => "1"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<!---->
+<!---->
+<button>
+  2
+</button>
+<span>
+  2
+</span>
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "1" => "2"
+UPDATE span/#text "1" => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<!---->
+<!---->
+<button>
+  3
+</button>
+<span>
+  3
+</span>
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "2" => "3"
+UPDATE span/#text "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,19 @@
+// size: 274 (min) 180 (brotli)
+_._enable_catch();
+const $if_content__value = _._if_closure(2, 0, ($scope) =>
+    _._text($scope.a, $scope._.d),
+  ),
+  $if_content__setup = $if_content__value,
+  $await_content__if = _._if(2, "<span> </span>", "D l", $if_content__setup),
+  $await_content__value__script = _._script("a0", ($scope) =>
+    _._on($scope.a, "click", function () {
+      $await_content__value($scope, $scope.d + 1);
+    }),
+  ),
+  $await_content__value = _._let(3, ($scope) => {
+    (_._text($scope.b, $scope.d),
+      $await_content__if($scope, $scope.d > 0 ? 0 : 1),
+      $if_content__value($scope),
+      $await_content__value__script($scope));
+  });
+(_._content_resume("a1", "loading...", "b"), init());

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/dom.expected/template.js

@@ -0,0 +1,37 @@
+export const $template = "<!><!><!>";
+export const $walks = /* over(1), replace, over(2) */"b%c";
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/dom";
+_._enable_catch();
+const $if_content__value = /* @__PURE__ */_._if_closure("#text/2", 0, $scope => _._text($scope["#text/0"], $scope._.value));
+const $if_content__setup = $if_content__value;
+const $await_content__if = /* @__PURE__ */_._if("#text/2", "<span> </span>", /* next(1), get, out(1) */"D l", $if_content__setup);
+const $await_content__value__script = _._script("__tests__/template.marko_3_value", $scope => _._on($scope["#button/0"], "click", function () {
+  $await_content__value($scope, $scope.value + 1);
+}));
+const $await_content__value = /* @__PURE__ */_._let("value/3", $scope => {
+  debugger;
+  _._text($scope["#text/1"], $scope.value);
+  $await_content__if($scope, $scope.value > 0 ? 0 : 1);
+  $if_content__value($scope);
+  $await_content__value__script($scope);
+});
+const $await_content__setup = $scope => {
+  $await_content__value($scope, 1);
+};
+const $placeholder_content = _._content_resume("__tests__/template.marko_2_content", "loading...", /* over(1) */"b");
+const $await_content = /* @__PURE__ */_._await_content("#text/0", "<button> </button><!><!>", /* get, next(1), get, out(1), replace, over(2) */" D l%c", $await_content__setup);
+const $try_content__await_promise = /* @__PURE__ */_._await_promise("#text/0");
+const $try_content__setup = $scope => {
+  $await_content($scope);
+  $try_content__await_promise($scope, resolveAfter(0, 1));
+};
+const $try = /* @__PURE__ */_._try("#text/0", "<!><!><!>", /* over(1), replace, over(2) */"b%c", $try_content__setup);
+export function $setup($scope) {
+  $try($scope, {
+    placeholder: _.attrTag({
+      content: $placeholder_content($scope)
+    })
+  });
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/html.expected/template.js

@@ -0,0 +1,38 @@
+import { resolveAfter } from "../../utils/resolve";
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  _._try($scope0_id, "#text/0", _._content_resume("__tests__/template.marko_1_content", () => {
+    const $scope1_id = _._scope_id();
+    _._await($scope1_id, "#text/0", resolveAfter(0, 1), () => {
+      const $scope3_id = _._scope_id();
+      let value = 1;
+      debugger;
+      _._html(`<button>${_._escape(value)}${_._el_resume($scope3_id, "#text/1")}</button>${_._el_resume($scope3_id, "#button/0")}`);
+      _._if(() => {
+        if (value > 0) {
+          const $scope4_id = _._scope_id();
+          _._html(`<span>${_._escape(value)}${_._el_resume($scope4_id, "#text/0")}</span>`);
+          _._scope($scope4_id, {
+            _: _._scope_with_id($scope3_id)
+          }, "__tests__/template.marko", "8:5");
+          return 0;
+        }
+      }, $scope3_id, "#text/2", 1, /* value */1, /* value */1, 0, 1);
+      _._script($scope3_id, "__tests__/template.marko_3_value");
+      _._scope($scope3_id, {
+        value
+      }, "__tests__/template.marko", "4:3", {
+        value: "5:9"
+      });
+      _._resume_branch($scope3_id);
+    });
+  }, $scope0_id), {
+    placeholder: _.attrTag({
+      content: _._content_resume("__tests__/template.marko_2_content", () => {
+        const $scope2_id = _._scope_id();
+        _._html("loading...");
+      }, $scope0_id)
+    })
+  });
+});

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,43 @@
+# Render
+```html
+loading...
+```
+
+
+# Render FLUSH
+```html
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span>
+  2
+</span>
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<span>
+  3
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/resume.expected.md

@@ -0,0 +1,240 @@
+# Render
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^2-->
+    loading...
+    <!--M_!2-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html/body/#text1
+```
+
+# Render FLUSH
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_[-->
+    <button>
+      1
+      <!--M_*4 #text/1-->
+    </button>
+    <!--M_*4 #button/0-->
+    <span>
+      1
+      <!--M_*5 #text/0-->
+    </span>
+    <!--M_|4 #text/2 5-->
+    <!--M_]2 #text/0 4-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [1, _.d = {
+        value: 1
+      },
+      {
+        _: _.d
+      }]));
+      M._.j.b = _ =&gt;
+      {
+        _.push(
+          "__tests__/template.marko_3_value 4"
+          )
+      };
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/#comment1
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/button/#comment
+INSERT html/body/#comment2
+INSERT html/body/span
+INSERT html/body/span/#text
+INSERT html/body/span/#comment
+INSERT html/body/#comment3
+INSERT html/body/#comment4
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/#comment1, html/body/button, html/body/#comment2, html/body/span, html/body/#comment3, html/body/#comment4
+INSERT html/body/#text0
+INSERT html/body/script1
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_[-->
+    <button>
+      2
+      <!--M_*4 #text/1-->
+    </button>
+    <!--M_*4 #button/0-->
+    <span>
+      2
+    </span>
+    <!--M_|4 #text/2 5-->
+    <!--M_]2 #text/0 4-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [1, _.d = {
+        value: 1
+      },
+      {
+        _: _.d
+      }]));
+      M._.j.b = _ =&gt;
+      {
+        _.push(
+          "__tests__/template.marko_3_value 4"
+          )
+      };
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+UPDATE html/body/button/#text "1" => "2"
+INSERT html/body/span
+REMOVE span after html/body/span
+UPDATE html/body/span/#text " " => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_[-->
+    <button>
+      3
+      <!--M_*4 #text/1-->
+    </button>
+    <!--M_*4 #button/0-->
+    <span>
+      3
+    </span>
+    <!--M_|4 #text/2 5-->
+    <!--M_]2 #text/0 4-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [1, _.d = {
+        value: 1
+      },
+      {
+        _: _.d
+      }]));
+      M._.j.b = _ =&gt;
+      {
+        _.push(
+          "__tests__/template.marko_3_value 4"
+          )
+      };
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+UPDATE html/body/button/#text "2" => "3"
+UPDATE html/body/span/#text "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,15 @@
+# Render ASYNC
+```html
+loading...
+```
+
+
+# Render End
+```html
+<button>
+  1
+</button>
+<span>
+  1
+</span>
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/__snapshots__/ssr.expected.md

@@ -0,0 +1,136 @@
+# Write
+```html
+  <!--M_[--><!--M_!^2-->loading...<!--M_!2--><!--M_]1 #text/0 2--><style M_>t{display:none}</style><t M_=2><!--M_#b--></t><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b=[0,1,_.a={"#BranchAccessor":"#text/0","#PlaceholderContent":_.c={}}],_.a["#PlaceholderContent"]=_._["__tests__/template.marko_2_content"](_.c),_.b)];REORDER_RUNTIME(M._);M._.w()</script>
+```
+
+# Write
+```html
+  <t M_=b><!--M_[--><button>1<!--M_*4 #text/1--></button><!--M_*4 #button/0--><span>1<!--M_*5 #text/0--></span><!--M_|4 #text/2 5--><!--M_]2 #text/0 4--></t><script>M._.r.push(_=>(_.e=[1,_.d={value:1},{_:_.d}]));M._.j.b=_=>{_.push("__tests__/template.marko_3_value 4")};M._.w()</script>
+```
+
+# Render ASYNC
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_!^2-->
+    loading...
+    <!--M_!2-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/#comment0
+INSERT html/body/#comment1
+INSERT html/body/#text
+INSERT html/body/#comment2
+INSERT html/body/#comment3
+INSERT html/head/style
+INSERT html/head/style/#text
+INSERT t
+INSERT t/#comment
+REMOVE html/head/style after html/body/#comment3
+INSERT html/head/style
+REMOVE t after html/body/#comment3
+INSERT html/body/script
+```
+
+# Render End
+```html
+<html>
+  <head>
+    <style
+      m_=""
+    >
+      t{display:none}
+    </style>
+  </head>
+  <body>
+    <!--M_[-->
+    <!--M_[-->
+    <button>
+      1
+      <!--M_*4 #text/1-->
+    </button>
+    <!--M_*4 #button/0-->
+    <span>
+      1
+      <!--M_*5 #text/0-->
+    </span>
+    <!--M_|4 #text/2 5-->
+    <!--M_]2 #text/0 4-->
+    <!--M_]1 #text/0 2-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.b = [0, 1, _.a = {
+        "#BranchAccessor": "#text/0",
+        "#PlaceholderContent": _.c = {}
+      }], _.a["#PlaceholderContent"] = _._[
+        "__tests__/template.marko_2_content"
+        ](_.c), _.b)];
+      REORDER_RUNTIME(M._);
+      M._.w()
+    </script>
+    <script>
+      M._.r.push(_ =&gt; (_.e = [1, _.d = {
+        value: 1
+      },
+      {
+        _: _.d
+      }]));
+      M._.j.b = _ =&gt;
+      {
+        _.push(
+          "__tests__/template.marko_3_value 4"
+          )
+      };
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT t
+INSERT html/body/#comment1
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/button/#comment
+INSERT html/body/#comment2
+INSERT html/body/span
+INSERT html/body/span/#text
+INSERT html/body/span/#comment
+INSERT html/body/#comment3
+INSERT html/body/#comment4
+REMOVE t after html/body/script0
+REMOVE #text after #comment
+REMOVE #comment after html/body/#comment0
+REMOVE #comment after html/body/#comment0
+INSERT html/body/#comment1, html/body/button, html/body/#comment2, html/body/span, html/body/#comment3, html/body/#comment4
+INSERT html/body/script1
+```

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/template.marko

@@ -0,0 +1,9 @@
+import { resolveAfter } from "../../utils/resolve";
+try
+  @placeholder -- loading...
+  await=resolveAfter(0, 1)
+    let/value=1
+    debug=value
+    button onClick() { value++ } -- ${value}
+    if=(value > 0)
+      span -- ${value}

packages/runtime-tags/src/__tests__/fixtures/await-closure-within/test.ts

@@ -0,0 +1,7 @@
+import { flush, wait } from "../../utils/resolve";
+
+export const steps = [{}, flush, wait(2), click, wait(1), click];
+
+function click(container: Element) {
+  container.querySelector("button")!.click();
+}