ripple 0.4.0 → 0.4.2

package/tests/hydration/compiled/client/head.js

@@ -208,13 +208,14 @@ function ConditionalTitle_render(__anchor, __block) {
 
 ConditionalTitle[_$_.$r] = ConditionalTitle_render;
 
-var root_17 = _$_.template(`<div><span> </span></div>`, 0);
+var root_17 = _$_.template(`<div><span></span></div>`, 0);
 
 function render(__prev) {
 	var __a = __prev._count.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_4, __prev.a = __a);
+		_$_.set_text_content(__prev._span_1, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -231,10 +232,6 @@ function ComputedTitle_render(__anchor, __block) {
 
 		{
 			var span_1 = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
-
-			{
-				var expression_4 = _$_.hydrating ? _$_.hydrate_text() : span_1.firstChild;
-			}
 		}
 
 		_$_.head('60e9fce1', (__anchor) => {
@@ -243,7 +240,7 @@ function ComputedTitle_render(__anchor, __block) {
 			});
 		});
 
-		_$_.render(render, { a: ' ', _count: count, _expression_4: expression_4 });
+		_$_.render(render, { a: '', _count: count, _span_1: span_1 });
 		_$_.append(__anchor, div_7);
 	}));
 

package/tests/hydration/compiled/client/html.js

@@ -289,13 +289,14 @@ function if_2(nextLink) {
 	if (nextLink) return consequent_1;
 }
 
-var root_18 = _$_.template(`<li><a> </a></li>`, 0);
+var root_18 = _$_.template(`<li><a></a></li>`, 0);
 
 function render_4(__prev) {
 	var __a = __prev._item.text;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_3, __prev.a = __a);
+		_$_.set_text_content(__prev._a_2, __a, __prev.a);
+		__prev.a = __a;
 	}
 
 	var __b = __prev._item.href;
@@ -322,23 +323,14 @@ function consequent_2(__anchor, toc) {
 
 					{
 						var a_2 = _$_.hydrating ? _$_.hydrate_child() : li.firstChild;
-
-						{
-							var expression_3 = _$_.hydrating ? _$_.hydrate_text() : a_2.firstChild;
-						}
 					}
 
-					_$_.render(render_4, {
-						a: ' ',
-						b: void 0,
-						_item: item,
-						_expression_3: expression_3,
-						_a_2: a_2
-					});
-
+					_$_.item({ a: '', b: void 0, _item: item, _a_2: a_2 });
 					_$_.append(__anchor, li);
 				},
-				4
+				4,
+				void 0,
+				render_4
 			);
 
 			_$_.hydrating && _$_.pop(ul);
@@ -352,7 +344,7 @@ function if_3(toc) {
 	if (toc.length > 0) return consequent_2;
 }
 
