From ea76ccd05757f1bda9f6ea456f970ead0461e10c Mon Sep 17 00:00:00 2001
From: Michael Rawlings <mirawlings@ebay.com>
Date: Wed, 18 Jan 2023 13:21:44 -0500
Subject: [PATCH] fix: text hydration (#126)

---
 .sizes.json                                   |  32 +++---
 packages/runtime/src/dom/hydrate.ts           |   2 +-
 .../__snapshots__/html.expected/template.js   |   3 +-
 .../__snapshots__/html.expected/template.js   |   3 +-
 .../__snapshots__/html.expected/template.js   |   3 +-
 .../__snapshots__/html.expected/template.js   |   5 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   7 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   7 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   2 +-
 .../basic-chain/__snapshots__/ssr.expected.md |   8 +-
 .../html.expected/components/my-button.js     |   4 +-
 .../html.expected/components/my-button.js     |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../html.expected/components/counter.js       |   4 +-
 .../__snapshots__/hydrate.expected.md         |  10 +-
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/hydrate.expected.md         |  33 +++---
 .../__snapshots__/ssr.expected.md             |  22 ++--
 .../server.ts                                 |  14 +--
 .../__snapshots__/hydrate.expected.md         |  30 ++---
 .../__snapshots__/ssr.expected.md             |  20 ++--
 .../basic-conditional-counter/server.ts       |   9 +-
 .../__snapshots__/html.expected/template.js   |   5 +-
 .../__snapshots__/hydrate.expected.md         |   3 +-
 .../__snapshots__/ssr.expected.md             |  16 ++-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  22 ++--
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/html.expected/template.js   |   3 +-
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   2 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  22 ++--
 .../__snapshots__/ssr.expected.md             |  24 ++--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  10 +-
 .../__snapshots__/ssr.expected.md             |  24 ++--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  10 +-
 .../__snapshots__/ssr.expected.md             |  24 ++--
 .../html.expected/components/comments.js      |  10 +-
 .../__snapshots__/ssr.expected.md             | 108 +++++++++---------
 .../html.expected/components/layout.js        |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |  16 +--
 .../__snapshots__/html.expected/template.js   |   5 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  22 ++--
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  22 ++--
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__tests__/fixtures/body-content/server.ts |   6 +-
 .../components/display-intersection.js        |   4 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../html.expected/components/child.js         |   4 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/other.js      |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../html.expected/components/other.js         |   3 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |  18 ++-
 .../__snapshots__/html.expected/template.js   |   7 +-
 .../__snapshots__/ssr.expected.md             |  18 ++-
 .../html.expected/components/child.js         |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |  20 ++--
 .../html.expected/components/child.js         |   4 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../html.expected/components/child/index.js   |   3 +-
 .../__snapshots__/html.expected/hello.js      |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   2 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   2 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../html.expected/components/child.js         |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  36 +++---
 .../__snapshots__/ssr.expected.md             |  32 +++---
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |  18 +--
 .../__snapshots__/html.expected/template.js   |   6 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/hydrate.expected.md         |  24 ++--
 .../__snapshots__/ssr.expected.md             |  10 +-
 .../html.expected/components/child/index.js   |   3 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/html.expected/template.js   |  10 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |  30 ++---
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../id-tag/__snapshots__/hydrate.expected.md  |   4 +-
 .../id-tag/__snapshots__/ssr.expected.md      |  14 +--
 .../__snapshots__/html.expected/template.js   |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  18 +--
 .../__snapshots__/ssr.expected.md             |  14 +--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../let-tag/__snapshots__/hydrate.expected.md |  36 +++---
 .../let-tag/__snapshots__/ssr.expected.md     |  30 ++---
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  32 +++---
 .../__snapshots__/ssr.expected.md             |  20 ++--
 .../__snapshots__/html.expected/template.js   |   5 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/hydrate.expected.md         |   6 +-
 .../__snapshots__/ssr.expected.md             |  10 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/hydrate.expected.md         |   6 +-
 .../__snapshots__/ssr.expected.md             |  10 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   2 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/ssr.expected.md             |   8 +-
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   5 +-
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/ssr.expected.md             |  20 ++--
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/ssr.expected.md             |  18 +--
 .../__snapshots__/html.expected/template.js   |   2 +-
 .../__snapshots__/ssr.expected.md             |  18 +--
 .../__snapshots__/html.expected/template.js   |   3 +-
 .../__snapshots__/ssr.expected.md             |  20 ++--
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  46 ++++----
 .../__snapshots__/ssr.expected.md             |  44 +++----
 .../__snapshots__/html.expected/template.js   |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |  66 +++++------
 .../__snapshots__/ssr.expected.md             |  48 ++++----
 .../__snapshots__/html.expected/template.js   |   8 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   3 +-
 .../update-html/__snapshots__/ssr.expected.md |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/hydrate.expected.md         |   3 +-
 .../update-text/__snapshots__/ssr.expected.md |   6 +-
 .../__snapshots__/html.expected/template.js   |   4 +-
 .../__snapshots__/html.expected/template.js   |   3 +-
 packages/translator/src/util/walks.ts         | 108 +++++++++---------
 packages/translator/src/util/writer.ts        |  22 +++-
 .../translator/src/visitors/placeholder.ts    |   1 +
 .../translator/src/visitors/tag/native-tag.ts |   4 +
 packages/translator/src/visitors/text.ts      |  19 ++-
 177 files changed, 972 insertions(+), 982 deletions(-)

diff --git a/.sizes.json b/.sizes.json
index 668e809f6..4c47efd3e 100644
--- 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
       }
     }
diff --git a/packages/runtime/src/dom/hydrate.ts b/packages/runtime/src/dom/hydrate.ts
index 29fce157c..00bd16981 100644
--- 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;
diff --git 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
index 30772b12c..a31828941 100644
--- 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 = {
diff --git 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
index 5fc658618..a723d390f 100644
--- 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
diff --git 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
index eb0894406..84b8a6946 100644
--- 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",
diff --git 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
index e4e1a26ca..916473912 100644
--- 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)}`);
       }
     };
   }
diff --git 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
index 9f8c4df29..7898db27a 100644
--- 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();
diff --git 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
index d0807c6e9..e609e6911 100644
--- 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,
diff --git 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
index f2c88986e..b5098a62d 100644
--- 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);
\ No newline at end of file
diff --git 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
index 381f7d739..f504f0c35 100644
--- 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"
diff --git 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
index 3c5625106..919bd0905 100644
--- 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);
\ No newline at end of file
diff --git 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
index 1e2a7982a..a78160238 100644
--- 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);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/basic-chain/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/basic-chain/__snapshots__/hydrate.expected.md
index 637cd719b..e5ba77a1f 100644
--- 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>
diff --git a/packages/translator/src/__tests__/fixtures/basic-chain/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-chain/__snapshots__/ssr.expected.md
index fecf646b9..d7de23489 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 36bf3d12a..e57746634 100644
--- 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
diff --git 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
index 12d74eeb8..09a58e530 100644
--- 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
diff --git 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
index bdf9b230d..404301f50 100644
--- 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)}`);
     }
   });
 };
diff --git 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
index ac1e3e952..d2ce6dfef 100644
--- 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
diff --git a/packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/hydrate.expected.md
index 21a996c2f..531609929 100644
--- 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"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-component/__snapshots__/ssr.expected.md
index a9c046631..6ab4bd0ac 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 27ea845b5..0e7d4108d 100644
--- 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",])
diff --git 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
index 116dab93a..94cbacaac 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 742ac13ce..24d6f03a5 100644
--- 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 }));
diff --git 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
index 42296a0af..4259cd20b 100644
--- 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>
diff --git 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
index 8d0e1a8cc..407884fb1 100644
--- 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
diff --git a/packages/translator/src/__tests__/fixtures/basic-conditional-counter/server.ts b/packages/translator/src/__tests__/fixtures/basic-conditional-counter/server.ts
index 703195822..24a2adcc7 100644
--- 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 }));
   }
diff --git 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
index acb6f38c2..48033a990 100644
--- 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;
diff --git 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
index 7876a5cfd..f12308aed 100644
--- 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>
 ```
diff --git 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
index 6da541eb7..addcb9d07 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index df48a4129..18dfdefeb 100644
--- 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
diff --git a/packages/translator/src/__tests__/fixtures/basic-counter/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/basic-counter/__snapshots__/hydrate.expected.md
index 3f2f54293..4309883a8 100644
--- 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"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/basic-counter/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-counter/__snapshots__/ssr.expected.md
index c3e3f7731..5c9a878dd 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 55f3d8ef5..26970dec5 100644
--- 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"));
diff --git 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
index aeada5766..3e9e9663c 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index c59541919..67573fb02 100644
--- 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");
 };
diff --git 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
index 232f1ffbf..19c08f038 100644
--- 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);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/basic-export/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/basic-export/__snapshots__/hydrate.expected.md
index 282f062b6..e8758bcf0 100644
--- 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>
diff --git a/packages/translator/src/__tests__/fixtures/basic-export/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-export/__snapshots__/ssr.expected.md
index 8f5ab269e..76eb4a897 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index aa6a097fe..34d83de78 100644
--- 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
diff --git 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
index 14aa4252e..888d4dd94 100644
--- 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"
 ```
\ No newline at end of file
diff --git 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
index f2d305092..a39c8af12 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 451d0302f..d8e5339be 100644
--- 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,
diff --git 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
index 567c41118..f62738773 100644
--- 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"
 ```
\ No newline at end of file
diff --git 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
index ec392a4ee..aaf56211b 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index d7d6ce6f5..46c313eb9 100644
--- 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;
diff --git 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
index 904a8ffb8..70e292f43 100644
--- 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"
 ```
\ No newline at end of file
diff --git 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
index f7ad2ca4d..8ecc44a6f 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 424b483be..c3111fa32 100644
--- 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);
\ No newline at end of file
diff --git 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
index b5e36632d..fa3c6a45a 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 3bb5e541e..f9a545266 100644
--- 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>");
 };
diff --git 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
index 4eca2a5f5..2cb3b2dbf 100644
--- 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>`);
     }
   });
 };
diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md
index 892ec7368..96c29ba82 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 51d23569b..3afcd6fe7 100644
--- 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
diff --git 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
index 35d52bbc3..7ef8c9dc4 100644
--- 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>");
 };
diff --git 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
index 78da92548..30206de2c 100644
--- 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, {
diff --git 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
index 9c26742b3..5d71e3356 100644
--- 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
diff --git 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
index 410fab3cb..f52217a7a 100644
--- 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, {
diff --git 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
index aa2d6d741..2dda120a2 100644
--- 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
diff --git 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
index f2a95d3e5..7993fcc63 100644
--- 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
diff --git 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
index 89186a96f..147452d04 100644
--- 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"
 ```
