fix: resume empty placeholders via a unified text resume marker

.changeset/empty-text-resume.md

@@ -0,0 +1,9 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix resume claiming the wrong DOM node for a placeholder that renders empty on the server (eg `<div/>${value}` where `value` starts empty and is assigned later). Placeholders now serialize a single `_text_resume`/`_html_resume` call which writes an `EmptyText` resume marker when the rendered text is empty, letting resume create the text node instead of guessing a neighbor.
+
+Fix resume of an unescaped placeholder (`$!{value}`) whose markup parses to multiple top-level nodes: the server now brackets the markup with range markers so resume reconstructs the full range (including its last-child accessor), instead of claiming only the final node and orphaning the rest on the first client update.
+
+This also removes the `<!>` separator comments previously written for empty positions and shrinks both the SSR output and the client resume runtime.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 26526,
-        "brotli": 9878
+        "min": 26586,
+        "brotli": 9948
       }
     },
     {
@@ -33,12 +33,12 @@
         "brotli": 82
       },
       "runtime": {
-        "min": 2650,
-        "brotli": 1302
+        "min": 2612,
+        "brotli": 1282
       },
       "total": {
-        "min": 2731,
-        "brotli": 1384
+        "min": 2693,
+        "brotli": 1364
       }
     },
     {
@@ -63,12 +63,12 @@
         "brotli": 101
       },
       "runtime": {
-        "min": 2855,
-        "brotli": 1378
+        "min": 2817,
+        "brotli": 1357
       },
       "total": {
-        "min": 2970,
-        "brotli": 1479
+        "min": 2932,
+        "brotli": 1458
       }
     }
   ]

.sizes/comments.ssr/runtime.js

@@ -1,4 +1,4 @@
-// size: 2855 (min) 1378 (brotli)
+// size: 2817 (min) 1357 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
   rendering,