-var root_14 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article><!><!></div><aside><!></aside></div>`, 0);
+var root_14 = _$_.template(`<div class="layout"><div class="content-container"><article><div><!></div></article></div><aside><!></aside></div>`, 0);
 
 function DocLayout_render(
 	__anchor,
@@ -380,11 +372,11 @@ function DocLayout_render(
 
 			_$_.hydrating && _$_.pop(article);
 
-			var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : article.nextSibling;
+			var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);
 
 			_$_.if(node_5, if_1, false, editPath);
 
-			var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_5.nextSibling;
+			var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_14);
 
 			_$_.if(node_6, if_2, false, nextLink);
 
@@ -650,7 +642,7 @@ function HtmlAfterIfInChildren_render(__anchor, __block) {
 
 HtmlAfterIfInChildren[_$_.$r] = HtmlAfterIfInChildren_render;
 
-var root_30 = _$_.template(`<span class="for-item"> </span>`, 0);
+var root_30 = _$_.template(`<span class="for-item"></span>`, 0);
 
 function ForList_render(__anchor, __block, { items }) {
 	_$_.for(
@@ -660,9 +652,7 @@ function ForList_render(__anchor, __block, { items }) {
 			var span = root_30();
 
 			{
-				var expression_11 = _$_.hydrating ? _$_.hydrate_text() : span.firstChild;
-
-				expression_11.nodeValue = item;
+				span.textContent = item;
 			}
 
 			_$_.append(__anchor, span);
@@ -695,7 +685,7 @@ function HtmlAfterForInChildren_render(__anchor, __block) {
 
 HtmlAfterForInChildren[_$_.$r] = HtmlAfterForInChildren_render;
 
-var root_32 = _$_.template(`<div class="try-box"> </div>`, 0);
+var root_32 = _$_.template(`<div class="try-box"></div>`, 0);
 var root_33 = _$_.template(`<span>error</span>`, 0);
 
 function TryBox_render(__anchor, __block, { value }) {
@@ -705,9 +695,7 @@ function TryBox_render(__anchor, __block, { value }) {
 			var div_26 = root_32();
 
 			{
-				var expression_12 = _$_.hydrating ? _$_.hydrate_text() : div_26.firstChild;
-
-				expression_12.nodeValue = value;
+				div_26.textContent = value;
 			}
 
 			_$_.append(__anchor, div_26);
@@ -813,7 +801,7 @@ function if_5(active) {
 	if (active) return consequent_4;
 }
 
-var root_38 = _$_.template(`<div><!><a><span> </span></a></div>`, 0);
+var root_38 = _$_.template(`<div><!><a><span></span></a></div>`, 0);
 
 function NavItem_render(__anchor, __block, { href, text: label, active = false }) {
 	var div_27 = root_38();
@@ -833,9 +821,7 @@ function NavItem_render(__anchor, __block, { href, text: label, active = false }
 			var span_3 = _$_.hydrating ? _$_.hydrate_child() : a_3.firstChild;
 
 			{
-				var expression_15 = _$_.hydrating ? _$_.hydrate_text() : span_3.firstChild;
-
-				expression_15.nodeValue = label;
+				span_3.textContent = label;
 			}
 		}
 
@@ -866,7 +852,7 @@ function if_6({ expanded, children }) {
 	if (expanded.value) return consequent_5;
 }
 
-var root_40 = _$_.template(`<section class="sidebar-section"><div class="section-header"><h2> </h2><button>Toggle</button></div><!></section>`, 0);
+var root_40 = _$_.template(`<section class="sidebar-section"><div class="section-header"><h2></h2><button>Toggle</button></div></section>`, 0);
 
 function SidebarSection_render(__anchor, __block, { title, children }) {
 	const expanded = _$_.track(true, __block, '6ac6906f');
@@ -879,9 +865,7 @@ function SidebarSection_render(__anchor, __block, { title, children }) {
 			var h2_2 = _$_.hydrating ? _$_.hydrate_child() : div_29.firstChild;
 
 			{
-				var expression_16 = _$_.hydrating ? _$_.hydrate_text() : h2_2.firstChild;
-
-				expression_16.nodeValue = title;
+				h2_2.textContent = title;
 			}
 
 			var button = _$_.hydrating ? _$_.hydrate_sibling() : h2_2.nextSibling;
@@ -891,7 +875,7 @@ function SidebarSection_render(__anchor, __block, { title, children }) {
 
 		_$_.hydrating && _$_.pop(div_29);
 
-		var node_20 = _$_.hydrating ? _$_.hydrate_sibling() : div_29.nextSibling;
+		var node_20 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(section_1);
 
 		_$_.if(node_20, if_6, false, { expanded, children });
 		_$_.hydrating && _$_.pop(section_1);
@@ -1006,7 +990,7 @@ function if_7() {
 	if (true) return consequent_6;
 }
 
-var root_46 = _$_.template(`<div class="layout"><!><div class="content-wrapper"><!><main class="main-content"><div class="article"><div><h1>Introduction</h1><p>Welcome to the docs.</p></div></div><!></main></div></div>`, 0);
+var root_46 = _$_.template(`<div class="layout"><!><div class="content-wrapper"><!><main class="main-content"><div class="article"><div><h1>Introduction</h1><p>Welcome to the docs.</p></div></div></main></div></div>`, 0);
 
 function LayoutWithSidebarAndMain_render(__anchor, __block) {
 	var div_33 = root_46();
@@ -1027,7 +1011,7 @@ function LayoutWithSidebarAndMain_render(__anchor, __block) {
 
 			{
 				var div_35 = _$_.hydrating ? _$_.hydrate_child() : main.firstChild;
-				var node_27 = _$_.hydrating ? _$_.hydrate_sibling() : div_35.nextSibling;
+				var node_27 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(main);
 
 				_$_.if(node_27, if_7);
 
@@ -1104,7 +1088,7 @@ function if_9() {
 	if (true) return consequent_8;
 }
 
-var root_50 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
+var root_50 = _$_.template(`<div class="content-container"><!><!><!><!></div>`, 0);
 
 function ArticleWithChildrenThenSibling_render(__anchor, __block) {
 	var div_38 = root_50();
@@ -1129,7 +1113,7 @@ function ArticleWithChildrenThenSibling_render(__anchor, __block) {
 
 		_$_.if(node_31, if_9);
 
-		var node_32 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_38);
+		var node_32 = _$_.hydrating ? _$_.hydrate_sibling() : node_31.nextSibling;
 
 		_$_.render_component(SimpleFooter, node_32, {});
 		_$_.hydrating && _$_.pop(div_38);
@@ -1153,7 +1137,7 @@ function if_10() {
 	if (true) return consequent_9;
 }
 
-var root_54 = _$_.template(`<div class="content-container"><!><!></div>`, 0);
+var root_54 = _$_.template(`<div class="content-container"><!><!><!></div>`, 0);
 
 function ArticleWithHtmlChildThenSibling_render(__anchor, __block) {
 	const htmlContent = '<pre><code>const x = 1;</code></pre>';
@@ -1175,7 +1159,7 @@ function ArticleWithHtmlChildThenSibling_render(__anchor, __block) {
 
 		_$_.if(node_34, if_10);
 
-		var node_35 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_40);
+		var node_35 = _$_.hydrating ? _$_.hydrate_sibling() : node_34.nextSibling;
 
 		_$_.render_component(SimpleFooter, node_35, {});
 		_$_.hydrating && _$_.pop(div_40);
@@ -1198,7 +1182,7 @@ function if_11() {
 	if (true) return consequent_10;
 }
 
-var root_57 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article><!></div>`, 0);
+var root_57 = _$_.template(`<div class="content-container"><article class="doc-content"><div><!></div></article></div>`, 0);
 
 function InlineArticleLayout_render(__anchor, __block, { children }) {
 	var div_43 = root_57();
@@ -1219,7 +1203,7 @@ function InlineArticleLayout_render(__anchor, __block, { children }) {
 
 		_$_.hydrating && _$_.pop(article_2);
 
-		var node_36 = _$_.hydrating ? _$_.hydrate_sibling() : article_2.nextSibling;
+		var node_36 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_43);
 
 		_$_.if(node_36, if_11);
 
@@ -1325,7 +1309,7 @@ function if_13(nextLink) {
 	if (nextLink) return consequent_12;
 }
 
-var root_63 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div></div></div></main></div></div>`, 0);
+var root_63 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article></div></div></div></main></div></div>`, 0);
 
 function DocsLayoutInner_render(
 	__anchor,
@@ -1373,11 +1357,11 @@ function DocsLayoutInner_render(
 
 							_$_.hydrating && _$_.pop(article_3);
 
-							var node_40 = _$_.hydrating ? _$_.hydrate_sibling() : article_3.nextSibling;
+							var node_40 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);
 
 							_$_.if(node_40, if_12, false, editPath);
 
-							var node_41 = _$_.hydrating ? _$_.hydrate_sibling() : node_40.nextSibling;
+							var node_41 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_49);
 
 							_$_.if(node_41, if_13, false, nextLink);
 
