ripple 0.4.3 → 0.4.5

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

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div class=portal-content>Portal content`);
-var root = _$_.template(`<div class=container><h1>Main Content`);
+var root_1 = _$_.template_el('div', ['class', 'portal-content'], 'Portal content');
+var root = _$_.template_el('div', ['class', 'container'], [['h1', null, 'Main Content']]);
 
 function SimplePortal_render(__anchor, __block) {
 	var div = root();
@@ -25,7 +25,7 @@ function SimplePortal_render(__anchor, __block) {
 
 SimplePortal[_$_.$r] = SimplePortal_render;
 
-var root_3 = _$_.template(`<div class=portal-content>Portal is visible`);
+var root_3 = _$_.template_el('div', ['class', 'portal-content'], 'Portal is visible');
 
 function consequent(__anchor, show) {
 	_$_.portal(__anchor, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
@@ -39,7 +39,15 @@ function if_1(show) {
 	if (show.value) return consequent;
 }
 
-var root_2 = _$_.template(`<div class=container><button class=toggle>Toggle`);
+var root_2 = _$_.template_el('div', ['class', 'container'], [['button', ['class', 'toggle'], 'Toggle']]);
+
+function render(__prev) {
+	var __a = if_1(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
 
 function ConditionalPortal_render(__anchor, __block) {
 	const show = _$_.track(true, __block, 'm1ectw');
@@ -51,18 +59,23 @@ function ConditionalPortal_render(__anchor, __block) {
 		button.__click = () => show.value = !show.value;
 
 		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_2, true);
+		var ifs = _$_.if_static(node_1, if_1, 0, show);
 
-		_$_.if(node_1, if_1, false, show);
 		_$_.hydrating && _$_.pop(div_2);
 	}
 
+	_$_.render(render, { a: _$_.UNINITIALIZED, _a: show, _b: ifs });
 	_$_.append(__anchor, div_2);
 }
 
 ConditionalPortal[_$_.$r] = ConditionalPortal_render;
 
-var root_5 = _$_.template(`<div class=portal-content>Modal content`);
-var root_4 = _$_.template(`<div><div class=main-content>Main page content</div><div class=footer>Footer`);
+var root_5 = _$_.template_el('div', ['class', 'portal-content'], 'Modal content');
+
+var root_4 = _$_.template_el('div', null, [
+	['div', ['class', 'main-content'], 'Main page content'],
+	['div', ['class', 'footer'], 'Footer']
+]);
 
 function PortalWithMainContent_render(__anchor, __block) {
 	var div_4 = root_4();
@@ -85,8 +98,15 @@ function PortalWithMainContent_render(__anchor, __block) {
 
 PortalWithMainContent[_$_.$r] = PortalWithMainContent_render;
 
-var root_7 = _$_.template(`<div class=portal-content>Portal content`);
-var root_6 = _$_.template(`<div class=outer><div class=inner><span>Nested content`);
+var root_7 = _$_.template_el('div', ['class', 'portal-content'], 'Portal content');
+
+var root_6 = _$_.template_el('div', ['class', 'outer'], [
+	[
+		'div',
+		['class', 'inner'],
+		[['span', null, 'Nested content']]
+	]
+]);
 
 function NestedContentWithPortal_render(__anchor, __block) {
 	var div_7 = root_6();

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=count>`);
+var root = _$_.template_el('div', ['class', 'count']);
 
 function render(__prev) {
 	var __a = __prev._a.value;
@@ -22,7 +22,7 @@ function TrackedState_render(__anchor, __block) {
 
 TrackedState[_$_.$r] = TrackedState_render;
 
-var root_1 = _$_.template(`<div><span class=count> `);
+var root_1 = _$_.template_el('div', null, [['span', ['class', 'count'], ' ']]);
 
 function CounterWithInitial_render(__anchor, __block, props) {
 	const count = _$_.track(props.initial, __block, '133ubs');
@@ -50,7 +50,7 @@ function CounterWrapper_render(__anchor, __block) {
 
 CounterWrapper[_$_.$r] = CounterWrapper_render;
 
-var root_2 = _$_.template(`<div class=sum> `);
+var root_2 = _$_.template_el('div', ['class', 'sum'], ' ');
 
 function ComputedValues_render(__anchor, __block) {
 	const a = _$_.track(2, __block, '1ex10ij');
@@ -70,7 +70,11 @@ function ComputedValues_render(__anchor, __block) {
 
 ComputedValues[_$_.$r] = ComputedValues_render;
 
-var root_3 = _$_.template(`<div class=multiple-tracked><div class=x></div><div class=y></div><div class=z>`);
+var root_3 = _$_.template_el('div', ['class', 'multiple-tracked'], [
+	['div', ['class', 'x']],
+	['div', ['class', 'y']],
+	['div', ['class', 'z']]
+]);
 
 function render_1(__prev) {
 	var __a = __prev._a.value;
@@ -124,7 +128,7 @@ function MultipleTracked_render(__anchor, __block) {
 
 MultipleTracked[_$_.$r] = MultipleTracked_render;
 
-var root_4 = _$_.template(`<div class=name> `);
+var root_4 = _$_.template_el('div', ['class', 'name'], ' ');
 
 function DerivedState_render(__anchor, __block) {
 	const firstName = _$_.track('John', __block, 'qnrtu2');

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

@@ -1,7 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=resolved><span class=value></span><button class=inc>inc`);
+var root = _$_.template_el('div', ['class', 'resolved'], [
+	['span', ['class', 'value']],
+	['button', ['class', 'inc'], 'inc']
+]);
 
 function render(__prev) {
 	var __a = __prev._a.value + ':' + __prev._b.value;
@@ -31,7 +34,7 @@ function BasicContent_render(__anchor, __block) {
 BasicContent[_$_.$r] = BasicContent_render;
 
 var root_3 = _$_.template(`<!><footer class=after-async>after-async`, 1, 2);
-var root_4 = _$_.template(`<p class=loading>loading...`);
+var root_4 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 var root_2 = _$_.template(`<span class=before>before</span><!><span class=sibling-after>sibling-after`, 1, 3);
 var root_1 = _$_.template(`<!>`, 1, 1);
 
@@ -71,7 +74,7 @@ function StreamPending_render(__anchor, __block) {
 
 StreamPending[_$_.$r] = StreamPending_render;
 
-var root_5 = _$_.template(`<p class=resolved> `);
+var root_5 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function CatchOnlyContent_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.catchOnly.promise, __block, 'mgtlfq');
@@ -89,7 +92,7 @@ function CatchOnlyContent_render(__anchor, __block) {
 
 CatchOnlyContent[_$_.$r] = CatchOnlyContent_render;
 
-var root_8 = _$_.template(`<em class=caught> `);
+var root_8 = _$_.template_el('em', ['class', 'caught'], ' ');
 var root_7 = _$_.template(`<span class=before>before</span><!>`, 1, 2);
 var root_6 = _$_.template(`<!>`, 1, 1);
 
@@ -129,7 +132,7 @@ function StreamCatchOnly_render(__anchor, __block) {
 
 StreamCatchOnly[_$_.$r] = StreamCatchOnly_render;
 
-var root_9 = _$_.template(`<p class=resolved> `);
+var root_9 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function RejectContent_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.rejects.promise, __block, '15p08yc');
@@ -147,8 +150,8 @@ function RejectContent_render(__anchor, __block) {
 
 RejectContent[_$_.$r] = RejectContent_render;
 
-var root_10 = _$_.template(`<em class=caught> `);
-var root_11 = _$_.template(`<p class=loading>loading...`);
+var root_10 = _$_.template_el('em', ['class', 'caught'], ' ');
+var root_11 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function StreamRejects_render(__anchor, __block) {
 	_$_.try(
@@ -179,7 +182,7 @@ function StreamRejects_render(__anchor, __block) {
 
 StreamRejects[_$_.$r] = StreamRejects_render;
 
-var root_12 = _$_.template(`<p class=resolved> `);
+var root_12 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function NoCatchContent_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.noCatch.promise, __block, 'tvfywb');
@@ -197,7 +200,7 @@ function NoCatchContent_render(__anchor, __block) {
 
 NoCatchContent[_$_.$r] = NoCatchContent_render;
 
-var root_13 = _$_.template(`<p class=loading>loading...`);
+var root_13 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function StreamNoCatch_render(__anchor, __block) {
 	_$_.try(
@@ -217,7 +220,7 @@ function StreamNoCatch_render(__anchor, __block) {
 
 StreamNoCatch[_$_.$r] = StreamNoCatch_render;
 
-var root_14 = _$_.template(`<section class=root-catch> `);
+var root_14 = _$_.template_el('section', ['class', 'root-catch'], ' ');
 
 function RootCatch_render(__anchor, __block, { error, reset }) {
 	var section = root_14();
@@ -236,7 +239,7 @@ function RootCatch_render(__anchor, __block, { error, reset }) {
 
 RootCatch[_$_.$r] = RootCatch_render;
 
-var root_15 = _$_.template(`<p class=root-pending>root-loading`);
+var root_15 = _$_.template_el('p', ['class', 'root-pending'], 'root-loading');
 
 function RootPending_render(__anchor, __block) {
 	var p_6 = root_15();
@@ -246,7 +249,7 @@ function RootPending_render(__anchor, __block) {
 
 RootPending[_$_.$r] = RootPending_render;
 
-var root_17 = _$_.template(`<p class=head-content> `);
+var root_17 = _$_.template_el('p', ['class', 'head-content'], ' ');
 var root_16 = _$_.template(`<!>`, 1, 1);
 
 function HeadContent_render(__anchor, __block) {
@@ -290,7 +293,7 @@ function HeadContent_render(__anchor, __block) {
 
 HeadContent[_$_.$r] = HeadContent_render;
 
-var root_18 = _$_.template(`<p class=loading>loading...`);
+var root_18 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function StreamHead_render(__anchor, __block) {
 	_$_.try(
@@ -310,7 +313,7 @@ function StreamHead_render(__anchor, __block) {
 
 StreamHead[_$_.$r] = StreamHead_render;
 
-var root_19 = _$_.template(`<p class=root-async> `);
+var root_19 = _$_.template_el('p', ['class', 'root-async'], ' ');
 
 function StreamRootDirect_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.rootDirect.promise, __block, '1gc250a');
@@ -328,7 +331,7 @@ function StreamRootDirect_render(__anchor, __block) {
 
 StreamRootDirect[_$_.$r] = StreamRootDirect_render;
 
-var root_20 = _$_.template(`<p class=outer> `);
+var root_20 = _$_.template_el('p', ['class', 'outer'], ' ');
 
 function OuterContent_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.outer.promise, __block, 'ev54ge');
@@ -346,7 +349,7 @@ function OuterContent_render(__anchor, __block) {
 
 OuterContent[_$_.$r] = OuterContent_render;
 
-var root_21 = _$_.template(`<p class=inner> `);
+var root_21 = _$_.template_el('p', ['class', 'inner'], ' ');
 
 function InnerContent_render(__anchor, __block) {
 	const data = _$_.track_async(() => controls.inner.promise, __block, 'u3o1kd');
@@ -364,9 +367,9 @@ function InnerContent_render(__anchor, __block) {
 
 InnerContent[_$_.$r] = InnerContent_render;
 
-var root_23 = _$_.template(`<p class=inner-loading>inner-loading`);
+var root_23 = _$_.template_el('p', ['class', 'inner-loading'], 'inner-loading');
 var root_22 = _$_.template(`<!><!>`, 1, 2);
-var root_24 = _$_.template(`<p class=outer-loading>outer-loading`);
+var root_24 = _$_.template_el('p', ['class', 'outer-loading'], 'outer-loading');
 
 function StreamNested_render(__anchor, __block) {
 	_$_.try(

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

@@ -1,9 +1,9 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=status-success>Success`);
-var root_1 = _$_.template(`<div class=status-error>Error`);
-var root_2 = _$_.template(`<div class=status-unknown>Unknown`);
+var root = _$_.template_el('div', ['class', 'status-success'], 'Success');
+var root_1 = _$_.template_el('div', ['class', 'status-error'], 'Error');
+var root_2 = _$_.template_el('div', ['class', 'status-unknown'], 'Unknown');
 
 function switch_case_0(__anchor, status) {
 	var div = root();
@@ -44,9 +44,9 @@ function SwitchStatic_render(__anchor, __block) {
 
 SwitchStatic[_$_.$r] = SwitchStatic_render;
 
-var root_5 = _$_.template(`<div class=case-a>Case A`);
-var root_6 = _$_.template(`<div class=case-b>Case B`);
-var root_7 = _$_.template(`<div class=case-c>Case C`);
+var root_5 = _$_.template_el('div', ['class', 'case-a'], 'Case A');
+var root_6 = _$_.template_el('div', ['class', 'case-b'], 'Case B');
+var root_7 = _$_.template_el('div', ['class', 'case-c'], 'Case C');
 
 function switch_case_0_1(__anchor, status) {
 	var div_3 = root_5();
@@ -106,8 +106,8 @@ function SwitchReactive_render(__anchor, __block) {
 
 SwitchReactive[_$_.$r] = SwitchReactive_render;
 
-var root_8 = _$_.template(`<div class=case-1-2>1 or 2`);
-var root_9 = _$_.template(`<div class=case-other>Other`);
+var root_8 = _$_.template_el('div', ['class', 'case-1-2'], '1 or 2');
+var root_9 = _$_.template_el('div', ['class', 'case-other'], 'Other');
 
 function switch_case_0_2(__anchor, val) {
 	var div_6 = root_8();
@@ -142,9 +142,9 @@ function SwitchFallthrough_render(__anchor, __block) {
 
 SwitchFallthrough[_$_.$r] = SwitchFallthrough_render;
 
-var root_12 = _$_.template(`<div class=level-1>Level 1`);
-var root_13 = _$_.template(`<div class=level-2>Level 2`);
-var root_14 = _$_.template(`<div class=level-3>Level 3`);
+var root_12 = _$_.template_el('div', ['class', 'level-1'], 'Level 1');
+var root_13 = _$_.template_el('div', ['class', 'level-2'], 'Level 2');
+var root_14 = _$_.template_el('div', ['class', 'level-3'], 'Level 3');
 
 function switch_case_0_3(__anchor, level) {
 	var div_8 = root_12();
@@ -204,9 +204,9 @@ function SwitchNumericLevels_render(__anchor, __block) {
 
 SwitchNumericLevels[_$_.$r] = SwitchNumericLevels_render;
 
-var root_17 = _$_.template(`<div class=block-1>Block 1`);
-var root_18 = _$_.template(`<div class=block-2>Block 2`);
-var root_19 = _$_.template(`<div class=block-3>Block 3`);
+var root_17 = _$_.template_el('div', ['class', 'block-1'], 'Block 1');
+var root_18 = _$_.template_el('div', ['class', 'block-2'], 'Block 2');
+var root_19 = _$_.template_el('div', ['class', 'block-3'], 'Block 3');
 
 function switch_case_0_4(__anchor, level) {
 	var div_11 = root_17();
@@ -266,9 +266,9 @@ function SwitchBlockScoped_render(__anchor, __block) {
 
 SwitchBlockScoped[_$_.$r] = SwitchBlockScoped_render;
 
-var root_22 = _$_.template(`<div class=nobreak-1>NoBreak 1`);
-var root_23 = _$_.template(`<div class=nobreak-2>NoBreak 2`);
-var root_24 = _$_.template(`<div class=nobreak-3>NoBreak 3`);
+var root_22 = _$_.template_el('div', ['class', 'nobreak-1'], 'NoBreak 1');
+var root_23 = _$_.template_el('div', ['class', 'nobreak-2'], 'NoBreak 2');
+var root_24 = _$_.template_el('div', ['class', 'nobreak-3'], 'NoBreak 3');
 
 function switch_case_0_5(__anchor, level) {
 	var div_14 = root_22();

package/tests/hydration/compiled/client/track-async-serialization.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<p class=result> `);
+var root = _$_.template_el('p', ['class', 'result'], ' ');
 
 function MoneyResult_render(__anchor, __block, { count }) {
 	const money = _$_.track_async(() => _$_.with_scope(__block, () => doubleMoney(new Money(count.value, 'USD'))), __block, 'csssmh');
@@ -19,7 +19,7 @@ function MoneyResult_render(__anchor, __block, { count }) {
 
 MoneyResult[_$_.$r] = MoneyResult_render;
 
-var root_3 = _$_.template(`<p class=loading>loading...`);
+var root_3 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 var root_2 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_1 = _$_.template(`<!>`, 1, 1);
 
@@ -59,7 +59,7 @@ function AsyncCustomType_render(__anchor, __block) {
 
 AsyncCustomType[_$_.$r] = AsyncCustomType_render;
 
-var root_4 = _$_.template(`<p class=result> `);
+var root_4 = _$_.template_el('p', ['class', 'result'], ' ');
 
 function ServerCallResult_render(__anchor, __block, { count }) {
 	const data = _$_.track_async(() => _$_.with_scope(__block, () => formatValue(count.value)), __block, 'lq8y0o');
@@ -77,7 +77,7 @@ function ServerCallResult_render(__anchor, __block, { count }) {
 
 ServerCallResult[_$_.$r] = ServerCallResult_render;
 
-var root_7 = _$_.template(`<p class=loading>loading...`);
+var root_7 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 var root_6 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_5 = _$_.template(`<!>`, 1, 1);
 
@@ -117,8 +117,8 @@ function AsyncWithServerCall_render(__anchor, __block) {
 
 AsyncWithServerCall[_$_.$r] = AsyncWithServerCall_render;
 
-var root_8 = _$_.template(`<p class=result> `);
-var root_9 = _$_.template(`<p class=loading>loading...`);
+var root_8 = _$_.template_el('p', ['class', 'result'], ' ');
+var root_9 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function AsyncSimpleValue_render(__anchor, __block) {
 	_$_.try(
@@ -148,8 +148,8 @@ function AsyncSimpleValue_render(__anchor, __block) {
 
 AsyncSimpleValue[_$_.$r] = AsyncSimpleValue_render;
 
-var root_10 = _$_.template(`<span class=count> `);
-var root_11 = _$_.template(`<span class=pending>...`);
+var root_10 = _$_.template_el('span', ['class', 'count'], ' ');
+var root_11 = _$_.template_el('span', ['class', 'pending'], '...');
 
 function AsyncNumericValue_render(__anchor, __block) {
 	_$_.try(
@@ -179,8 +179,12 @@ function AsyncNumericValue_render(__anchor, __block) {
 
 AsyncNumericValue[_$_.$r] = AsyncNumericValue_render;
 
-var root_12 = _$_.template(`<div class=user><span class=name> </span><span class=age> `);
-var root_13 = _$_.template(`<div class=loading>loading user...`);
+var root_12 = _$_.template_el('div', ['class', 'user'], [
+	['span', ['class', 'name'], ' '],
+	['span', ['class', 'age'], ' ']
+]);
+
+var root_13 = _$_.template_el('div', ['class', 'loading'], 'loading user...');
 
 function AsyncObjectValue_render(__anchor, __block) {
 	_$_.try(
@@ -223,8 +227,12 @@ function AsyncObjectValue_render(__anchor, __block) {
 
 AsyncObjectValue[_$_.$r] = AsyncObjectValue_render;
 
-var root_14 = _$_.template(`<div class=multi><span class=first> </span><span class=second> `);
-var root_15 = _$_.template(`<div class=loading>loading...`);
+var root_14 = _$_.template_el('div', ['class', 'multi'], [
+	['span', ['class', 'first'], ' '],
+	['span', ['class', 'second'], ' ']
+]);
+
+var root_15 = _$_.template_el('div', ['class', 'loading'], 'loading...');
 
 function AsyncMultipleValues_render(__anchor, __block) {
 	_$_.try(
@@ -268,9 +276,9 @@ function AsyncMultipleValues_render(__anchor, __block) {
 
 AsyncMultipleValues[_$_.$r] = AsyncMultipleValues_render;
 
-var root_16 = _$_.template(`<p class=result> `);
-var root_17 = _$_.template(`<p class=error> `);
-var root_18 = _$_.template(`<p class=loading>loading...`);
+var root_16 = _$_.template_el('p', ['class', 'result'], ' ');
+var root_17 = _$_.template_el('p', ['class', 'error'], ' ');
+var root_18 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function AsyncWithCatch_render(__anchor, __block) {
 	_$_.try(
@@ -311,8 +319,8 @@ function AsyncWithCatch_render(__anchor, __block) {
 
 AsyncWithCatch[_$_.$r] = AsyncWithCatch_render;
 
-var root_19 = _$_.template(`<p class=result> `);
-var root_20 = _$_.template(`<p class=pending>loading...`);
+var root_19 = _$_.template_el('p', ['class', 'result'], ' ');
+var root_20 = _$_.template_el('p', ['class', 'pending'], 'loading...');
 
 function ChildWithError_render(__anchor, __block) {
 	_$_.try(
@@ -342,7 +350,7 @@ function ChildWithError_render(__anchor, __block) {
 
 ChildWithError[_$_.$r] = ChildWithError_render;
 
-var root_21 = _$_.template(`<p class=parent-error> `);
+var root_21 = _$_.template_el('p', ['class', 'parent-error'], ' ');
 
 function ParentWithCatch_render(__anchor, __block) {
 	_$_.try(
@@ -369,7 +377,7 @@ function ParentWithCatch_render(__anchor, __block) {
 
 ParentWithCatch[_$_.$r] = ParentWithCatch_render;
 
-var root_22 = _$_.template(`<p class=result> `);
+var root_22 = _$_.template_el('p', ['class', 'result'], ' ');
 
 function ReactiveDependencyResult_render(__anchor, __block, { count }) {
 	const data = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(`count-${count.value}`)), __block, '6vdwe2');
@@ -387,7 +395,7 @@ function ReactiveDependencyResult_render(__anchor, __block, { count }) {
 
 ReactiveDependencyResult[_$_.$r] = ReactiveDependencyResult_render;
 
-var root_25 = _$_.template(`<p class=loading>loading...`);
+var root_25 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 var root_24 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_23 = _$_.template(`<!>`, 1, 1);
 
@@ -427,7 +435,7 @@ function AsyncWithReactiveDependency_render(__anchor, __block) {
 
 AsyncWithReactiveDependency[_$_.$r] = AsyncWithReactiveDependency_render;
 
-var root_28 = _$_.template(`<p class=loading>loading...`);
+var root_28 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 var root_27 = _$_.template(`<button class=increment>increment</button><!>`, 1, 2);
 var root_26 = _$_.template(`<!>`, 1, 1);
 

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<p class=root-pending>root loading...`);
+var root = _$_.template_el('p', ['class', 'root-pending'], 'root loading...');
 
 function RootPending_render(__anchor, __block) {
 	var p = root();
@@ -11,7 +11,10 @@ function RootPending_render(__anchor, __block) {
 
 RootPending[_$_.$r] = RootPending_render;
 
-var root_1 = _$_.template(`<section class=root-catch><p class=root-error> </p><button class=root-reset>retry`);
+var root_1 = _$_.template_el('section', ['class', 'root-catch'], [
+	['p', ['class', 'root-error'], ' '],
+	['button', ['class', 'root-reset'], 'retry']
+]);
 
 function RootCatch_render(__anchor, __block, { error, reset }) {
 	var section = root_1();
@@ -36,7 +39,7 @@ function RootCatch_render(__anchor, __block, { error, reset }) {
 
 RootCatch[_$_.$r] = RootCatch_render;
 
-var root_2 = _$_.template(`<p>should not render`);
+var root_2 = _$_.template_el('p', null, 'should not render');
 
 function RootThrows_render(__anchor, __block) {
 	throw _$_.with_scope(__block, () => new Error('root exploded'));
@@ -48,7 +51,7 @@ function RootThrows_render(__anchor, __block) {
 
 RootThrows[_$_.$r] = RootThrows_render;
 
-var root_3 = _$_.template(`<p class=root-async-value> `);
+var root_3 = _$_.template_el('p', ['class', 'root-async-value'], ' ');
 
 function RootAsyncDirect_render(__anchor, __block) {
 	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('root async value')), __block, '1nl29mb');
@@ -66,7 +69,7 @@ function RootAsyncDirect_render(__anchor, __block) {
 
 RootAsyncDirect[_$_.$r] = RootAsyncDirect_render;
 
-var root_4 = _$_.template(`<p class=root-async-value> `);
+var root_4 = _$_.template_el('p', ['class', 'root-async-value'], ' ');
 
 function RootAsyncRejects_render(__anchor, __block) {
 	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.reject(new Error('root async failed'))), __block, '1mjk6zo');
@@ -84,7 +87,7 @@ function RootAsyncRejects_render(__anchor, __block) {
 
 RootAsyncRejects[_$_.$r] = RootAsyncRejects_render;
 
-var root_5 = _$_.template(`<p class=loading>loading...`);
+var root_5 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function AsyncListInTryPending_render(__anchor, __block) {
 	_$_.try(
@@ -104,8 +107,8 @@ function AsyncListInTryPending_render(__anchor, __block) {
 
 AsyncListInTryPending[_$_.$r] = AsyncListInTryPending_render;
 
-var root_7 = _$_.template(`<li> `);
-var root_6 = _$_.template(`<ul class=items>`);
+var root_7 = _$_.template_el('li', null, ' ');
+var root_6 = _$_.template_el('ul', ['class', 'items']);
 
 function AsyncList_render(__anchor, __block) {
 	const items = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(['alpha', 'beta', 'gamma'])), __block, '1dw7tpj');
@@ -138,7 +141,7 @@ function AsyncList_render(__anchor, __block) {
 
 AsyncList[_$_.$r] = AsyncList_render;
 
-var root_10 = _$_.template(`<div class=loading>loading async content`);
+var root_10 = _$_.template_el('div', ['class', 'loading'], 'loading async content');
 var root_9 = _$_.template(`<div class=before>before</div><!>`, 1, 2);
 var root_8 = _$_.template(`<!>`, 1, 1);
 
@@ -172,7 +175,7 @@ function AsyncTryWithLeadingSibling_render(__anchor, __block) {
 
 AsyncTryWithLeadingSibling[_$_.$r] = AsyncTryWithLeadingSibling_render;
 
-var root_11 = _$_.template(`<div class=resolved> `);
+var root_11 = _$_.template_el('div', ['class', 'resolved'], ' ');
 
 function AsyncContent_render(__anchor, __block) {
 	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve('ready')), __block, '62wwns');

package/tests/hydration/compiled/client/typed-text.js

@@ -4,13 +4,14 @@ import * as _$_ from 'ripple/internal/client';
 var root_1 = _$_.template(`<div class=typed-run> <span>tail</span></div><p class=typed-number></p><button>update`, 1, 3);
 
 function render(__prev) {
-	var __a = 'value: ' + (__prev._a.value.label + String(__prev._a.value.count ?? ''));
+	var __row_value = __prev._a.value;
+	var __a = 'value: ' + (__row_value.label + String(__row_value.count ?? ''));
 
 	if (__prev.a !== __a) {
 		_$_.set_text(__prev._b, __prev.a = __a);
 	}
 
-	var __b = (0, __prev._a.value.count);
+	var __b = (0, __row_value.count);
 
 	if (__prev.b !== __b) {
 		_$_.set_text_content(__prev._c, __b, __prev.b);