fix: text hydration (#126)

2025-12-08 19:26:05 +00:00 · 2023-01-18 13:21:44 -05:00 · 2023-01-18 13:21:44 -05:00 · ea76ccd057
commit ea76ccd057
parent 3a7c12d909
177 changed files with 972 additions and 982 deletions
--- a/.sizes.json
+++ b/.sizes.json
@ -7,9 +7,9 @@
    {
      "name": "*",
      "total": {
-        "min": 12300,
-        "gzip": 5180,
-        "brotli": 4738
+        "min": 12304,
+        "gzip": 5179,
+        "brotli": 4751
      }
    },
    {
@ -35,17 +35,17 @@
      "user": {
        "min": 207,
        "gzip": 182,
-        "brotli": 152
+        "brotli": 153
      },
      "runtime": {
-        "min": 2635,
-        "gzip": 1333,
-        "brotli": 1191
+        "min": 2639,
+        "gzip": 1330,
+        "brotli": 1188
      },
      "total": {
-        "min": 2842,
-        "gzip": 1515,
-        "brotli": 1343
+        "min": 2846,
+        "gzip": 1512,
+        "brotli": 1341
      }
    },
    {
@ -71,16 +71,16 @@
      "user": {
        "min": 943,
        "gzip": 585,
-        "brotli": 538
+        "brotli": 537
      },
      "runtime": {
-        "min": 7966,
-        "gzip": 3606,
-        "brotli": 3279
+        "min": 7970,
+        "gzip": 3605,
+        "brotli": 3280
      },
      "total": {
-        "min": 8909,
-        "gzip": 4191,
+        "min": 8913,
+        "gzip": 4190,
        "brotli": 3817
      }
    }
--- a/packages/runtime/src/dom/hydrate.ts
+++ b/packages/runtime/src/dom/hydrate.ts
@ -96,7 +96,7 @@ export function init(runtimeId = "M" /* [a-zA-Z0-9]+ */) {
        const data = nodeValue.slice(nodeValue.indexOf(" ") + 1);

        if (token === HydrateSymbols.NODE) {
-          scope[data] = currentNode.nextSibling;
+          scope[data] = currentNode.previousSibling;
        } else if (token === HydrateSymbols.SECTION_START) {
          stack.push(currentScopeId);
          currentScopeId = scopeId;
--- 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,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _customTag from "./components/custom-tag/index.marko";
 const _renderer = ({
  x
@ -6,7 +6,6 @@ const _renderer = ({
  const _scope = _nextScopeId();
  let _thing;
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  if (x) {
    const _scope = _nextScopeId();
    _thing = {
--- 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,10 +1,9 @@
-import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 _item = [];
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  for (const a in {
    a: 1,
    b: 2
--- 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
@ -1,9 +1,8 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  x
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  _dynamicTag(x, {
    header: {
      class: "my-header",
--- 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,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = ({
  x
@ -6,12 +6,11 @@ const _renderer = ({
  const _scope = _nextScopeId();
  let _item;
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  if (x) {
    const _scope = _nextScopeId();
    _item = {
      renderBody(y) {
-        _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(y)}`);
+        _write(`${_escapeXML(y)}${_markHydrateNode(_scope, 0)}`);
      }
    };
  }
--- 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,12 @@
-import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, escapeXML as _escapeXML, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 _hello from "./components/hello/index.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const _col = [];
  const _scope = _nextScopeId();
  const _item = [];
-  _write(`${_markHydrateNode(_scope, 0)}`);
  for (const color of ["red", "blue", "green"]) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}`);
    if (color === "red") {
      const _scope = _nextScopeId();
      _item.push({
@ -32,19 +30,17 @@ const _renderer = (input, _tagVar) => {
    }
    _maybeFlush();
  }
-  _write(`${_markHydrateNode(_scope, 0)}`);
  let _i = 0;
  for (const col of [["a", "b"], ["c", "d"]]) {
    let i = _i++;
    const _scope = _nextScopeId();
    const _row = [];
-    _write(`${_markHydrateNode(_scope, 0)}`);
    for (const row of col) {
      const _scope = _nextScopeId();
      _row.push({
        row: row,
        renderBody() {
-          _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(row)}`);
+          _write(`${_escapeXML(row)}${_markHydrateNode(_scope, 0)}`);
        }
      });
      _maybeFlush();
--- 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,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, classAttr as _classAttr, write as _write, nextScopeId as _nextScopeId, dynamicTag as _dynamicTag, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
@ -6,10 +6,10 @@ const _renderer = (input, _tagVar) => {
    c,
    d
  } = input;
-  _write(`${_markHydrateNode(_scope, 0)}<div${_classAttr(["a", {
+  _write(`<div${_classAttr(["a", {
    b: c,
    d
-  }])}></div><div class="a b"></div><div class="a b c"></div>`);
+  }])}></div>${_markHydrateNode(_scope, 0)}<div class="a b"></div><div class="a b c"></div>`);
  _customTag({
    class: ["a", {
      b: c,
@ -25,7 +25,6 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
    }
  });
-  _write(`${_markHydrateNode(_scope, 1)}`);
  _dynamicTag(input.test, {
    class: ["a", {
      b: c,
--- 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 { markHydrateNode as _markHydrateNode, classAttr as _classAttr, attr as _attr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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(`${_markHydrateNode(_scope, 0)}<div${_classAttr(input.className)}${_attr("foo", 'a' + input.foo + 'b')}${_attr("bar", `a ${input.foo} b`)}></div>`);
+  _write(`<div${_classAttr(input.className)}${_attr("foo", 'a' + input.foo + 'b')}${_attr("bar", `a ${input.foo} b`)}></div>${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_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
@ -1,13 +1,13 @@
-import { markHydrateNode as _markHydrateNode, styleAttr as _styleAttr, write as _write, nextScopeId as _nextScopeId, dynamicTag as _dynamicTag, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { styleAttr as _styleAttr, 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 = ({
  color,
  test
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<div${_styleAttr({
+  _write(`<div${_styleAttr({
    color: color
-  })}></div><div style=width:100px></div><div style="color: green"></div>`);
+  })}></div>${_markHydrateNode(_scope, 0)}<div style=width:100px></div><div style="color: green"></div>`);
  _customTag({
    style: {
      color: color
@ -30,7 +30,6 @@ const _renderer = ({
      const _scope = _nextScopeId();
    }
  });
-  _write(`${_markHydrateNode(_scope, 1)}`);
  _dynamicTag(test, {
    style: {
      color: "green"
--- 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
@ -1,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, attr as _attr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { attr as _attr, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  name
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<div${_attr("foo", `Hello ${name}`)}></div>`);
+  _write(`<div${_attr("foo", `Hello ${name}`)}></div>${_markHydrateNode(_scope, 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 { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const x = 1;
  const y = x * 2;
  const z = y * 3;
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(z)}</div>`);
+  _write(`<div>${_escapeXML(z)}${_markHydrateNode(_scope, 0)}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-chain/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-chain/snapshots/hydrate.expected.md
@ -4,8 +4,8 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      6
+      <!--M#0 0-->
    </div>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-chain/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-chain/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0>6</div>
+  <div>6<!M#0 0></div>


 # Render "End"
@ -8,8 +8,8 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      6
+      <!--M#0 0-->
    </div>
  </body>
 </html>
@ -21,6 +21,6 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
 ```
--- 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
@ -1,10 +1,10 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 = ({
  onClick,
  text
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(text)}</button>`);
+  _write(`<button>${_escapeXML(text)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick");
  _writeHydrateScope(_scope, {
    2: onClick
--- 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
@ -1,12 +1,12 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, dynamicTag as _dynamicTag, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  onClick,
  renderBody
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}`);
+  _write("<button>");
  _dynamicTag(renderBody, null);
-  _write("</button>");
+  _write(`</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick");
  _writeHydrateScope(_scope, {
    7: 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,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, 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();
@ -9,7 +9,7 @@ const _renderer = (input, _tagVar) => {
    },
    renderBody() {
      const _scope = _nextScopeId();
-      _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(clickCount)}`);
+      _write(`${_escapeXML(clickCount)}${_markHydrateNode(_scope, 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,8 +1,8 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 clickCount = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button>`);
+  _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount");
  _writeHydrateScope(_scope, {
    2: clickCount
--- a/packages/translator/src/tests/fixtures/basic-component/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-component/snapshots/hydrate.expected.md
@ -4,11 +4,11 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      <button>
-        <!--M#1 1-->
        0
+        <!--M#1 1-->
      </button>
+      <!--M#1 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({1:{2:0}}),[1,"packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
@ -31,11 +31,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      <button>
-        <!--M#1 1-->
        1
+        <!--M#1 1-->
      </button>
+      <!--M#1 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({1:{2:0}}),[1,"packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
@ -46,5 +46,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "0" => "1"
+#document/html0/body1/div0/button0/#text0: "0" => "1"
 ```
--- a/packages/translator/src/tests/fixtures/basic-component/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-component/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#1 0><button><!M#1 1>0</button></div><script>(M$h=[]).push((b,s)=>({1:{2:0}}),[1,"packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])</script>
+  <div><button>0<!M#1 1></button><!M#1 0></div><script>(M$h=[]).push((b,s)=>({1:{2:0}}),[1,"packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])</script>


 # Render "End"
@ -8,11 +8,11 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      <button>
-        <!--M#1 1-->
        0
+        <!--M#1 1-->
      </button>
+      <!--M#1 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({1:{2:0}}),[1,"packages/translator/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
@ -27,10 +27,10 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#comment0
-inserted #document/html0/body1/div0/button1/#text1
+inserted #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
+inserted #document/html0/body1/div0/button0/#comment1
+inserted #document/html0/body1/div0/#comment1
 inserted #document/html0/body1/script1
 inserted #document/html0/body1/script1/#text0
 ```
--- 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
@ -3,18 +3,19 @@
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M^1-->
    The count is 
-    <!--M#1 0-->
+    <!---->
    0
+    <!--M#1 0-->
    <!--M/0 2-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -36,18 +37,19 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M^1-->
    The count is 
-    <!--M#1 0-->
+    <!---->
    1
+    <!--M#1 0-->
    <!--M/0 2-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -69,14 +71,14 @@ container.querySelector("button.toggle").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M/0 2-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -87,12 +89,13 @@ container.querySelector("button.toggle").click();

 # Mutations
 ```
-removed #document/html0/body1/#comment4 after #text
+removed #document/html0/body1/#comment4 after #comment
 inserted #document/html0/body1/#comment4
 removed #comment after #document/html0/body1/#comment4
 removed #text after #document/html0/body1/#comment4
 removed #comment after #document/html0/body1/#comment4
 removed #text after #document/html0/body1/#comment4
+removed #comment after #document/html0/body1/#comment4
 ```


@ -103,14 +106,14 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M/0 2-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -132,14 +135,14 @@ container.querySelector("button.toggle").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    The count is 2
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -164,14 +167,14 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    The count is 3
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
--- 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><!M#0 0><button class="inc"></button><!M#0 1><button class="toggle"></button><!M^1>The count is <!M#1 0>0<!M/0 2></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])</script>
+  <body><button class="inc"></button><!M#0 0><button class="toggle"></button><!M#0 1><!M^1>The count is <!>0<!M#1 0><!M/0 2></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])</script>


 # Render "End"
@ -7,18 +7,19 @@
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M^1-->
    The count is 
-    <!--M#1 0-->
+    <!---->
    0
+    <!--M#1 0-->
    <!--M/0 2-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -32,15 +33,16 @@
 inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
-inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/button1
-inserted #document/html0/body1/#comment2
-inserted #document/html0/body1/button3
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/button2
+inserted #document/html0/body1/#comment3
 inserted #document/html0/body1/#comment4
 inserted #document/html0/body1/#text5
 inserted #document/html0/body1/#comment6
 inserted #document/html0/body1/#text7
 inserted #document/html0/body1/#comment8
-inserted #document/html0/body1/script9
-inserted #document/html0/body1/script9/#text0
+inserted #document/html0/body1/#comment9
+inserted #document/html0/body1/script10
+inserted #document/html0/body1/script10/#text0
 ```
--- 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
@ -30,22 +30,18 @@ const counter = () => {
  let childRenderer;

  write(
-    `${markHydrateNode(
+    `<button class="inc"></button>${markHydrateNode(
      scopeId,
      0
-    )}<button class="inc"></button>${markHydrateNode(
-      scopeId,
-      1
-    )}<button class="toggle"></button>`
+    )}<button class="toggle"></button>${markHydrateNode(scopeId, 1)}`
  );

  if (show) {
    const childScopeId = nextScopeId();
    write(
-      `${markHydrateScopeStart(childScopeId)}The count is ${markHydrateNode(
-        childScopeId,
-        0
-      )}${count}`
+      `${markHydrateScopeStart(
+        childScopeId
+      )}The count is <!>${count}${markHydrateNode(childScopeId, 0)}`
    );
    childRenderer = register(() => {}, "ifBody");
    writeHydrateScope(childScopeId, (childScope = { [SYMBOL_OWNER]: scopeId }));
--- 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
@ -3,17 +3,17 @@
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <span>
-      <!--M#1 0-->
      0
+      <!--M#1 0-->
    </span>
    <!--M|0 2 1-->
    <script>
@ -36,17 +36,17 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <span>
-      <!--M#1 0-->
      1
+      <!--M#1 0-->
    </span>
    <!--M|0 2 1-->
    <script>
@ -58,7 +58,7 @@ container.querySelector("button.inc").click();

 # Mutations
 ```
-#document/html0/body1/span4/#text1: "0" => "1"
+#document/html0/body1/span4/#text0: "0" => "1"
 ```


@ -69,14 +69,14 @@ container.querySelector("button.toggle").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M|0 2 1-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -100,14 +100,14 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <!--M|0 2 1-->
    <script>
      (M$h=[]).push((b,s,h,j,k)=&gt;(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])
@ -129,14 +129,14 @@ container.querySelector("button.toggle").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <span>
      2
    </span>
@ -162,14 +162,14 @@ container.querySelector("button.inc").click();
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <span>
      3
    </span>
--- 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><!M#0 0><button class="inc"></button><!M#0 1><button class="toggle"></button><span><!M#1 0>0</span><!M|0 2 1></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])</script>
+  <body><button class="inc"></button><!M#0 0><button class="toggle"></button><!M#0 1><span>0<!M#1 0></span><!M|0 2 1></body><script>(M$h=[]).push((b,s,h,j,k)=>(k={0:h={3:j={},4:b("ifBody"),8:!0,9:0},1:j},j._=h,k),[0,"counter",])</script>


 # Render "End"
@ -7,17 +7,17 @@
 <html>
  <head />
  <body>
-    <!--M#0 0-->
    <button
      class="inc"
    />
-    <!--M#0 1-->
+    <!--M#0 0-->
    <button
      class="toggle"
    />
+    <!--M#0 1-->
    <span>
-      <!--M#1 0-->
      0
+      <!--M#1 0-->
    </span>
    <!--M|0 2 1-->
    <script>
@ -32,13 +32,13 @@
 inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
-inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/button1
-inserted #document/html0/body1/#comment2
-inserted #document/html0/body1/button3
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/button2
+inserted #document/html0/body1/#comment3
 inserted #document/html0/body1/span4
-inserted #document/html0/body1/span4/#comment0
-inserted #document/html0/body1/span4/#text1
+inserted #document/html0/body1/span4/#text0
+inserted #document/html0/body1/span4/#comment1
 inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/script6
 inserted #document/html0/body1/script6/#text0
--- a/packages/translator/src/tests/fixtures/basic-conditional-counter/server.ts
+++ b/packages/translator/src/tests/fixtures/basic-conditional-counter/server.ts
@ -30,18 +30,15 @@ const counter = () => {
  let childScopeId!: number;

  write(
-    `${markHydrateNode(
+    `<button class="inc"></button>${markHydrateNode(
      scopeId,
      0
-    )}<button class="inc"></button>${markHydrateNode(
-      scopeId,
-      1
-    )}<button class="toggle"></button>`
+    )}<button class="toggle"></button>${markHydrateNode(scopeId, 1)}`
  );

  if (show) {
    childScopeId = nextScopeId();
-    write(`<span>${markHydrateNode(childScopeId, 0)}${count}</span>`);
+    write(`<span>${count}${markHydrateNode(childScopeId, 0)}</span>`);
    childRenderer = register(() => {}, "ifBody");
    writeHydrateScope(childScopeId, (childScope = { [SYMBOL_OWNER]: scopeId }));
  }
--- 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,12 +1,11 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 a = 0;
  const b = 0;
-  _write(`${_markHydrateNode(_scope, 0)}`);
  if (true) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(a + b)}`);
+    _write(`${_escapeXML(a + b)}${_markHydrateNode(_scope, 0)}`);
  }
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/hydrate.expected.md
@ -1,11 +1,10 @@
 # Render undefined
 ```html
-<!--M#0 0-->
-<!--M#1 0-->
 <html>
  <head />
  <body>
    0
+    <!--M#1 0-->
  </body>
 </html>
 ```
--- a/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-converge-in-if/snapshots/ssr.expected.md
@ -1,25 +1,23 @@
 # Write
-  <!M#0 0><!M#1 0>0
+  0<!M#1 0>


 # Render "End"
 ```html
-<!--M#0 0-->
-<!--M#1 0-->
 <html>
  <head />
  <body>
    0
+    <!--M#1 0-->
  </body>
 </html>
 ```

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/#comment1
-inserted #document/html2
-inserted #document/html2/head0
-inserted #document/html2/body1
-inserted #document/html2/body1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/#text0
+inserted #document/html0/body1/#comment1
 ```
--- 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,8 +1,8 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 clickCount = 0;
-  _write(`<div>${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button></div>`);
+  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount");
  _writeHydrateScope(_scope, {
    2: clickCount
--- a/packages/translator/src/tests/fixtures/basic-counter/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-counter/snapshots/hydrate.expected.md
@ -4,11 +4,11 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        0
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
@ -31,11 +31,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        1
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
@ -46,7 +46,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "0" => "1"
+#document/html0/body1/div0/button0/#text0: "0" => "1"
 ```


@ -58,11 +58,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        2
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
@ -73,7 +73,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "1" => "2"
+#document/html0/body1/div0/button0/#text0: "1" => "2"
 ```


@ -85,11 +85,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        3
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
@ -100,5 +100,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "2" => "3"
+#document/html0/body1/div0/button0/#text0: "2" => "3"
 ```
--- a/packages/translator/src/tests/fixtures/basic-counter/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-counter/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0><button><!M#0 1>0</button></div><script>(M$h=[]).push((b,s)=>({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])</script>
+  <div><button>0<!M#0 1></button><!M#0 0></div><script>(M$h=[]).push((b,s)=>({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])</script>


 # Render "End"
@ -8,11 +8,11 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        0
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
@ -27,10 +27,10 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#comment0
-inserted #document/html0/body1/div0/button1/#text1
+inserted #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
+inserted #document/html0/body1/div0/button0/#comment1
+inserted #document/html0/body1/div0/#comment1
 inserted #document/html0/body1/script1
 inserted #document/html0/body1/script1/#text0
 ```
--- 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
@ -1,9 +1,8 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  tagName
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  _dynamicTag(tagName, {
    class: ["a", "b"]
  }, () => _write("Hello World"));
--- a/packages/translator/src/tests/fixtures/basic-dynamic-native-tag/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-dynamic-native-tag/snapshots/ssr.expected.md
@ -1,10 +1,9 @@
 # Write
-  <!M#0 0><h1 class="a b">Hello World</h1>
+  <h1 class="a b">Hello World</h1>


 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
@ -19,10 +18,9 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/h10
-inserted #document/html1/body1/h10/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/h10
+inserted #document/html0/body1/h10/#text0
 ```
--- 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
@ -5,10 +5,10 @@ const _renderer = (input, _tagVar) => {
    text: "hi"
  };
  const show = true;
-  _write(`${_markHydrateNode(_scope, 0)}<button>hide</button>${_markHydrateNode(_scope, 1)}`);
+  _write(`<button>hide</button>${_markHydrateNode(_scope, 0)}`);
  if (show) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(message.text)}`);
+    _write(`${_escapeXML(message.text)}${_markHydrateNode(_scope, 0)}`);
  }
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-execution-order/template.marko_0");
 };
--- 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
@ -1,10 +1,10 @@
 export const v = 123;
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  value
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(value)}</div>`);
+  _write(`<div>${_escapeXML(value)}${_markHydrateNode(_scope, 0)}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/basic-export/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-export/snapshots/hydrate.expected.md
@ -4,8 +4,8 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      123
+      <!--M#0 0-->
    </div>
  </body>
 </html>
--- a/packages/translator/src/tests/fixtures/basic-export/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-export/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0>123</div>
+  <div>123<!M#0 0></div>


 # Render "End"
@ -8,8 +8,8 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      123
+      <!--M#0 0-->
    </div>
  </body>
 </html>
@ -21,6 +21,6 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
 ```
--- 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,8 +1,8 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 count = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(count)}</button>`);
+  _write(`<button>${_escapeXML(count)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count");
  _writeHydrateScope(_scope, {
    2: count
--- a/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/hydrate.expected.md
@ -1,13 +1,13 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
    </script>
@ -25,14 +25,14 @@
 container.querySelector("button").click();

 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      1
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
    </script>
@ -42,7 +42,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "0" => "1"
 ```


@ -50,14 +50,14 @@ container.querySelector("button").click();
 container.querySelector("button").click();

 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      2
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
    </script>
@ -67,7 +67,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "1" => "2"
+#document/html0/body1/button0/#text0: "1" => "2"
 ```


@ -75,14 +75,14 @@ container.querySelector("button").click();
 container.querySelector("button").click();

 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      3
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
    </script>
@ -92,5 +92,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "2" => "3"
+#document/html0/body1/button0/#text0: "2" => "3"
 ```
--- a/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-fn-with-block/snapshots/ssr.expected.md
@ -1,17 +1,17 @@
 # Write
-  <!M#0 0><button><!M#0 1>0</button><script>(M$h=[]).push((b,s)=>({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])</script>
+  <button>0<!M#0 1></button><!M#0 0><script>(M$h=[]).push((b,s)=>({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])</script>


 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
    </script>
@ -21,13 +21,13 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/button0
-inserted #document/html1/body1/button0/#comment0
-inserted #document/html1/body1/button0/#text1
-inserted #document/html1/body1/script1
-inserted #document/html1/body1/script1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/button0/#text0
+inserted #document/html0/body1/button0/#comment1
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
--- 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,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 a = [0];
  const b = 1;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(a.join(""))}</button>`);
+  _write(`<button>${_escapeXML(a.join(""))}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b");
  _writeHydrateScope(_scope, {
    2: a,
--- a/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/hydrate.expected.md
@ -1,13 +1,13 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:[0],3:1}}),[0,"packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
    </script>
@ -25,14 +25,14 @@
 container.querySelector("button").click();

 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      1
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:[0],3:1}}),[0,"packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
    </script>
@ -42,5 +42,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "0" => "1"
 ```
--- a/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-handler-multi-ref-nested/snapshots/ssr.expected.md
@ -1,17 +1,17 @@
 # Write
-  <!M#0 0><button><!M#0 1>0</button><script>(M$h=[]).push((b,s)=>({0:{2:[0],3:1}}),[0,"packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])</script>
+  <button>0<!M#0 1></button><!M#0 0><script>(M$h=[]).push((b,s)=>({0:{2:[0],3:1}}),[0,"packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])</script>


 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{2:[0],3:1}}),[0,"packages/translator/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
    </script>
@ -21,13 +21,13 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/button0
-inserted #document/html1/body1/button0/#comment0
-inserted #document/html1/body1/button0/#text1
-inserted #document/html1/body1/script1
-inserted #document/html1/body1/script1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/button0/#text0
+inserted #document/html0/body1/button0/#comment1
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
--- 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,8 +1,8 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 data = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(data)}</button>`);
+  _write(`<button>${_escapeXML(data)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0");
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/hydrate.expected.md
@ -1,13 +1,13 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
    </script>
@ -25,14 +25,14 @@
 container.querySelector("button").click();

 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      1
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
    </script>
@ -42,5 +42,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "0" => "1"
 ```
--- a/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-handler-refless/snapshots/ssr.expected.md
@ -1,17 +1,17 @@
 # Write
-  <!M#0 0><button><!M#0 1>0</button><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])</script>
+  <button>0<!M#0 1></button><!M#0 0><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])</script>


 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
  <head />
  <body>
    <button>
-      <!--M#0 1-->
      0
+      <!--M#0 1-->
    </button>
+    <!--M#0 0-->
    <script>
      (M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
    </script>
@ -21,13 +21,13 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/button0
-inserted #document/html1/body1/button0/#comment0
-inserted #document/html1/body1/button0/#text1
-inserted #document/html1/body1/script1
-inserted #document/html1/body1/script1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/button0/#text0
+inserted #document/html0/body1/button0/#comment1
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
--- 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,18 +1,18 @@
-import { markHydrateNode as _markHydrateNode, write as _write, attr as _attr, escapeXML as _escapeXML, 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, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, 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();
-  _write(`${_markHydrateNode(_scope, 0)}<ul>`);
+  _write("<ul>");
  let _i = 0;
  for (const comment of comments) {
    let i = _i++;
    const _scope = _nextScopeId();
    const id = `${path}-${i}`;
    const open = true;
-    _write(`${_markHydrateNode(_scope, 0)}<li${_attr("id", id)}${_attr("hidden", !open)}><span>${_markHydrateNode(_scope, 1)}${_escapeXML(comment.text)}</span>${_markHydrateNode(_scope, 2)}<button>${_markHydrateNode(_scope, 3)}${_escapeXML(open ? "[-]" : "[+]")}</button>${_markHydrateNode(_scope, 4)}`);
+    _write(`<li${_attr("id", id)}${_attr("hidden", !open)}><span>${_escapeXML(comment.text)}${_markHydrateNode(_scope, 1)}</span><button>${_escapeXML(open ? "[-]" : "[+]")}${_markHydrateNode(_scope, 3)}</button>${_markHydrateNode(_scope, 2)}`);
    if (comment.comments) {
      const _scope = _nextScopeId();
      _comments({
@ -23,14 +23,14 @@ const _renderer = ({
        }
      });
    }
-    _write("</li>");
+    _write(`</li>${_markHydrateNode(_scope, 0)}`);
    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-inert-collapsible-tree/components/comments.marko_1_open");
    _writeHydrateScope(_scope, {
      13: open
    });
    _maybeFlush();
  }
-  _write("</ul>");
+  _write(`</ul>${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- 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,63 +1,60 @@
 # Write
-  <!M#1 0><ul><!M#2 0><li id=c-0><span><!M#2 1>Hello World</span><!M#2 2><button><!M#2 3>[-]</button><!M#2 4><!M#4 0><ul><!M#5 0><li id=c-0-0><span><!M#5 1>testing 123</span><!M#5 2><button><!M#5 3>[-]</button><!M#5 4></li></ul></li><!M#6 0><li id=c-1><span><!M#6 1>Goodbye World</span><!M#6 2><button><!M#6 3>[-]</button><!M#6 4></li></ul><script>(M$h=[]).push((b,s)=>({2:{13:!0},5:{13:!0},6:{13:!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 1></span><button>[-]<!M#2 3></button><!M#2 2><ul><li id=c-0-0><span>testing 123<!M#5 1></span><button>[-]<!M#5 3></button><!M#5 2></li><!M#5 0></ul><!M#4 0></li><!M#2 0><li id=c-1><span>Goodbye World<!M#6 1></span><button>[-]<!M#6 3></button><!M#6 2></li><!M#6 0></ul><!M#1 0><script>(M$h=[]).push((b,s)=>({2:{13:!0},5:{13:!0},6:{13:!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>


 # Render "End"
 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <ul>
-      <!--M#2 0-->
      <li
        id="c-0"
      >
        <span>
-          <!--M#2 1-->
          Hello World
+          <!--M#2 1-->
        </span>
-        <!--M#2 2-->
        <button>
-          <!--M#2 3-->
          [-]
+          <!--M#2 3-->
        </button>
-        <!--M#2 4-->
-        <!--M#4 0-->
+        <!--M#2 2-->
        <ul>
-          <!--M#5 0-->
          <li
            id="c-0-0"
          >
            <span>
-              <!--M#5 1-->
              testing 123
+              <!--M#5 1-->
            </span>
-            <!--M#5 2-->
            <button>
-              <!--M#5 3-->
              [-]
+              <!--M#5 3-->
            </button>
-            <!--M#5 4-->
+            <!--M#5 2-->
          </li>
+          <!--M#5 0-->
        </ul>
+        <!--M#4 0-->
      </li>
-      <!--M#6 0-->
+      <!--M#2 0-->
      <li
        id="c-1"
      >
        <span>
-          <!--M#6 1-->
          Goodbye World
+          <!--M#6 1-->
        </span>
-        <!--M#6 2-->
        <button>
-          <!--M#6 3-->
          [-]
+          <!--M#6 3-->
        </button>
-        <!--M#6 4-->
+        <!--M#6 2-->
      </li>
+      <!--M#6 0-->
    </ul>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({2:{13:!0},5:{13:!0},6:{13:!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>
@ -67,43 +64,40 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/ul0
-inserted #document/html1/body1/ul0/#comment0
-inserted #document/html1/body1/ul0/li1
-inserted #document/html1/body1/ul0/li1/span0
-inserted #document/html1/body1/ul0/li1/span0/#comment0
-inserted #document/html1/body1/ul0/li1/span0/#text1
-inserted #document/html1/body1/ul0/li1/#comment1
-inserted #document/html1/body1/ul0/li1/button2
-inserted #document/html1/body1/ul0/li1/button2/#comment0
-inserted #document/html1/body1/ul0/li1/button2/#text1
-inserted #document/html1/body1/ul0/li1/#comment3
-inserted #document/html1/body1/ul0/li1/#comment4
-inserted #document/html1/body1/ul0/li1/ul5
-inserted #document/html1/body1/ul0/li1/ul5/#comment0
-inserted #document/html1/body1/ul0/li1/ul5/li1
-inserted #document/html1/body1/ul0/li1/ul5/li1/span0
-inserted #document/html1/body1/ul0/li1/ul5/li1/span0/#comment0
-inserted #document/html1/body1/ul0/li1/ul5/li1/span0/#text1
-inserted #document/html1/body1/ul0/li1/ul5/li1/#comment1
-inserted #document/html1/body1/ul0/li1/ul5/li1/button2
-inserted #document/html1/body1/ul0/li1/ul5/li1/button2/#comment0
-inserted #document/html1/body1/ul0/li1/ul5/li1/button2/#text1
-inserted #document/html1/body1/ul0/li1/ul5/li1/#comment3
-inserted #document/html1/body1/ul0/#comment2
-inserted #document/html1/body1/ul0/li3
-inserted #document/html1/body1/ul0/li3/span0
-inserted #document/html1/body1/ul0/li3/span0/#comment0
-inserted #document/html1/body1/ul0/li3/span0/#text1
-inserted #document/html1/body1/ul0/li3/#comment1
-inserted #document/html1/body1/ul0/li3/button2
-inserted #document/html1/body1/ul0/li3/button2/#comment0
-inserted #document/html1/body1/ul0/li3/button2/#text1
-inserted #document/html1/body1/ul0/li3/#comment3
-inserted #document/html1/body1/script1
-inserted #document/html1/body1/script1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/ul0
+inserted #document/html0/body1/ul0/li0
+inserted #document/html0/body1/ul0/li0/span0
+inserted #document/html0/body1/ul0/li0/span0/#text0
+inserted #document/html0/body1/ul0/li0/span0/#comment1
+inserted #document/html0/body1/ul0/li0/button1
+inserted #document/html0/body1/ul0/li0/button1/#text0
+inserted #document/html0/body1/ul0/li0/button1/#comment1
+inserted #document/html0/body1/ul0/li0/#comment2
+inserted #document/html0/body1/ul0/li0/ul3
+inserted #document/html0/body1/ul0/li0/ul3/li0
+inserted #document/html0/body1/ul0/li0/ul3/li0/span0
+inserted #document/html0/body1/ul0/li0/ul3/li0/span0/#text0
+inserted #document/html0/body1/ul0/li0/ul3/li0/span0/#comment1
+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/#comment1
+inserted #document/html0/body1/ul0/li0/#comment4
+inserted #document/html0/body1/ul0/#comment1
+inserted #document/html0/body1/ul0/li2
+inserted #document/html0/body1/ul0/li2/span0
+inserted #document/html0/body1/ul0/li2/span0/#text0
+inserted #document/html0/body1/ul0/li2/span0/#comment1
+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/#comment3
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
--- 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
@ -1,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  renderBody
 }, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`<body>${_markHydrateNode(_scope, 0)}`);
+  _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
@ -1,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _layout from "./components/layout.marko";
 const _renderer = ({
  name
@ -7,7 +7,7 @@ const _renderer = ({
  _layout({
    renderBody() {
      const _scope = _nextScopeId();
-      _write(`<h1>Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(name)}</h1>`);
+      _write(`<h1>Hello <!>${_escapeXML(name)}${_markHydrateNode(_scope, 0)}</h1>`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/basic-layout/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-layout/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <body><!M#1 0><h1>Hello <!M#2 0>World</h1></body>
+  <body><h1>Hello <!>World<!M#2 0></h1></body>


 # Render "End"
@ -7,11 +7,11 @@
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <h1>
      Hello 
-      <!--M#2 0-->
+      <!---->
      World
+      <!--M#2 0-->
    </h1>
  </body>
 </html>
@ -22,9 +22,9 @@
 inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
-inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/h11
-inserted #document/html0/body1/h11/#text0
-inserted #document/html0/body1/h11/#comment1
-inserted #document/html0/body1/h11/#text2
+inserted #document/html0/body1/h10
+inserted #document/html0/body1/h10/#text0
+inserted #document/html0/body1/h10/#comment1
+inserted #document/html0/body1/h10/#text2
+inserted #document/html0/body1/h10/#comment3
 ```
--- 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,11 +1,10 @@
-import { markHydrateNode as _markHydrateNode, write as _write, attr as _attr, escapeXML as _escapeXML, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 selected = 0;
-  _write(`${_markHydrateNode(_scope, 0)}`);
  for (const num of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_markHydrateNode(_scope, 1)}${_escapeXML(num)}</button>`);
+    _write(`<button${_attr("data-selected", selected === num)}${_attr("data-multiple", num % selected === 0)}>${_escapeXML(num)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-nested-scope-for/template.marko_1_num");
    _writeHydrateScope(_scope, {
      2: num
--- 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,18 +1,18 @@
-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 { 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";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const clickCount = 0;
-  _write(`<div>${_markHydrateNode(_scope, 0)}`);
+  _write("<div>");
  if (clickCount < 3) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button>`);
+    _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
    _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-nested-scope-if/template.marko_1_clickCount");
    _writeHydrateScope(_scope, {
      6: clickCount
    });
  } else {
    const _scope = _nextScopeId();
-    _write(`<span>The button was clicked ${_markHydrateNode(_scope, 0)}${_escapeXML(clickCount)} times.</span>`);
+    _write(`<span>The button was clicked <!>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 0)} times.</span>`);
  }
  _write("</div>");
 };
--- 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,15 +1,15 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, 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, 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 id = 0;
  const items = [];
-  _write(`<div>${_markHydrateNode(_scope, 0)}`);
+  _write("<div>");
  for (const item of items) {
    const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(item)}`);
+    _write(`${_escapeXML(item)}${_markHydrateNode(_scope, 0)}`);
    _maybeFlush();
  }
-  _write(`${_markHydrateNode(_scope, 7)}<button id=add>Add</button>${_markHydrateNode(_scope, 8)}<button id=remove>Remove</button></div>`);
+  _write(`<button id=add>Add</button>${_markHydrateNode(_scope, 7)}<button id=remove>Remove</button>${_markHydrateNode(_scope, 8)}</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, {
--- 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,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 clickCount = 0;
  const doubleCount = clickCount * 2;
-  _write(`<div>${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(doubleCount)}</button></div>`);
+  _write(`<div><button>${_escapeXML(doubleCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-scriptlet/template.marko_0_clickCount");
  _writeHydrateScope(_scope, {
    2: 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,15 +1,15 @@
-import { markHydrateNode as _markHydrateNode, attr as _attr, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 open = true;
  const list = [1, 2, 3];
-  _write(`${_markHydrateNode(_scope, 0)}<ul${_attr("hidden", !open)}>`);
+  _write(`<ul${_attr("hidden", !open)}>`);
  for (const x of list) {
    const _scope = _nextScopeId();
-    _write(`<li>${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</li>`);
+    _write(`<li>${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</li>`);
    _maybeFlush();
  }
-  _write(`</ul>${_markHydrateNode(_scope, 7)}<button id=toggle>Toggle</button>${_markHydrateNode(_scope, 8)}<button id=reverse>Reverse</button>`);
+  _write(`</ul>${_markHydrateNode(_scope, 0)}<button id=toggle>Toggle</button>${_markHydrateNode(_scope, 7)}<button id=reverse>Reverse</button>${_markHydrateNode(_scope, 8)}`);
  _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, {
--- 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,13 +1,13 @@
-import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const show = true;
-  _write(`<div>${_markHydrateNode(_scope, 0)}`);
+  _write("<div>");
  if (show) {
    const _scope = _nextScopeId();
    _write("Hello!");
  }
-  _write(`${_markHydrateNode(_scope, 6)}<button>Toggle</button></div>`);
+  _write(`<button>Toggle</button>${_markHydrateNode(_scope, 6)}</div>`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-toggle-show/template.marko_0_show");
  _writeHydrateScope(_scope, {
    7: show
--- 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,10 +1,10 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 unused_1 = 123;
  const unused_2 = 456;
  const clickCount = 0;
-  _write(`<div>${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button></div>`);
+  _write(`<div><button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount");
  _writeHydrateScope(_scope, {
    4: clickCount
--- a/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/hydrate.expected.md
@ -4,11 +4,11 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        0
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])
@ -31,11 +31,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        1
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])
@ -46,7 +46,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "0" => "1"
+#document/html0/body1/div0/button0/#text0: "0" => "1"
 ```


@ -58,11 +58,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        2
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])
@ -73,7 +73,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "1" => "2"
+#document/html0/body1/div0/button0/#text0: "1" => "2"
 ```


@ -85,11 +85,11 @@ container.querySelector("button").click();
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        3
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])
@ -100,5 +100,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/div0/button1/#text1: "2" => "3"
+#document/html0/body1/div0/button0/#text0: "2" => "3"
 ```
--- a/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/basic-unused-ref/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0><button><!M#0 1>0</button></div><script>(M$h=[]).push((b,s)=>({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])</script>
+  <div><button>0<!M#0 1></button><!M#0 0></div><script>(M$h=[]).push((b,s)=>({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])</script>


 # Render "End"
@ -8,11 +8,11 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <button>
-        <!--M#0 1-->
        0
+        <!--M#0 1-->
      </button>
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/basic-unused-ref/template.marko_0_clickCount",])
@ -27,10 +27,10 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#comment0
-inserted #document/html0/body1/div0/button1/#text1
+inserted #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
+inserted #document/html0/body1/div0/button0/#comment1
+inserted #document/html0/body1/div0/#comment1
 inserted #document/html0/body1/script1
 inserted #document/html0/body1/script1/#text0
 ```
--- 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
@ -3,10 +3,10 @@ const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const show = true;
  const message = "hi";
-  _write(`${_markHydrateNode(_scope, 0)}<button></button>${_markHydrateNode(_scope, 1)}`);
+  _write(`<button></button>${_markHydrateNode(_scope, 0)}`);
  if (show) {
    const _scope = _nextScopeId();
-    _write(`<span>${_markHydrateNode(_scope, 0)}${_escapeXML(message)}</span>`);
+    _write(`<span>${_escapeXML(message)}${_markHydrateNode(_scope, 0)}</span>`);
  }
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/batched-updates-cleanup/template.marko_0_show");
  _writeHydrateScope(_scope, {
--- 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,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 a = 0;
  const b = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(a + b)}</button>`);
+  _write(`<button>${_escapeXML(a + b)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/batched-updates/template.marko_0_a_b");
  _writeHydrateScope(_scope, {
    2: a,
--- a/packages/translator/src/tests/fixtures/body-content/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/body-content/snapshots/hydrate.expected.md
@ -3,11 +3,11 @@
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <button>
-      <!--M#2 0-->
      0
+      <!--M#2 0-->
    </button>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])
    </script>
@ -28,11 +28,11 @@ container.querySelector("button").click();
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <button>
-      <!--M#2 0-->
      1
+      <!--M#2 0-->
    </button>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])
    </script>
@ -42,7 +42,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/button1/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "0" => "1"
 ```


@ -53,11 +53,11 @@ container.querySelector("button").click();
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <button>
-      <!--M#2 0-->
      2
+      <!--M#2 0-->
    </button>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])
    </script>
@ -67,7 +67,7 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/button1/#text1: "1" => "2"
+#document/html0/body1/button0/#text0: "1" => "2"
 ```


@ -78,11 +78,11 @@ container.querySelector("button").click();
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <button>
-      <!--M#2 0-->
      3
+      <!--M#2 0-->
    </button>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])
    </script>
@ -92,5 +92,5 @@ container.querySelector("button").click();

 # Mutations
 ```
-#document/html0/body1/button1/#text1: "2" => "3"
+#document/html0/body1/button0/#text0: "2" => "3"
 ```
--- a/packages/translator/src/tests/fixtures/body-content/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/body-content/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <body><!M#1 0><button><!M#2 0>0</button></body><script>(M$h=[]).push((b,s,h)=>({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])</script>
+  <body><button>0<!M#2 0></button><!M#1 0></body><script>(M$h=[]).push((b,s,h)=>({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])</script>


 # Render "End"
@ -7,11 +7,11 @@
 <html>
  <head />
  <body>
-    <!--M#1 0-->
    <button>
-      <!--M#2 0-->
      0
+      <!--M#2 0-->
    </button>
+    <!--M#1 0-->
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={1:0},1:{7:b("clickHandler",h)},2:{_:h}}),[2,"subscribe_clickCount$renderBody",1,"FancyButton$onclick_hydrate",])
    </script>
@ -24,10 +24,10 @@
 inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
-inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/button1
-inserted #document/html0/body1/button1/#comment0
-inserted #document/html0/body1/button1/#text1
+inserted #document/html0/body1/button0
+inserted #document/html0/body1/button0/#text0
+inserted #document/html0/body1/button0/#comment1
+inserted #document/html0/body1/#comment1
 inserted #document/html0/body1/script2
 inserted #document/html0/body1/script2/#text0
 ```
--- a/packages/translator/src/tests/fixtures/body-content/server.ts
+++ b/packages/translator/src/tests/fixtures/body-content/server.ts
@ -27,7 +27,7 @@ const counter = () => {
  FancyButton({
    renderBody() {
      const bodyScopeId = nextScopeId();
-      write(`${markHydrateNode(bodyScopeId, 0)}${count}`);
+      write(`${count}${markHydrateNode(bodyScopeId, 0)}`);
      writeHydrateScope(bodyScopeId, { _: scope });
      writeHydrateCall(bodyScopeId, "subscribe_clickCount$renderBody");
    },
@ -53,11 +53,11 @@ const FancyButton = ({
 }) => {
  const scopeId = nextScopeId();

-  write(`${markHydrateNode(scopeId, 0)}<button>`);
+  write(`<button>`);

  renderBody();

-  write(`</button>`);
+  write(`</button>${markHydrateNode(scopeId, 0)}`);

  // eslint-disable-next-line no-sparse-arrays
  writeHydrateScope(scopeId, { 7: onClick });
--- 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
@ -1,10 +1,10 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
  value
 }, _tagVar) => {
  const _scope = _nextScopeId();
  const dummy = {};
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML((dummy, value))}</div>`);
+  _write(`<div>${_escapeXML((dummy, value))}${_markHydrateNode(_scope, 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
@ -9,7 +9,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
    }
  });
-  _write(`${_markHydrateNode(_scope, 0)}<button></button>`);
+  _write(`<button></button>${_markHydrateNode(_scope, 0)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count");
  _writeHydrateScope(_scope, {
    1: count
--- a/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/component-attrs-intersection/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#1 0>0</div><!M#0 0><button></button><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count",])</script>
+  <div>0<!M#1 0></div><button></button><!M#0 0><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count",])</script>


 # Render "End"
@ -8,11 +8,11 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      0
+      <!--M#1 0-->
    </div>
-    <!--M#0 0-->
    <button />
+    <!--M#0 0-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/component-attrs-intersection/template.marko_0_count",])
    </script>
@ -26,10 +26,10 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
-inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/button2
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/button1
+inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/script3
 inserted #document/html0/body1/script3/#text0
 ```
--- 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 { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const x = 1;
  const y = 1;
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</div>${_markHydrateNode(_scope, 1)}${_escapeXML(y)}`);
+  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</div>${_escapeXML(y)}${_markHydrateNode(_scope, 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, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
  _write("<div>");
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-derivation/template.marko");
  const y = x;
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(y)}</div>`);
+  _write(`${_escapeXML(y)}${_markHydrateNode(_scope, 0)}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- 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><!M#1 0>123</div>
+  <div>123<!M#1 0></div>


 # Render "End"
@ -8,8 +8,8 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      123
+      <!--M#1 0-->
    </div>
  </body>
 </html>
@ -21,6 +21,6 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
 ```
--- 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, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
  _write("<div><span>");
  const {
    x
  } = _getInContext("$");
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</span></div>`);
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</span></div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-from-global/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-from-global/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><span><!M#0 0>1</span></div>
+  <div><span>1<!M#0 0></span></div>


 # Render "End"
@ -9,8 +9,8 @@
  <body>
    <div>
      <span>
-        <!--M#0 0-->
        1
+        <!--M#0 0-->
      </span>
    </div>
  </body>
@ -24,6 +24,6 @@ inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/span0
-inserted #document/html0/body1/div0/span0/#comment0
-inserted #document/html0/body1/div0/span0/#text1
+inserted #document/html0/body1/div0/span0/#text0
+inserted #document/html0/body1/div0/span0/#comment1
 ```
--- 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,7 +1,7 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
-  _write(`<set value=hello>${_markHydrateNode(_scope, 0)}`);
+  _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,5 +1,5 @@
 import Other from "./other.marko";
-import { write as _write, getInContext as _getInContext, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
  Other({
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
      _write("<span>");
      const message = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-relative-path/other.marko");
-      _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(message)}</span>`);
+      _write(`${_escapeXML(message)}${_markHydrateNode(_scope, 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,11 @@
-import { write as _write, pushContext as _pushContext, getInContext as _getInContext, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, popContext as _popContext, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  _write("<div>");
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-from-self/template.marko", 1);
  _write("<span>");
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-self/template.marko");
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</span>`);
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, 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><!M#0 0>1</span></div>
+  <div><span>1<!M#0 0></span></div>


 # Render "End"
@ -9,8 +9,8 @@
  <body>
    <div>
      <span>
-        <!--M#0 0-->
        1
+        <!--M#0 0-->
      </span>
    </div>
  </body>
@ -24,6 +24,6 @@ inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/span0
-inserted #document/html0/body1/div0/span0/#comment0
-inserted #document/html0/body1/div0/span0/#text1
+inserted #document/html0/body1/div0/span0/#text0
+inserted #document/html0/body1/div0/span0/#comment1
 ```
--- 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,8 +1,7 @@
-import { pushContext as _pushContext, markHydrateNode as _markHydrateNode, write as _write, 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, popContext as _popContext, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/components/other.marko", "Hello");
-  _write(`${_markHydrateNode(_scope, 0)}`);
  _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,4 +1,4 @@
-import { write as _write, getInContext as _getInContext, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
      _write("<span>");
      const message = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/components/other.marko");
-      _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(message)}</span>`);
+      _write(`${_escapeXML(message)}${_markHydrateNode(_scope, 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,16 +1,15 @@
 # Write
-  <!M#1 0><span><!M#2 0>Hello</span>
+  <span>Hello<!M#2 0></span>


 # Render "End"
 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <span>
-      <!--M#2 0-->
      Hello
+      <!--M#2 0-->
    </span>
  </body>
 </html>
@ -18,11 +17,10 @@

 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/span0
-inserted #document/html1/body1/span0/#comment0
-inserted #document/html1/body1/span0/#text1
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/span0
+inserted #document/html0/body1/span0/#text0
+inserted #document/html0/body1/span0/#comment1
 ```
--- 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,18 +1,17 @@
-import { write as _write, pushContext as _pushContext, markHydrateNode as _markHydrateNode, getInContext as _getInContext, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, popContext as _popContext, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
  const show = true;
  _write("<div>");
  _pushContext("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko", 123);
-  _write(`${_markHydrateNode(_scope, 0)}`);
  if (show) {
    const _scope = _nextScopeId();
    _write("<span>");
    const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko");
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</span>`);
+    _write(`${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</span>`);
  }
  _popContext();
-  _write(`${_markHydrateNode(_scope, 2)}<button id=toggle>Toggle</button></div>`);
+  _write(`<button id=toggle>Toggle</button>${_markHydrateNode(_scope, 2)}</div>`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show");
  _writeHydrateScope(_scope, {
    3: 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><!M#0 0><span><!M#1 0>123</span><!M#0 2><button id=toggle>Toggle</button></div><script>(M$h=[]).push((b,s)=>({0:{3:!0}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])</script>
+  <div><span>123<!M#1 0></span><button id=toggle>Toggle</button><!M#0 2></div><script>(M$h=[]).push((b,s)=>({0:{3:!0}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])</script>


 # Render "End"
@ -8,17 +8,16 @@
  <head />
  <body>
    <div>
-      <!--M#0 0-->
      <span>
-        <!--M#1 0-->
        123
+        <!--M#1 0-->
      </span>
-      <!--M#0 2-->
      <button
        id="toggle"
      >
        Toggle
      </button>
+      <!--M#0 2-->
    </div>
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{3:!0}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-in-if/template.marko_0_show",])
@ -33,13 +32,12 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/span1
-inserted #document/html0/body1/div0/span1/#comment0
-inserted #document/html0/body1/div0/span1/#text1
+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/button3
-inserted #document/html0/body1/div0/button3/#text0
 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, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko");
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</div>`);
+  _write(`<div>${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/html.expected/template.js
@ -1,4 +1,4 @@
-import { pushContext as _pushContext, nextScopeId as _nextScopeId, popContext as _popContext, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { pushContext as _pushContext, nextScopeId as _nextScopeId, popContext as _popContext, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _child from "./components/child.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
@ -10,7 +10,7 @@ const _renderer = (input, _tagVar) => {
    }
  });
  _popContext();
-  _write(`${_markHydrateNode(_scope, 2)}<button id=increment>${_markHydrateNode(_scope, 3)}${_escapeXML(x)}</button>`);
+  _write(`<button id=increment>${_escapeXML(x)}${_markHydrateNode(_scope, 3)}</button>${_markHydrateNode(_scope, 2)}`);
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko_0_x");
  _writeHydrateScope(_scope, {
    4: x
--- a/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-reactive/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#1 0>123</div><!M#0 2><button id=increment><!M#0 3>123</button><script>(M$h=[]).push((b,s)=>({0:{4:123}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko_0_x",])</script>
+  <div>123<!M#1 0></div><button id=increment>123<!M#0 3></button><!M#0 2><script>(M$h=[]).push((b,s)=>({0:{4:123}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko_0_x",])</script>


 # Render "End"
@ -8,16 +8,16 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      123
+      <!--M#1 0-->
    </div>
-    <!--M#0 2-->
    <button
      id="increment"
    >
-      <!--M#0 3-->
      123
+      <!--M#0 3-->
    </button>
+    <!--M#0 2-->
    <script>
      (M$h=[]).push((b,s)=&gt;({0:{4:123}}),[0,"packages/translator/src/__tests__/fixtures/context-tag-reactive/template.marko_0_x",])
    </script>
@ -31,12 +31,12 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
-inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/button2
-inserted #document/html0/body1/button2/#comment0
-inserted #document/html0/body1/button2/#text1
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/button1
+inserted #document/html0/body1/button1/#text0
+inserted #document/html0/body1/button1/#comment1
+inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/script3
 inserted #document/html0/body1/script3/#text0
 ```
--- a/packages/translator/src/tests/fixtures/context-tag-static/snapshots/html.expected/components/child.js
+++ b/packages/translator/src/tests/fixtures/context-tag-static/snapshots/html.expected/components/child.js
@ -1,9 +1,9 @@
-import { write as _write, getInContext as _getInContext, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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();
  _write("<div>");
  const x = _getInContext("packages/translator/src/__tests__/fixtures/context-tag-static/template.marko");
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</div>`);
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/context-tag-static/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/context-tag-static/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <div><!M#1 0>123</div>
+  <div>123<!M#1 0></div>


 # Render "End"
@ -8,8 +8,8 @@
  <head />
  <body>
    <div>
-      <!--M#1 0-->
      123
+      <!--M#1 0-->
    </div>
  </body>
 </html>
@ -21,6 +21,6 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/div0/#comment0
-inserted #document/html0/body1/div0/#text1
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
 ```
--- a/packages/translator/src/tests/fixtures/custom-tag-parameters/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-parameters/snapshots/html.expected/template.js
@ -1,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _customTag from "./components/custom-tag.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      c
    }) {
      const _scope = _nextScopeId();
-      _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(a)} ${_markHydrateNode(_scope, 1)}${_escapeXML(b)} ${_markHydrateNode(_scope, 2)}${_escapeXML(c)}</div>`);
+      _write(`<div>${_escapeXML(a)}${_markHydrateNode(_scope, 0)} <!>${_escapeXML(b)}${_markHydrateNode(_scope, 1)} <!>${_escapeXML(c)}${_markHydrateNode(_scope, 2)}</div>`);
    }
  });
 };
--- a/packages/translator/src/tests/fixtures/custom-tag-render-body/snapshots/html.expected/components/child/index.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-render-body/snapshots/html.expected/components/child/index.js
@ -1,7 +1,6 @@
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
  _dynamicTag(input.renderBody, null);
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/custom-tag-template/snapshots/html.expected/hello.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-template/snapshots/html.expected/hello.js
@ -1,7 +1,7 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, 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, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
-  _write(`Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(input.name)}!`);
+  _write(`Hello <!>${_escapeXML(input.name)}${_markHydrateNode(_scope, 0)}!`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
--- a/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/html.expected/template.js
@ -1,4 +1,4 @@
-import { nextScopeId as _nextScopeId, register as _register, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, register as _register, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _child from "./components/child.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
    }
  }, _register(() => {}, "packages/translator/src/__tests__/fixtures/custom-tag-var-expression/template.marko_0_data", _scope));
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(data)}</div>`);
+  _write(`<div>${_escapeXML(data)}${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateScope(_scope, {});
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/hydrate.expected.md
@ -7,8 +7,8 @@
      child
    </span>
    <div>
-      <!--M#0 0-->
      4
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-expression/template.marko_0_data",h)}}),[])
--- a/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-expression/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <span>child</span><div><!M#0 0>4</div><script>(M$h=[]).push((b,s,h)=>({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-expression/template.marko_0_data",h)}}),[])</script>
+  <span>child</span><div>4<!M#0 0></div><script>(M$h=[]).push((b,s,h)=>({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-expression/template.marko_0_data",h)}}),[])</script>


 # Render "End"
@ -11,8 +11,8 @@
      child
    </span>
    <div>
-      <!--M#0 0-->
      4
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-expression/template.marko_0_data",h)}}),[])
@ -29,8 +29,8 @@ inserted #document/html0/body1
 inserted #document/html0/body1/span0
 inserted #document/html0/body1/span0/#text0
 inserted #document/html0/body1/div1
-inserted #document/html0/body1/div1/#comment0
-inserted #document/html0/body1/div1/#text1
+inserted #document/html0/body1/div1/#text0
+inserted #document/html0/body1/div1/#comment1
 inserted #document/html0/body1/script2
 inserted #document/html0/body1/script2/#text0
 ```
--- a/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/html.expected/template.js
@ -1,4 +1,4 @@
-import { nextScopeId as _nextScopeId, register as _register, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, register as _register, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _child from "./components/child.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
    }
  }, _register(() => {}, "packages/translator/src/__tests__/fixtures/custom-tag-var-multiple/template.marko_0_data", _scope));
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(data)}</div>`);
+  _write(`<div>${_escapeXML(data)}${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateScope(_scope, {});
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/hydrate.expected.md
@ -7,8 +7,8 @@
      child
    </span>
    <div>
-      <!--M#0 0-->
      3
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-multiple/template.marko_0_data",h)}}),[])
--- a/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/ssr.expected.md
+++ b/packages/translator/src/tests/fixtures/custom-tag-var-multiple/snapshots/ssr.expected.md
@ -1,5 +1,5 @@
 # Write
-  <span>child</span><div><!M#0 0>3</div><script>(M$h=[]).push((b,s,h)=>({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-multiple/template.marko_0_data",h)}}),[])</script>
+  <span>child</span><div>3<!M#0 0></div><script>(M$h=[]).push((b,s,h)=>({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-multiple/template.marko_0_data",h)}}),[])</script>


 # Render "End"
@ -11,8 +11,8 @@
      child
    </span>
    <div>
-      <!--M#0 0-->
      3
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var-multiple/template.marko_0_data",h)}}),[])
@ -29,8 +29,8 @@ inserted #document/html0/body1
 inserted #document/html0/body1/span0
 inserted #document/html0/body1/span0/#text0
 inserted #document/html0/body1/div1
-inserted #document/html0/body1/div1/#comment0
-inserted #document/html0/body1/div1/#text1
+inserted #document/html0/body1/div1/#text0
+inserted #document/html0/body1/div1/#comment1
 inserted #document/html0/body1/script2
 inserted #document/html0/body1/script2/#text0
 ```
--- a/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/html.expected/components/child.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/html.expected/components/child.js
@ -1,8 +1,8 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+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 x = 1;
-  _write(`${_markHydrateNode(_scope, 0)}<button class=inc>${_markHydrateNode(_scope, 1)}${_escapeXML(x)}</button>`);
+  _write(`<button class=inc>${_escapeXML(x)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}`);
  const _return = x;
  _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x");
  _writeHydrateScope(_scope, {
--- a/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/html.expected/template.js
+++ b/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/html.expected/template.js
@ -1,4 +1,4 @@
-import { nextScopeId as _nextScopeId, register as _register, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, register as _register, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 import _child from "./components/child.marko";
 const _renderer = (input, _tagVar) => {
  const _scope = _nextScopeId();
@ -7,7 +7,7 @@ const _renderer = (input, _tagVar) => {
      const _scope = _nextScopeId();
    }
  }, _register(() => {}, "packages/translator/src/__tests__/fixtures/custom-tag-var/template.marko_0_data", _scope));
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(data)}</div>`);
+  _write(`<div>${_escapeXML(data)}${_markHydrateNode(_scope, 0)}</div>`);
  _writeHydrateScope(_scope, {});
 };
 export default _renderer;
--- a/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/hydrate.expected.md
+++ b/packages/translator/src/tests/fixtures/custom-tag-var/snapshots/hydrate.expected.md
@ -1,18 +1,18 @@
 # Render {}
 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <button
      class="inc"
    >
-      <!--M#1 1-->
      1
+      <!--M#1 1-->
    </button>
+    <!--M#1 0-->
    <div>
-      <!--M#0 0-->
      1
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{2:1,"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var/template.marko_0_data",h)}}),[1,"packages/translator/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x",])
@ -31,19 +31,19 @@
 container.querySelector("button.inc").click();

 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <button
      class="inc"
    >
-      <!--M#1 1-->
      2
+      <!--M#1 1-->
    </button>
+    <!--M#1 0-->
    <div>
-      <!--M#0 0-->
      2
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{2:1,"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var/template.marko_0_data",h)}}),[1,"packages/translator/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x",])
@ -54,8 +54,8 @@ container.querySelector("button.inc").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "1" => "2"
-#document/html1/body1/div1/#text1: "1" => "2"
+#document/html0/body1/button0/#text0: "1" => "2"
+#document/html0/body1/div2/#text0: "1" => "2"
 ```


@ -63,19 +63,19 @@ container.querySelector("button.inc").click();
 container.querySelector("button.inc").click();

 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <button
      class="inc"
    >
+      3
      <!--M#1 1-->
-      3
    </button>
+    <!--M#1 0-->
    <div>
-      <!--M#0 0-->
      3
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{2:1,"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var/template.marko_0_data",h)}}),[1,"packages/translator/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x",])
@ -86,8 +86,8 @@ container.querySelector("button.inc").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "2" => "3"
-#document/html1/body1/div1/#text1: "2" => "3"
+#document/html0/body1/button0/#text0: "2" => "3"
+#document/html0/body1/div2/#text0: "2" => "3"
 ```


@ -95,19 +95,19 @@ container.querySelector("button.inc").click();
 container.querySelector("button.inc").click();

 ```html
-<!--M#1 0-->
 <html>
  <head />
  <body>
    <button
      class="inc"
    >
+      4
      <!--M#1 1-->
-      4
    </button>
+    <!--M#1 0-->
    <div>
-      <!--M#0 0-->
      4
+      <!--M#0 0-->
    </div>
    <script>
      (M$h=[]).push((b,s,h)=&gt;({0:h={},1:{2:1,"/":b("packages/translator/src/__tests__/fixtures/custom-tag-var/template.marko_0_data",h)}}),[1,"packages/translator/src/__tests__/fixtures/custom-tag-var/components/child.marko_0_x",])
@ -118,6 +118,6 @@ container.querySelector("button.inc").click();

 # Mutations
 ```
-#document/html1/body1/button0/#text1: "3" => "4"
-#document/html1/body1/div1/#text1: "3" => "4"
+#document/html0/body1/button0/#text0: "3" => "4"
+#document/html0/body1/div2/#text0: "3" => "4"
 ```
--- a/Show More
+++ b/Show More