ripple 0.4.1 → 0.4.3

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div>Hello World</div>`, 0);
+var root = _$_.template(`<div>Hello World`);
 
 function StaticText_render(__anchor, __block) {
 	var div = root();
@@ -11,7 +11,7 @@ function StaticText_render(__anchor, __block) {
 
 StaticText[_$_.$r] = StaticText_render;
 
-var root_2 = _$_.template(`<h1>Title</h1><p>Paragraph text</p><span>Span text</span>`, 1, 3);
+var root_2 = _$_.template(`<h1>Title</h1><p>Paragraph text</p><span>Span text`, 1, 3);
 var root_1 = _$_.template(`<!>`, 1, 1);
 
 function MultipleElements_render(__anchor, __block) {
@@ -30,7 +30,7 @@ function MultipleElements_render(__anchor, __block) {
 
 MultipleElements[_$_.$r] = MultipleElements_render;
 
-var root_3 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div></div>`, 0);
+var root_3 = _$_.template(`<div class=outer><div class=inner><span>Nested content`);
 
 function NestedElements_render(__anchor, __block) {
 	var div_1 = root_3();
@@ -40,7 +40,7 @@ function NestedElements_render(__anchor, __block) {
 
 NestedElements[_$_.$r] = NestedElements_render;
 
-var root_5 = _$_.template(`<input type="text" placeholder="Enter text" disabled><a href="/link" target="_blank">Link</a>`, 1, 2);
+var root_5 = _$_.template(`<input type=text placeholder="Enter text" disabled><a href=/link target=_blank>Link`, 1, 2);
 var root_4 = _$_.template(`<!>`, 1, 1);
 
 function WithAttributes_render(__anchor, __block) {
@@ -59,7 +59,7 @@ function WithAttributes_render(__anchor, __block) {
 
 WithAttributes[_$_.$r] = WithAttributes_render;
 
-var root_6 = _$_.template(`<span class="child">Child content</span>`, 0);
+var root_6 = _$_.template(`<span class=child>Child content`);
 
 function ChildComponent_render(__anchor, __block) {
 	var span = root_6();
@@ -69,7 +69,7 @@ function ChildComponent_render(__anchor, __block) {
 
 ChildComponent[_$_.$r] = ChildComponent_render;
 
-var root_7 = _$_.template(`<div class="parent"></div>`, 0);
+var root_7 = _$_.template(`<div class=parent>`);
 
 function ParentWithChild_render(__anchor, __block) {
 	var div_2 = root_7();
@@ -86,7 +86,7 @@ function ParentWithChild_render(__anchor, __block) {
 
 ParentWithChild[_$_.$r] = ParentWithChild_render;
 
-var root_8 = _$_.template(`<div class="first">First</div>`, 0);
+var root_8 = _$_.template(`<div class=first>First`);
 
 function FirstSibling_render(__anchor, __block) {
 	var div_3 = root_8();
@@ -96,7 +96,7 @@ function FirstSibling_render(__anchor, __block) {
 
 FirstSibling[_$_.$r] = FirstSibling_render;
 
-var root_9 = _$_.template(`<div class="second">Second</div>`, 0);
+var root_9 = _$_.template(`<div class=second>Second`);
 
 function SecondSibling_render(__anchor, __block) {
 	var div_4 = root_9();
@@ -130,24 +130,21 @@ function SiblingComponents_render(__anchor, __block) {
 
 SiblingComponents[_$_.$r] = SiblingComponents_render;
 
-var root_12 = _$_.template(`<div> </div>`, 0);
+var root_12 = _$_.template(`<div>`);
 
 function render(__prev) {
-	var __a = 'Hello ' + __prev._props.name;
+	var __a = 'Hello ' + __prev._a.name;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 function Greeting_render(__anchor, __block, props) {
 	var div_5 = root_12();
 
-	{
-		var expression = _$_.hydrating ? _$_.hydrate_text() : div_5.firstChild;
-	}
-
-	_$_.render(render, { a: ' ', _props: props, _expression: expression });
+	_$_.render(render, { a: '', _a: props, _b: div_5 });
 	_$_.append(__anchor, div_5);
 }
 
@@ -159,7 +156,7 @@ function WithGreeting_render(__anchor, __block) {
 
 WithGreeting[_$_.$r] = WithGreeting_render;
 
-var root_14 = _$_.template(`<div> </div><span> </span>`, 1, 2);
+var root_14 = _$_.template(`<div></div><span> `, 1, 2);
 var root_13 = _$_.template(`<!>`, 1, 1);
 
 function ExpressionContent_render(__anchor, __block) {
@@ -173,9 +170,7 @@ function ExpressionContent_render(__anchor, __block) {
 		var div_6 = _$_.first_child_frag(fragment_7);
 
 		{
-			var expression_1 = _$_.hydrating ? _$_.hydrate_text() : div_6.firstChild;
-
-			expression_1.nodeValue = value;
+			div_6.textContent = value;
 		}
 
 		var span_1 = _$_.hydrating ? _$_.hydrate_sibling() : div_6.nextSibling;
@@ -195,15 +190,13 @@ function ExpressionContent_render(__anchor, __block) {
 
 ExpressionContent[_$_.$r] = ExpressionContent_render;
 
-var root_15 = _$_.template(`<div class="helper-item"> </div>`, 0);
+var root_15 = _$_.template(`<div class=helper-item>`);
 
 function NestedHelperItem_render(__anchor, __block, { item }) {
 	var div_7 = root_15();
 
 	{
-		var expression_3 = _$_.hydrating ? _$_.hydrate_text() : div_7.firstChild;
-
-		expression_3.nodeValue = item;
+		div_7.textContent = item;
 	}
 
 	_$_.append(__anchor, div_7);
@@ -211,7 +204,7 @@ function NestedHelperItem_render(__anchor, __block, { item }) {
 
 NestedHelperItem[_$_.$r] = NestedHelperItem_render;
 
-var root_17 = _$_.template(`<span class="label"> </span><!>`, 1, 2);
+var root_17 = _$_.template(`<span class=label></span><!>`, 1, 2);
 var root_16 = _$_.template(`<!>`, 1, 1);
 
 function NestedTsxTsrxFragment_render(__anchor, __block, { label }) {
@@ -223,9 +216,7 @@ function NestedTsxTsrxFragment_render(__anchor, __block, { label }) {
 		var span_2 = _$_.first_child_frag(fragment_9);
 
 		{
-			var expression_4 = _$_.hydrating ? _$_.hydrate_text() : span_2.firstChild;
-
-			expression_4.nodeValue = label;
+			span_2.textContent = label;
 		}
 
 		var node_6 = _$_.hydrating ? _$_.hydrate_sibling() : span_2.nextSibling;
@@ -247,8 +238,8 @@ function NestedTsxTsrxFragment_render(__anchor, __block, { label }) {
 
 NestedTsxTsrxFragment[_$_.$r] = NestedTsxTsrxFragment_render;
 
-var root_19 = _$_.template(`<div class="app-item"> </div>`, 0);
-var root_18 = _$_.template(`<div class="nested-expression-values"><!></div>`, 0);
+var root_19 = _$_.template(`<div class=app-item> `);
+var root_18 = _$_.template(`<div class=nested-expression-values><!>`);
 
 function NestedTsxTsrxExpressionValues_render(__anchor, __block) {
 	var div_8 = root_18();
@@ -285,10 +276,10 @@ function NestedTsxTsrxExpressionValues_render(__anchor, __block) {
 
 NestedTsxTsrxExpressionValues[_$_.$r] = NestedTsxTsrxExpressionValues_render;
 
-var root_20 = _$_.template(`<strong class="middle">beta</strong>`, 0);
-var root_21 = _$_.template(`<em class="tail">epsilon</em>`, 0);
+var root_20 = _$_.template(`<strong class=middle>beta`);
+var root_21 = _$_.template(`<em class=tail>epsilon`);
 var root_22 = _$_.template(` `, 1, 1);
-var root_23 = _$_.template(`<div class="mixed-collection"><!></div>`, 0);
+var root_23 = _$_.template(`<div class=mixed-collection><!>`);
 
 function MixedTsrxCollectionText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -331,10 +322,10 @@ function MixedTsrxCollectionText_render(__anchor, __block) {
 
 MixedTsrxCollectionText[_$_.$r] = MixedTsrxCollectionText_render;
 
-var root_24 = _$_.template(`<strong class="middle">beta</strong>`, 0);
-var root_25 = _$_.template(`<em class="tail">epsilon</em>`, 0);
+var root_24 = _$_.template(`<strong class=middle>beta`);
+var root_25 = _$_.template(`<em class=tail>epsilon`);
 var root_26 = _$_.template(` `, 1, 1);
-var root_27 = _$_.template(`<div class="mixed-collection-split"><!></div>`, 0);
+var root_27 = _$_.template(`<div class=mixed-collection-split><!>`);
 
 function MixedTsrxCollectionSplitServerText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -377,10 +368,10 @@ function MixedTsrxCollectionSplitServerText_render(__anchor, __block) {
 
 MixedTsrxCollectionSplitServerText[_$_.$r] = MixedTsrxCollectionSplitServerText_render;
 
-var root_28 = _$_.template(`<strong class="middle">beta</strong>`, 0);
-var root_29 = _$_.template(`<em class="tail">epsilon</em>`, 0);
+var root_28 = _$_.template(`<strong class=middle>beta`);
+var root_29 = _$_.template(`<em class=tail>epsilon`);
 var root_30 = _$_.template(` `, 1, 1);
-var root_31 = _$_.template(`<div class="mixed-collection-split"><!></div>`, 0);
+var root_31 = _$_.template(`<div class=mixed-collection-split><!>`);
 
 function MixedTsrxCollectionSplitClientText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -423,9 +414,9 @@ function MixedTsrxCollectionSplitClientText_render(__anchor, __block) {
 
 MixedTsrxCollectionSplitClientText[_$_.$r] = MixedTsrxCollectionSplitClientText_render;
 
-var root_32 = _$_.template(`<span class="primitive-tail"> ok</span>`, 0);
+var root_32 = _$_.template(`<span class=primitive-tail> ok`);
 var root_33 = _$_.template(` `, 1, 1);
-var root_34 = _$_.template(`<div class="mixed-collection-primitive"><!></div>`, 0);
+var root_34 = _$_.template(`<div class=mixed-collection-primitive><!>`);
 
 function MixedTsrxCollectionPrimitiveServerText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -461,9 +452,9 @@ function MixedTsrxCollectionPrimitiveServerText_render(__anchor, __block) {
 
 MixedTsrxCollectionPrimitiveServerText[_$_.$r] = MixedTsrxCollectionPrimitiveServerText_render;
 
-var root_35 = _$_.template(`<span class="primitive-tail"> ok</span>`, 0);
+var root_35 = _$_.template(`<span class=primitive-tail> ok`);
 var root_36 = _$_.template(` `, 1, 1);
-var root_37 = _$_.template(`<div class="mixed-collection-primitive"><!></div>`, 0);
+var root_37 = _$_.template(`<div class=mixed-collection-primitive><!>`);
 
 function MixedTsrxCollectionPrimitiveClientText_render(__anchor, __block) {
 	const content = _$_.tsrx_element((__anchor, __block) => {
@@ -499,7 +490,7 @@ function MixedTsrxCollectionPrimitiveClientText_render(__anchor, __block) {
 
 MixedTsrxCollectionPrimitiveClientText[_$_.$r] = MixedTsrxCollectionPrimitiveClientText_render;
 
-var root_38 = _$_.template(`<div class="dynamic-array-call"> </div>`, 0);
+var root_38 = _$_.template(`<div class=dynamic-array-call> `);
 
 function DynamicArrayFromCall_render(__anchor, __block) {
 	const items = _$_.with_scope(__block, createPrimitiveItems);
@@ -517,10 +508,10 @@ function DynamicArrayFromCall_render(__anchor, __block) {
 
 DynamicArrayFromCall[_$_.$r] = DynamicArrayFromCall_render;
 
-var root_39 = _$_.template(`<div class="dynamic-array-track"> </div>`, 0);
+var root_39 = _$_.template(`<div class=dynamic-array-track> `);
 
 function DynamicArrayFromTrack_render(__anchor, __block) {
-	const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], __block, 'b5de6402');
+	const items = _$_.track(['start:', ['one', 2], true, null, false, ':end'], __block, '1egmw3m');
 	var div_16 = root_39();
 
 	{
@@ -535,7 +526,7 @@ function DynamicArrayFromTrack_render(__anchor, __block) {
 
 DynamicArrayFromTrack[_$_.$r] = DynamicArrayFromTrack_render;
 
-var root_40 = _$_.template(`<div class="dynamic-array-conditional"> </div>`, 0);
+var root_40 = _$_.template(`<div class=dynamic-array-conditional> `);
 
 function DynamicArrayFromConditional_render(__anchor, __block) {
 	const condition = true;
@@ -558,7 +549,7 @@ function DynamicArrayFromConditional_render(__anchor, __block) {
 
 DynamicArrayFromConditional[_$_.$r] = DynamicArrayFromConditional_render;
 
-var root_41 = _$_.template(`<div class="dynamic-array-logical"> </div>`, 0);
+var root_41 = _$_.template(`<div class=dynamic-array-logical> `);
 
 function DynamicArrayFromLogical_render(__anchor, __block) {
 	const condition = true;
@@ -577,7 +568,7 @@ function DynamicArrayFromLogical_render(__anchor, __block) {
 
 DynamicArrayFromLogical[_$_.$r] = DynamicArrayFromLogical_render;
 
-var root_42 = _$_.template(`<section class="outer"><div class="inner">from tsrx</div></section>`, 0);
+var root_42 = _$_.template(`<section class=outer><div class=inner>from tsrx`);
 var root_44 = _$_.template(`<!>`, 1, 1);
 var root_43 = _$_.template(`<!>`, 1, 1);
 
@@ -604,7 +595,7 @@ function NestedTsrxInsideTopLevelTsxExpression_render(__anchor, __block) {
 
 NestedTsrxInsideTopLevelTsxExpression[_$_.$r] = NestedTsrxInsideTopLevelTsxExpression_render;
 
-var root_45 = _$_.template(`<div class="wrapper"><section class="native"><span class="nested-tsrx">inside nested tsrx</span></section></div>`, 0);
+var root_45 = _$_.template(`<div class=wrapper><section class=native><span class=nested-tsrx>inside nested tsrx`);
 var root_47 = _$_.template(`<!>`, 1, 1);
 var root_46 = _$_.template(`<!>`, 1, 1);
 
@@ -631,8 +622,8 @@ function NestedTsrxElementsInsideTopLevelTsxValue_render(__anchor, __block) {
 
 NestedTsrxElementsInsideTopLevelTsxValue[_$_.$r] = NestedTsrxElementsInsideTopLevelTsxValue_render;
 
-var root_48 = _$_.template(`<span class="nested-tsx">inside nested tsx</span>`, 0);
-var root_49 = _$_.template(`<div class="native"> </div>`, 0);
+var root_48 = _$_.template(`<span class=nested-tsx>inside nested tsx`);
+var root_49 = _$_.template(`<div class=native> `);
 var root_51 = _$_.template(`<!>`, 1, 1);
 var root_50 = _$_.template(`<!>`, 1, 1);
 
@@ -672,7 +663,7 @@ function TsxDeclaredBeforeTopLevelTsx_render(__anchor, __block) {
 
 TsxDeclaredBeforeTopLevelTsx[_$_.$r] = TsxDeclaredBeforeTopLevelTsx_render;
 
-var root_52 = _$_.template(`<div class="text-prop"> </div>`, 0);
+var root_52 = _$_.template(`<div class=text-prop> `);
 
 function TextProp_render(__anchor, __block, { children }) {
 	var div_21 = root_52();
@@ -689,34 +680,31 @@ function TextProp_render(__anchor, __block, { children }) {
 
 TextProp[_$_.$r] = TextProp_render;
 
-var root_53 = _$_.template(`<div class="text-prop"> </div>`, 0);
+var root_53 = _$_.template(`<div class=text-prop>`);
 
 function render_1(__prev) {
-	var __a = __prev._children.value;
+	var __a = __prev._a.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_25, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 function TypedTextProp_render(__anchor, __block, { children }) {
 	var div_22 = root_53();
 
-	{
-		var expression_25 = _$_.hydrating ? _$_.hydrate_text() : div_22.firstChild;
-	}
-
-	_$_.render(render_1, { a: ' ', _children: children, _expression_25: expression_25 });
+	_$_.render(render_1, { a: '', _a: children, _b: div_22 });
 	_$_.append(__anchor, div_22);
 }
 
 TypedTextProp[_$_.$r] = TypedTextProp_render;
 
-var root_55 = _$_.template(`<!><button class="show-text">Show</button>`, 1, 2);
+var root_55 = _$_.template(`<!><button class=show-text>Show`, 1, 2);
 var root_54 = _$_.template(`<!>`, 1, 1);
 
 function TextPropWithToggle_render(__anchor, __block) {
-	const show = _$_.track(false, __block, '1ba81c3b');
+	const show = _$_.track(false, __block, '7o96bf');
 	var fragment_21 = root_54();
 	var node_14 = _$_.first_child_frag(fragment_21);
 
@@ -725,7 +713,7 @@ function TextPropWithToggle_render(__anchor, __block) {
 		var node_13 = _$_.first_child_frag(fragment_22);
 
 		_$_.render_component(TextProp, node_13, {
-			children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', __block, '649e2af0'))
+			children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', __block, 'rx1khc'))
 		});
 
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : node_13.nextSibling;
@@ -739,11 +727,11 @@ function TextPropWithToggle_render(__anchor, __block) {
 
 TextPropWithToggle[_$_.$r] = TextPropWithToggle_render;
 
-var root_57 = _$_.template(`<!><button class="show-text">Show</button>`, 1, 2);
+var root_57 = _$_.template(`<!><button class=show-text>Show`, 1, 2);
 var root_56 = _$_.template(`<!>`, 1, 1);
 
 function TypedTextPropWithToggle_render(__anchor, __block) {
-	const show = _$_.track(false, __block, 'ba719d47');
+	const show = _$_.track(false, __block, '1fqc2fb');
 	var fragment_23 = root_56();
 	var node_16 = _$_.first_child_frag(fragment_23);
 
@@ -752,7 +740,7 @@ function TypedTextPropWithToggle_render(__anchor, __block) {
 		var node_15 = _$_.first_child_frag(fragment_24);
 
 		_$_.render_component(TypedTextProp, node_15, {
-			children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', __block, '6fb091f9'))
+			children: _$_.normalize_children(_$_.track(() => show.value ? 'hello' : '', __block, 'uzmy9l'))
 		});
 
 		var button_1 = _$_.hydrating ? _$_.hydrate_sibling() : node_15.nextSibling;
@@ -766,7 +754,7 @@ function TypedTextPropWithToggle_render(__anchor, __block) {
 
 TypedTextPropWithToggle[_$_.$r] = TypedTextPropWithToggle_render;
 
-var root_59 = _$_.template(`<h1 class="sr-only">heading</h1><p class="subtitle">first paragraph</p><p class="subtitle">second paragraph</p>`, 1, 3);
+var root_59 = _$_.template(`<h1 class=sr-only>heading</h1><p class=subtitle>first paragraph</p><p class=subtitle>second paragraph`, 1, 3);
 var root_58 = _$_.template(`<!>`, 1, 1);
 
 function StaticHeader_render(__anchor, __block) {
@@ -785,7 +773,7 @@ function StaticHeader_render(__anchor, __block) {
 
 StaticHeader[_$_.$r] = StaticHeader_render;
 
-var root_61 = _$_.template(`<!><span class="sibling1"> </span><span class="sibling2"> </span>`, 1, 3);
+var root_61 = _$_.template(`<!><span class=sibling1></span><span class=sibling2>`, 1, 3);
 var root_60 = _$_.template(`<!>`, 1, 1);
 
 function StaticChildWithSiblings_render(__anchor, __block) {
@@ -802,17 +790,13 @@ function StaticChildWithSiblings_render(__anchor, __block) {
 		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : node_18.nextSibling;
 
 		{
-			var expression_26 = _$_.hydrating ? _$_.hydrate_text() : span_6.firstChild;
-
-			expression_26.nodeValue = foo;
+			span_6.textContent = foo;
 		}
 
 		var span_7 = _$_.hydrating ? _$_.hydrate_sibling() : span_6.nextSibling;
 
 		{
-			var expression_27 = _$_.hydrating ? _$_.hydrate_text() : span_7.firstChild;
-
-			expression_27.nodeValue = foo;
+			span_7.textContent = foo;
 		}
 
 		_$_.append(__anchor, fragment_28);
@@ -823,7 +807,7 @@ function StaticChildWithSiblings_render(__anchor, __block) {
 
 StaticChildWithSiblings[_$_.$r] = StaticChildWithSiblings_render;
 
-var root_63 = _$_.template(`<h1 class="sr-only">Ripple</h1><img src="/images/logo.png" alt="Logo" class="logo"><p class="subtitle">the elegant TypeScript UI framework</p>`, 1, 3);
+var root_63 = _$_.template(`<h1 class=sr-only>Ripple</h1><img src=/images/logo.png alt=Logo class=logo><p class=subtitle>the elegant TypeScript UI framework`, 1, 3);
 var root_62 = _$_.template(`<!>`, 1, 1);
 
 function Header_render(__anchor, __block) {
@@ -842,8 +826,8 @@ function Header_render(__anchor, __block) {
 
 Header[_$_.$r] = Header_render;
 
-var root_65 = _$_.template(`<a href="/playground" class="playground-link">Playground</a>`, 0);
-var root_64 = _$_.template(`<div class="social-links"><a href="https://github.com" class="github-link">GitHub</a><a href="https://discord.com" class="discord-link">Discord</a><!></div>`, 0);
+var root_65 = _$_.template(`<a href=/playground class=playground-link>Playground`);
+var root_64 = _$_.template(`<div class=social-links><a href=https://github.com class=github-link>GitHub</a><a href=https://discord.com class=discord-link>Discord</a><!>`);
 
 function Actions_render(__anchor, __block, { playgroundVisible = false }) {
 	var div_23 = root_64();
@@ -869,7 +853,7 @@ function Actions_render(__anchor, __block, { playgroundVisible = false }) {
 
 Actions[_$_.$r] = Actions_render;
 
-var root_66 = _$_.template(`<main><div class="container"><!></div></main>`, 0);
+var root_66 = _$_.template(`<main><div class=container><!>`);
 
 function Layout_render(__anchor, __block, { children }) {
 	var main = root_66();
@@ -890,7 +874,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_67 = _$_.template(`<div class="content"><p>Some content here</p></div>`, 0);
+var root_67 = _$_.template(`<div class=content><p>Some content here`);
 
 function Content_render(__anchor, __block) {
 	var div_25 = root_67();
@@ -928,7 +912,7 @@ function WebsiteIndex_render(__anchor, __block) {
 
 WebsiteIndex[_$_.$r] = WebsiteIndex_render;
 
-var root_69 = _$_.template(`<footer class="last-child">I am the last child</footer>`, 0);
+var root_69 = _$_.template(`<footer class=last-child>I am the last child`);
 
 function LastChild_render(__anchor, __block) {
 	var footer = root_69();
@@ -938,7 +922,7 @@ function LastChild_render(__anchor, __block) {
 
 LastChild[_$_.$r] = LastChild_render;
 
-var root_70 = _$_.template(`<div class="wrapper"><h1>Header</h1><p>Some content</p></div>`, 0);
+var root_70 = _$_.template(`<div class=wrapper><h1>Header</h1><p>Some content`);
 
 function ComponentAsLastSibling_render(__anchor, __block) {
 	var div_26 = root_70();
@@ -957,7 +941,7 @@ function ComponentAsLastSibling_render(__anchor, __block) {
 
 ComponentAsLastSibling[_$_.$r] = ComponentAsLastSibling_render;
 
-var root_71 = _$_.template(`<div class="inner"><span>Inner text</span></div>`, 0);
+var root_71 = _$_.template(`<div class=inner><span>Inner text`);
 
 function InnerContent_render(__anchor, __block) {
 	var div_27 = root_71();
@@ -975,7 +959,7 @@ function InnerContent_render(__anchor, __block) {
 
 InnerContent[_$_.$r] = InnerContent_render;
 
-var root_72 = _$_.template(`<section class="outer"><h2>Section title</h2></section>`, 0);
+var root_72 = _$_.template(`<section class=outer><h2>Section title`);
 
 function NestedComponentAsLastSibling_render(__anchor, __block) {
 	var section_1 = root_72();
@@ -993,53 +977,47 @@ function NestedComponentAsLastSibling_render(__anchor, __block) {
 
 NestedComponentAsLastSibling[_$_.$r] = NestedComponentAsLastSibling_render;
 
-var root_73 = _$_.template(`<div> </div>`, 0);
+var root_73 = _$_.template(`<div>`);
 
 function render_2(__prev) {
-	var __a = "label: " + String(_$_.with_scope(__prev.___block, fetchLabel));
+	var __a = "label: " + String(_$_.with_scope(__prev._a, fetchLabel));
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._text, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 function TextTailExpression_render(__anchor, __block) {
 	var div_28 = root_73();
 
-	{
-		var text = _$_.hydrating ? _$_.hydrate_text() : div_28.firstChild;
-	}
-
-	_$_.render(render_2, { a: ' ', ___block: __block, _text: text });
+	_$_.render(render_2, { a: '', _a: __block, _b: div_28 });
 	_$_.append(__anchor, div_28);
 }
 
 TextTailExpression[_$_.$r] = TextTailExpression_render;
 
-var root_74 = _$_.template(`<div> </div>`, 0);
+var root_74 = _$_.template(`<div>`);
 
 function render_3(__prev) {
-	var __a = 'frag-' + String(_$_.with_scope(__prev.___block, fetchLabel));
+	var __a = 'frag-' + String(_$_.with_scope(__prev._a, fetchLabel));
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_30, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 function FragmentTailExpression_render(__anchor, __block) {
 	var div_29 = root_74();
 
-	{
-		var expression_30 = _$_.hydrating ? _$_.hydrate_text() : div_29.firstChild;
-	}
-
-	_$_.render(render_3, { a: ' ', ___block: __block, _expression_30: expression_30 });
+	_$_.render(render_3, { a: '', _a: __block, _b: div_29 });
 	_$_.append(__anchor, div_29);
 }
 
 FragmentTailExpression[_$_.$r] = FragmentTailExpression_render;
 
-var root_75 = _$_.template(`<div>frag-<span>tail</span></div>`, 0);
+var root_75 = _$_.template(`<div>frag-<span>tail`);
 
 function FragmentChildOnly_render(__anchor, __block) {
 	var div_30 = root_75();
@@ -1053,7 +1031,7 @@ function FragmentChildOnly_render(__anchor, __block) {
 
 FragmentChildOnly[_$_.$r] = FragmentChildOnly_render;
 
-var root_77 = _$_.template(`<!><p>after-opaque</p>`, 1, 2);
+var root_77 = _$_.template(`<!><p>after-opaque`, 1, 2);
 var root_76 = _$_.template(`<!>`, 1, 1);
 
 function OpaqueLead_render(__anchor, __block, props) {
@@ -1074,7 +1052,7 @@ function OpaqueLead_render(__anchor, __block, props) {
 
 OpaqueLead[_$_.$r] = OpaqueLead_render;
 
-var root_78 = _$_.template(`<div></div>`, 0);
+var root_78 = _$_.template(`<div>`);
 
 function FragmentLeadsWithOpaqueValue_render(__anchor, __block) {
 	var div_31 = root_78();
@@ -1091,13 +1069,13 @@ function FragmentLeadsWithOpaqueValue_render(__anchor, __block) {
 
 FragmentLeadsWithOpaqueValue[_$_.$r] = FragmentLeadsWithOpaqueValue_render;
 
-var root_80 = _$_.template(` <p>after-call</p>`, 1, 2);
+var root_80 = _$_.template(` <p>after-call`, 1, 2);
 
 function render_4(__prev) {
-	var __a = String(_$_.with_scope(__prev.___block, fetchLabel));
+	var __a = String(_$_.with_scope(__prev._a, fetchLabel));
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_32, __prev.a = __a);
+		_$_.set_text(__prev._b, __prev.a = __a);
 	}
 }
 
@@ -1112,7 +1090,7 @@ function PrimitiveCallLead_render(__anchor, __block) {
 		var expression_32 = _$_.first_child_frag(fragment_35, true);
 
 		_$_.next();
-		_$_.render(render_4, { a: ' ', ___block: __block, _expression_32: expression_32 });
+		_$_.render(render_4, { a: ' ', _a: __block, _b: expression_32 });
 		_$_.append(__anchor, fragment_35);
 	}));
 
@@ -1121,7 +1099,7 @@ function PrimitiveCallLead_render(__anchor, __block) {
 
 PrimitiveCallLead[_$_.$r] = PrimitiveCallLead_render;
 
-var root_81 = _$_.template(`<div></div>`, 0);
+var root_81 = _$_.template(`<div>`);
 
 function FragmentLeadsWithPrimitiveCall_render(__anchor, __block) {
 	var div_32 = root_81();
@@ -1138,35 +1116,31 @@ function FragmentLeadsWithPrimitiveCall_render(__anchor, __block) {
 
 FragmentLeadsWithPrimitiveCall[_$_.$r] = FragmentLeadsWithPrimitiveCall_render;
 
-var root_83 = _$_.template(`<div class="primitive-calls"> </div><button>update</button>`, 1, 2);
+var root_83 = _$_.template(`<div class=primitive-calls></div><button>update`, 1, 2);
 
 function render_5(__prev) {
-	var __a = "sum: " + (String(Number(__prev._count.value) + Number(__prev._count.value) ?? '') + ("; big: " + String(_$_.with_scope(__prev.___block, () => BigInt(__prev._count.value)) ?? '')));
+	var __a = "sum: " + (String(Number(__prev._a.value) + Number(__prev._a.value) ?? '') + ("; big: " + String(_$_.with_scope(__prev._b, () => BigInt(__prev._a.value)) ?? '')));
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._text_1, __prev.a = __a);
+		_$_.set_text_content(__prev._c, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
 var root_82 = _$_.template(`<!>`, 1, 1);
 
 function PrimitiveTextCalls_render(__anchor, __block) {
-	const count = _$_.track(2, __block, 'eea72017');
+	const count = _$_.track(2, __block, '1u7u49j');
 	var fragment_36 = root_82();
 	var node_30 = _$_.first_child_frag(fragment_36);
 
 	_$_.expression(node_30, () => _$_.tsrx_element((__anchor, __block) => {
 		var fragment_37 = root_83();
 		var div_33 = _$_.first_child_frag(fragment_37);
-
-		{
-			var text_1 = _$_.hydrating ? _$_.hydrate_text() : div_33.firstChild;
-		}
-
 		var button_2 = _$_.hydrating ? _$_.hydrate_sibling() : div_33.nextSibling;
 
 		button_2.__click = () => count.value++;
-		_$_.render(render_5, { a: ' ', _count: count, ___block: __block, _text_1: text_1 });
+		_$_.render(render_5, { a: '', _a: count, _b: __block, _c: div_33 });
 		_$_.append(__anchor, fragment_37);
 	}));
 
@@ -1175,11 +1149,11 @@ function PrimitiveTextCalls_render(__anchor, __block) {
 
 PrimitiveTextCalls[_$_.$r] = PrimitiveTextCalls_render;
 
-var root_84 = _$_.template(`<b>string</b>`, 0);
-var root_85 = _$_.template(`<b>number</b>`, 0);
-var root_86 = _$_.template(`<b>bigint</b>`, 0);
-var root_87 = _$_.template(`<b>date</b>`, 0);
-var root_89 = _$_.template(`<p>before<!>after</p><p>before<!>after</p><p>before<!>after</p><p>before<!>after</p>`, 1, 4);
+var root_84 = _$_.template(`<b>string`);
+var root_85 = _$_.template(`<b>number`);
+var root_86 = _$_.template(`<b>bigint`);
+var root_87 = _$_.template(`<b>date`);
+var root_89 = _$_.template(`<p>before<!>after</p><p>before<!>after</p><p>before<!>after</p><p>before<!>after`, 1, 4);
 var root_88 = _$_.template(`<!>`, 1, 1);
 
 function ShadowedTextCalls_render(__anchor, __block) {