\ No newline at end of file
diff --git 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
index 46fc1734b..b94fbc24a 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 9543a2789..88c37fd68 100644
--- 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, {
diff --git 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
index 24193887c..bcd493766 100644
--- 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,
diff --git a/packages/translator/src/__tests__/fixtures/body-content/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/body-content/__snapshots__/hydrate.expected.md
index edb7d8560..a15e77a93 100644
--- 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"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/body-content/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/body-content/__snapshots__/ssr.expected.md
index b04196d19..093cf0a2a 100644
--- 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
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/body-content/server.ts b/packages/translator/src/__tests__/fixtures/body-content/server.ts
index ad26fa8fa..31743e0c1 100644
--- 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 });
diff --git 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
index 81579bf9b..4a5d7f29b 100644
--- 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);
\ No newline at end of file
diff --git 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
index a4004bd37..4c3ce98c2 100644
--- 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
diff --git 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
index 72d8ebe85..451f2163d 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 164a0fcf7..481c40e6e 100644
--- 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);
\ No newline at end of file
diff --git 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
index b4678ea38..be57cd664 100644
--- 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);
\ No newline at end of file
diff --git 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
index 32eeb9be7..48fd54c8d 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 03e007b05..371bd0729 100644
--- 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);
\ No newline at end of file
diff --git 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
index f4c0eae19..7398efd3d 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 26143b5d7..7b8063056 100644
--- 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>");
 };
diff --git 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
index 122055faa..947565bf0 100644
--- 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>`);
     }
   });
 };
diff --git 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
index c8e25e1da..db9aa0d12 100644
--- 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>");
 };
diff --git 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
index f4c0eae19..7398efd3d 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 2fdb31fc7..1a6067094 100644
--- 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();
 };
diff --git 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
index b9c4ce66a..dd0a3075d 100644
--- 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>`);
     }
   });
 };
diff --git 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
index 24cd1195d..2b1f39f28 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index e2f61ff46..642ef274d 100644
--- 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
diff --git 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
index bac4683f3..89f296722 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 43841a901..32cd24c68 100644
--- 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);
\ No newline at end of file
diff --git 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
index bdff54aa4..f1984d08a 100644
--- 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
diff --git 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
index 543f95c11..181fb9ff1 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 879835c1e..e9c6f03e8 100644
--- 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);
\ No newline at end of file
diff --git 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
index 32eeb9be7..48fd54c8d 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 923849217..3d20b5a71 100644
--- 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>`);
     }
   });
 };
diff --git 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
index b93806f41..a5f75c47c 100644
--- 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;
diff --git 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
index 7efa9baeb..816738d5a 100644
--- 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);
\ No newline at end of file
diff --git 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
index c2b6c4f84..4f4c9dfe6 100644
--- 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;
diff --git 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
index a383f9ba6..7b55c68f8 100644
--- 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)}}),[])
diff --git 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
index ea33ac25d..82f25bdd6 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index 2e7e36c60..b1c03e1bd 100644
--- 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;
diff --git 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
index 5e16acedd..5630452a7 100644
--- 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)}}),[])
diff --git 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
index 5046e6041..579b4d50a 100644
--- 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
 ```
