feat: if hydration (#135)

2025-12-08 19:26:05 +00:00 · 2023-01-26 16:19:18 -05:00 · 2023-01-26 16:19:18 -05:00 · c19cfb023b
commit c19cfb023b
parent 56e3c9a17d
198 changed files with 1136 additions and 935 deletions
--- a/.sizes.json
+++ b/.sizes.json
@ -51,9 +51,9 @@
    {
      "name": "comments",
      "user": {
-        "min": 1133,
-        "gzip": 687,
-        "brotli": 612
+        "min": 1142,
+        "gzip": 695,
+        "brotli": 625
      },
      "runtime": {
        "min": 7250,
@ -61,17 +61,17 @@
        "brotli": 2965
      },
      "total": {
-        "min": 8383,
-        "gzip": 3955,
-        "brotli": 3577
+        "min": 8392,
+        "gzip": 3963,
+        "brotli": 3590
      }
    },
    {
      "name": "comments 💧",
      "user": {
-        "min": 930,
-        "gzip": 579,
-        "brotli": 533
+        "min": 944,
+        "gzip": 591,
+        "brotli": 540
      },
      "runtime": {
        "min": 8244,
@ -79,9 +79,9 @@
        "brotli": 3361
      },
      "total": {
-        "min": 9174,
-        "gzip": 4292,
-        "brotli": 3894
+        "min": 9188,
+        "gzip": 4304,
+        "brotli": 3901
      }
    }
  ]
--- a/packages/runtime/src/dom/hydrate.ts
+++ b/packages/runtime/src/dom/hydrate.ts
@ -135,9 +135,10 @@ export function init(runtimeId = "M" /* [a-zA-Z0-9]+ */) {
    }

    for (let i = 0; i < calls.length; i += 2) {
-      (registeredObjects.get(calls[i + 1] as string) as HydrateFn)!(
-        scopeLookup[calls[i] as number]!
-      );
+      const hydrateFn = (registeredObjects.get(
+        calls[i + 1] as string
+      ) as HydrateFn)!;
+      hydrateFn(scopeLookup[calls[i] as number]!);
    }
  }
 }