@@ -1550,13 +1534,14 @@ function if_17({ prevLink, nextLink }) {
 	if (prevLink || nextLink) return consequent_16;
 }
 
-var root_75 = _$_.template(`<a> </a>`, 0);
+var root_75 = _$_.template(`<a></a>`, 0);
 
 function render_8(__prev) {
 	var __a = __prev._item.text;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_25, __prev.a = __a);
+		_$_.set_text_content(__prev._a_8, __a, __prev.a);
+		__prev.a = __a;
 	}
 
 	var __b = __prev._item.href;
@@ -1581,21 +1566,12 @@ function consequent_17(__anchor, toc) {
 				(__anchor, item) => {
 					var a_8 = root_75();
 
-					{
-						var expression_25 = _$_.hydrating ? _$_.hydrate_text() : a_8.firstChild;
-					}
-
-					_$_.render(render_8, {
-						a: ' ',
-						b: void 0,
-						_item: item,
-						_expression_25: expression_25,
-						_a_8: a_8
-					});
-
+					_$_.item({ a: '', b: void 0, _item: item, _a_8: a_8 });
 					_$_.append(__anchor, a_8);
 				},
-				4
+				4,
+				void 0,
+				render_8
 			);
 
 			_$_.hydrating && _$_.pop(nav_5);