\ No newline at end of file
diff --git 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
index a9ad7fc05..aac91d9c4 100644
--- 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, {
diff --git 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
index 0532b8c98..6f96705cd 100644
--- 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;
diff --git 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
index c9c6a3f2c..9df0e2233 100644
--- 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"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/custom-tag-var/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/custom-tag-var/__snapshots__/ssr.expected.md
index c3be894bb..bf74b5504 100644
--- a/packages/translator/src/__tests__/fixtures/custom-tag-var/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/custom-tag-var/__snapshots__/ssr.expected.md
@@ -1,22 +1,22 @@
 # Write
-  <!M#1 0><button class=inc><!M#1 1>1</button><div><!M#0 0>1</div><script>(M$h=[]).push((b,s,h)=>({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",])</script>
+  <button class=inc>1<!M#1 1></button><!M#1 0><div>1<!M#0 0></div><script>(M$h=[]).push((b,s,h)=>({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",])</script>
 
 
 # Render "End"
 ```html
-<!--M#1 0-->
 <html>
   <head />
   <body>
     <button
       class="inc"
     >
+      1
       <!--M#1 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",])
@@ -27,16 +27,16 @@
 
 # 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/div1
-inserted #document/html1/body1/div1/#comment0
-inserted #document/html1/body1/div1/#text1
-inserted #document/html1/body1/script2
-inserted #document/html1/body1/script2/#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/div2
+inserted #document/html0/body1/div2/#text0
+inserted #document/html0/body1/div2/#comment1
+inserted #document/html0/body1/script3
+inserted #document/html0/body1/script3/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/html.expected/template.js
index 42194a3eb..3728eeb0e 100644
--- a/packages/translator/src/__tests__/fixtures/dynamic-event-handlers/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/dynamic-event-handlers/__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(`${_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/dynamic-event-handlers/template.marko_0_clickCount");
   _writeHydrateScope(_scope, {
     2: clickCount
diff --git a/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/html.expected/template.js
index 51ac6bfba..3c47f0563 100644
--- a/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/html.expected/template.js
@@ -1,6 +1,6 @@
 import tagA from "./components/tag-a/index.marko";
 import tagB from "./components/tag-b/index.marko";
-import { markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, attr as _attr, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { dynamicTag as _dynamicTag, attr as _attr, write as _write, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   renderBody,
   x,
@@ -12,23 +12,22 @@ const _renderer = ({
   other
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   _dynamicTag(renderBody, {
     class: ["a", "b"],
     other: other
   });
-  _write(`${_markHydrateNode(_scope, 6)}`);
   _dynamicTag(x, {
     class: ["a", "b"],
     other: other
   });
   const _tagName = show ? "div" : null;
-  if (_tagName) _write(`${_markHydrateNode(_scope, 12)}<${_tagName} class="a b"${_attr("other", other)}>`);
+  if (_tagName) _write(`<${_tagName} class="a b"${_attr("other", other)}>`);
   if (_tagName) _write(`</${_tagName}>`);
   const _tagName2 = show && "div";
-  if (_tagName2) _write(`${_markHydrateNode(_scope, 13)}<${_tagName2} class="a b"${_attr("other", other)}>`);
+  _write(`${_markHydrateNode(_scope, 12)}`);
+  if (_tagName2) _write(`<${_tagName2} class="a b"${_attr("other", other)}>`);
   if (_tagName2) _write(`</${_tagName2}>`);
-  _write(`${_markHydrateNode(_scope, 14)}<${large ? "h1" : "h2"} class="a b"${_attr("other", other)}></${large ? "h1" : "h2"}>`);
+  _write(`${_markHydrateNode(_scope, 13)}<${large ? "h1" : "h2"} class="a b"${_attr("other", other)}></${large ? "h1" : "h2"}>${_markHydrateNode(_scope, 14)}`);
   (showTagA ? tagA : tagB)({
     class: ["a", "b"],
     other: other,
@@ -64,13 +63,14 @@ const _renderer = ({
   });
   const largeHeading = isLarge && "h1";
   const _tagName5 = largeHeading || "h2";
-  if (_tagName5) _write(`${_markHydrateNode(_scope, 15)}<${_tagName5} class="a b"${_attr("other", other)}>`);
+  if (_tagName5) _write(`<${_tagName5} class="a b"${_attr("other", other)}>`);
   if (_tagName5) _write(`</${_tagName5}>`);
   const tagConstA = "a";
   const tagConstB = show ? "div" : null;
-  _write(`${_markHydrateNode(_scope, 16)}<${global.x = "a" + "b"} class="a b"${_attr("other", other)}></${global.x = "a" + "b"}>${_markHydrateNode(_scope, 17)}<${"h" + level} class="a b"${_attr("other", other)}></${"h" + level}>${_markHydrateNode(_scope, 18)}<h${level} class="a b"${_attr("other", other)}></h${level}>${_markHydrateNode(_scope, 19)}<${tagConstA} class="a b"${_attr("other", other)}></${tagConstA}>`);
-  if (tagConstB) _write(`${_markHydrateNode(_scope, 20)}<${tagConstB} class="a b"${_attr("other", other)}>`);
+  _write(`${_markHydrateNode(_scope, 15)}<${global.x = "a" + "b"} class="a b"${_attr("other", other)}></${global.x = "a" + "b"}>${_markHydrateNode(_scope, 16)}<${"h" + level} class="a b"${_attr("other", other)}></${"h" + level}>${_markHydrateNode(_scope, 17)}<h${level} class="a b"${_attr("other", other)}></h${level}>${_markHydrateNode(_scope, 18)}<${tagConstA} class="a b"${_attr("other", other)}></${tagConstA}>${_markHydrateNode(_scope, 19)}`);
+  if (tagConstB) _write(`<${tagConstB} class="a b"${_attr("other", other)}>`);
   if (tagConstB) _write(`</${tagConstB}>`);
+  _write(`${_markHydrateNode(_scope, 20)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js
index 0b302441b..3ac6bb3c9 100644
--- a/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js
@@ -1,5 +1,5 @@
 import child from "./components/child/index.marko";
-import { nextScopeId as _nextScopeId, register as _register, markHydrateNode as _markHydrateNode, write as _write, dynamicTag as _dynamicTag, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, register as _register, dynamicTag as _dynamicTag, write as _write, markHydrateNode as _markHydrateNode, writeHydrateScope as _writeHydrateScope, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   show,
   dynamic
@@ -16,14 +16,14 @@ const _renderer = ({
   }
   let data2 = void 0;
   if (_tagName) data2 = _tagName();else _renderBody();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   const data3 = _dynamicTag(dynamic, null);
   const _tagName2 = show && "div";
   const el1 = () => {
     throw new Error("Cannot reference DOM node from server");
   };
-  if (_tagName2) _write(`${_markHydrateNode(_scope, 6)}<${_tagName2}>`);
+  if (_tagName2) _write(`<${_tagName2}>`);
   if (_tagName2) _write(`</${_tagName2}>`);
+  _write(`${_markHydrateNode(_scope, 6)}`);
   _writeHydrateScope(_scope, {});
 };
 export default _renderer;
diff --git a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/html.expected/template.js
index 049fcdc8b..cc8634bcd 100644
--- a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/html.expected/template.js
@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _n
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const clickCount = 0;
-  _write(`<div>${_markHydrateNode(_scope, 0)}<button id=button>0</button></div>`);
+  _write(`<div><button id=button>0</button>${_markHydrateNode(_scope, 0)}</div>`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount");
   _writeHydrateScope(_scope, {
     1: clickCount
diff --git a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/hydrate.expected.md
index dd5ca2356..23caa94ea 100644
--- a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/hydrate.expected.md
@@ -4,12 +4,12 @@
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       <button
         id="button"
       >
         0
       </button>
+      <!--M#0 0-->
     </div>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])
@@ -20,8 +20,8 @@
 
 # Mutations
 ```
-removed #text in #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#text0
+removed #text in #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
 ```
 
 
@@ -33,12 +33,12 @@ container.querySelector("button").click();
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       <button
         id="button"
       >
         1
       </button>
+      <!--M#0 0-->
     </div>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])
@@ -49,8 +49,8 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-removed #text in #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#text0
+removed #text in #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
 ```
 
 
@@ -62,12 +62,12 @@ container.querySelector("button").click();
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       <button
         id="button"
       >
         2
       </button>
+      <!--M#0 0-->
     </div>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])
@@ -78,8 +78,8 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-removed #text in #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#text0
+removed #text in #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
 ```
 
 
@@ -91,12 +91,12 @@ container.querySelector("button").click();
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       <button
         id="button"
       >
         3
       </button>
+      <!--M#0 0-->
     </div>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])
@@ -107,6 +107,6 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-removed #text in #document/html0/body1/div0/button1
-inserted #document/html0/body1/div0/button1/#text0
+removed #text in #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/ssr.expected.md
index c2a20f8d1..1942f2a14 100644
--- a/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/effect-counter/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0><button id=button>0</button></div><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])</script>
+  <div><button id=button>0</button><!M#0 0></div><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])</script>
 
 
 # Render "End"
@@ -8,12 +8,12 @@
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       <button
         id="button"
       >
         0
       </button>
+      <!--M#0 0-->
     </div>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/effect-counter/template.marko_0_clickCount",])
@@ -28,9 +28,9 @@ 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/#text0
+inserted #document/html0/body1/div0/button0
+inserted #document/html0/body1/div0/button0/#text0
+inserted #document/html0/body1/div0/#comment1
 inserted #document/html0/body1/script1
 inserted #document/html0/body1/script1/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/components/child/index.js b/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/components/child/index.js
index b93806f41..a5f75c47c 100644
--- a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/components/child/index.js
+++ b/packages/translator/src/__tests__/fixtures/event-handlers/__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;
diff --git a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/template.js
index dd1cd4e6a..8f8e97b64 100644
--- a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/html.expected/template.js
@@ -11,7 +11,7 @@ const _renderer = (input, _tagVar) => {
       const _scope = _nextScopeId();
     }
   });
-  _write(`${_markHydrateNode(_scope, 0)}<div class=hi></div>`);
+  _write(`<div class=hi></div>${_markHydrateNode(_scope, 0)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/event-handlers/template.marko_0");
 };
 export default _renderer;
diff --git a/packages/translator/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
index 7b59c91c8..f1a557889 100644
--- a/packages/translator/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/for-tag-siblings/__snapshots__/html.expected/template.js
@@ -1,17 +1,17 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, 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, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const arrA = [1, 2, 3];
-  _write(`${_markHydrateNode(_scope, 0)}<div>`);
+  _write("<div>");
   for (const val of arrA) {
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(val)}</div>`);
+    _write(`<div>${_escapeXML(val)}${_markHydrateNode(_scope, 0)}</div>`);
     _maybeFlush();
   }
-  _write(`</div><div>${_markHydrateNode(_scope, 7)}`);
+  _write(`</div>${_markHydrateNode(_scope, 0)}<div>`);
   for (const val of arrA) {
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(val)}</div>`);
+    _write(`<div>${_escapeXML(val)}${_markHydrateNode(_scope, 0)}</div>`);
     _maybeFlush();
   }
   _write("<div></div></div>");
diff --git a/packages/translator/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
index 77d1ecf57..d5cac715e 100644
--- a/packages/translator/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/for-tag-with-state/__snapshots__/html.expected/template.js
@@ -1,22 +1,20 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const arrA = [1, 2, 3];
-  _write(`${_markHydrateNode(_scope, 0)}`);
   let _i = 0;
   for (const val of arrA) {
     let i = _i++;
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(i)}: ${_markHydrateNode(_scope, 1)}${_escapeXML(val)}</div>`);
+    _write(`<div>${_escapeXML(i)}${_markHydrateNode(_scope, 0)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 1)}</div>`);
     _maybeFlush();
   }
   const arrB = [1, 2, 3];
-  _write(`${_markHydrateNode(_scope, 7)}`);
   let _i2 = 0;
   for (const val of arrB) {
     let i = _i2++;
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(i)}: ${_markHydrateNode(_scope, 1)}${_escapeXML(val)}</div>`);
+    _write(`<div>${_escapeXML(i)}${_markHydrateNode(_scope, 0)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 1)}</div>`);
     _maybeFlush();
   }
 };
diff --git a/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
index 560272128..e4089ff81 100644
--- a/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/html.expected/template.js
@@ -1,4 +1,4 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, attr as _attr, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, attr as _attr, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const arr = [1, 2, 3];
@@ -7,79 +7,69 @@ const _renderer = (input, _tagVar) => {
     b: 1,
     c: 1
   };
-  _write(`${_markHydrateNode(_scope, 0)}`);
   let _i = 0;
   for (const val of arr) {
     let i = _i++;
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(i)}: ${_markHydrateNode(_scope, 1)}${_escapeXML(val)}</div><div></div><div></div>`);
+    _write(`<div>${_escapeXML(i)}${_markHydrateNode(_scope, 0)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 1)}</div><div></div><div></div>`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 7)}`);
   for (const key in obj) {
     const val = obj[key];
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(key)}: ${_markHydrateNode(_scope, 1)}${_escapeXML(val)}</div><div></div><div></div>`);
+    _write(`<div>${_escapeXML(key)}${_markHydrateNode(_scope, 0)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 1)}</div><div></div><div></div>`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 14)}`);
   for (let _steps = (10 - 0) / 2, _step = 0; _step <= _steps; _step++) {
     const i = 0 + _step * 2;
     const _scope = _nextScopeId();
-    _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML(i)}</div><div></div><div></div>`);
+    _write(`<div>${_escapeXML(i)}${_markHydrateNode(_scope, 0)}</div><div></div><div></div>`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 21)}`);
   let _i2 = 0;
   for (const val of arr) {
     let i = _i2++;
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", i)}>${_markHydrateNode(_scope, 1)}${_escapeXML(i)}: ${_markHydrateNode(_scope, 2)}${_escapeXML(val)}</div><div></div>${_markHydrateNode(_scope, 3)}<div${_attr("key", `other-${i}`)}></div>`);
+    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markHydrateNode(_scope, 1)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 2)}</div>${_markHydrateNode(_scope, 0)}<div></div><div${_attr("key", `other-${i}`)}></div>${_markHydrateNode(_scope, 3)}`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 28)}`);
   let _i3 = 0;
   const list = arr;
   for (const val of list) {
     let i = _i3++;
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", i)}>${_markHydrateNode(_scope, 1)}${_escapeXML(list.length)}: ${_markHydrateNode(_scope, 2)}${_escapeXML(val)}</div>`);
+    _write(`<div${_attr("key", i)}>${_escapeXML(list.length)}${_markHydrateNode(_scope, 1)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 2)}</div>${_markHydrateNode(_scope, 0)}`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 35)}`);
   for (const key in obj) {
     const val = obj[key];
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", key)}>${_markHydrateNode(_scope, 1)}${_escapeXML(key)}: ${_markHydrateNode(_scope, 2)}${_escapeXML(val)}</div><div></div>${_markHydrateNode(_scope, 3)}<div${_attr("key", `other-${key}`)}></div>`);
+    _write(`<div${_attr("key", key)}>${_escapeXML(key)}${_markHydrateNode(_scope, 1)}: <!>${_escapeXML(val)}${_markHydrateNode(_scope, 2)}</div>${_markHydrateNode(_scope, 0)}<div></div><div${_attr("key", `other-${key}`)}></div>${_markHydrateNode(_scope, 3)}`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 42)}`);
   for (let _steps3 = (10 - 0) / 2, _step3 = 0; _step3 <= _steps3; _step3++) {
     const i = 0 + _step3 * 2;
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", i)}>${_markHydrateNode(_scope, 1)}${_escapeXML(i)}</div><div></div>${_markHydrateNode(_scope, 2)}<div${_attr("key", `other-${i}`)}></div>${_markHydrateNode(_scope, 3)}`);
+    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markHydrateNode(_scope, 1)}</div>${_markHydrateNode(_scope, 0)}<div></div><div${_attr("key", `other-${i}`)}></div>${_markHydrateNode(_scope, 2)}`);
     for (let _steps2 = (10 - 0) / 2, _step2 = 0; _step2 <= _steps2; _step2++) {
       const i = 0 + _step2 * 2;
       const _scope = _nextScopeId();
-      _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", i)}>${_markHydrateNode(_scope, 1)}${_escapeXML(i)}</div><div></div>${_markHydrateNode(_scope, 2)}<div${_attr("key", `other-${i}`)}></div>`);
+      _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markHydrateNode(_scope, 1)}</div>${_markHydrateNode(_scope, 0)}<div></div><div${_attr("key", `other-${i}`)}></div>${_markHydrateNode(_scope, 2)}`);
       _maybeFlush();
     }
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 49)}`);
   for (let _steps4 = (0 - 10) / -2, _step4 = 0; _step4 <= _steps4; _step4++) {
     const i = 10 + _step4 * -2;
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}<div${_attr("key", i)}>${_markHydrateNode(_scope, 1)}${_escapeXML(i)}</div><div></div>${_markHydrateNode(_scope, 2)}<div${_attr("key", `other-${i}`)}></div>`);
+    _write(`<div${_attr("key", i)}>${_escapeXML(i)}${_markHydrateNode(_scope, 1)}</div>${_markHydrateNode(_scope, 0)}<div></div><div${_attr("key", `other-${i}`)}></div>${_markHydrateNode(_scope, 2)}`);
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 56)}`);
   for (let _steps5 = (10 - 0) / 1, _step5 = 0; _step5 <= _steps5; _step5++) {
     const _scope = _nextScopeId();
     _write("Hello");
     _maybeFlush();
   }
-  _write(`${_markHydrateNode(_scope, 63)}`);
   for (let _steps6 = (10 - 0) / 1, _step6 = 0; _step6 <= _steps6; _step6++) {
     const _scope = _nextScopeId();
     _write("Hello");
diff --git a/packages/translator/src/__tests__/fixtures/hello-dynamic/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/hello-dynamic/__snapshots__/html.expected/template.js
index 39a8e1e83..486cee93b 100644
--- a/packages/translator/src/__tests__/fixtures/hello-dynamic/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/hello-dynamic/__snapshots__/html.expected/template.js
@@ -1,10 +1,10 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, toString as _toString, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, toString as _toString, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   name,
   missing
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(name)}! Hello ${_markHydrateNode(_scope, 1)}${_toString(name)}! Hello ${_markHydrateNode(_scope, 2)}${_toString(missing)}!`);
+  _write(`Hello <!>${_escapeXML(name)}${_markHydrateNode(_scope, 0)}! Hello <!>${_toString(name)}${_markHydrateNode(_scope, 1)}! Hello <!>${_toString(missing)}${_markHydrateNode(_scope, 2)}!`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/html.expected/template.js
index 9a9a2cffc..02508fbc2 100644
--- a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/html.expected/template.js
@@ -1,9 +1,9 @@
-import { nextTagId as _nextTagId, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextTagId as _nextTagId, 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 = _nextTagId();
   const y = _nextTagId();
-  _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);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/hydrate.expected.md
index 9288923a7..4bb714d87 100644
--- a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/hydrate.expected.md
@@ -4,11 +4,11 @@
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       s0
+      <!--M#0 0-->
     </div>
-    <!--M#0 1-->
     s1
+    <!--M#0 1-->
   </body>
 </html>
 ```