--- a/packages/runtime/src/html/writer.ts
+++ b/packages/runtime/src/html/writer.ts
@ -329,9 +329,11 @@ export function markHydrateControlEnd(scopeId: number, index: Accessor) {
 export function markHydrateControlSingleNodeEnd(
  scopeId: number,
  index: Accessor,
-  childScopeIds: number | number[]
+  childScopeIds?: number | number[]
 ) {
-  return `<!${runtimeId}${HydrateSymbols.SECTION_SINGLE_NODES_END}${scopeId} ${index} ${childScopeIds}>`;
+  return `<!${runtimeId}${
+    HydrateSymbols.SECTION_SINGLE_NODES_END
+  }${scopeId} ${index} ${childScopeIds ?? ""}>`;
 }

 function writeHydrateScript() {
--- a/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/dom.expected/template.js
@ -1,7 +1,7 @@
 let _thing;
-import { write as _write, bindRenderer as _bindRenderer, createRenderer as _createRenderer, conditional as _conditional, dynamicSubscribers as _dynamicSubscribers, dynamicClosure as _dynamicClosure, source as _source, setSource as _setSource, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { write as _write, bindRenderer as _bindRenderer, createRenderer as _createRenderer, register as _register, conditional as _conditional, dynamicSubscribers as _dynamicSubscribers, dynamicClosure as _dynamicClosure, source as _source, setSource as _setSource, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 import { setup as _customTag, template as _customTag_template, walks as _customTag_walks } from "./components/custom-tag/index.marko";
-const _ifBody = /* @__PURE__ */_createRenderer("", "");
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/template.marko_2_renderer", /* @__PURE__ */_createRenderer("", ""));
 const _if$customTagBody = /* @__PURE__ */_conditional("#text/0", 1, (_scope, x = _scope._["x"]) => x ? _ifBody : null);
 const _x$customTagBody = _dynamicClosure(1, "x", [_if$customTagBody]);
 const _customTagBody = /* @__PURE__ */_createRenderer("<!>", /* replace */"%", null, [_x$customTagBody]);
--- a/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/html.expected/components/custom-tag/index.js
+++ b/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/html.expected/components/custom-tag/index.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tag-inside-if-tag/snapshots/html.expected/template.js
@ -1,20 +1,33 @@
-import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _customTag from "./components/custom-tag/index.marko";
 const _renderer = ({
  x
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  let _thing;
-  const _scope = _nextScopeId();
+  const _scope1_ = _nextScopeId();
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (x) {
-    const _scope = _nextScopeId();
+    const _scope2_ = _nextScopeId();
    _thing = {
      x: 1,
      renderBody() {
        _write("Hello");
      }
    };
+    _writeHydrateScope(_scope2_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope1_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/template.marko_2_renderer");
+    _ifScopeId = _scope2_;
  }
+  _write(`${_markHydrateControlSingleNodeEnd(_scope1_, "#text/0", _ifScopeId)}`);
+  _writeHydrateScope(_scope1_, {
+    "#text/0!": _ifScope,
+    "#text/0(": _ifRenderer
+  });
  _customTag({
    thing: _thing
  });
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-and-static/snapshots/html.expected/components/hello/index.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-and-static/snapshots/html.expected/components/hello/index.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-and-static/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-and-static/snapshots/html.expected/template.js
@ -1,14 +1,14 @@
 import { nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const _item = [];
-  const _scope = _nextScopeId();
+  const _scope1_ = _nextScopeId();
  for (const a in {
    a: 1,
    b: 2
  }) {
-    const _scope = _nextScopeId();
+    const _scope2_ = _nextScopeId();
    _item.push({});
    _maybeFlush();
  }
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-tag-parent/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-tag-parent/snapshots/html.expected/template.js
@ -2,7 +2,7 @@ import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId
 const _renderer = ({
  x
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _dynamicTag(x, {
    header: {
      class: "my-header",
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/dom.expected/template.js
@ -1,11 +1,11 @@
 let _item;
-import { data as _data, write as _write, bindRenderer as _bindRenderer, createRenderer as _createRenderer, conditional as _conditional, dynamicSubscribers as _dynamicSubscribers, dynamicClosure as _dynamicClosure, source as _source, setSource as _setSource, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { data as _data, write as _write, bindRenderer as _bindRenderer, createRenderer as _createRenderer, register as _register, conditional as _conditional, dynamicSubscribers as _dynamicSubscribers, dynamicClosure as _dynamicClosure, source as _source, setSource as _setSource, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 import { setup as _hello, template as _hello_template, walks as _hello_walks } from "./components/hello/index.marko";
 const _setup$itemBody = _scope => {
  _data(_scope["#text/0"], y);
 };
 const _itemBody = /* @__PURE__ */_createRenderer("", /* get */" ", _setup$itemBody);
-const _ifBody = /* @__PURE__ */_createRenderer("", "");
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/template.marko_2_renderer", /* @__PURE__ */_createRenderer("", ""));
 const _if$helloBody = /* @__PURE__ */_conditional("#text/0", 1, (_scope, x = _scope._["x"]) => x ? _ifBody : null);
 const _x$helloBody = _dynamicClosure(1, "x", [_if$helloBody]);
 const _helloBody = /* @__PURE__ */_createRenderer("<!>", /* replace */"%", null, [_x$helloBody]);
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/html.expected/components/hello/index.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/html.expected/components/hello/index.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic-with-params/snapshots/html.expected/template.js
@ -1,19 +1,32 @@
-import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = ({
  x
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  let _item;
-  const _scope = _nextScopeId();
+  const _scope1_ = _nextScopeId();
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (x) {
-    const _scope = _nextScopeId();
+    const _scope2_ = _nextScopeId();
    _item = {
      renderBody(y) {
-        _write(`${_escapeXML(y)}${_markHydrateNode(_scope, "#text/0")}`);
+        _write(`${_escapeXML(y)}${_markHydrateNode(_scope3_, "#text/0")}`);
      }
    };
+    _writeHydrateScope(_scope2_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope1_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/template.marko_2_renderer");
+    _ifScopeId = _scope2_;
  }
+  _write(`${_markHydrateControlSingleNodeEnd(_scope1_, "#text/0", _ifScopeId)}`);
+  _writeHydrateScope(_scope1_, {
+    "#text/0!": _ifScope,
+    "#text/0(": _ifRenderer
+  });
  _hello({
    item: _item
  });
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic/snapshots/html.expected/components/hello/index.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic/snapshots/html.expected/components/hello/index.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/at-tags-dynamic/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags-dynamic/snapshots/html.expected/template.js
@ -1,14 +1,17 @@
-import { write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, maybeFlush as _maybeFlush, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const _col = [];
-  const _scope = _nextScopeId();
+  const _scope1_ = _nextScopeId();
  const _item = [];
  for (const color of ["red", "blue", "green"]) {
-    const _scope = _nextScopeId();
+    const _scope3_ = _nextScopeId();
+    let _ifScopeId;
+    const _ifScope = {},
+      _ifRenderer = () => {};
    if (color === "red") {
-      const _scope = _nextScopeId();
+      const _scope4_ = _nextScopeId();
      _item.push({
        style: {
          color
@ -17,8 +20,13 @@ const _renderer = (input, _tagVar) => {
          _write("foo");
        }
      });
+      _writeHydrateScope(_scope4_, Object.assign(_ifScope, {
+        [_SYMBOL_OWNER]: _scope3_
+      }));
+      _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/at-tags-dynamic/template.marko_4_renderer");
+      _ifScopeId = _scope4_;
    } else {
-      const _scope = _nextScopeId();
+      const _scope5_ = _nextScopeId();
      _item.push({
        style: {
          color
@ -27,20 +35,30 @@ const _renderer = (input, _tagVar) => {
          _write("bar");
        }
      });
+      _writeHydrateScope(_scope5_, Object.assign(_ifScope, {
+        [_SYMBOL_OWNER]: _scope3_
+      }));
+      _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/at-tags-dynamic/template.marko_5_renderer");
+      _ifScopeId = _scope5_;
    }
+    _write(`${_markHydrateControlSingleNodeEnd(_scope3_, "#text/0", _ifScopeId)}`);
+    _writeHydrateScope(_scope3_, {
+      "#text/0!": _ifScope,
+      "#text/0(": _ifRenderer
+    });
    _maybeFlush();
  }
  let _i = 0;
  for (const col of [["a", "b"], ["c", "d"]]) {
    let i = _i++;
-    const _scope = _nextScopeId();
+    const _scope6_ = _nextScopeId();
    const _row = [];
    for (const row of col) {
-      const _scope = _nextScopeId();
+      const _scope8_ = _nextScopeId();
      _row.push({
        row: row,
        renderBody() {
-          _write(`${_escapeXML(row)}${_markHydrateNode(_scope, "#text/0")}`);
+          _write(`${_escapeXML(row)}${_markHydrateNode(_scope9_, "#text/0")}`);
        }
      });
      _maybeFlush();
--- a/packages/translator/src/tests/fixtures/at-tags/snapshots/html.expected/components/hello/index.js
+++ b/packages/translator/src/tests/fixtures/at-tags/snapshots/html.expected/components/hello/index.js
@ -1,6 +1,6 @@
 import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/at-tags/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/at-tags/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _hello({
    foo: {
      renderBody() {
@ -9,7 +9,7 @@ const _renderer = (input, _tagVar) => {
      }
    },
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/attr-boolean/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-boolean/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<input checked>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/attr-class/snapshots/html.expected/components/custom-tag.js
+++ b/packages/translator/src/tests/fixtures/attr-class/snapshots/html.expected/components/custom-tag.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/attr-class/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-class/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 import { classAttr as _classAttr, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, dynamicTag as _dynamicTag, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _customTag from "./components/custom-tag.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const {
    c,
    d
@ -9,20 +9,20 @@ const _renderer = (input, _tagVar) => {
  _write(`<div${_classAttr(["a", {
    b: c,
    d
-  }])}></div>${_markHydrateNode(_scope, "#div/0")}<div class="a b"></div><div class="a b c"></div>`);
+  }])}></div>${_markHydrateNode(_scope0_, "#div/0")}<div class="a b"></div><div class="a b c"></div>`);
  _customTag({
    class: ["a", {
      b: c,
      d
    }],
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope2_ = _nextScopeId();
    }
  });
  _customTag({
    class: ["a", false, "b"],
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope3_ = _nextScopeId();
    }
  });
  _dynamicTag(input.test, {
--- a/packages/translator/src/tests/fixtures/attr-escape/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-escape/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 import { classAttr as _classAttr, attr as _attr, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
-  _write(`<div${_classAttr(input.className)}${_attr("foo", 'a' + input.foo + 'b')}${_attr("bar", `a ${input.foo} b`)}></div>${_markHydrateNode(_scope, "#div/0")}`);
+  const _scope0_ = _nextScopeId();
+  _write(`<div${_classAttr(input.className)}${_attr("foo", 'a' + input.foo + 'b')}${_attr("bar", `a ${input.foo} b`)}></div>${_markHydrateNode(_scope0_, "#div/0")}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/attr-falsey/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-falsey/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div d=0 y=1></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/attr-scoped/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-scoped/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div id:scoped=1 aria-described-by:scoped=b></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/attr-style/snapshots/html.expected/components/custom-tag.js
+++ b/packages/translator/src/tests/fixtures/attr-style/snapshots/html.expected/components/custom-tag.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/attr-style/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-style/snapshots/html.expected/template.js
@ -4,16 +4,16 @@ const _renderer = ({
  color,
  test
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write(`<div${_styleAttr({
    color: color
-  })}></div>${_markHydrateNode(_scope, "#div/0")}<div style=width:100px></div><div style="color: green"></div>`);
+  })}></div>${_markHydrateNode(_scope0_, "#div/0")}<div style=width:100px></div><div style="color: green"></div>`);
  _customTag({
    style: {
      color: color
    },
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope2_ = _nextScopeId();
    }
  });
  _customTag({
@ -21,13 +21,13 @@ const _renderer = ({
      width: 100
    },
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope3_ = _nextScopeId();
    }
  });
  _customTag({
    style: "color: green",
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope4_ = _nextScopeId();
    }
  });
  _dynamicTag(test, {
--- a/packages/translator/src/tests/fixtures/attr-template-literal-escape/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/attr-template-literal-escape/snapshots/html.expected/template.js
@ -2,8 +2,8 @@ import { attr as _attr, markHydrateNode as _markHydrateNode, write as _write, ne
 const _renderer = ({
  name
 }, _tagVar) => {
-  const _scope = _nextScopeId();
-  _write(`<div${_attr("foo", `Hello ${name}`)}></div>${_markHydrateNode(_scope, "#div/0")}`);
+  const _scope0_ = _nextScopeId();
+  _write(`<div${_attr("foo", `Hello ${name}`)}></div>${_markHydrateNode(_scope0_, "#div/0")}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-chain/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-chain/snapshots/html.expected/template.js
@ -1,10 +1,10 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const x = 1;
  const y = x * 2;
  const z = y * 3;
-  _write(`<div>${_escapeXML(z)}${_markHydrateNode(_scope, "#text/0")}</div>`);
+  _write(`<div>${_escapeXML(z)}${_markHydrateNode(_scope0_, "#text/0")}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-component-attrs/snapshots/html.expected/components/my-button.js
+++ b/packages/translator/src/tests/fixtures/basic-component-attrs/snapshots/html.expected/components/my-button.js
@ -3,10 +3,10 @@ const _renderer = ({
  onClick,
  text
 }, _tagVar) => {
-  const _scope = _nextScopeId();
-  _write(`<button>${_escapeXML(text)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick");
-  _writeHydrateScope(_scope, {
+  const _scope0_ = _nextScopeId();
+  _write(`<button>${_escapeXML(text)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick");
+  _writeHydrateScope(_scope0_, {
    "onClick": onClick
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-component-attrs/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-component-attrs/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _myButton from "./components/my-button.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
  _myButton({
    text: clickCount,
@ -9,7 +9,7 @@ const _renderer = (input, _tagVar) => {
      clickCount++;
    },
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-component-renderBody/snapshots/html.expected/components/my-button.js
+++ b/packages/translator/src/tests/fixtures/basic-component-renderBody/snapshots/html.expected/components/my-button.js
@ -3,12 +3,12 @@ const _renderer = ({
  onClick,
  renderBody
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<button>");
  _dynamicTag(renderBody, null);
-  _write(`</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick");
-  _writeHydrateScope(_scope, {
+  _write(`</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick");
+  _writeHydrateScope(_scope0_, {
    "onClick": onClick
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-component-renderBody/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-component-renderBody/snapshots/html.expected/template.js
@ -1,15 +1,15 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _myButton from "./components/my-button.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
  _myButton({
    onClick: function () {
      clickCount++;
    },
    renderBody() {
-      const _scope = _nextScopeId();
-      _write(`${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/0")}`);
+      const _scope1_ = _nextScopeId();
+      _write(`${_escapeXML(clickCount)}${_markHydrateNode(_scope1_, "#text/0")}`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-component/snapshots/html.expected/components/counter.js
+++ b/packages/translator/src/tests/fixtures/basic-component/snapshots/html.expected/components/counter.js
@ -1,10 +1,10 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
-  _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount");
-  _writeHydrateScope(_scope, {
+  _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount");
+  _writeHydrateScope(_scope0_, {
    "clickCount": clickCount
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-component/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-component/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _counter from "./components/counter.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div>");
  _counter({
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
    }
  });
  _write("</div>");
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/csr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/csr.expected.md
@ -44,14 +44,13 @@ container.querySelector("button.toggle").click();
 <button
  class="toggle"
 />
-<!---->
 ```

 # Mutations
 ```
-inserted #comment2
-removed #text after #comment2
-removed #text after #comment2
+inserted #text2
+removed #text after #text2
+removed #text after #text2
 ```


@ -65,7 +64,6 @@ container.querySelector("button.inc").click();
 <button
  class="toggle"
 />
-<!---->
 ```

 # Mutations
@ -91,7 +89,7 @@ The count is 2
 ```
 inserted #text2
 inserted #text3
-removed #comment after #text3
+removed #text after #text3
 #text3: "" => "2"
 ```

--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/dom.expected/template.js
@ -0,0 +1,22 @@
+import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+const _count$ifBody = /* @__PURE__ */_closure(1, "count", [], (_scope, count) => _data(_scope["#text/0"], count));
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer", /* @__PURE__ */_createRenderer("The count is <!>", /* over(1), replace */"b%", null, [_count$ifBody]));
+const _if = /* @__PURE__ */_conditional("#text/2", 1, (_scope, show = _scope["show"]) => show ? _ifBody : null);
+const _hydrate_count = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count", _scope => _on(_scope["#button/0"], "click", function () {
+  const count = _scope["count"];
+  _queueSource(_scope, _count, count + 1);
+}));
+const _count = /* @__PURE__ */_source("count", [/* @__PURE__ */_inConditionalScope(_count$ifBody, "#text/2")], (_scope, count) => _queueHydrate(_scope, _hydrate_count));
+const _hydrate_show = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show", _scope => _on(_scope["#button/1"], "click", function () {
+  const show = _scope["show"];
+  _queueSource(_scope, _show, !show);
+}));
+const _show = /* @__PURE__ */_source("show", [_if], (_scope, show) => _queueHydrate(_scope, _hydrate_show));
+const _setup = _scope => {
+  _setSource(_scope, _show, true);
+  _setSource(_scope, _count, 0);
+};
+export const template = "<button class=inc></button><button class=toggle></button><!>";
+export const walks = /* get, over(1), get, over(1), replace, over(1) */" b b%b";
+export const setup = _setup;
+export default /* @__PURE__ */_createRenderFn(template, walks, setup);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/html.expected/template.js
@ -0,0 +1,28 @@
+import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, markHydrateScopeStart as _markHydrateScopeStart, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlEnd as _markHydrateControlEnd, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+const _renderer = (input, _tagVar) => {
+  const _scope0_ = _nextScopeId();
+  const show = true;
+  const count = 0;
+  _write(`<button class=inc></button>${_markHydrateNode(_scope0_, "#button/0")}<button class=toggle></button>${_markHydrateNode(_scope0_, "#button/1")}`);
+  const _ifScope = {},
+    _ifRenderer = () => {};
+  if (show) {
+    const _scope1_ = _nextScopeId();
+    _write(`${_markHydrateScopeStart(_scope1_)}The count is <!>${_escapeXML(count)}${_markHydrateNode(_scope1_, "#text/0")}`);
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer");
+  }
+  _write(`${_markHydrateControlEnd(_scope0_, "#text/2")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show");
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count");
+  _writeHydrateScope(_scope0_, {
+    "show": show,
+    "count": count,
+    "#text/2!": _ifScope,
+    "#text/2(": _ifRenderer
+  });
+};
+export default _renderer;
+export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/hydrate.expected.md
@ -16,9 +16,9 @@
    <!---->
    0
    <!--M#1 #text/0-->
-    <!--M/0 #comment/2-->
+    <!--M/0 #text/2-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -50,9 +50,9 @@ container.querySelector("button.inc").click();
    <!---->
    1
    <!--M#1 #text/0-->
-    <!--M/0 #comment/2-->
+    <!--M/0 #text/2-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -79,9 +79,9 @@ container.querySelector("button.toggle").click();
      class="toggle"
    />
    <!--M#0 #button/1-->
-    <!--M/0 #comment/2-->
+    <!--M/0 #text/2-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -114,9 +114,9 @@ container.querySelector("button.inc").click();
      class="toggle"
    />
    <!--M#0 #button/1-->
-    <!--M/0 #comment/2-->
+    <!--M/0 #text/2-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -145,7 +145,7 @@ container.querySelector("button.toggle").click();
    <!--M#0 #button/1-->
    The count is 2
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -177,7 +177,7 @@ container.querySelector("button.inc").click();
    <!--M#0 #button/1-->
    The count is 3
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <body><button class="inc"></button><!M#0 #button/0><button class="toggle"></button><!M#0 #button/1><!M^1>The count is <!>0<!M#1 #text/0><!M/0 #comment/2></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])</script>
+  <button class=inc></button><!M#0 #button/0><button class=toggle></button><!M#0 #button/1><!M^1>The count is <!>0<!M#1 #text/0><!M/0 #text/2><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])</script>


 # Render "End"
@ -20,9 +20,9 @@
    <!---->
    0
    <!--M#1 #text/0-->
-    <!--M/0 #comment/2-->
+    <!--M/0 #text/2-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
    </script>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/browser.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/browser.ts
@ -1,97 +0,0 @@
-import {
-  on,
-  createRenderer,
-  createRenderFn,
-  conditional,
-  data,
-  bind,
-  source,
-  setSource,
-  queueSource,
-  closure,
-  inConditionalScope,
-  queueHydrate,
-  Scope,
-} from "@marko/runtime-fluurt/src/dom";
-
-import { get, next, over, replace } from "../../utils/walks";
-
-const enum INDEX {
-  button = "#button/0",
-  button2 = "#button/1",
-  comment = "#comment/2",
-  conditional = "#comment/2",
-  show = "show",
-  count = "count",
-}
-
-type ComponentScope = Scope<{
-  [INDEX.button]: HTMLButtonElement;
-  [INDEX.comment]: Comment;
-  [INDEX.conditional]: Comment;
-  [INDEX.show]: boolean;
-  [INDEX.count]: string;
-}>;
-
-const enum INDEX_BRANCH0 {
-  text = "#text/0",
-  count = "count",
-}
-
-type Branch0Scope = Scope<{
-  _: ComponentScope;
-  [INDEX_BRANCH0.text]: Text;
-  [INDEX_BRANCH0.count]: string;
-}>;
-
-// <let/show = true/>
-// <let/count = 0/>
-// <button.inc onClick() { count++; }/>
-// <button.toggle onClick() { show = !show; }/>
-// <if=show><if=show>The count is ${count}</if></if>
-
-export const template = `<button class="inc"></button><button class="toggle"></button><!>`;
-export const walks = get + over(1) + get + over(1) + get + over(1);
-export const setup = (scope: ComponentScope) => {
-  setSource(scope, _count, 0);
-  setSource(scope, _show, true);
-  queueHydrate(scope, _hydrate);
-};
-
-export const _hydrate = (scope: ComponentScope) => {
-  on(scope[INDEX.button], "click", bind(scope, _onclick));
-  on(scope[INDEX.button2], "click", bind(scope, _onclick2));
-};
-
-const _onclick = (scope: ComponentScope) => {
-  queueSource(scope, _count, scope[INDEX.count] + 1);
-};
-
-const _onclick2 = (scope: ComponentScope) => {
-  queueSource(scope, _show, !scope[INDEX.show]);
-};
-
-const _count$if = closure(
-  1,
-  INDEX.count,
-  [],
-  (scope: Branch0Scope, count: string) => {
-    data(scope[INDEX_BRANCH0.text], count);
-  }
-);
-const _if = conditional(INDEX.conditional, 1, (scope: ComponentScope) =>
-  scope[INDEX.show] ? _ifBody : undefined
-);
-const _show = source(INDEX.show, [_if]);
-const _count = source(INDEX.count, [
-  inConditionalScope(_count$if, INDEX.conditional),
-]);
-
-export default createRenderFn(template, walks, setup);
-
-export const _ifBody = createRenderer(
-  "The count is <!>",
-  next(1) + replace + next(1),
-  undefined,
-  [_count$if]
-);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/hydrate.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/hydrate.ts
@ -1,6 +0,0 @@
-import { init, register } from "@marko/runtime-fluurt/src/dom";
-import { _hydrate, _ifBody } from "./browser";
-
-register("counter", _hydrate);
-register("ifBody", _ifBody);
-init();
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/server.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/server.ts
@ -1,59 +0,0 @@
-import {
-  write,
-  markHydrateNode,
-  nextScopeId,
-  writeHydrateScope,
-  writeHydrateCall,
-  register,
-  SYMBOL_OWNER,
-  markHydrateControlEnd,
-  markHydrateScopeStart,
-} from "@marko/runtime-fluurt/src/html";
-
-export default () => {
-  write("<body>");
-  counter();
-  write("</body>");
-};
-
-// <let/show = true/>
-// <let/count = 0/>
-// <button.inc onClick() { count++; }/>
-// <button.toggle onClick() { show = !show; }/>
-// <if=show>The count is ${count}</if>
-
-const counter = () => {
-  const show = true;
-  const count = 0;
-  const scopeId = nextScopeId();
-  let childScope;
-  let childRenderer;
-
-  write(
-    `<button class="inc"></button>${markHydrateNode(
-      scopeId,
-      "#button/0"
-    )}<button class="toggle"></button>${markHydrateNode(scopeId, "#button/1")}`
-  );
-
-  if (show) {
-    const childScopeId = nextScopeId();
-    write(
-      `${markHydrateScopeStart(
-        childScopeId
-      )}The count is <!>${count}${markHydrateNode(childScopeId, "#text/0")}`
-    );
-    childRenderer = register(() => {}, "ifBody");
-    writeHydrateScope(childScopeId, (childScope = { [SYMBOL_OWNER]: scopeId }));
-  }
-  write(`${markHydrateControlEnd(scopeId, "#comment/2")}`);
-
-  // eslint-disable-next-line no-sparse-arrays
-  writeHydrateScope(scopeId, {
-    ["#comment/2!"]: childScope,
-    ["#comment/2("]: childRenderer,
-    show: show,
-    count: count,
-  });
-  writeHydrateCall(scopeId, "counter");
-};
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/template.marko
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter-multiple-nodes/template.marko
@ -0,0 +1,5 @@
+<let/show = true/>
+<let/count = 0/>
+<button.inc onClick() { count++; }/>
+<button.toggle onClick() { show = !show; }/>
+<if=show>The count is ${count}</if>
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/csr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/csr.expected.md
@ -48,13 +48,12 @@ container.querySelector("button.toggle").click();
 <button
  class="toggle"
 />
-<!---->
 ```

 # Mutations
 ```
-inserted #comment2
-removed span after #comment2
+inserted #text2
+removed span after #text2
 ```


@ -68,7 +67,6 @@ container.querySelector("button.inc").click();
 <button
  class="toggle"
 />
-<!---->
 ```

 # Mutations
@ -95,7 +93,7 @@ container.querySelector("button.toggle").click();
 # Mutations
 ```
 inserted span2
-removed #comment after span2
+removed #text after span2
 span2/#text0: " " => "2"
 ```

--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/dom.expected/template.js
@ -0,0 +1,22 @@
+import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+const _count$ifBody = /* @__PURE__ */_closure(1, "count", [], (_scope, count) => _data(_scope["#text/0"], count));
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer", /* @__PURE__ */_createRenderer("<span> </span>", /* next(1), get */"D ", null, [_count$ifBody]));
+const _if = /* @__PURE__ */_conditional("#text/2", 1, (_scope, show = _scope["show"]) => show ? _ifBody : null);
+const _hydrate_count = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count", _scope => _on(_scope["#button/0"], "click", function () {
+  const count = _scope["count"];
+  _queueSource(_scope, _count, count + 1);
+}));
+const _count = /* @__PURE__ */_source("count", [/* @__PURE__ */_inConditionalScope(_count$ifBody, "#text/2")], (_scope, count) => _queueHydrate(_scope, _hydrate_count));
+const _hydrate_show = _register("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show", _scope => _on(_scope["#button/1"], "click", function () {
+  const show = _scope["show"];
+  _queueSource(_scope, _show, !show);
+}));
+const _show = /* @__PURE__ */_source("show", [_if], (_scope, show) => _queueHydrate(_scope, _hydrate_show));
+const _setup = _scope => {
+  _setSource(_scope, _show, true);
+  _setSource(_scope, _count, 0);
+};
+export const template = "<button class=inc></button><button class=toggle></button><!>";
+export const walks = /* get, over(1), get, over(1), replace, over(1) */" b b%b";
+export const setup = _setup;
+export default /* @__PURE__ */_createRenderFn(template, walks, setup);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/html.expected/template.js
@ -0,0 +1,30 @@
+import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+const _renderer = (input, _tagVar) => {
+  const _scope0_ = _nextScopeId();
+  const show = true;
+  const count = 0;
+  _write(`<button class=inc></button>${_markHydrateNode(_scope0_, "#button/0")}<button class=toggle></button>${_markHydrateNode(_scope0_, "#button/1")}`);
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
+  if (show) {
+    const _scope1_ = _nextScopeId();
+    _write(`<span>${_escapeXML(count)}${_markHydrateNode(_scope1_, "#text/0")}</span>`);
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer");
+    _ifScopeId = _scope1_;
+  }
+  _write(`${_markHydrateControlSingleNodeEnd(_scope0_, "#text/2", _ifScopeId)}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show");
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count");
+  _writeHydrateScope(_scope0_, {
+    "show": show,
+    "count": count,
+    "#text/2!": _ifScope,
+    "#text/2(": _ifRenderer
+  });
+};
+export default _renderer;
+export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/hydrate.expected.md
@ -15,9 +15,9 @@
      0
      <!--M#1 #text/0-->
    </span>
-    <!--M|0 #comment/2 1-->
+    <!--M|0 #text/2 1-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -48,9 +48,9 @@ container.querySelector("button.inc").click();
      1
      <!--M#1 #text/0-->
    </span>
-    <!--M|0 #comment/2 1-->
+    <!--M|0 #text/2 1-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -77,9 +77,9 @@ container.querySelector("button.toggle").click();
      class="toggle"
    />
    <!--M#0 #button/1-->
-    <!--M|0 #comment/2 1-->
+    <!--M|0 #text/2 1-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -108,9 +108,9 @@ container.querySelector("button.inc").click();
      class="toggle"
    />
    <!--M#0 #button/1-->
-    <!--M|0 #comment/2 1-->
+    <!--M|0 #text/2 1-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -141,7 +141,7 @@ container.querySelector("button.toggle").click();
      2
    </span>
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
@ -174,7 +174,7 @@ container.querySelector("button.inc").click();
      3
    </span>
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <body><button class="inc"></button><!M#0 #button/0><button class="toggle"></button><!M#0 #button/1><span>0<!M#1 #text/0></span><!M|0 #comment/2 1></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])</script>
+  <button class=inc></button><!M#0 #button/0><button class=toggle></button><!M#0 #button/1><span>0<!M#1 #text/0></span><!M|0 #text/2 1><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])</script>


 # Render "End"
@ -19,9 +19,9 @@
      0
      <!--M#1 #text/0-->
    </span>
-    <!--M|0 #comment/2 1-->
+    <!--M|0 #text/2 1-->
    <script>
-      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={"#comment/2!":j={},"#comment/2(":b("ifBody"),show:!0,count:0},1:j},j._=h,k),[0,"counter",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={show:!0,count:0,"#text/2!":j={},"#text/2(":b("packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer")},1:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
    </script>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/browser.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/browser.ts
@ -1,97 +0,0 @@
-import {
-  on,
-  createRenderer,
-  createRenderFn,
-  conditional,
-  data,
-  bind,
-  source,
-  setSource,
-  queueSource,
-  closure,
-  inConditionalScope,
-  queueHydrate,
-  Scope,
-} from "@marko/runtime-fluurt/src/dom";
-
-import { get, next, over } from "../../utils/walks";
-
-const enum INDEX {
-  button = "#button/0",
-  button2 = "#button/1",
-  comment = "#comment/2",
-  conditional = "#comment/2",
-  show = "show",
-  count = "count",
-}
-
-type ComponentScope = Scope<{
-  [INDEX.button]: HTMLButtonElement;
-  [INDEX.comment]: Comment;
-  [INDEX.conditional]: Comment;
-  [INDEX.show]: boolean;
-  [INDEX.count]: string;
-}>;
-
-const enum INDEX_BRANCH0 {
-  text = "#text/0",
-  count = "count",
-}
-
-type Branch0Scope = Scope<{
-  _: ComponentScope;
-  [INDEX_BRANCH0.text]: Text;
-  [INDEX_BRANCH0.count]: string;
-}>;
-
-// <let/show = true/>
-// <let/count = 0/>
-// <button.inc onClick() { count++; }/>
-// <button.toggle onClick() { show = !show; }/>
-// <if=show><span>${count}</span></if>
-
-export const template = `<button class="inc"></button><button class="toggle"></button><!>`;
-export const walks = get + over(1) + get + over(1) + get + over(1);
-export const setup = (scope: ComponentScope) => {
-  setSource(scope, _count, 0);
-  setSource(scope, _show, true);
-  queueHydrate(scope, _hydrate);
-};
-
-export const _hydrate = (scope: ComponentScope) => {
-  on(scope[INDEX.button], "click", bind(scope, _onclick));
-  on(scope[INDEX.button2], "click", bind(scope, _onclick2));
-};
-
-const _onclick = (scope: ComponentScope) => {
-  queueSource(scope, _count, scope[INDEX.count] + 1);
-};
-
-const _onclick2 = (scope: ComponentScope) => {
-  queueSource(scope, _show, !scope[INDEX.show]);
-};
-
-const _count$if = closure(
-  1,
-  INDEX.count,
-  [],
-  (scope: Branch0Scope, count: string) => {
-    data(scope[INDEX_BRANCH0.text], count);
-  }
-);
-const _if = conditional(INDEX.conditional, 1, (scope: ComponentScope) =>
-  scope[INDEX.show] ? _ifBody : undefined
-);
-const _show = source(INDEX.show, [_if]);
-const _count = source(INDEX.count, [
-  inConditionalScope(_count$if, INDEX.conditional),
-]);
-
-export default createRenderFn(template, walks, setup);
-
-export const _ifBody = createRenderer(
-  "<span> </span>",
-  next(1) + get + next(1),
-  undefined,
-  [_count$if]
-);
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/hydrate.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/hydrate.ts
@ -1,6 +0,0 @@
-import { init, register } from "@marko/runtime-fluurt/src/dom";
-import { _hydrate, _ifBody } from "./browser";
-
-register("counter", _hydrate);
-register("ifBody", _ifBody);
-init();
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/server.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/server.ts
@ -1,57 +0,0 @@
-import {
-  write,
-  markHydrateNode,
-  nextScopeId,
-  writeHydrateScope,
-  writeHydrateCall,
-  markHydrateControlSingleNodeEnd,
-  register,
-  SYMBOL_OWNER,
-} from "@marko/runtime-fluurt/src/html";
-
-export default () => {
-  write("<body>");
-  counter();
-  write("</body>");
-};
-
-// <let/show = true/>
-// <let/count = 0/>
-// <button.inc onClick() { count++; }/>
-// <button.toggle onClick() { show = !show; }/>
-// <if=show><span>${count}</span></if>
-
-const counter = () => {
-  const show = true;
-  const count = 0;
-  const scopeId = nextScopeId();
-  let childScope;
-  let childRenderer;
-  let childScopeId!: number;
-
-  write(
-    `<button class="inc"></button>${markHydrateNode(
-      scopeId,
-      "#button/0"
-    )}<button class="toggle"></button>${markHydrateNode(scopeId, "#button/1")}`
-  );
-
-  if (show) {
-    childScopeId = nextScopeId();
-    write(`<span>${count}${markHydrateNode(childScopeId, "#text/0")}</span>`);
-    childRenderer = register(() => {}, "ifBody");
-    writeHydrateScope(childScopeId, (childScope = { [SYMBOL_OWNER]: scopeId }));
-  }
-  write(
-    `${markHydrateControlSingleNodeEnd(scopeId, "#comment/2", childScopeId)}`
-  );
-
-  // eslint-disable-next-line no-sparse-arrays
-  writeHydrateScope(scopeId, {
-    ["#comment/2!"]: childScope,
-    ["#comment/2("]: childRenderer,
-    show: show,
-    count: count,
-  });
-  writeHydrateCall(scopeId, "counter");
-};
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/template.marko
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/template.marko
@ -0,0 +1,5 @@
+<let/show = true/>
+<let/count = 0/>
+<button.inc onClick() { count++; }/>
+<button.toggle onClick() { show = !show; }/>
+<if=show><span>${count}</span></if>
--- a/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const a = 0;
  const b = 0;
  if (true) {
-    const _scope = _nextScopeId();
-    _write(`${_escapeXML(a + b)}${_markHydrateNode(_scope, "#text/0")}`);
+    const _scope1_ = _nextScopeId();
+    _write(`${_escapeXML(a + b)}${_markHydrateNode(_scope1_, "#text/0")}`);
  }
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-counter/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-counter/snapshots/html.expected/template.js
@ -1,10 +1,10 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
-  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount");
-  _writeHydrateScope(_scope, {
+  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount");
+  _writeHydrateScope(_scope0_, {
    "clickCount": clickCount
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-dynamic-native-tag/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-dynamic-native-tag/snapshots/html.expected/template.js
@ -2,7 +2,7 @@ import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId
 const _renderer = ({
  tagName
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _dynamicTag(tagName, {
    class: ["a", "b"]
  }, () => _write("Hello World"));
--- a/packages/translator/src/tests/fixtures/basic-effect-no-deps/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-effect-no-deps/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 import { nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0");
+  const _scope0_ = _nextScopeId();
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0");
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-execution-order/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-execution-order/snapshots/dom.expected/template.js
@ -1,6 +1,6 @@
-import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, conditional as _conditional, source as _source, register as _register, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 const _message$ifBody = /* @__PURE__ */_closure(1, "message", [], (_scope, message) => _data(_scope["#text/0"], message.text));
-const _ifBody = /* @__PURE__ */_createRenderer(" ", /* get */" ", null, [_message$ifBody]);
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer", /* @__PURE__ */_createRenderer(" ", /* get */" ", null, [_message$ifBody]));
 const _if = /* @__PURE__ */_conditional("#text/1", 1, (_scope, show = _scope["show"]) => show ? _ifBody : null);
 const _show = /* @__PURE__ */_source("show", [_if]);
 const _message = /* @__PURE__ */_source("message", [/* @__PURE__ */_inConditionalScope(_message$ifBody, "#text/1")]);
--- a/packages/translator/src/tests/fixtures/basic-execution-order/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-execution-order/snapshots/html.expected/template.js
@ -1,16 +1,29 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const message = {
    text: "hi"
  };
  const show = true;
-  _write(`<button>hide</button>${_markHydrateNode(_scope, "#button/0")}`);
+  _write(`<button>hide</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (show) {
-    const _scope = _nextScopeId();
-    _write(`${_escapeXML(message.text)}${_markHydrateNode(_scope, "#text/0")}`);
+    const _scope1_ = _nextScopeId();
+    _write(`${_escapeXML(message.text)}${_markHydrateNode(_scope1_, "#text/0")}`);
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer");
+    _ifScopeId = _scope1_;
  }
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-execution-order/template.marko_0");
+  _write(`${_markHydrateControlSingleNodeEnd(_scope0_, "#text/1", _ifScopeId)}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-execution-order/template.marko_0");
+  _writeHydrateScope(_scope0_, {
+    "#text/1!": _ifScope,
+    "#text/1(": _ifRenderer
+  });
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-export/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-export/snapshots/html.expected/template.js
@ -3,8 +3,8 @@ import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as
 const _renderer = ({
  value
 }, _tagVar) => {
-  const _scope = _nextScopeId();
-  _write(`<div>${_escapeXML(value)}${_markHydrateNode(_scope, "#text/0")}</div>`);
+  const _scope0_ = _nextScopeId();
+  _write(`<div>${_escapeXML(value)}${_markHydrateNode(_scope0_, "#text/0")}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-flush-here/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-flush-here/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<h1>Hello World</h1><script>\n    console.log('Hello World');\n  </script>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/html.expected/template.js
@ -1,10 +1,10 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const count = 0;
-  _write(`<button>${_escapeXML(count)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count");
-  _writeHydrateScope(_scope, {
+  _write(`<button>${_escapeXML(count)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count");
+  _writeHydrateScope(_scope0_, {
    "count": count
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const a = [0];
  const b = 1;
-  _write(`<button>${_escapeXML(a.join(""))}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b");
-  _writeHydrateScope(_scope, {
+  _write(`<button>${_escapeXML(a.join(""))}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b");
+  _writeHydrateScope(_scope0_, {
    "a": a,
    "b": b
  });
--- a/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/html.expected/template.js
@ -1,9 +1,9 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const data = 0;
-  _write(`<button>${_escapeXML(data)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0");
+  _write(`<button>${_escapeXML(data)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0");
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/dom.expected/components/comments.js
+++ b/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/dom.expected/components/comments.js
@ -1,4 +1,4 @@
-import { setSource as _setSource, attr as _attr, data as _data, on as _on, queueSource as _queueSource, inChild as _inChild, subscriber as _subscriber, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, conditional as _conditional, source as _source, register as _register, queueHydrate as _queueHydrate, derivation as _derivation, inLoopScope as _inLoopScope, loop as _loop, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { setSource as _setSource, attr as _attr, data as _data, on as _on, queueSource as _queueSource, inChild as _inChild, subscriber as _subscriber, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, derivation as _derivation, inLoopScope as _inLoopScope, loop as _loop, destructureSources as _destructureSources, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 import { setup as _comments2, attrs as _comments_attrs, template as _comments_template, walks as _comments_walks } from "./comments.marko";
 const _expr_comment_id$ifBody = /* @__PURE__ */_subscriber([_inChild(_comments_attrs, "#childScope/0")], 2, (_scope, comment = _scope._["comment"], id = _scope._["id"]) => _setSource(_scope["#childScope/0"], _comments_attrs, {
  comments: comment.comments,
@ -9,7 +9,7 @@ const _comment$ifBody = /* @__PURE__ */_closure(1, "comment", [_expr_comment_id$
 const _setup$ifBody = _scope => {
  _comments2(_scope["#childScope/0"]);
 };
-const _ifBody = /* @__PURE__ */_createRenderer(`${_comments_template}`, /* beginChild, _comments_walks, endChild */`/${_comments_walks}&`, _setup$ifBody, [_comment$ifBody, _id$ifBody]);
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_2_renderer", /* @__PURE__ */_createRenderer(`${_comments_template}`, /* beginChild, _comments_walks, endChild */`/${_comments_walks}&`, _setup$ifBody, [_comment$ifBody, _id$ifBody]));
 const _if$forBody = /* @__PURE__ */_conditional("#text/4", 1, (_scope, comment = _scope["comment"]) => comment.comments ? _ifBody : null);
 const _hydrate_open$forBody = _register("packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open", _scope => _on(_scope["#button/2"], "click", function () {
  const open = _scope["open"];
--- a/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/html.expected/components/comments.js
+++ b/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/html.expected/components/comments.js
@ -1,36 +1,46 @@
-import { write as _write, attr as _attr, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, attr as _attr, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, SYMBOL_OWNER as _SYMBOL_OWNER, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, writeHydrateCall as _writeHydrateCall, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _comments from "./comments.marko";
 const _renderer = ({
  comments,
  path = "c"
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<ul>");
  let _i = 0;
  for (const comment of comments) {
    let i = _i++;
-    const _scope = _nextScopeId();
+    const _scope1_ = _nextScopeId();
    const id = `${path}-${i}`;
    const open = true;
-    _write(`<li${_attr("id", id)}${_attr("hidden", !open)}><span>${_escapeXML(comment.text)}${_markHydrateNode(_scope, "#text/1")}</span><button>${_escapeXML(open ? "[-]" : "[+]")}${_markHydrateNode(_scope, "#text/3")}</button>${_markHydrateNode(_scope, "#button/2")}`);
+    _write(`<li${_attr("id", id)}${_attr("hidden", !open)}><span>${_escapeXML(comment.text)}${_markHydrateNode(_scope1_, "#text/1")}</span><button>${_escapeXML(open ? "[-]" : "[+]")}${_markHydrateNode(_scope1_, "#text/3")}</button>${_markHydrateNode(_scope1_, "#button/2")}`);
+    let _ifScopeId;
+    const _ifScope = {},
+      _ifRenderer = () => {};
    if (comment.comments) {
-      const _scope = _nextScopeId();
+      const _scope2_ = _nextScopeId();
      _comments({
        comments: comment.comments,
        path: id,
        renderBody() {
-          const _scope = _nextScopeId();
+          const _scope3_ = _nextScopeId();
        }
      });
+      _writeHydrateScope(_scope2_, Object.assign(_ifScope, {
+        [_SYMBOL_OWNER]: _scope1_
+      }));
+      _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_2_renderer");
+      _ifScopeId = _scope2_;
    }
-    _write(`</li>${_markHydrateNode(_scope, "#li/0")}`);
-    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open");
-    _writeHydrateScope(_scope, {
-      "open": open
+    _write(`${_markHydrateControlSingleNodeEnd(_scope1_, "#text/4", _ifScopeId)}</li>${_markHydrateNode(_scope1_, "#li/0")}`);
+    _writeHydrateCall(_scope1_, "packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open");
+    _writeHydrateScope(_scope1_, {
+      "open": open,
+      "#text/4!": _ifScope,
+      "#text/4(": _ifRenderer
    });
    _maybeFlush();
  }
-  _write(`</ul>${_markHydrateNode(_scope, "#ul/0")}`);
+  _write(`</ul>${_markHydrateNode(_scope0_, "#ul/0")}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _comments from "./components/comments.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _comments({
    ...input,
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-inert-collapsible-tree/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <ul><li id=c-0><span>Hello World<!M#2 #text/1></span><button>[-]<!M#2 #text/3></button><!M#2 #button/2><ul><li id=c-0-0><span>testing 123<!M#5 #text/1></span><button>[-]<!M#5 #text/3></button><!M#5 #button/2></li><!M#5 #li/0></ul><!M#4 #ul/0></li><!M#2 #li/0><li id=c-1><span>Goodbye World<!M#6 #text/1></span><button>[-]<!M#6 #text/3></button><!M#6 #button/2></li><!M#6 #li/0></ul><!M#1 #ul/0><script>(M$h=[]).push((b,s)=>({2:{open:!0},5:{open:!0},6:{open:!0}}),[5,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",2,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",6,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",])</script>
+  <ul><li id=c-0><span>Hello World<!M#2 #text/1></span><button>[-]<!M#2 #text/3></button><!M#2 #button/2><ul><li id=c-0-0><span>testing 123<!M#5 #text/1></span><button>[-]<!M#5 #text/3></button><!M#5 #button/2><!M|5 #text/4 ></li><!M#5 #li/0></ul><!M#4 #ul/0><!M|2 #text/4 3></li><!M#2 #li/0><li id=c-1><span>Goodbye World<!M#6 #text/1></span><button>[-]<!M#6 #text/3></button><!M#6 #button/2><!M|6 #text/4 ></li><!M#6 #li/0></ul><!M#1 #ul/0><script>(M$h=[]).push((b,s,h,j,k)=>(k={2:h={open:!0,"#text/4!":j={},"#text/4(":b("packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_2_renderer")},3:j,5:{open:!0,"#text/4!":{}},6:{open:!0,"#text/4!":{}}},j._=h,k),[5,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",2,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",6,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",])</script>


 # Render "End"
@ -33,10 +33,12 @@
              <!--M#5 #text/3-->
            </button>
            <!--M#5 #button/2-->
+            <!--M|5 #text/4 -->
          </li>
          <!--M#5 #li/0-->
        </ul>
        <!--M#4 #ul/0-->
+        <!--M|2 #text/4 3-->
      </li>
      <!--M#2 #li/0-->
      <li
@ -51,12 +53,13 @@
          <!--M#6 #text/3-->
        </button>
        <!--M#6 #button/2-->
+        <!--M|6 #text/4 -->
      </li>
      <!--M#6 #li/0-->
    </ul>
    <!--M#1 #ul/0-->
    <script>
-      (M$h=[]).push((b,s)=&gt;({2:{open:!0},5:{open:!0},6:{open:!0}}),[5,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",2,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",6,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={2:h={open:!0,"#text/4!":j={},"#text/4(":b("packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_2_renderer")},3:j,5:{open:!0,"#text/4!":{}},6:{open:!0,"#text/4!":{}}},j._=h,k),[5,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",2,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",6,"packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open",])
    </script>
  </body>
 </html>
@ -85,8 +88,10 @@ inserted #document/html0/body1/ul0/li0/ul3/li0/button1
 inserted #document/html0/body1/ul0/li0/ul3/li0/button1/#text0
 inserted #document/html0/body1/ul0/li0/ul3/li0/button1/#comment1
 inserted #document/html0/body1/ul0/li0/ul3/li0/#comment2
+inserted #document/html0/body1/ul0/li0/ul3/li0/#comment3
 inserted #document/html0/body1/ul0/li0/ul3/#comment1
 inserted #document/html0/body1/ul0/li0/#comment4
+inserted #document/html0/body1/ul0/li0/#comment5
 inserted #document/html0/body1/ul0/#comment1
 inserted #document/html0/body1/ul0/li2
 inserted #document/html0/body1/ul0/li2/span0
@ -96,6 +101,7 @@ inserted #document/html0/body1/ul0/li2/button1
 inserted #document/html0/body1/ul0/li2/button1/#text0
 inserted #document/html0/body1/ul0/li2/button1/#comment1
 inserted #document/html0/body1/ul0/li2/#comment2
+inserted #document/html0/body1/ul0/li2/#comment3
 inserted #document/html0/body1/ul0/#comment3
 inserted #document/html0/body1/#comment1
 inserted #document/html0/body1/script2
--- a/packages/translator/src/tests/fixtures/basic-layout/snapshots/html.expected/components/layout.js
+++ b/packages/translator/src/tests/fixtures/basic-layout/snapshots/html.expected/components/layout.js
@ -2,7 +2,7 @@ import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId
 const _renderer = ({
  renderBody
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<body>");
  _dynamicTag(renderBody, null);
  _write("</body>");
--- a/packages/translator/src/tests/fixtures/basic-layout/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-layout/snapshots/html.expected/template.js
@ -3,11 +3,11 @@ import _layout from "./components/layout.marko";
 const _renderer = ({
  name
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _layout({
    renderBody() {
-      const _scope = _nextScopeId();
-      _write(`<h1>Hello <!>${_escapeXML(name)}${_markHydrateNode(_scope, "#text/0")}</h1>`);
+      const _scope1_ = _nextScopeId();
+      _write(`<h1>Hello <!>${_escapeXML(name)}${_markHydrateNode(_scope1_, "#text/0")}</h1>`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-nested-scope-for/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-nested-scope-for/snapshots/html.expected/template.js
@ -1,12 +1,12 @@
 import { attr as _attr, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const selected = 0;
  for (const num of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
-    const _scope = _nextScopeId();
-    _write(`<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_escapeXML(num)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num");
-    _writeHydrateScope(_scope, {
+    const _scope1_ = _nextScopeId();
+    _write(`<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_escapeXML(num)}${_markHydrateNode(_scope1_, "#text/1")}</button>${_markHydrateNode(_scope1_, "#button/0")}`);
+    _writeHydrateCall(_scope1_, "packages/translator/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num");
+    _writeHydrateScope(_scope1_, {
      "num": num
    });
    _maybeFlush();
--- a/packages/translator/src/tests/fixtures/basic-nested-scope-if/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-nested-scope-if/snapshots/dom.expected/template.js
@ -1,6 +1,6 @@
 import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, queueHydrate as _queueHydrate, conditional as _conditional, source as _source, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 const _clickCount$elseBody = /* @__PURE__ */_closure(1, "clickCount", [], (_scope, clickCount) => _data(_scope["#text/0"], clickCount));
-const _elseBody = /* @__PURE__ */_createRenderer("<span>The button was clicked <!> times.</span>", /* next(1), over(1), replace */"Db%", null, [_clickCount$elseBody]);
+const _elseBody = _register("packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_2_renderer", /* @__PURE__ */_createRenderer("<span>The button was clicked <!> times.</span>", /* next(1), over(1), replace */"Db%", null, [_clickCount$elseBody]));
 const _hydrate_clickCount$ifBody = _register("packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount", _scope => _on(_scope["#button/0"], "click", function () {
  const clickCount = _scope._["clickCount"];
  _queueSource(_scope._, _clickCount, clickCount + 1);
@ -9,7 +9,7 @@ const _clickCount$ifBody = /* @__PURE__ */_closure(1, "clickCount", [], (_scope,
  _data(_scope["#text/1"], clickCount);
  _queueHydrate(_scope, _hydrate_clickCount$ifBody);
 });
-const _ifBody = /* @__PURE__ */_createRenderer("<button> </button>", /* get, next(1), get */" D ", null, [_clickCount$ifBody]);
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_renderer", /* @__PURE__ */_createRenderer("<button> </button>", /* get, next(1), get */" D ", null, [_clickCount$ifBody]));
 const _if = /* @__PURE__ */_conditional("#text/0", 1, (_scope, clickCount = _scope["clickCount"]) => clickCount < 3 ? _ifBody : _elseBody);
 const _clickCount = /* @__PURE__ */_source("clickCount", [_if, /* @__PURE__ */_inConditionalScope(_clickCount$elseBody, "#text/0"), /* @__PURE__ */_inConditionalScope(_clickCount$ifBody, "#text/0")]);
 const _setup = _scope => {
--- a/packages/translator/src/tests/fixtures/basic-nested-scope-if/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-nested-scope-if/snapshots/html.expected/template.js
@ -1,20 +1,35 @@
-import { write as _write, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
  _write("<div>");
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (clickCount < 3) {
-    const _scope = _nextScopeId();
-    _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount");
-    _writeHydrateScope(_scope, {
-      "clickCount": clickCount
-    });
+    const _scope1_ = _nextScopeId();
+    _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope1_, "#text/1")}</button>${_markHydrateNode(_scope1_, "#button/0")}`);
+    _writeHydrateCall(_scope1_, "packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount");
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      "clickCount": clickCount,
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_renderer");
+    _ifScopeId = _scope1_;
  } else {
-    const _scope = _nextScopeId();
-    _write(`<span>The button was clicked <!>${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/0")} times.</span>`);
+    const _scope2_ = _nextScopeId();
+    _write(`<span>The button was clicked <!>${_escapeXML(clickCount)}${_markHydrateNode(_scope2_, "#text/0")} times.</span>`);
+    _writeHydrateScope(_scope2_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_2_renderer");
+    _ifScopeId = _scope2_;
  }
-  _write("</div>");
+  _write(`${_markHydrateControlSingleNodeEnd(_scope0_, "#text/0", _ifScopeId)}</div>`);
+  _writeHydrateScope(_scope0_, {
+    "#text/0!": _ifScope,
+    "#text/0(": _ifRenderer
+  });
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-push-pop-list/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-push-pop-list/snapshots/html.expected/template.js
@ -1,18 +1,18 @@
 import { write as _write, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const id = 0;
  const items = [];
  _write("<div>");
  for (const item of items) {
-    const _scope = _nextScopeId();
-    _write(`${_escapeXML(item)}${_markHydrateNode(_scope, "#text/0")}`);
+    const _scope1_ = _nextScopeId();
+    _write(`${_escapeXML(item)}${_markHydrateNode(_scope1_, "#text/0")}`);
    _maybeFlush();
  }
-  _write(`<button id=add>Add</button>${_markHydrateNode(_scope, "#button/1")}<button id=remove>Remove</button>${_markHydrateNode(_scope, "#button/2")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_items");
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_id_items");
-  _writeHydrateScope(_scope, {
+  _write(`<button id=add>Add</button>${_markHydrateNode(_scope0_, "#button/1")}<button id=remove>Remove</button>${_markHydrateNode(_scope0_, "#button/2")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_items");
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-push-pop-list/template.marko_0_id_items");
+  _writeHydrateScope(_scope0_, {
    "id": id,
    "items": items
  });
--- a/packages/translator/src/tests/fixtures/basic-scriptlet/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-scriptlet/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const clickCount = 0;
  const doubleCount = clickCount * 2;
-  _write(`<div><button>${_escapeXML(doubleCount)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-scriptlet/template.marko_0_clickCount");
-  _writeHydrateScope(_scope, {
+  _write(`<div><button>${_escapeXML(doubleCount)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-scriptlet/template.marko_0_clickCount");
+  _writeHydrateScope(_scope0_, {
    "clickCount": clickCount
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-shared-node-ref/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-shared-node-ref/snapshots/html.expected/template.js
@ -1,18 +1,18 @@
 import { attr as _attr, write as _write, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const open = true;
  const list = [1, 2, 3];
  _write(`<ul${_attr("hidden", !open)}>`);
  for (const x of list) {
-    const _scope = _nextScopeId();
-    _write(`<li>${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</li>`);
+    const _scope1_ = _nextScopeId();
+    _write(`<li>${_escapeXML(x)}${_markHydrateNode(_scope1_, "#text/0")}</li>`);
    _maybeFlush();
  }
-  _write(`</ul>${_markHydrateNode(_scope, "#ul/0")}<button id=toggle>Toggle</button>${_markHydrateNode(_scope, "#button/1")}<button id=reverse>Reverse</button>${_markHydrateNode(_scope, "#button/2")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_list");
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_open");
-  _writeHydrateScope(_scope, {
+  _write(`</ul>${_markHydrateNode(_scope0_, "#ul/0")}<button id=toggle>Toggle</button>${_markHydrateNode(_scope0_, "#button/1")}<button id=reverse>Reverse</button>${_markHydrateNode(_scope0_, "#button/2")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_list");
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-shared-node-ref/template.marko_0_open");
+  _writeHydrateScope(_scope0_, {
    "open": open,
    "list": list
  });
--- a/packages/translator/src/tests/fixtures/basic-static/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-static/snapshots/html.expected/template.js
@ -1,7 +1,7 @@
 const x = 1;
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div><span>1</span></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-toggle-show/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-toggle-show/snapshots/dom.expected/template.js
@ -1,5 +1,5 @@
-import { setSource as _setSource, on as _on, queueSource as _queueSource, createRenderer as _createRenderer, conditional as _conditional, source as _source, register as _register, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
-const _ifBody = /* @__PURE__ */_createRenderer("Hello!", "");
+import { setSource as _setSource, on as _on, queueSource as _queueSource, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_1_renderer", /* @__PURE__ */_createRenderer("Hello!", ""));
 const _if = /* @__PURE__ */_conditional("#text/0", 1, (_scope, show = _scope["show"]) => show ? _ifBody : null);
 const _hydrate_show = _register("packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show", _scope => _on(_scope["#button/1"], "click", function () {
  const show = _scope["show"];
--- a/packages/translator/src/tests/fixtures/basic-toggle-show/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-toggle-show/snapshots/html.expected/template.js
@ -1,16 +1,26 @@
-import { write as _write, nextScopeId as _nextScopeId, markHydrateNode as _markHydrateNode, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, markHydrateNode as _markHydrateNode, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const show = true;
  _write("<div>");
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (show) {
-    const _scope = _nextScopeId();
+    const _scope1_ = _nextScopeId();
    _write("Hello!");
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_1_renderer");
+    _ifScopeId = _scope1_;
  }
-  _write(`<button>Toggle</button>${_markHydrateNode(_scope, "#button/1")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show");
-  _writeHydrateScope(_scope, {
-    "show": show
+  _write(`${_markHydrateControlSingleNodeEnd(_scope0_, "#text/0", _ifScopeId)}<button>Toggle</button>${_markHydrateNode(_scope0_, "#button/1")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show");
+  _writeHydrateScope(_scope0_, {
+    "show": show,
+    "#text/0!": _ifScope,
+    "#text/0(": _ifRenderer
  });
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/html.expected/template.js
@ -1,12 +1,12 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const unused_1 = 123;
  const unused_2 = 456;
  const clickCount = 0;
-  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount");
-  _writeHydrateScope(_scope, {
+  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount");
+  _writeHydrateScope(_scope0_, {
    "clickCount": clickCount
  });
 };
--- a/packages/translator/src/tests/fixtures/batched-updates-cleanup/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/batched-updates-cleanup/snapshots/dom.expected/template.js
@ -1,6 +1,6 @@
-import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, conditional as _conditional, source as _source, register as _register, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { setSource as _setSource, on as _on, queueSource as _queueSource, data as _data, inConditionalScope as _inConditionalScope, closure as _closure, createRenderer as _createRenderer, register as _register, conditional as _conditional, source as _source, queueHydrate as _queueHydrate, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 const _message$ifBody = /* @__PURE__ */_closure(1, "message", [], (_scope, message) => _data(_scope["#text/0"], message));
-const _ifBody = /* @__PURE__ */_createRenderer("<span> </span>", /* next(1), get */"D ", null, [_message$ifBody]);
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_1_renderer", /* @__PURE__ */_createRenderer("<span> </span>", /* next(1), get */"D ", null, [_message$ifBody]));
 const _if = /* @__PURE__ */_conditional("#text/1", 1, (_scope, show = _scope["show"]) => show ? _ifBody : null);
 const _message = /* @__PURE__ */_source("message", [/* @__PURE__ */_inConditionalScope(_message$ifBody, "#text/1")]);
 const _hydrate_show = _register("packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show", _scope => _on(_scope["#button/0"], "click", function () {
--- a/packages/translator/src/tests/fixtures/batched-updates-cleanup/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/batched-updates-cleanup/snapshots/html.expected/template.js
@ -1,16 +1,27 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const show = true;
  const message = "hi";
-  _write(`<button></button>${_markHydrateNode(_scope, "#button/0")}`);
+  _write(`<button></button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (show) {
-    const _scope = _nextScopeId();
-    _write(`<span>${_escapeXML(message)}${_markHydrateNode(_scope, "#text/0")}</span>`);
+    const _scope1_ = _nextScopeId();
+    _write(`<span>${_escapeXML(message)}${_markHydrateNode(_scope1_, "#text/0")}</span>`);
+    _writeHydrateScope(_scope1_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope0_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_1_renderer");
+    _ifScopeId = _scope1_;
  }
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show");
-  _writeHydrateScope(_scope, {
-    "show": show
+  _write(`${_markHydrateControlSingleNodeEnd(_scope0_, "#text/1", _ifScopeId)}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show");
+  _writeHydrateScope(_scope0_, {
+    "show": show,
+    "#text/1!": _ifScope,
+    "#text/1(": _ifRenderer
  });
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/batched-updates/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/batched-updates/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const a = 0;
  const b = 0;
-  _write(`<button>${_escapeXML(a + b)}${_markHydrateNode(_scope, "#text/1")}</button>${_markHydrateNode(_scope, "#button/0")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/batched-updates/template.marko_0_a_b");
-  _writeHydrateScope(_scope, {
+  _write(`<button>${_escapeXML(a + b)}${_markHydrateNode(_scope0_, "#text/1")}</button>${_markHydrateNode(_scope0_, "#button/0")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/batched-updates/template.marko_0_a_b");
+  _writeHydrateScope(_scope0_, {
    "a": a,
    "b": b
  });
--- a/packages/translator/src/tests/fixtures/cdata/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/cdata/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div>Here is a CDATA section: <![CDATA[ < > & ]]> with all kinds of unescaped text.</div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/comments/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/comments/snapshots/html.expected/template.js
@ -1,6 +1,6 @@
 import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div><!--abc--><!--[if lt IE 9]><script src=\"...\"></script><![endif]--><!--[if lt IE 9]><script src=\"...\"></script><![endif]--></div>");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/html.expected/components/display-intersection.js
+++ b/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/html.expected/components/display-intersection.js
@ -2,9 +2,9 @@ import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as
 const _renderer = ({
  value
 }, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const dummy = {};
-  _write(`<div>${_escapeXML((dummy, value))}${_markHydrateNode(_scope, "#text/0")}</div>`);
+  _write(`<div>${_escapeXML((dummy, value))}${_markHydrateNode(_scope0_, "#text/0")}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/html.expected/template.js
@ -1,17 +1,17 @@
 import { nextScopeId as _nextScopeId, markHydrateNode as _markHydrateNode, write as _write, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _displayIntersection from "./components/display-intersection.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const count = 0;
  _displayIntersection({
    value: count,
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
    }
  });
-  _write(`<button></button>${_markHydrateNode(_scope, "#button/1")}`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count");
-  _writeHydrateScope(_scope, {
+  _write(`<button></button>${_markHydrateNode(_scope0_, "#button/1")}`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count");
+  _writeHydrateScope(_scope0_, {
    "count": count
  });
 };
--- a/packages/translator/src/tests/fixtures/const-tag/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/const-tag/snapshots/html.expected/template.js
@ -1,9 +1,9 @@
 import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const x = 1;
  const y = 1;
-  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</div>${_escapeXML(y)}${_markHydrateNode(_scope, "#text/1")}`);
+  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope0_, "#text/0")}</div>${_escapeXML(y)}${_markHydrateNode(_scope0_, "#text/1")}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/html.expected/components/child.js
+++ b/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/html.expected/components/child.js
@ -1,10 +1,10 @@
 import { write as _write, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div>");
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-derivation/template.marko");
  const y = x;
-  _write(`${_escapeXML(y)}${_markHydrateNode(_scope, "#text/0")}</div>`);
+  _write(`${_escapeXML(y)}${_markHydrateNode(_scope0_, "#text/0")}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/html.expected/template.js
@ -1,11 +1,12 @@
 import { pushContext as _pushContext, nextScopeId as _nextScopeId, popContext as _popContext, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _child from "./components/child.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-derivation/template.marko", 123);
+  const _scope1_ = _nextScopeId();
  _child({
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope2_ = _nextScopeId();
    }
  });
  _popContext();
--- a/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-derivation/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div>123<!M#1 #text/0></div>
+  <div>123<!M#2 #text/0></div>


 # Render "End"
@ -9,7 +9,7 @@
  <body>
    <div>
      123
-      <!--M#1 #text/0-->
+      <!--M#2 #text/0-->
    </div>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/context-tag-from-global/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-global/snapshots/html.expected/template.js
@ -1,11 +1,11 @@
 import { write as _write, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div><span>");
  const {
    x
  } = _getInContext("$");
-  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</span></div>`);
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope0_, "#text/0")}</span></div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-from-relative-path/snapshots/html.expected/other.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-relative-path/snapshots/html.expected/other.js
@ -1,6 +1,6 @@
 import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<set value=hello>");
  _dynamicTag(input.renderBody, null);
  _write("</set>");
--- a/packages/translator/src/tests/fixtures/context-tag-from-relative-path/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-relative-path/snapshots/html.expected/template.js
@ -1,13 +1,13 @@
 import Other from "./other.marko";
 import { write as _write, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  Other({
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
      _write("<span>");
      const message = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-relative-path/other.marko");
-      _write(`${_escapeXML(message)}${_markHydrateNode(_scope, "#text/0")}</span>`);
+      _write(`${_escapeXML(message)}${_markHydrateNode(_scope1_, "#text/0")}</span>`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/context-tag-from-self/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-self/snapshots/html.expected/template.js
@ -1,11 +1,12 @@
-import { write as _write, pushContext as _pushContext, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, popContext as _popContext, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, pushContext as _pushContext, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, popContext as _popContext, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _write("<div>");
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-from-self/template.marko", 1);
+  const _scope1_ = _nextScopeId();
  _write("<span>");
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-self/template.marko");
-  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</span>`);
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope1_, "#text/0")}</span>`);
  _popContext();
  _write("</div>");
 };
--- a/packages/translator/src/tests/fixtures/context-tag-from-self/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-from-self/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><span>1<!M#0 #text/0></span></div>
+  <div><span>1<!M#1 #text/0></span></div>


 # Render "End"
@ -10,7 +10,7 @@
    <div>
      <span>
        1
-        <!--M#0 #text/0-->
+        <!--M#1 #text/0-->
      </span>
    </div>
  </body>
--- a/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/html.expected/components/other.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/html.expected/components/other.js
@ -1,7 +1,8 @@
-import { pushContext as _pushContext, dynamicTag as _dynamicTag, popContext as _popContext, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { pushContext as _pushContext, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, popContext as _popContext, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/components/other.marko", "Hello");
+  const _scope1_ = _nextScopeId();
  _dynamicTag(input.renderBody, null);
  _popContext();
 };
--- a/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/html.expected/template.js
@ -1,13 +1,13 @@
 import { write as _write, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _other from "./components/other.marko";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  _other({
    renderBody() {
-      const _scope = _nextScopeId();
+      const _scope1_ = _nextScopeId();
      _write("<span>");
      const message = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/components/other.marko");
-      _write(`${_escapeXML(message)}${_markHydrateNode(_scope, "#text/0")}</span>`);
+      _write(`${_escapeXML(message)}${_markHydrateNode(_scope1_, "#text/0")}</span>`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-from-tag-name/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <span>Hello<!M#2 #text/0></span>
+  <span>Hello<!M#3 #text/0></span>


 # Render "End"
@ -9,7 +9,7 @@
  <body>
    <span>
      Hello
-      <!--M#2 #text/0-->
+      <!--M#3 #text/0-->
    </span>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/dom.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/dom.expected/template.js
@ -1,6 +1,6 @@
-import { setSource as _setSource, dynamicSubscribers as _dynamicSubscribers, initContextProvider as _initContextProvider, data as _data, on as _on, queueSource as _queueSource, contextClosure as _contextClosure, createRenderer as _createRenderer, conditional as _conditional, dynamicClosure as _dynamicClosure, derivation as _derivation, source as _source, register as _register, queueHydrate as _queueHydrate, notifySignal as _notifySignal, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
+import { setSource as _setSource, dynamicSubscribers as _dynamicSubscribers, initContextProvider as _initContextProvider, data as _data, on as _on, queueSource as _queueSource, contextClosure as _contextClosure, createRenderer as _createRenderer, register as _register, conditional as _conditional, dynamicClosure as _dynamicClosure, derivation as _derivation, source as _source, queueHydrate as _queueHydrate, notifySignal as _notifySignal, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom";
 const _x$ifBody = _contextClosure("x", "packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko", [], (_scope, x) => _data(_scope["#text/0"], x));
-const _ifBody = /* @__PURE__ */_createRenderer("<span> </span>", /* next(1), get */"D ", null, [_x$ifBody]);
+const _ifBody = _register("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_2_renderer", /* @__PURE__ */_createRenderer("<span> </span>", /* next(1), get */"D ", null, [_x$ifBody]));
 const _if$putBody = /* @__PURE__ */_conditional("#text/0", 1, (_scope, show = _scope._["show"]) => show ? _ifBody : null);
 const _show$putBody = _dynamicClosure(1, "show", [_if$putBody]);
 const _putBody = /* @__PURE__ */_createRenderer("<!>", /* replace */"%", null, [_show$putBody]);
--- a/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/html.expected/template.js
@ -1,19 +1,33 @@
-import { write as _write, pushContext as _pushContext, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, popContext as _popContext, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, pushContext as _pushContext, getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, SYMBOL_OWNER as _SYMBOL_OWNER, nextScopeId as _nextScopeId, writeHydrateScope as _writeHydrateScope, register as _register, markHydrateControlSingleNodeEnd as _markHydrateControlSingleNodeEnd, popContext as _popContext, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const show = true;
  _write("<div>");
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko", 123);
+  const _scope1_ = _nextScopeId();
+  let _ifScopeId;
+  const _ifScope = {},
+    _ifRenderer = () => {};
  if (show) {
-    const _scope = _nextScopeId();
+    const _scope2_ = _nextScopeId();
    _write("<span>");
    const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko");
-    _write(`${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</span>`);
+    _write(`${_escapeXML(x)}${_markHydrateNode(_scope2_, "#text/0")}</span>`);
+    _writeHydrateScope(_scope2_, Object.assign(_ifScope, {
+      [_SYMBOL_OWNER]: _scope1_
+    }));
+    _register(_ifRenderer, "packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_2_renderer");
+    _ifScopeId = _scope2_;
  }
+  _write(`${_markHydrateControlSingleNodeEnd(_scope1_, "#text/0", _ifScopeId)}`);
+  _writeHydrateScope(_scope1_, {
+    "#text/0!": _ifScope,
+    "#text/0(": _ifRenderer
+  });
  _popContext();
-  _write(`<button id=toggle>Toggle</button>${_markHydrateNode(_scope, "#button/1")}</div>`);
-  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show");
-  _writeHydrateScope(_scope, {
+  _write(`<button id=toggle>Toggle</button>${_markHydrateNode(_scope0_, "#button/1")}</div>`);
+  _writeHydrateCall(_scope0_, "packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show");
+  _writeHydrateScope(_scope0_, {
    "show": show
  });
 };
--- a/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-in-if/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><span>123<!M#1 #text/0></span><button id=toggle>Toggle</button><!M#0 #button/1></div><script>(M$h=[]).push((b,s)=>({0:{show:!0}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])</script>
+  <div><span>123<!M#2 #text/0></span><!M|1 #text/0 2><button id=toggle>Toggle</button><!M#0 #button/1></div><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:{show:!0},1:h={"#text/0!":j={},"#text/0(":b("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_2_renderer")},2:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])</script>


 # Render "End"
@ -10,8 +10,9 @@
    <div>
      <span>
        123
-        <!--M#1 #text/0-->
+        <!--M#2 #text/0-->
      </span>
+      <!--M|1 #text/0 2-->
      <button
        id="toggle"
      >
@ -20,7 +21,7 @@
      <!--M#0 #button/1-->
    </div>
    <script>
-      (M$h=[]).push((b,s)=&gt;({0:{show:!0}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])
+      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:{show:!0},1:h={"#text/0!":j={},"#text/0(":b("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_2_renderer")},2:j},j._=h,k),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])
    </script>
  </body>
 </html>
@ -35,9 +36,10 @@ inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/span0
 inserted #document/html0/body1/div0/span0/#text0
 inserted #document/html0/body1/div0/span0/#comment1
-inserted #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#text0
-inserted #document/html0/body1/div0/#comment2
+inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/div0/button2
+inserted #document/html0/body1/div0/button2/#text0
+inserted #document/html0/body1/div0/#comment3
 inserted #document/html0/body1/script1
 inserted #document/html0/body1/script1/#text0
 ```
--- a/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/html.expected/components/child.js
+++ b/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/html.expected/components/child.js
@ -1,8 +1,8 @@
 import { getInContext as _getInContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
-  const _scope = _nextScopeId();
+  const _scope0_ = _nextScopeId();
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko");
-  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope, "#text/0")}</div>`);
+  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope0_, "#text/0")}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/Show More
+++ b/Show More