@@ -1609,7 +1585,7 @@ function if_18(toc) {
 	if (toc.length > 0) return consequent_17;
 }
 
-var root_68 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article><!><!></div></div><aside class="aside"><!></aside></div></main></div></div>`, 0);
+var root_68 = _$_.template(`<div class="layout"><!><div class="docs-wrapper"><!><main class="docs-main"><div class="docs-container"><div class="content"><div class="content-container"><article class="doc-content"><div><!></div></article></div></div><aside class="aside"><!></aside></div></main></div></div>`, 0);
 
 function DocsLayoutExact_render(
 	__anchor,
@@ -1663,11 +1639,11 @@ function DocsLayoutExact_render(
 
 							_$_.hydrating && _$_.pop(article_4);
 
-							var node_45 = _$_.hydrating ? _$_.hydrate_sibling() : article_4.nextSibling;
+							var node_45 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);
 
 							_$_.if(node_45, if_14, false, editPath);
 
-							var node_46 = _$_.hydrating ? _$_.hydrate_sibling() : node_45.nextSibling;
+							var node_46 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_58);
 
 							_$_.if(node_46, if_17, false, { prevLink, nextLink });
 

package/tests/hydration/compiled/client/if-children.js

@@ -20,7 +20,7 @@ function if_1({ expanded, children }) {
 	if (expanded.value) return consequent;
 }
 
-var root = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div><!></div>`, 0);
+var root = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div></div>`, 0);
 
 function IfWithChildren_render(__anchor, __block, { children }) {
 	const expanded = _$_.track(true, __block, 'c64714b1');
@@ -31,7 +31,7 @@ function IfWithChildren_render(__anchor, __block, { children }) {
 
 		div_1.__click = () => expanded.value = !expanded.value;
 
-		var node = _$_.hydrating ? _$_.hydrate_sibling() : div_1.nextSibling;
+		var node = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div);
 
 		_$_.if(node, if_1, false, { expanded, children });
 		_$_.hydrating && _$_.pop(div);
@@ -42,15 +42,13 @@ function IfWithChildren_render(__anchor, __block, { children }) {
 
 IfWithChildren[_$_.$r] = IfWithChildren_render;
 
-var root_2 = _$_.template(`<div class="item"> </div>`, 0);
+var root_2 = _$_.template(`<div class="item"></div>`, 0);
 
 function ChildItem_render(__anchor, __block, { text: label }) {
 	var div_3 = root_2();
 
 	{
-		var expression_1 = _$_.hydrating ? _$_.hydrate_text() : div_3.firstChild;
-
-		expression_1.nodeValue = label;
+		div_3.textContent = label;
 	}
 
 	_$_.append(__anchor, div_3);
@@ -90,7 +88,7 @@ function if_2(expanded) {
 	if (expanded.value) return consequent_1;
 }
 
-var root_4 = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div><!></div>`, 0);
+var root_4 = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div></div>`, 0);
 
 function IfWithStaticChildren_render(__anchor, __block) {
 	const expanded = _$_.track(true, __block, '3bba8f77');
@@ -101,7 +99,7 @@ function IfWithStaticChildren_render(__anchor, __block) {
 
 		div_5.__click = () => expanded.value = !expanded.value;
 
-		var node_3 = _$_.hydrating ? _$_.hydrate_sibling() : div_5.nextSibling;
+		var node_3 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_4);
 
 		_$_.if(node_3, if_2, false, expanded);
 		_$_.hydrating && _$_.pop(div_4);
@@ -131,7 +129,7 @@ function if_3({ expanded, children }) {
 	if (expanded.value) return consequent_2;
 }
 
-var root_6 = _$_.template(`<section class="group"><div role="button" class="item"><div class="indicator"></div><h2 class="text">Title</h2><div class="caret"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"></path></svg></div></div><!></section>`, 0);
+var root_6 = _$_.template(`<section class="group"><div role="button" class="item"><div class="indicator"></div><h2 class="text">Title</h2><div class="caret"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"></path></svg></div></div></section>`, 0);
 
 function IfWithSiblingsAndChildren_render(__anchor, __block, { children }) {
 	const expanded = _$_.track(true, __block, 'a1b8fb4c');
@@ -143,7 +141,7 @@ function IfWithSiblingsAndChildren_render(__anchor, __block, { children }) {
 		div_7.__click = () => expanded.value = !expanded.value;
 		_$_.hydrating && _$_.pop(div_7);
 
-		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : div_7.nextSibling;
+		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(section);
 
 		_$_.if(node_4, if_3, false, { expanded, children });
 		_$_.hydrating && _$_.pop(section);
@@ -186,7 +184,7 @@ function if_4(show) {
 	if (show.value) return consequent_3;
 }
 
-var root_10 = _$_.template(`<div class="wrapper"><div class="nested-parent"><div class="nested-child"><span class="deep">Deep content</span></div></div><!></div><button class="toggle">Toggle</button>`, 1, 2);
+var root_10 = _$_.template(`<div class="wrapper"><div class="nested-parent"><div class="nested-child"><span class="deep">Deep content</span></div></div></div><button class="toggle">Toggle</button>`, 1, 2);
 var root_9 = _$_.template(`<!>`, 1, 1);
 
 function ElementWithChildrenThenIf_render(__anchor, __block) {
@@ -196,17 +194,17 @@ function ElementWithChildrenThenIf_render(__anchor, __block) {
 
 	_$_.expression(node_8, () => _$_.tsrx_element((__anchor, __block) => {
 		var fragment_3 = root_10();
-		var div_10 = _$_.first_child_frag(fragment_3);
+		var div_9 = _$_.first_child_frag(fragment_3);
 
 		{
-			var div_9 = _$_.hydrating ? _$_.hydrate_child() : div_10.firstChild;
-			var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : div_9.nextSibling;
+			var div_10 = _$_.hydrating ? _$_.hydrate_child() : div_9.firstChild;
+			var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_9);
 
 			_$_.if(node_7, if_4, false, show);
-			_$_.hydrating && _$_.pop(div_10);
+			_$_.hydrating && _$_.pop(div_9);
 		}
 
-		var button = _$_.hydrating ? _$_.hydrate_sibling() : div_10.nextSibling;
+		var button = _$_.hydrating ? _$_.hydrate_sibling() : div_9.nextSibling;
 
 		button.__click = () => show.value = !show.value;
 		_$_.append(__anchor, fragment_3);
@@ -229,7 +227,7 @@ function if_5(visible) {
 	if (visible.value) return consequent_4;
 }
 
-var root_13 = _$_.template(`<section class="outer"><article class="middle"><div class="inner"><p class="leaf"><strong>Bold</strong><em>Italic</em></p></div></article><!></section><button class="btn">Toggle</button>`, 1, 2);
+var root_13 = _$_.template(`<section class="outer"><article class="middle"><div class="inner"><p class="leaf"><strong>Bold</strong><em>Italic</em></p></div></article></section><button class="btn">Toggle</button>`, 1, 2);
 var root_12 = _$_.template(`<!>`, 1, 1);
 
 function DeepNestingThenIf_render(__anchor, __block) {
@@ -243,7 +241,7 @@ function DeepNestingThenIf_render(__anchor, __block) {
 
 		{
 			var article = _$_.hydrating ? _$_.hydrate_child() : section_1.firstChild;
-			var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : article.nextSibling;
+			var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(section_1);
 
 			_$_.if(node_9, if_5, false, visible);
 			_$_.hydrating && _$_.pop(section_1);
@@ -337,13 +335,14 @@ function DomElementChildrenThenSibling_render(__anchor, __block) {
 
 DomElementChildrenThenSibling[_$_.$r] = DomElementChildrenThenSibling_render;
 
-var root_19 = _$_.template(`<div class="container"><ul class="list"><li class="item"> </li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>`, 1, 2);
+var root_19 = _$_.template(`<div class="container"><ul class="list"><li class="item"></li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>`, 1, 2);
 
 function render_1(__prev) {
 	var __a = 'Item count: ' + String(__prev._count.value ?? '');
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_3, __prev.a = __a);
+		_$_.set_text_content(__prev._li, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -363,10 +362,6 @@ function DomChildrenThenStaticSiblings_render(__anchor, __block) {
 
 			{
 				var li = _$_.hydrating ? _$_.hydrate_child() : ul.firstChild;
-
-				{
-					var expression_3 = _$_.hydrating ? _$_.hydrate_text() : li.firstChild;
-				}
 			}
 
 			_$_.hydrating && _$_.pop(ul);
@@ -377,7 +372,7 @@ function DomChildrenThenStaticSiblings_render(__anchor, __block) {
 		var button_4 = _$_.hydrating ? _$_.hydrate_sibling() : div_16.nextSibling;
 
 		button_4.__click = () => count.value++;
-		_$_.render(render_1, { a: ' ', _count: count, _expression_3: expression_3 });
+		_$_.render(render_1, { a: '', _count: count, _li: li });
 		_$_.append(__anchor, fragment_7);
 	}));
 
@@ -421,13 +416,14 @@ function RootIfChild_render(__anchor, __block, props) {
 
 RootIfChild[_$_.$r] = RootIfChild_render;
 
-var root_23 = _$_.template(`<span class="root-for"> </span>`, 0);
+var root_23 = _$_.template(`<span class="root-for"></span>`, 0);
 
 function render_2(__prev) {
-	var __a = _$_.get(__prev._pattern);
+	var __a = __prev.$item;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_4, __prev.a = __a);
+		_$_.set_text_content(__prev._span_2, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -438,14 +434,14 @@ function RootForChild_render(__anchor, __block, props) {
 		(__anchor, pattern) => {
 			var span_2 = root_23();
 
-			{
-				var expression_4 = _$_.hydrating ? _$_.hydrate_text() : span_2.firstChild;
-			}
-
-			_$_.render(render_2, { a: ' ', _pattern: pattern, _expression_4: expression_4 });
+			_$_.item({ a: '', $item: pattern, _span_2: span_2 });
 			_$_.append(__anchor, span_2);
 		},
-		16
+		144,
+		void 0,
+		void 0,
+		void 0,
+		render_2
 	);
 }
 

package/tests/hydration/compiled/client/if-fragment-controlflow.js

@@ -24,7 +24,7 @@ function consequent(__anchor, { hasLoaded, muzes }) {
 			_$_.append(__anchor, p);
 		},
 		0,
-		(pattern) => _$_.get(pattern).muzeId
+		(pattern) => pattern.muzeId
 	);
 
 	_$_.next();
@@ -101,7 +101,7 @@ function consequent_3(__anchor, { hasLoaded, muzes }) {
 			_$_.append(__anchor, p_1);
 		},
 		0,
-		(pattern_1) => _$_.get(pattern_1).muzeId
+		(pattern_1) => pattern_1.muzeId
 	);
 
 	var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;
@@ -197,7 +197,7 @@ function ComponentBodyFragmentControlFlow_render(__anchor, __block) {
 				_$_.append(__anchor, p_2);
 			},
 			0,
-			(pattern_2) => _$_.get(pattern_2).muzeId
+			(pattern_2) => pattern_2.muzeId
 		);
 
 		_$_.next();
@@ -241,7 +241,7 @@ function ComponentBodyCodeBlockControlFlow_render(__anchor, __block) {
 					_$_.append(__anchor, p_3);
 				},
 				16,
-				(pattern_3) => _$_.get(pattern_3).muzeId
+				(pattern_3) => pattern_3.muzeId
 			);
 		}));
 
@@ -280,7 +280,7 @@ function consequent_5(__anchor, { hasLoaded, muzes }) {
 				_$_.append(__anchor, p_4);
 			},
 			16,
-			(pattern_4) => _$_.get(pattern_4).muzeId
+			(pattern_4) => pattern_4.muzeId
 		);
 	}));
 