diff --git a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/ssr.expected.md
index d3d85e90d..43f80a35e 100644
--- a/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/id-tag/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div><!M#0 0>s0</div><!M#0 1>s1
+  <div>s0<!M#0 0></div>s1<!M#0 1>
 
 
 # Render "End"
@@ -8,11 +8,11 @@
   <head />
   <body>
     <div>
-      <!--M#0 0-->
       s0
+      <!--M#0 0-->
     </div>
-    <!--M#0 1-->
     s1
+    <!--M#0 1-->
   </body>
 </html>
 ```
@@ -23,8 +23,8 @@ 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/#text2
+inserted #document/html0/body1/div0/#text0
+inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/#text1
+inserted #document/html0/body1/#comment2
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/if-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/if-tag/__snapshots__/html.expected/template.js
index e7de7d676..8aa7bea1e 100644
--- a/packages/translator/src/__tests__/fixtures/if-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/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";
 const _renderer = ({
   a,
   b,
@@ -6,17 +6,15 @@ const _renderer = ({
   y
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   if (a + b) {
     const _scope = _nextScopeId();
     _write("Hello");
   }
-  _write(`${_markHydrateNode(_scope, 6)}`);
   if (a, b) {
     const _scope = _nextScopeId();
     _write("World");
   }
-  _write(`<div>${_markHydrateNode(_scope, 12)}`);
+  _write("<div>");
   if (x) {
     const _scope = _nextScopeId();
     _write("A");
diff --git a/packages/translator/src/__tests__/fixtures/import-tag-conflict/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/import-tag-conflict/__snapshots__/html.expected/template.js
index 1016bbe82..0452e46b4 100644
--- a/packages/translator/src/__tests__/fixtures/import-tag-conflict/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/import-tag-conflict/__snapshots__/html.expected/template.js
@@ -1,9 +1,9 @@
 import { asset as asset1 } from "./asset1";
 import { asset as asset2 } from "./asset2";
-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(`${_markHydrateNode(_scope, 0)}${_escapeXML(asset1)} ${_markHydrateNode(_scope, 1)}${_escapeXML(asset2)}`);
+  _write(`${_escapeXML(asset1)}${_markHydrateNode(_scope, 0)} <!>${_escapeXML(asset2)}${_markHydrateNode(_scope, 1)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/import-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/import-tag/__snapshots__/html.expected/template.js
index 26120e100..ae0fd6992 100644
--- a/packages/translator/src/__tests__/fixtures/import-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/import-tag/__snapshots__/html.expected/template.js
@@ -1,7 +1,7 @@
 import "./foo";
 import { b as c } from "./bar";
 import baz from "./components/baz.marko";
-import { nextScopeId as _nextScopeId, markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   baz({
@@ -9,7 +9,7 @@ const _renderer = (input, _tagVar) => {
       const _scope = _nextScopeId();
     }
   });
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(c)}`);
+  _write(`${_escapeXML(c)}${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/input-tracking/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/input-tracking/__snapshots__/html.expected/template.js
index 40b0e3ef3..07dc2fa9d 100644
--- a/packages/translator/src/__tests__/fixtures/input-tracking/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/input-tracking/__snapshots__/html.expected/template.js
@@ -1,11 +1,11 @@
-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 {
     a,
     b
   } = input;
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(a)} ${_markHydrateNode(_scope, 1)}${_escapeXML(b)}`);
+  _write(`${_escapeXML(a)}${_markHydrateNode(_scope, 0)} <!>${_escapeXML(b)}${_markHydrateNode(_scope, 1)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/html.expected/template.js
index 199aedaf2..72875edec 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__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 x = 1;
   const y = 0;
-  _write(`<span>${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</span><span>${_markHydrateNode(_scope, 1)}${_escapeXML(y)}</span>`);
+  _write(`<span>${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</span><span>${_escapeXML(y)}${_markHydrateNode(_scope, 1)}</span>`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x");
   _writeHydrateScope(_scope, {
     2: x
diff --git a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/hydrate.expected.md
index 5e3db7f1b..0b20c9f42 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/hydrate.expected.md
@@ -4,12 +4,12 @@
   <head />
   <body>
     <span>
-      <!--M#0 0-->
       1
+      <!--M#0 0-->
     </span>
     <span>
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])
@@ -30,12 +30,12 @@
   <head />
   <body>
     <span>
-      <!--M#0 0-->
       2
+      <!--M#0 0-->
     </span>
     <span>
-      <!--M#0 1-->
       1
+      <!--M#0 1-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])
@@ -46,8 +46,8 @@
 
 # Mutations
 ```
-#document/html0/body1/span1/#text1: "0" => "1"
-#document/html0/body1/span0/#text1: "1" => "2"
+#document/html0/body1/span1/#text0: "0" => "1"
+#document/html0/body1/span0/#text0: "1" => "2"
 ```
 
 
@@ -57,12 +57,12 @@
   <head />
   <body>
     <span>
-      <!--M#0 0-->
       2
+      <!--M#0 0-->
     </span>
     <span>
-      <!--M#0 1-->
       2
+      <!--M#0 1-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])
@@ -73,5 +73,5 @@
 
 # Mutations
 ```
-#document/html0/body1/span1/#text1: "1" => "2"
+#document/html0/body1/span1/#text0: "1" => "2"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/ssr.expected.md
index 94b2e74f8..b78e8fec5 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <span><!M#0 0>1</span><span><!M#0 1>0</span><script>(M$h=[]).push((b,s)=>({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])</script>
+  <span>1<!M#0 0></span><span>0<!M#0 1></span><script>(M$h=[]).push((b,s)=>({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])</script>
 
 
 # Render "End"
@@ -8,12 +8,12 @@
   <head />
   <body>
     <span>
-      <!--M#0 0-->
       1
+      <!--M#0 0-->
     </span>
     <span>
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{2:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag-set-in-effect/template.marko_0_x",])
@@ -28,11 +28,11 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/span0
-inserted #document/html0/body1/span0/#comment0
-inserted #document/html0/body1/span0/#text1
+inserted #document/html0/body1/span0/#text0
+inserted #document/html0/body1/span0/#comment1
 inserted #document/html0/body1/span1
-inserted #document/html0/body1/span1/#comment0
-inserted #document/html0/body1/span1/#text1
+inserted #document/html0/body1/span1/#text0
+inserted #document/html0/body1/span1/#comment1
 inserted #document/html0/body1/script2
 inserted #document/html0/body1/script2/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/html.expected/template.js
index 683ea0916..30142c6df 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/let-tag/__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 x = 1;
   const y = 1;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(x)}</button>${_markHydrateNode(_scope, 2)}${_escapeXML(y)}`);
+  _write(`<button>${_escapeXML(x)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}${_escapeXML(y)}${_markHydrateNode(_scope, 2)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y");
   _writeHydrateScope(_scope, {
     3: x,
diff --git a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/hydrate.expected.md
index cfda29557..09fed3301 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/hydrate.expected.md
@@ -1,15 +1,15 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       1
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     1
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])
     </script>
@@ -27,16 +27,16 @@
 container.querySelector("button").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       2
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     2
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])
     </script>
@@ -46,8 +46,8 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/#text2: "1" => "2"
-#document/html1/body1/button0/#text1: "1" => "2"
+#document/html0/body1/#text2: "1" => "2"
+#document/html0/body1/button0/#text0: "1" => "2"
 ```
 
 
@@ -55,16 +55,16 @@ container.querySelector("button").click();
 container.querySelector("button").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       4
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     4
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])
     </script>
@@ -74,8 +74,8 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/#text2: "2" => "4"
-#document/html1/body1/button0/#text1: "2" => "4"
+#document/html0/body1/#text2: "2" => "4"
+#document/html0/body1/button0/#text0: "2" => "4"
 ```
 
 
@@ -83,16 +83,16 @@ container.querySelector("button").click();
 container.querySelector("button").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       8
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     8
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])
     </script>
@@ -102,6 +102,6 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/#text2: "4" => "8"
-#document/html1/body1/button0/#text1: "4" => "8"
+#document/html0/body1/#text2: "4" => "8"
+#document/html0/body1/button0/#text0: "4" => "8"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/ssr.expected.md
index 52caa0155..4e123200a 100644
--- a/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/let-tag/__snapshots__/ssr.expected.md
@@ -1,19 +1,19 @@
 # Write
-  <!M#0 0><button><!M#0 1>1</button><!M#0 2>1<script>(M$h=[]).push((b,s)=>({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])</script>
+  <button>1<!M#0 1></button><!M#0 0>1<!M#0 2><script>(M$h=[]).push((b,s)=>({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       1
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     1
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:1,4:1}}),[0,"packages/translator/src/__tests__/fixtures/let-tag/template.marko_0_x_y",])
     </script>
@@ -23,15 +23,15 @@
 
 # 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/#comment1
-inserted #document/html1/body1/#text2
-inserted #document/html1/body1/script3
-inserted #document/html1/body1/script3/#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/#text2
+inserted #document/html0/body1/#comment3
+inserted #document/html0/body1/script4
+inserted #document/html0/body1/script4/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/html.expected/template.js
index c2d54c1bd..7a331c9ae 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__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 x = 0;
   const prev = false;
-  _write(`<div>x=<span>${_markHydrateNode(_scope, 0)}${_escapeXML(x)}</span>, was=${_markHydrateNode(_scope, 1)}${_escapeXML(prev)}</div>${_markHydrateNode(_scope, 2)}<button id=increment>Increment</button>`);
+  _write(`<div>x=<span>${_escapeXML(x)}${_markHydrateNode(_scope, 0)}</span>, was=<!>${_escapeXML(prev)}${_markHydrateNode(_scope, 1)}</div><button id=increment>Increment</button>${_markHydrateNode(_scope, 2)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x");
   _writeHydrateScope(_scope, {
     3: x
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/hydrate.expected.md
index e0c1f1cfd..678b796cf 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/hydrate.expected.md
@@ -6,19 +6,20 @@
     <div>
       x=
       <span>
-        <!--M#0 0-->
         0
+        <!--M#0 0-->
       </span>
       , was=
-      <!--M#0 1-->
+      <!---->
       false
+      <!--M#0 1-->
     </div>
-    <!--M#0 2-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])
     </script>
@@ -42,19 +43,20 @@ container.querySelector("#increment")?.click();
     <div>
       x=
       <span>
-        <!--M#0 0-->
         1
+        <!--M#0 0-->
       </span>
       , was=
-      <!--M#0 1-->
+      <!---->
       0
+      <!--M#0 1-->
     </div>
-    <!--M#0 2-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])
     </script>
@@ -64,7 +66,7 @@ container.querySelector("#increment")?.click();
 
 # Mutations
 ```
-#document/html0/body1/div0/span1/#text1: "0" => "1"
+#document/html0/body1/div0/span1/#text0: "0" => "1"
 #document/html0/body1/div0/#text4: "false" => "0"
 ```
 
@@ -79,19 +81,20 @@ container.querySelector("#increment")?.click();
     <div>
       x=
       <span>
-        <!--M#0 0-->
         2
+        <!--M#0 0-->
       </span>
       , was=
-      <!--M#0 1-->
+      <!---->
       0
+      <!--M#0 1-->
     </div>
-    <!--M#0 2-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])
     </script>
@@ -101,7 +104,7 @@ container.querySelector("#increment")?.click();
 
 # Mutations
 ```
-#document/html0/body1/div0/span1/#text1: "1" => "2"
+#document/html0/body1/div0/span1/#text0: "1" => "2"
 ```
 
 
@@ -113,19 +116,20 @@ container.querySelector("#increment")?.click();
     <div>
       x=
       <span>
-        <!--M#0 0-->
         2
+        <!--M#0 0-->
       </span>
       , was=
-      <!--M#0 1-->
+      <!---->
       1
+      <!--M#0 1-->
     </div>
-    <!--M#0 2-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])
     </script>
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/ssr.expected.md
index cad12ad44..45de9d06d 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div>x=<span><!M#0 0>0</span>, was=<!M#0 1>false</div><!M#0 2><button id=increment>Increment</button><script>(M$h=[]).push((b,s)=>({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])</script>
+  <div>x=<span>0<!M#0 0></span>, was=<!>false<!M#0 1></div><button id=increment>Increment</button><!M#0 2><script>(M$h=[]).push((b,s)=>({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])</script>
 
 
 # Render "End"
@@ -10,19 +10,20 @@
     <div>
       x=
       <span>
-        <!--M#0 0-->
         0
+        <!--M#0 0-->
       </span>
       , was=
-      <!--M#0 1-->
+      <!---->
       false
+      <!--M#0 1-->
     </div>
-    <!--M#0 2-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 2-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{3:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-assignment/template.marko_0_x",])
     </script>
@@ -38,14 +39,15 @@ inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/#text0
 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/span1/#text0
+inserted #document/html0/body1/div0/span1/#comment1
 inserted #document/html0/body1/div0/#text2
 inserted #document/html0/body1/div0/#comment3
 inserted #document/html0/body1/div0/#text4
-inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/button2
-inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/div0/#comment5
+inserted #document/html0/body1/button1
+inserted #document/html0/body1/button1/#text0
+inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/script3
 inserted #document/html0/body1/script3/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/__snapshots__/html.expected/template.js
index 597f01ad9..a85bb76f3 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/__snapshots__/html.expected/template.js
@@ -1,9 +1,8 @@
-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 { nextScopeId as _nextScopeId, writeHydrateCall as _writeHydrateCall, writeHydrateScope as _writeHydrateScope, markHydrateNode as _markHydrateNode, write as _write, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const x = 0;
   const show = true;
-  _write(`${_markHydrateNode(_scope, 0)}`);
   if (show) {
     const _scope = _nextScopeId();
     _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_1_x");
@@ -11,7 +10,7 @@ const _renderer = (input, _tagVar) => {
       8: x
     });
   }
-  _write(`<div id=ref></div>${_markHydrateNode(_scope, 6)}<button id=increment>Increment</button>${_markHydrateNode(_scope, 7)}<button id=toggle>Toggle</button>`);
+  _write(`<div id=ref></div><button id=increment>Increment</button>${_markHydrateNode(_scope, 6)}<button id=toggle>Toggle</button>${_markHydrateNode(_scope, 7)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_show");
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag-conditional/template.marko_0_x");
   _writeHydrateScope(_scope, {
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/html.expected/template.js
index 786e08dce..dbb30975b 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/html.expected/template.js
@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _n
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const x = 0;
-  _write(`<div id=ref></div>${_markHydrateNode(_scope, 0)}<button id=increment>Increment</button>`);
+  _write(`<div id=ref></div><button id=increment>Increment</button>${_markHydrateNode(_scope, 0)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x");
   _writeHydrateScope(_scope, {
     1: x
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/hydrate.expected.md
index 40c33c824..f3f339e85 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/hydrate.expected.md
@@ -8,12 +8,12 @@
     >
       x=0, was=undefined
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])
     </script>
@@ -39,12 +39,12 @@ container.querySelector("#increment")?.click();
     >
       x=1, was=0
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])
     </script>
@@ -71,12 +71,12 @@ container.querySelector("#increment")?.click();
     >
       x=2, was=1
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])
     </script>
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/ssr.expected.md
index a8e925436..1a85997bd 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag-this/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div id=ref></div><!M#0 0><button id=increment>Increment</button><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])</script>
+  <div id=ref></div><button id=increment>Increment</button><!M#0 0><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])</script>
 
 
 # Render "End"
@@ -10,12 +10,12 @@
     <div
       id="ref"
     />
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag-this/template.marko_0_x",])
     </script>
@@ -29,9 +29,9 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/button2
-inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/button1
+inserted #document/html0/body1/button1/#text0
+inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/script3
 inserted #document/html0/body1/script3/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/html.expected/template.js
index 26376ec09..a2be0a54f 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/html.expected/template.js
@@ -2,7 +2,7 @@ import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _n
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
   const x = 0;
-  _write(`<div id=ref></div>${_markHydrateNode(_scope, 0)}<button id=increment>Increment</button>`);
+  _write(`<div id=ref></div><button id=increment>Increment</button>${_markHydrateNode(_scope, 0)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x");
   _writeHydrateScope(_scope, {
     1: x
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/hydrate.expected.md
index 815f0418d..6bb70fba6 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/hydrate.expected.md
@@ -8,12 +8,12 @@
     >
       Mount 0
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])
     </script>
@@ -39,12 +39,12 @@ container.querySelector("#increment")?.click();
     >
       Update 1
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])
     </script>
@@ -71,12 +71,12 @@ container.querySelector("#increment")?.click();
     >
       Update 2
     </div>
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])
     </script>
diff --git a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/ssr.expected.md
index 1209bdc75..3a6c3e398 100644
--- a/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/lifecycle-tag/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <div id=ref></div><!M#0 0><button id=increment>Increment</button><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])</script>
+  <div id=ref></div><button id=increment>Increment</button><!M#0 0><script>(M$h=[]).push((b,s)=>({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])</script>
 
 
 # Render "End"
@@ -10,12 +10,12 @@
     <div
       id="ref"
     />
-    <!--M#0 0-->
     <button
       id="increment"
     >
       Increment
     </button>
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{1:0}}),[0,"packages/translator/src/__tests__/fixtures/lifecycle-tag/template.marko_0_x",])
     </script>
@@ -29,9 +29,9 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
-inserted #document/html0/body1/#comment1
-inserted #document/html0/body1/button2
-inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/button1
+inserted #document/html0/body1/button1/#text0
+inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/script3
 inserted #document/html0/body1/script3/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected/template.js
index 96587361a..bbaba23c9 100644
--- a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected/template.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(`<div><span>${_markHydrateNode(_scope, 0)}${_escapeXML(input.x)}</span></div>`);
+  _write(`<div><span>${_escapeXML(input.x)}${_markHydrateNode(_scope, 0)}</span></div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/hydrate.expected.md
index 2c829a673..f2ec0831f 100644
--- a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/hydrate.expected.md
@@ -5,8 +5,8 @@
   <body>
     <div>
       <span>
-        <!--M#0 0-->
         1
+        <!--M#0 0-->
       </span>
     </div>
   </body>
diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md
index f4c0eae19..7398efd3d 100644
--- a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/migrate-input/__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
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js
index c982692e5..e235745ac 100644
--- a/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/html.expected/template.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 _$global = _getInContext("$");
-  _write(`<div><span>${_markHydrateNode(_scope, 0)}${_escapeXML(_$global.x)}</span></div>`);
+  _write(`<div><span>${_escapeXML(_$global.x)}${_markHydrateNode(_scope, 0)}</span></div>`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md
index f4c0eae19..7398efd3d 100644
--- a/packages/translator/src/__tests__/fixtures/migrate-out-global/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/migrate-out-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
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
index e1c02fa93..6fb9b11fa 100644
--- a/packages/translator/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/move-and-clear-children/__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, 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, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   children
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<div>`);
+  _write("<div>");
   for (const child of children) {
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(child.text)}`);
+    _write(`${_escapeXML(child.text)}${_markHydrateNode(_scope, 0)}`);
     _maybeFlush();
   }
-  _write("</div>");
+  _write(`</div>${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
index 10ab2abce..a53b2ec16 100644
--- a/packages/translator/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
@@ -1,10 +1,9 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = (input, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   for (const child of input.children) {
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(child.text)}`);
+    _write(`${_escapeXML(child.text)}${_markHydrateNode(_scope, 0)}`);
     _maybeFlush();
   }
 };
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/html.expected/template.js
index 2caf520f6..7eb65267e 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/html.expected/template.js
@@ -4,7 +4,7 @@ const _renderer = (input, _tagVar) => {
   const el = () => {
     throw new Error("Cannot reference DOM node from server");
   };
-  _write(`${_markHydrateNode(_scope, 0)}<div></div>${_markHydrateNode(_scope, 1)}`);
+  _write(`<div></div>${_markHydrateNode(_scope, 0)}`);
   if (true) {
     const _scope = _nextScopeId();
     _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/template.marko_1");
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/ssr.expected.md
index acf39cf94..2160e3104 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/__snapshots__/ssr.expected.md
@@ -1,15 +1,14 @@
 # Write
-  <!M#0 0><div></div><!M#0 1><script>(M$h=[]).push(null,[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/template.marko_1",])</script>
+  <div></div><!M#0 0><script>(M$h=[]).push(null,[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/template.marko_1",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <div />
-    <!--M#0 1-->
+    <!--M#0 0-->
     <script>
       (M$h=[]).push(null,[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-downstream-effect/template.marko_1",])
     </script>
@@ -19,12 +18,11 @@
 
 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/div0
-inserted #document/html1/body1/#comment1
-inserted #document/html1/body1/script2
-inserted #document/html1/body1/script2/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/div0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/html.expected/template.js
index d13550ab5..691826fd4 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/html.expected/template.js
@@ -5,7 +5,7 @@ const _renderer = (input, _tagVar) => {
   const el = () => {
     throw new Error("Cannot reference DOM node from server");
   };
-  _write(`${_markHydrateNode(_scope, 0)}<div></div>`);
+  _write(`<div></div>${_markHydrateNode(_scope, 0)}`);
   _helloSetter({
     el: el,
     renderBody() {
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/ssr.expected.md
index 240d81d68..e8cf863d4 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/__snapshots__/ssr.expected.md
@@ -1,14 +1,14 @@
 # Write
-  <!M#0 0><div></div><script>(M$h=[]).push((b,s)=>({1:{}}),[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/components/hello-setter.marko_0_el",])</script>
+  <div></div><!M#0 0><script>(M$h=[]).push((b,s)=>({1:{}}),[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/components/hello-setter.marko_0_el",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <div />
+    <!--M#0 0-->
     <script>
       (M$h=[]).push((b,s)=&gt;({1:{}}),[1,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect-child/components/hello-setter.marko_0_el",])
     </script>
@@ -18,11 +18,11 @@
 
 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/div0
-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/div0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/html.expected/template.js
index 6f5b89961..ebf6c28cb 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/html.expected/template.js
@@ -4,7 +4,7 @@ const _renderer = (input, _tagVar) => {
   const el = () => {
     throw new Error("Cannot reference DOM node from server");
   };
-  _write(`${_markHydrateNode(_scope, 0)}<div></div>`);
+  _write(`<div></div>${_markHydrateNode(_scope, 0)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/native-tag-ref-effect/template.marko_0");
 };
 export default _renderer;
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/ssr.expected.md
index 938902046..5f283ba16 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-effect/__snapshots__/ssr.expected.md
@@ -1,14 +1,14 @@
 # Write
-  <!M#0 0><div></div><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect/template.marko_0",])</script>
+  <div></div><!M#0 0><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect/template.marko_0",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <div />
+    <!--M#0 0-->
     <script>
       (M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-effect/template.marko_0",])
     </script>
@@ -18,11 +18,11 @@
 
 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/html1
-inserted #document/html1/head0
-inserted #document/html1/body1
-inserted #document/html1/body1/div0
-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/div0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/html.expected/template.js
index e145e8a19..d0d23b328 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/html.expected/template.js
@@ -1,13 +1,12 @@
 import { 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();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   if (true) {
     const _scope = _nextScopeId();
     const el = () => {
       throw new Error("Cannot reference DOM node from server");
     };
-    _write(`${_markHydrateNode(_scope, 0)}<div></div>`);
+    _write(`<div></div>${_markHydrateNode(_scope, 0)}`);
   }
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/template.marko_0");
 };
diff --git a/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/ssr.expected.md
index 74c5fd516..e1ca01d40 100644
--- a/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/__snapshots__/ssr.expected.md
@@ -1,15 +1,14 @@
 # Write
-  <!M#0 0><!M#1 0><div></div><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/template.marko_0",])</script>
+  <div></div><!M#1 0><script>(M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/template.marko_0",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
-<!--M#1 0-->
 <html>
   <head />
   <body>
     <div />
+    <!--M#1 0-->
     <script>
       (M$h=[]).push(null,[0,"packages/translator/src/__tests__/fixtures/native-tag-ref-hoisting/template.marko_0",])
     </script>
@@ -19,12 +18,11 @@
 
 # Mutations
 ```
-inserted #document/#comment0
-inserted #document/#comment1
-inserted #document/html2
-inserted #document/html2/head0
-inserted #document/html2/body1
-inserted #document/html2/body1/div0
-inserted #document/html2/body1/script1
-inserted #document/html2/body1/script1/#text0
+inserted #document/html0
+inserted #document/html0/head0
+inserted #document/html0/body1
+inserted #document/html0/body1/div0
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/html.expected/template.js
index 2805ab836..a20ea3a1d 100644
--- a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__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 clickCount = 0;
   const lastCount = 0;
   const lastCount2 = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button>${_markHydrateNode(_scope, 1)}${_escapeXML(clickCount)}</button>used to be <span>${_markHydrateNode(_scope, 2)}${_escapeXML(lastCount)}</span> which should be the same as <span>${_markHydrateNode(_scope, 3)}${_escapeXML(lastCount2)}</span>`);
+  _write(`<button>${_escapeXML(clickCount)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}used to be <span>${_escapeXML(lastCount)}${_markHydrateNode(_scope, 2)}</span> which should be the same as <span>${_escapeXML(lastCount2)}${_markHydrateNode(_scope, 3)}</span>`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount");
   _writeHydrateScope(_scope, {
     4: clickCount
diff --git a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/hydrate.expected.md
index 645bc2c26..274136f2a 100644
--- a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/hydrate.expected.md
@@ -1,22 +1,22 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </button>
+    <!--M#0 0-->
     used to be 
     <span>
-      <!--M#0 2-->
       0
+      <!--M#0 2-->
     </span>
      which should be the same as 
     <span>
-      <!--M#0 3-->
       0
+      <!--M#0 3-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])
@@ -35,23 +35,23 @@
 container.querySelector("button").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       1
+      <!--M#0 1-->
     </button>
+    <!--M#0 0-->
     used to be 
     <span>
-      <!--M#0 2-->
       0
+      <!--M#0 2-->
     </span>
      which should be the same as 
     <span>
-      <!--M#0 3-->
       0
+      <!--M#0 3-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])
@@ -62,7 +62,7 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "0" => "1"
 ```
 
 
@@ -70,23 +70,23 @@ 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-->
     used to be 
     <span>
-      <!--M#0 2-->
       1
+      <!--M#0 2-->
     </span>
      which should be the same as 
     <span>
-      <!--M#0 3-->
       1
+      <!--M#0 3-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])
@@ -97,9 +97,9 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "1" => "2"
-#document/html1/body1/span2/#text1: "0" => "1"
-#document/html1/body1/span4/#text1: "0" => "1"
+#document/html0/body1/button0/#text0: "1" => "2"
+#document/html0/body1/span3/#text0: "0" => "1"
+#document/html0/body1/span5/#text0: "0" => "1"
 ```
 
 
@@ -107,23 +107,23 @@ 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-->
     used to be 
     <span>
-      <!--M#0 2-->
       2
+      <!--M#0 2-->
     </span>
      which should be the same as 
     <span>
-      <!--M#0 3-->
       2
+      <!--M#0 3-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])
@@ -134,7 +134,7 @@ container.querySelector("button").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "2" => "3"
-#document/html1/body1/span2/#text1: "1" => "2"
-#document/html1/body1/span4/#text1: "1" => "2"
+#document/html0/body1/button0/#text0: "2" => "3"
+#document/html0/body1/span3/#text0: "1" => "2"
+#document/html0/body1/span5/#text0: "1" => "2"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/ssr.expected.md
index 32ae5af67..454b59ed8 100644
--- a/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/nested-assignment-expression/__snapshots__/ssr.expected.md
@@ -1,26 +1,26 @@
 # Write
-  <!M#0 0><button><!M#0 1>0</button>used to be <span><!M#0 2>0</span> which should be the same as <span><!M#0 3>0</span><script>(M$h=[]).push((b,s)=>({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])</script>
+  <button>0<!M#0 1></button><!M#0 0>used to be <span>0<!M#0 2></span> which should be the same as <span>0<!M#0 3></span><script>(M$h=[]).push((b,s)=>({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button>
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </button>
+    <!--M#0 0-->
     used to be 
     <span>
-      <!--M#0 2-->
       0
+      <!--M#0 2-->
     </span>
      which should be the same as 
     <span>
-      <!--M#0 3-->
       0
+      <!--M#0 3-->
     </span>
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{4:0}}),[0,"packages/translator/src/__tests__/fixtures/nested-assignment-expression/template.marko_0_clickCount",])
@@ -31,21 +31,21 @@
 
 # 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/#text1
-inserted #document/html1/body1/span2
-inserted #document/html1/body1/span2/#comment0
-inserted #document/html1/body1/span2/#text1
-inserted #document/html1/body1/#text3
-inserted #document/html1/body1/span4
-inserted #document/html1/body1/span4/#comment0
-inserted #document/html1/body1/span4/#text1
-inserted #document/html1/body1/script5
-inserted #document/html1/body1/script5/#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/#text2
+inserted #document/html0/body1/span3
+inserted #document/html0/body1/span3/#text0
+inserted #document/html0/body1/span3/#comment1
+inserted #document/html0/body1/#text4
+inserted #document/html0/body1/span5
+inserted #document/html0/body1/span5/#text0
+inserted #document/html0/body1/span5/#comment1
+inserted #document/html0/body1/script6
+inserted #document/html0/body1/script6/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/placeholders/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/placeholders/__snapshots__/html.expected/template.js
index 0996de9cc..4bf09581b 100644
--- a/packages/translator/src/__tests__/fixtures/placeholders/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/placeholders/__snapshots__/html.expected/template.js
@@ -1,10 +1,10 @@
-import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, toString as _toString, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, toString as _toString, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   x
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(x)}<span>${_markHydrateNode(_scope, 1)}${_escapeXML(x)}<div></div></span><div><div>a</div>${_markHydrateNode(_scope, 2)}${_escapeXML(x)}Hello Text &lt;a/>${_markHydrateNode(_scope, 3)}${_toString(x)}Hello HTML <a/><script>
-    Hello &lt;b> &lt;/script>
+  _write(`${_escapeXML(x)}${_markHydrateNode(_scope, 0)}<span>${_escapeXML(x)}${_markHydrateNode(_scope, 1)}<div></div></span><div><div>a</div>${_escapeXML(x)}${_markHydrateNode(_scope, 2)}Hello Text &lt;a/>${_toString(x)}${_markHydrateNode(_scope, 3)}Hello HTML <a/><script>
+    <!>Hello &lt;b> &lt;/script>
   </script></div>`);
 };
 export default _renderer;
diff --git a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/html.expected/template.js
index 82df5795b..680023162 100644
--- a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/reassignment-expression-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 count = 0;
-  _write(`${_markHydrateNode(_scope, 0)}<button id=addTwo>${_markHydrateNode(_scope, 1)}${_escapeXML(count)}</button>${_markHydrateNode(_scope, 2)}<button id=triple>${_markHydrateNode(_scope, 3)}${_escapeXML(count)}</button>${_markHydrateNode(_scope, 4)}<button id=cube>${_markHydrateNode(_scope, 5)}${_escapeXML(count)}</button>`);
+  _write(`<button id=addTwo>${_escapeXML(count)}${_markHydrateNode(_scope, 1)}</button>${_markHydrateNode(_scope, 0)}<button id=triple>${_escapeXML(count)}${_markHydrateNode(_scope, 3)}</button>${_markHydrateNode(_scope, 2)}<button id=cube>${_escapeXML(count)}${_markHydrateNode(_scope, 5)}</button>${_markHydrateNode(_scope, 4)}`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count");
   _writeHydrateScope(_scope, {
     6: count
diff --git a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/hydrate.expected.md
index 680fb586e..ee0e739a4 100644
--- a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/hydrate.expected.md
@@ -1,29 +1,29 @@
 # Render {}
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button
       id="addTwo"
     >
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     <button
       id="triple"
     >
-      <!--M#0 3-->
       0
+      <!--M#0 3-->
     </button>
-    <!--M#0 4-->
+    <!--M#0 2-->
     <button
       id="cube"
     >
-      <!--M#0 5-->
       0
+      <!--M#0 5-->
     </button>
+    <!--M#0 4-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])
     </script>
@@ -41,30 +41,30 @@
 container.querySelector("#addTwo").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button
       id="addTwo"
     >
-      <!--M#0 1-->
       2
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     <button
       id="triple"
     >
-      <!--M#0 3-->
       2
+      <!--M#0 3-->
     </button>
-    <!--M#0 4-->
+    <!--M#0 2-->
     <button
       id="cube"
     >
-      <!--M#0 5-->
       2
+      <!--M#0 5-->
     </button>
+    <!--M#0 4-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])
     </script>
@@ -74,9 +74,9 @@ container.querySelector("#addTwo").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "0" => "2"
-#document/html1/body1/button2/#text1: "0" => "2"
-#document/html1/body1/button4/#text1: "0" => "2"
+#document/html0/body1/button0/#text0: "0" => "2"
+#document/html0/body1/button2/#text0: "0" => "2"
+#document/html0/body1/button4/#text0: "0" => "2"
 ```
 
 
@@ -84,30 +84,30 @@ container.querySelector("#addTwo").click();
 container.querySelector("#triple").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button
       id="addTwo"
     >
-      <!--M#0 1-->
       6
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     <button
       id="triple"
     >
-      <!--M#0 3-->
       6
+      <!--M#0 3-->
     </button>
-    <!--M#0 4-->
+    <!--M#0 2-->
     <button
       id="cube"
     >
-      <!--M#0 5-->
       6
+      <!--M#0 5-->
     </button>
+    <!--M#0 4-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])
     </script>
@@ -117,9 +117,9 @@ container.querySelector("#triple").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "2" => "6"
-#document/html1/body1/button2/#text1: "2" => "6"
-#document/html1/body1/button4/#text1: "2" => "6"
+#document/html0/body1/button0/#text0: "2" => "6"
+#document/html0/body1/button2/#text0: "2" => "6"
+#document/html0/body1/button4/#text0: "2" => "6"
 ```
 
 
@@ -127,30 +127,30 @@ container.querySelector("#triple").click();
 container.querySelector("#cube").click();
 
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button
       id="addTwo"
     >
-      <!--M#0 1-->
       216
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     <button
       id="triple"
     >
-      <!--M#0 3-->
       216
+      <!--M#0 3-->
     </button>
-    <!--M#0 4-->
+    <!--M#0 2-->
     <button
       id="cube"
     >
-      <!--M#0 5-->
       216
+      <!--M#0 5-->
     </button>
+    <!--M#0 4-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])
     </script>
@@ -160,7 +160,7 @@ container.querySelector("#cube").click();
 
 # Mutations
 ```
-#document/html1/body1/button0/#text1: "6" => "216"
-#document/html1/body1/button2/#text1: "6" => "216"
-#document/html1/body1/button4/#text1: "6" => "216"
+#document/html0/body1/button0/#text0: "6" => "216"
+#document/html0/body1/button2/#text0: "6" => "216"
+#document/html0/body1/button4/#text0: "6" => "216"
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/ssr.expected.md
index 4f1596060..541e4d026 100644
--- a/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/reassignment-expression-counter/__snapshots__/ssr.expected.md
@@ -1,33 +1,33 @@
 # Write
-  <!M#0 0><button id=addTwo><!M#0 1>0</button><!M#0 2><button id=triple><!M#0 3>0</button><!M#0 4><button id=cube><!M#0 5>0</button><script>(M$h=[]).push((b,s)=>({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])</script>
+  <button id=addTwo>0<!M#0 1></button><!M#0 0><button id=triple>0<!M#0 3></button><!M#0 2><button id=cube>0<!M#0 5></button><!M#0 4><script>(M$h=[]).push((b,s)=>({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])</script>
 
 
 # Render "End"
 ```html
-<!--M#0 0-->
 <html>
   <head />
   <body>
     <button
       id="addTwo"
     >
-      <!--M#0 1-->
       0
+      <!--M#0 1-->
     </button>
-    <!--M#0 2-->
+    <!--M#0 0-->
     <button
       id="triple"
     >
-      <!--M#0 3-->
       0
+      <!--M#0 3-->
     </button>
-    <!--M#0 4-->
+    <!--M#0 2-->
     <button
       id="cube"
     >
-      <!--M#0 5-->
       0
+      <!--M#0 5-->
     </button>
+    <!--M#0 4-->
     <script>
       (M$h=[]).push((b,s)=&gt;({0:{6:0}}),[0,"packages/translator/src/__tests__/fixtures/reassignment-expression-counter/template.marko_0_count",])
     </script>
@@ -37,21 +37,21 @@
 
 # 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/#comment1
-inserted #document/html1/body1/button2
-inserted #document/html1/body1/button2/#comment0
-inserted #document/html1/body1/button2/#text1
-inserted #document/html1/body1/#comment3
-inserted #document/html1/body1/button4
-inserted #document/html1/body1/button4/#comment0
-inserted #document/html1/body1/button4/#text1
-inserted #document/html1/body1/script5
-inserted #document/html1/body1/script5/#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/button2
+inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/button2/#comment1
+inserted #document/html0/body1/#comment3
+inserted #document/html0/body1/button4
+inserted #document/html0/body1/button4/#text0
+inserted #document/html0/body1/button4/#comment1
+inserted #document/html0/body1/#comment5
+inserted #document/html0/body1/script6
+inserted #document/html0/body1/script6/#text0
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
index e1c02fa93..6fb9b11fa 100644
--- a/packages/translator/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/remove-and-add-rows/__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, 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, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   children
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<div>`);
+  _write("<div>");
   for (const child of children) {
     const _scope = _nextScopeId();
-    _write(`${_markHydrateNode(_scope, 0)}${_escapeXML(child.text)}`);
+    _write(`${_escapeXML(child.text)}${_markHydrateNode(_scope, 0)}`);
     _maybeFlush();
   }
-  _write("</div>");
+  _write(`</div>${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/style-tag-modules-default/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/style-tag-modules-default/__snapshots__/html.expected/template.js
index 20d799a98..bfde1bf0b 100644
--- a/packages/translator/src/__tests__/fixtures/style-tag-modules-default/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/style-tag-modules-default/__snapshots__/html.expected/template.js
@@ -1,8 +1,8 @@
 import myStyles from "virtual:./template.marko.module.css \n  .content {\n    color: green;\n  }\n";
-import { markHydrateNode as _markHydrateNode, classAttr as _classAttr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { classAttr as _classAttr, 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, 1)}<div${_classAttr(myStyles.content)}>Hello</div>`);
+  _write(`<div${_classAttr(myStyles.content)}>Hello</div>${_markHydrateNode(_scope, 1)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/style-tag-modules-destructured/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/style-tag-modules-destructured/__snapshots__/html.expected/template.js
index 9e575696b..1e38b3098 100644
--- a/packages/translator/src/__tests__/fixtures/style-tag-modules-destructured/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/style-tag-modules-destructured/__snapshots__/html.expected/template.js
@@ -1,11 +1,11 @@
 import _style from "virtual:./template.marko.module.css \n  .content {\n    color: green;\n  }\n";
-import { markHydrateNode as _markHydrateNode, classAttr as _classAttr, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { classAttr as _classAttr, 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 {
     content
   } = _style;
-  _write(`${_markHydrateNode(_scope, 1)}<div${_classAttr(content)}>Hello</div>`);
+  _write(`<div${_classAttr(content)}>Hello</div>${_markHydrateNode(_scope, 1)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/html.expected/template.js
index 49909280d..131399cef 100644
--- a/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/html.expected/template.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();
-  const MyTag = input => _write(`Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(input.name)}`);
+  const MyTag = input => _write(`Hello <!>${_escapeXML(input.name)}${_markHydrateNode(_scope, 0)}`);
   MyTag({
     name: "World",
     renderBody() {
diff --git a/packages/translator/src/__tests__/fixtures/toggle-first-child/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/toggle-first-child/__snapshots__/html.expected/template.js
index ac3c56c00..c127ff67d 100644
--- a/packages/translator/src/__tests__/fixtures/toggle-first-child/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/toggle-first-child/__snapshots__/html.expected/template.js
@@ -1,12 +1,12 @@
-import { markHydrateNode as _markHydrateNode, write as _write, escapeXML as _escapeXML, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { write as _write, escapeXML as _escapeXML, markHydrateNode as _markHydrateNode, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   value
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`<div>${_markHydrateNode(_scope, 0)}`);
+  _write("<div>");
   if (value) {
     const _scope = _nextScopeId();
-    _write(`<span>${_markHydrateNode(_scope, 0)}${_escapeXML(value)}</span>`);
+    _write(`<span>${_escapeXML(value)}${_markHydrateNode(_scope, 0)}</span>`);
   }
   _write("<span></span><span></span></div>");
 };
diff --git a/packages/translator/src/__tests__/fixtures/update-attr/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/update-attr/__snapshots__/html.expected/template.js
index ae1e65c0a..d7e652529 100644
--- a/packages/translator/src/__tests__/fixtures/update-attr/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/update-attr/__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 = ({
   value
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}<div a=0${_attr("b", value)}></div>`);
+  _write(`<div a=0${_attr("b", value)}></div>${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/html.expected/template.js
index 2b1df1c25..4ea423151 100644
--- a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/html.expected/template.js
@@ -1,9 +1,9 @@
-import { markHydrateNode as _markHydrateNode, toString as _toString, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { toString as _toString, 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(`<em>Testing</em> ${_markHydrateNode(_scope, 0)}${_toString(value)}`);
+  _write(`<em>Testing</em> <!>${_toString(value)}${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/hydrate.expected.md
index 849f57734..36bedd9f6 100644
--- a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/hydrate.expected.md
@@ -7,11 +7,12 @@
       Testing
     </em>
      
-    <!--M#0 0-->
+    <!---->
     Hello 
     <strong>
       World
     </strong>
+    <!--M#0 0-->
   </body>
 </html>
 ```
diff --git a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/ssr.expected.md
index b1e9468ba..3d0e56f88 100644
--- a/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/update-html/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  <em>Testing</em> <!M#0 0>Hello <strong>World</strong>
+  <em>Testing</em> <!>Hello <strong>World</strong><!M#0 0>
 
 
 # Render "End"
@@ -11,11 +11,12 @@
       Testing
     </em>
      
-    <!--M#0 0-->
+    <!---->
     Hello 
     <strong>
       World
     </strong>
+    <!--M#0 0-->
   </body>
 </html>
 ```
@@ -32,4 +33,5 @@ inserted #document/html0/body1/#comment2
 inserted #document/html0/body1/#text3
 inserted #document/html0/body1/strong4
 inserted #document/html0/body1/strong4/#text0
+inserted #document/html0/body1/#comment5
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/html.expected/template.js
index 5b3e9e415..5996b63c7 100644
--- a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/update-text/__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 = ({
   value
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`Static ${_markHydrateNode(_scope, 0)}${_escapeXML(value)}`);
+  _write(`Static <!>${_escapeXML(value)}${_markHydrateNode(_scope, 0)}`);
 };
 export default _renderer;
 export const render = /* @__PURE__ */_createRenderer(_renderer);
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/hydrate.expected.md b/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/hydrate.expected.md
index 7351c09f0..635fba591 100644
--- a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/hydrate.expected.md
+++ b/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/hydrate.expected.md
@@ -4,8 +4,9 @@
   <head />
   <body>
     Static 
-    <!--M#0 0-->
+    <!---->
     Dynamic 1
+    <!--M#0 0-->
   </body>
 </html>
 ```
diff --git a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/ssr.expected.md
index 01720b2a4..992d10247 100644
--- a/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/ssr.expected.md
+++ b/packages/translator/src/__tests__/fixtures/update-text/__snapshots__/ssr.expected.md
@@ -1,5 +1,5 @@
 # Write
-  Static <!M#0 0>Dynamic 1
+  Static <!>Dynamic 1<!M#0 0>
 
 
 # Render "End"
@@ -8,8 +8,9 @@
   <head />
   <body>
     Static 
-    <!--M#0 0-->
+    <!---->
     Dynamic 1
+    <!--M#0 0-->
   </body>
 </html>
 ```
@@ -22,4 +23,5 @@ inserted #document/html0/body1
 inserted #document/html0/body1/#text0
 inserted #document/html0/body1/#comment1
 inserted #document/html0/body1/#text2
+inserted #document/html0/body1/#comment3
 ```
\ No newline at end of file
diff --git a/packages/translator/src/__tests__/fixtures/user-effect-cleanup/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/user-effect-cleanup/__snapshots__/html.expected/template.js
index 522aff05c..35d815c19 100644
--- a/packages/translator/src/__tests__/fixtures/user-effect-cleanup/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/user-effect-cleanup/__snapshots__/html.expected/template.js
@@ -1,11 +1,11 @@
-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 = ({
   value
 }, _tagVar) => {
   const _scope = _nextScopeId();
   const a = 0;
   const b = 0;
-  _write(`<div>${_markHydrateNode(_scope, 0)}${_escapeXML("" + a + b)}</div>`);
+  _write(`<div>${_escapeXML("" + a + b)}${_markHydrateNode(_scope, 0)}</div>`);
   _writeHydrateCall(_scope, "packages/translator/src/__tests__/fixtures/user-effect-cleanup/template.marko_0_value");
   _writeHydrateScope(_scope, {
     1: value
diff --git a/packages/translator/src/__tests__/fixtures/yield-tag/__snapshots__/html.expected/template.js b/packages/translator/src/__tests__/fixtures/yield-tag/__snapshots__/html.expected/template.js
index 32b597b69..39a839537 100644
--- a/packages/translator/src/__tests__/fixtures/yield-tag/__snapshots__/html.expected/template.js
+++ b/packages/translator/src/__tests__/fixtures/yield-tag/__snapshots__/html.expected/template.js
@@ -1,9 +1,8 @@
-import { markHydrateNode as _markHydrateNode, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
+import { nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html";
 const _renderer = ({
   show
 }, _tagVar) => {
   const _scope = _nextScopeId();
-  _write(`${_markHydrateNode(_scope, 0)}`);
   if (show) {
     const _scope = _nextScopeId();
     const _return = 1;
diff --git a/packages/translator/src/util/walks.ts b/packages/translator/src/util/walks.ts
index df2177852..a0b35a286 100644
--- a/packages/translator/src/util/walks.ts
+++ b/packages/translator/src/util/walks.ts
@@ -2,12 +2,10 @@ import { types as t } from "@marko/compiler";
 import { createSectionState, getSectionId } from "../util/sections";
 import { ReserveType } from "../util/reserve";
 import { isOutputHTML } from "./marko-config";
-import { callRuntime } from "./runtime";
 import toTemplateOrStringLiteral, {
   appendLiteral,
 } from "./to-template-string-or-literal";
 import { writeTo } from "./writer";
-import { scopeIdentifier } from "../visitors/program";
 
 const [getWalks] = createSectionState<(string | t.Expression)[]>(
   "walks",
@@ -127,77 +125,73 @@ export function visit(
     );
   }
 
+  if (isOutputHTML()) {
+    return;
+  }
+
   const sectionId = getSectionId(path);
   const steps = getSteps(sectionId);
   const walks = getWalks(sectionId);
   const walkComment = getWalkComment(sectionId);
 
-  if (code && isOutputHTML()) {
-    writeTo(path)`${callRuntime(
-      "markHydrateNode",
-      scopeIdentifier,
-      t.numericLiteral(reserve!.id)
-    )}`;
-  } else {
-    let walkString = "";
+  let walkString = "";
 
-    if (steps.length) {
-      const walks: WalkCodes[] = [];
-      let depth = 0;
+  if (steps.length) {
+    const walks: WalkCodes[] = [];
+    let depth = 0;
 
-      for (const step of steps) {
-        if (step === Step.enter) {
-          depth++;
-          walks.push(WalkCodes.Next);
+    for (const step of steps) {
+      if (step === Step.enter) {
+        depth++;
+        walks.push(WalkCodes.Next);
+      } else {
+        depth--;
+        if (depth >= 0) {
+          // delete back to and including previous NEXT
+          walks.length = walks.lastIndexOf(WalkCodes.Next);
+          walks.push(WalkCodes.Over);
         } else {
-          depth--;
-          if (depth >= 0) {
-            // delete back to and including previous NEXT
-            walks.length = walks.lastIndexOf(WalkCodes.Next);
-            walks.push(WalkCodes.Over);
-          } else {
-            // delete back to previous OUT
-            walks.length = walks.lastIndexOf(WalkCodes.Out) + 1;
-            walks.push(WalkCodes.Out);
-            depth = 0;
-          }
+          // delete back to previous OUT
+          walks.length = walks.lastIndexOf(WalkCodes.Out) + 1;
+          walks.push(WalkCodes.Out);
+          depth = 0;
         }
       }
+    }
 
-      let current = walks[0];
-      let count = 0;
+    let current = walks[0];
+    let count = 0;
 
-      for (const walk of walks) {
-        if (walk !== current) {
-          walkComment.push(`${walkCodeToName[current]}(${count})`);
-          walkString += nCodeString(current, count);
-          current = walk;
-          count = 1;
-        } else {
-          count++;
-        }
+    for (const walk of walks) {
+      if (walk !== current) {
+        walkComment.push(`${walkCodeToName[current]}(${count})`);
+        walkString += nCodeString(current, count);
+        current = walk;
+        count = 1;
+      } else {
+        count++;
       }
-
-      walkComment.push(`${walkCodeToName[current]}(${count})`);
-      walkString += nCodeString(current, count);
-      steps.length = 0;
     }
 
-    if (code !== undefined) {
-      if (code !== WalkCodes.Get) {
-        writeTo(path)`<!>`;
-      }
-      walkComment.push(`${walkCodeToName[code]}`);
-      walkString += String.fromCharCode(code);
-    }
-
-    if (reserve?.size) {
-      walkComment.push(`${walkCodeToName[WalkCodes.Skip]}(${reserve.size})`);
-      walkString += nCodeString(WalkCodes.Skip, reserve.size);
-    }
-
-    appendLiteral(walks, walkString);
+    walkComment.push(`${walkCodeToName[current]}(${count})`);
+    walkString += nCodeString(current, count);
+    steps.length = 0;
   }
+
+  if (code !== undefined) {
+    if (code !== WalkCodes.Get) {
+      writeTo(path)`<!>`;
+    }
+    walkComment.push(`${walkCodeToName[code]}`);
+    walkString += String.fromCharCode(code);
+  }
+
+  if (reserve?.size) {
+    walkComment.push(`${walkCodeToName[WalkCodes.Skip]}(${reserve.size})`);
+    walkString += nCodeString(WalkCodes.Skip, reserve.size);
+  }
+
+  appendLiteral(walks, walkString);
 }
 
 function nCodeString(code: WalkCodes, number: number) {
diff --git a/packages/translator/src/util/writer.ts b/packages/translator/src/util/writer.ts
index d7d7479b4..257914914 100644
--- a/packages/translator/src/util/writer.ts
+++ b/packages/translator/src/util/writer.ts
@@ -6,7 +6,9 @@ import toTemplateOrStringLiteral, {
 } from "./to-template-string-or-literal";
 import { getWalkString } from "./walks";
 import { getSetup } from "./signals";
-import { currentProgramPath } from "../visitors/program";
+import { currentProgramPath, scopeIdentifier } from "../visitors/program";
+import { isOutputHTML } from "./marko-config";
+import { ReserveType } from "./reserve";
 
 const [getRenderer] = createSectionState<t.Identifier>(
   "renderer",
@@ -83,3 +85,21 @@ export function getSectionMeta(sectionId: number) {
     writes: toTemplateOrStringLiteral(writes) || t.stringLiteral(""),
   };
 }
+
+export function markNode(path: t.NodePath<t.MarkoTag | t.MarkoPlaceholder>) {
+  const { reserve } = path.node.extra;
+
+  if (reserve?.type !== ReserveType.Visit) {
+    throw path.buildCodeFrameError(
+      "Tried to mark a node that was not determined to need a mark during analyze."
+    );
+  }
+
+  if (isOutputHTML()) {
+    writeTo(path)`${callRuntime(
+      "markHydrateNode",
+      scopeIdentifier,
+      t.numericLiteral(reserve!.id)
+    )}`;
+  }
+}
diff --git a/packages/translator/src/visitors/placeholder.ts b/packages/translator/src/visitors/placeholder.ts
index 58c5f7ab7..39f52fd20 100644
--- a/packages/translator/src/visitors/placeholder.ts
+++ b/packages/translator/src/visitors/placeholder.ts
@@ -64,6 +64,7 @@ export default {
           method as HTMLMethod | DOMMethod,
           placeholder.node.value
         )}`;
+        writer.markNode(placeholder);
       } else {
         addStatement(
           "apply",
diff --git a/packages/translator/src/visitors/tag/native-tag.ts b/packages/translator/src/visitors/tag/native-tag.ts
index 684635ce9..0b137abbc 100644
--- a/packages/translator/src/visitors/tag/native-tag.ts
+++ b/packages/translator/src/visitors/tag/native-tag.ts
@@ -279,6 +279,10 @@ export default {
           .skip();
       }
 
+      if (extra.reserve) {
+        writer.markNode(tag);
+      }
+
       walks.exit(tag);
       tag.remove();
     },
diff --git a/packages/translator/src/visitors/text.ts b/packages/translator/src/visitors/text.ts
index 7f439b48e..b63e87747 100644
--- a/packages/translator/src/visitors/text.ts
+++ b/packages/translator/src/visitors/text.ts
@@ -1,10 +1,25 @@
-import type { types as t } from "@marko/compiler";
+import { types as t } from "@marko/compiler";
 import * as writer from "../util/writer";
 import * as walks from "../util/walks";
+import { isOutputHTML } from "../util/marko-config";
 
 export default {
   translate(text: t.NodePath<t.MarkoText>) {
-    writer.writeTo(text)`${text.node.value}`;
+    const followingSiblings = (text.container as t.Statement[]).slice(
+      (text.key as number) + 1
+    );
+    let needsSeparator = false;
+    if (isOutputHTML()) {
+      for (const sibling of followingSiblings) {
+        if (t.isMarkoPlaceholder(sibling)) {
+          needsSeparator = true;
+          break;
+        } else if (t.isMarkoTag(sibling) || t.isMarkoText(sibling)) {
+          break;
+        }
+      }
+    }
+    writer.writeTo(text)`${text.node.value}${needsSeparator ? "<!>" : ""}`;
     walks.enterShallow(text);
     text.remove();
   },