ripple 0.4.3 → 0.4.4

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div class=portal-content>Portal content`);
+var root_1 = _$_.template_el('div', ['class', 'portal-content'], 'Portal content');
 var root = _$_.template(`<div class=container><h1>Main Content`);
 
 function SimplePortal_render(__anchor, __block) {
@@ -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) => {
@@ -41,6 +41,14 @@ function if_1(show) {
 
 var root_2 = _$_.template(`<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');
 	var div_2 = root_2();
@@ -51,17 +59,18 @@ 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_5 = _$_.template_el('div', ['class', 'portal-content'], 'Modal content');
 var root_4 = _$_.template(`<div><div class=main-content>Main page content</div><div class=footer>Footer`);
 
 function PortalWithMainContent_render(__anchor, __block) {
@@ -85,7 +94,7 @@ function PortalWithMainContent_render(__anchor, __block) {
 
 PortalWithMainContent[_$_.$r] = PortalWithMainContent_render;
 
-var root_7 = _$_.template(`<div class=portal-content>Portal content`);
+var root_7 = _$_.template_el('div', ['class', 'portal-content'], 'Portal content');
 var root_6 = _$_.template(`<div class=outer><div class=inner><span>Nested content`);
 
 function NestedContentWithPortal_render(__anchor, __block) {

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;
@@ -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');
@@ -124,7 +124,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

@@ -31,7 +31,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 +71,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 +89,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 +129,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 +147,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 +179,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 +197,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 +217,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 +236,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 +246,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 +290,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 +310,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 +328,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 +346,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 +364,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(
@@ -180,7 +180,7 @@ 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_13 = _$_.template_el('div', ['class', 'loading'], 'loading user...');
 
 function AsyncObjectValue_render(__anchor, __block) {
 	_$_.try(
@@ -224,7 +224,7 @@ 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_15 = _$_.template_el('div', ['class', 'loading'], 'loading...');
 
 function AsyncMultipleValues_render(__anchor, __block) {
 	_$_.try(
@@ -268,9 +268,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 +311,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 +342,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 +369,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 +387,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 +427,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();
@@ -36,7 +36,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 +48,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 +66,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 +84,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 +104,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 +138,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 +172,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);