@@ -341,7 +341,7 @@ function alternate(__anchor, { hasLoaded, muzes }) {
 			_$_.append(__anchor, p_5);
 		},
 		0,
-		(pattern_5) => _$_.get(pattern_5).muzeId
+		(pattern_5) => pattern_5.muzeId
 	);
 
 	_$_.next();
@@ -396,7 +396,7 @@ function consequent_7(__anchor, { hasLoaded, muzes }) {
 				_$_.append(__anchor, p_6);
 			},
 			0,
-			(pattern_6) => _$_.get(pattern_6).muzeId
+			(pattern_6) => pattern_6.muzeId
 		);
 
 		_$_.hydrating && _$_.pop(section);

package/tests/hydration/compiled/client/if.js

@@ -165,14 +165,14 @@ function if_6(inner) {
 	if (inner.value) return consequent_5;
 }
 
-var root_13 = _$_.template(`<div class="outer-content">Outer<!></div>`, 0);
+var root_13 = _$_.template(`<div class="outer-content">Outer</div>`, 0);
 
 function consequent_6(__anchor, { outer, inner }) {
 	var div_7 = root_13();
 
 	{
 		var expression = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
-		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : expression.nextSibling;
+		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7);
 
 		_$_.if(node_5, if_6, false, inner);
 		_$_.hydrating && _$_.pop(div_7);
@@ -245,7 +245,7 @@ function if_8(status) {
 	if (status.value === 'loading') return consequent_7; else if (status.value === 'success') return consequent_8; else return alternate_2;
 }
 
-var root_15 = _$_.template(`<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!></div>`, 0);
+var root_15 = _$_.template(`<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button></div>`, 0);
 
 function IfElseIfChain_render(__anchor, __block) {
 	const status = _$_.track('loading', __block, '4c69c94a');
@@ -270,7 +270,7 @@ function IfElseIfChain_render(__anchor, __block) {
 			status.value = 'loading';
 		};
 
-		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : button_6.nextSibling;
+		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_8);
 
 		_$_.if(node_7, if_8, false, status);
 		_$_.hydrating && _$_.pop(div_8);