@@ -206,19 +206,14 @@ function init(runtimeId = "M") {
               if ((processResumes(render.r, effects), readyIds));
               let retained = 0;
               for (visit of (visits = render.v))
-                if (
-                  ((lastTokenIndex = render.i.length),
+                ((lastTokenIndex = render.i.length),
                   (visitText = visit.data),
                   (visitType = visitText[lastTokenIndex++]),
                   (visitScope = getScope(nextToken())),
-                  visitType === "*")
-                ) {
-                  let prev = visit.previousSibling;
-                  visitScope[nextToken()] =
-                    prev && (prev.nodeType < 8 || prev.data)
-                      ? prev
-                      : visit.parentNode.insertBefore(new Text(), visit);
-                }
+                  (visitScope[nextToken()] =
+                    visitType === "$"
+                      ? visit.previousSibling
+                      : visit.parentNode.insertBefore(new Text(), visit)));
               return ((visits.length = retained), effects);
             }),
             (render.w = () => {

.sizes/counter.ssr/runtime.js

@@ -1,4 +1,4 @@
-// size: 2650 (min) 1302 (brotli)
+// size: 2612 (min) 1282 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
   rendering,
@@ -203,19 +203,14 @@ function init(runtimeId = "M") {
               if ((processResumes(render.r, effects), readyIds));
               let retained = 0;
               for (visit of (visits = render.v))
-                if (
-                  ((lastTokenIndex = render.i.length),
+                ((lastTokenIndex = render.i.length),
                   (visitText = visit.data),
                   (visitType = visitText[lastTokenIndex++]),
                   (visitScope = getScope(nextToken())),
-                  visitType === "*")
-                ) {
-                  let prev = visit.previousSibling;
-                  visitScope[nextToken()] =
-                    prev && (prev.nodeType < 8 || prev.data)
-                      ? prev
-                      : visit.parentNode.insertBefore(new Text(), visit);
-                }
+                  (visitScope[nextToken()] =
+                    visitType === "$"
+                      ? visit.previousSibling
+                      : visit.parentNode.insertBefore(new Text(), visit)));
               return ((visits.length = retained), effects);
             }),
             (render.w = () => {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 26526 (min) 9878 (brotli)
+// size: 26586 (min) 9948 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let unsafeStyleAttrReg = /[\\;]/g,
   replaceUnsafeStyleAttr = (c) => (c === ";" ? "\\3B " : "\\\\"),
@@ -19,6 +19,7 @@ let unsafeStyleAttrReg = /[\\;]/g,
   },
   decodeAccessor = (num) => (num + (num < 26 ? 10 : num < 962 ? 334 : 11998)).toString(36),
   branchesEnabled,
+  dynamicHtmlEnabled,
   rendering,
   runId = 2,
   caughtError = /* @__PURE__ */ new WeakSet(),
@@ -98,6 +99,19 @@ let unsafeStyleAttrReg = /[\\;]/g,
   lazyEnabled,
   isResuming,
   cloneCache = {},
+  _html = /*@__PURE__*/ withDynamicHtml(function (scope, value, accessor) {
+    let firstChild = scope[accessor],
+      parentNode = firstChild.parentNode,
+      lastChild = scope["H" + accessor] || firstChild,
+      newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
+    (insertChildNodes(
+      parentNode,
+      firstChild,
+      (scope[accessor] = newContent.firstChild || newContent.appendChild(new Text())),
+      (scope["H" + accessor] = newContent.lastChild),
+    ),
+      removeChildNodes(firstChild, lastChild));
+  }),
   R = /[\p{L}\p{N}]/gu,
   inputType = "",
   controllableScripts = {},
@@ -400,6 +414,9 @@ function normalizeDynamicRenderer(value) {
 function withBranches(runtime) {
   return ((branchesEnabled = 1), runtime);
 }
+function withDynamicHtml(runtime) {
+  return ((dynamicHtmlEnabled = 1), runtime);
+}
 function _hoist_read_error() {}
 function _assert_hoist(value) {}
 function forIn(obj, cb) {
@@ -953,7 +970,7 @@ function init(runtimeId = "M") {
                     );
                     ((branch._ ??= visitScope),
                       (branch.K = branch.S = startVisit),
-                      visitType === "'" && (branch.a = startVisit));
+                      visitType === "(" && (branch.a = startVisit));
                   } else
                     ((curBranchScopes = push(curBranchScopes, branch)),
                       accessor &&
@@ -1028,6 +1045,7 @@ function init(runtimeId = "M") {
             lastToken,
             lastTokenIndex,
             visitBranches,
+            htmlStart,
             embedAnchor;
           return (
             (serializeContext._ = registeredValues),
@@ -1042,22 +1060,23 @@ function init(runtimeId = "M") {
                 }
               let retained = 0;
               for (visit of (visits = render.v))
-                if (
-                  ((lastTokenIndex = render.i.length),
+                ((lastTokenIndex = render.i.length),
                   (visitText = visit.data),
                   (visitType = visitText[lastTokenIndex++]),
                   (visitScope = getScope(nextToken())),
-                  visitType === "*")
-                ) {
-                  let prev = visit.previousSibling;
-                  visitScope[nextToken()] =
-                    prev && (prev.nodeType < 8 || prev.data)
-                      ? prev
-                      : visit.parentNode.insertBefore(new Text(), visit);
-                } else
-                  branchesEnabled
-                    ? (visitBranches ||= createVisitBranches())()
-                    : lazyEnabled && render.b && (visits[retained++] = visit);
+                  dynamicHtmlEnabled && visitType > "%" && visitType <= "'"
+                    ? visitType === "&"
+                      ? (htmlStart = visit)
+                      : ((visitScope[nextToken()] = htmlStart),
+                        (visitScope["H" + lastToken] = visit))
+                    : branchesEnabled && visitType > "'"
+                      ? (visitBranches ||= createVisitBranches())()
+                      : lazyEnabled && render.b && visitType > "%"
+                        ? (visits[retained++] = visit)
+                        : (visitScope[nextToken()] =
+                            visitType === "$"
+                              ? visit.previousSibling
+                              : visit.parentNode.insertBefore(new Text(), visit)));
               return (
                 embedRenders &&
                   !embedAnchor &&
@@ -1313,19 +1332,6 @@ function _attrs_script(scope, nodeAccessor) {
   controllableScripts[scope["F" + nodeAccessor]]?.(scope, nodeAccessor);
   for (let name in events) _on(el, name, events[name]);
 }
-function _html(scope, value, accessor) {
-  let firstChild = scope[accessor],
-    parentNode = firstChild.parentNode,
-    lastChild = scope["H" + accessor] || firstChild,
-    newContent = parseHTML(_to_text(value), parentNode.namespaceURI);
-  (insertChildNodes(
-    parentNode,
-    firstChild,
-    (scope[accessor] = newContent.firstChild || newContent.appendChild(new Text())),
-    (scope["H" + accessor] = newContent.lastChild),
-  ),
-    removeChildNodes(firstChild, lastChild));
-}
 function normalizeClientRender(value) {
   let renderer = normalizeDynamicRenderer(value);
   if (renderer && renderer.a) return renderer;

packages/runtime-tags/src/__tests__/fixtures-interop/custom-tag-parameters-from-args/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 55532,
-        "brotli": 17663
+        "min": 55495,
+        "brotli": 17664
       },
       "files": {
         "components/custom-tag.marko": 626,

packages/runtime-tags/src/__tests__/fixtures-interop/error-serialize-promise-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 64372,
-        "brotli": 20114
+        "min": 64335,
+        "brotli": 20078
       },
       "files": {
         "components/tags-child.marko": 499,

packages/runtime-tags/src/__tests__/fixtures-interop/error-unserializable-class-to-tags/__snapshots__/html.bundle.debug.js

@@ -5,7 +5,7 @@ var tags_child_default = _template("__tests__/components/tags-child.marko", (inp
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "#text/1")}</button>${_el_resume($scope0_id, "#button/0")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "#text/1", count)}</button>${_el_resume($scope0_id, "#button/0")}`);
 	_script($scope0_id, "__tests__/components/tags-child.marko_0");
 	writeScope($scope0_id, {
 		input_data: input.data,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-attr-tags-tags-to-class/__snapshots__/html.bundle.debug.js

@@ -42,7 +42,7 @@ var template_default = _template("__tests__/template.marko", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "#text/1")}</button>${_el_resume($scope0_id, "#button/0")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "#text/1", count)}</button>${_el_resume($scope0_id, "#button/0")}`);
 	_dynamic_tag($scope0_id, "#text/2", _marko_template, {
 		onSelect: _resume(function() {
 			count++;

packages/runtime-tags/src/__tests__/fixtures-interop/interop-attr-tags-tags-to-class/__snapshots__/writes.debug.html

@@ -1,5 +1,5 @@
 <button
-  id=tags>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[--><!--M#_0-->
+  id=tags>0<!--M_$1 #text/1--></button><!--M_$1 #button/0--><!--M_[--><!--M#_0-->
 <ul id=list>
   <li><button>one*</button><!--F#1--><em>first</em><!--F/--></li>
   <li><button>two</button><!--F#1--><em>second</em><!--F/--></li>

packages/runtime-tags/src/__tests__/fixtures-interop/interop-await-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66710,
-        "brotli": 20984
+        "min": 66673,
+        "brotli": 20953
       },
       "files": {
         "components/tags-child.marko": 624,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/__snapshots__/html.bundle.debug.js

@@ -5,7 +5,7 @@ var tags_counter_default = _template("__tests__/components/tags-counter.marko",
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags${_attr("data-parent", input.count)}>${_escape(count)}${_el_resume($scope0_id, "#text/1")}</button>${_el_resume($scope0_id, "#button/0")}`);
+	_html(`<button id=tags${_attr("data-parent", input.count)}>${_text_resume($scope0_id, "#text/1", count)}</button>${_el_resume($scope0_id, "#button/0")}`);
 	_script($scope0_id, "__tests__/components/tags-counter.marko_0");
 	writeScope($scope0_id, { count }, "__tests__/components/tags-counter.marko", 0, { count: "1:6" });
 	_resume_branch($scope0_id);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/__snapshots__/html.bundle.js

@@ -5,7 +5,7 @@ var tags_counter_default = _template("b", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags${_attr("data-parent", input.count)}>${_escape(count)}${_el_resume($scope0_id, "b")}</button>${_el_resume($scope0_id, "a")}`);
+	_html(`<button id=tags${_attr("data-parent", input.count)}>${_text_resume($scope0_id, "b", count)}</button>${_el_resume($scope0_id, "a")}`);
 	_script($scope0_id, "b0");
 	writeScope($scope0_id, { f: count });
 	_resume_branch($scope0_id);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/__snapshots__/writes.debug.html

@@ -1,5 +1,5 @@
 <!--M#s0--><button id=class>0</button><!--F#1--><button id=tags
-  data-parent=0>0<!--Ms*1 #text/1--></button><!--Ms*1 #button/0--><!--F/--><!--M/-->
+  data-parent=0>0<!--Ms$1 #text/1--></button><!--Ms$1 #button/0--><!--F/--><!--M/-->
 <script>
   WALKER_RUNTIME("M")("s");
   M.s.r = [_ => [1, {

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/__snapshots__/writes.html

@@ -1,5 +1,5 @@
 <!--M#s0--><button id=class>0</button><!--F#1--><button id=tags
-  data-parent=0>0<!--Ms*1 b--></button><!--Ms*1 a--><!--F/--><!--M/-->
+  data-parent=0>0<!--Ms$1 b--></button><!--Ms$1 a--><!--F/--><!--M/-->
 <script>
   WALKER_RUNTIME("M")("s");
   M.s.r = [_ => [1, {

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 64603,
-        "brotli": 20165
+        "min": 64566,
+        "brotli": 20188
       },
       "files": {
         "components/tags-counter.marko": 682,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/html.bundle.debug.js

@@ -27,7 +27,7 @@ var template_default = _template("__tests__/template.marko", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "#text/1")}</button>${_el_resume($scope0_id, "#button/0")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "#text/1", count)}</button>${_el_resume($scope0_id, "#button/0")}`);
 	_dynamic_tag($scope0_id, "#text/2", _marko_template, { count });
 	_script($scope0_id, "__tests__/template.marko_0");
 	writeScope($scope0_id, { count }, "__tests__/template.marko", 0, { count: "1:6" });

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/html.bundle.js

@@ -21,7 +21,7 @@ var template_default = _template("a", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "b")}</button>${_el_resume($scope0_id, "a")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "b", count)}</button>${_el_resume($scope0_id, "a")}`);
 	_dynamic_tag($scope0_id, "c", _marko_template, { count });
 	_script($scope0_id, "a0");
 	writeScope($scope0_id, { d: count });

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/writes.debug.html

@@ -1,5 +1,5 @@
 <button
-  id=tags>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--M_[--><!--M#_0--><button
+  id=tags>0<!--M_$1 #text/1--></button><!--M_$1 #button/0--><!--M_[--><!--M#_0--><button
   id=class data-parent=0>0</button><!--M/--><!--M_]1 #text/2 2-->
 <script>
   WALKER_RUNTIME("M")("_");

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/writes.html

@@ -1,4 +1,4 @@
-<button id=tags>0<!--M_*1 b--></button><!--M_*1 a--><!--M_[--><!--M#_0--><button
+<button id=tags>0<!--M_$1 b--></button><!--M_$1 a--><!--M_[--><!--M#_0--><button
   id=class data-parent=0>0</button><!--M/--><!--M_]1 c 2-->
 <script>
   WALKER_RUNTIME("M")("_");

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 63843,
-        "brotli": 19913
+        "min": 63806,
+        "brotli": 19876
       },
       "files": {
         "components/class-counter.marko": 1028,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-inert-class/__snapshots__/html.bundle.debug.js

@@ -19,7 +19,7 @@ var template_default = _template("__tests__/template.marko", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "#text/1")}</button>${_el_resume($scope0_id, "#button/0")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "#text/1", count)}</button>${_el_resume($scope0_id, "#button/0")}`);
 	_dynamic_tag($scope0_id, "#text/2", _marko_template, { value: "Hello World" }, 0, 0, 0);
 	_script($scope0_id, "__tests__/template.marko_0");
 	writeScope($scope0_id, { count }, "__tests__/template.marko", 0, { count: "1:6" });

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-inert-class/__snapshots__/html.bundle.js

@@ -15,7 +15,7 @@ var template_default = _template("a", (input) => {
 	_scope_reason();
 	const $scope0_id = _scope_id();
 	let count = 0;
-	_html(`<button id=tags>${_escape(count)}${_el_resume($scope0_id, "b")}</button>${_el_resume($scope0_id, "a")}`);
+	_html(`<button id=tags>${_text_resume($scope0_id, "b", count)}</button>${_el_resume($scope0_id, "a")}`);
 	_dynamic_tag($scope0_id, "c", _marko_template, { value: "Hello World" }, 0, 0, 0);
 	_script($scope0_id, "a0");
 	writeScope($scope0_id, { d: count });