ripple 0.4.2 → 0.4.4

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</div>`, 0);
-var root = _$_.template(`<div class="container"><h1>Main Content</h1></div>`, 0);
+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) {
 	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</div>`, 0);
+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,10 +39,18 @@ function if_1(show) {
 	if (show.value) return consequent;
 }
 
-var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button></div>`, 0);
+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, '4f6df174');
+	const show = _$_.track(true, __block, 'm1ectw');
 	var div_2 = root_2();
 
 	{
@@ -50,19 +58,20 @@ function ConditionalPortal_render(__anchor, __block) {
 
 		button.__click = () => show.value = !show.value;
 
-		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_2);
+		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</div>`, 0);
-var root_4 = _$_.template(`<div><div class="main-content">Main page content</div><!><div class="footer">Footer</div></div>`, 0);
+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) {
 	var div_4 = root_4();
@@ -85,8 +94,8 @@ function PortalWithMainContent_render(__anchor, __block) {
 
 PortalWithMainContent[_$_.$r] = PortalWithMainContent_render;
 
-var root_7 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
-var root_6 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div></div>`, 0);
+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) {
 	var div_7 = root_6();

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

@@ -1,31 +1,31 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="count"></div>`, 0);
+var root = _$_.template_el('div', ['class', 'count']);
 
 function render(__prev) {
-	var __a = __prev._count.value;
+	var __a = __prev._a.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._div, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 }
 
 function TrackedState_render(__anchor, __block) {
-	const count = _$_.track(0, __block, 'c1818584');
+	const count = _$_.track(0, __block, '1hovkhw');
 	var div = root();
 
-	_$_.render(render, { a: '', _count: count, _div: div });
+	_$_.render(render, { a: '', _a: count, _b: div });
 	_$_.append(__anchor, div);
 }
 
 TrackedState[_$_.$r] = TrackedState_render;
 
-var root_1 = _$_.template(`<div><span class="count"> </span></div>`, 0);
+var root_1 = _$_.template(`<div><span class=count> `);
 
 function CounterWithInitial_render(__anchor, __block, props) {
-	const count = _$_.track(props.initial, __block, '03ea4348');
+	const count = _$_.track(props.initial, __block, '133ubs');
 	var div_1 = root_1();
 
 	{
@@ -50,11 +50,11 @@ function CounterWrapper_render(__anchor, __block) {
 
 CounterWrapper[_$_.$r] = CounterWrapper_render;
 
-var root_2 = _$_.template(`<div class="sum"> </div>`, 0);
+var root_2 = _$_.template_el('div', ['class', 'sum'], ' ');
 
 function ComputedValues_render(__anchor, __block) {
-	const a = _$_.track(2, __block, 'b78281db');
-	const b = _$_.track(3, __block, 'a0cf6c6d');
+	const a = _$_.track(2, __block, '1ex10ij');
+	const b = _$_.track(3, __block, '18mae7h');
 	const sum = () => a.value + b.value;
 	var div_2 = root_2();
 
@@ -70,35 +70,35 @@ 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"></div></div>`, 0);
+var root_3 = _$_.template(`<div class=multiple-tracked><div class=x></div><div class=y></div><div class=z>`);
 
 function render_1(__prev) {
-	var __a = __prev._x.value;
+	var __a = __prev._a.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._div_4, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 
-	var __b = __prev._y.value;
+	var __b = __prev._c.value;
 
 	if (__prev.b !== __b) {
-		_$_.set_text_content(__prev._div_5, __b, __prev.b);
+		_$_.set_text_content(__prev._d, __b, __prev.b);
 		__prev.b = __b;
 	}
 
-	var __c = __prev._z.value;
+	var __c = __prev._e.value;
 
 	if (__prev.c !== __c) {
-		_$_.set_text_content(__prev._div_6, __c, __prev.c);
+		_$_.set_text_content(__prev._f, __c, __prev.c);
 		__prev.c = __c;
 	}
 }
 
 function MultipleTracked_render(__anchor, __block) {
-	const x = _$_.track(10, __block, '843522de');
-	const y = _$_.track(20, __block, '1308996d');
-	const z = _$_.track(30, __block, '048c3fd0');
+	const x = _$_.track(10, __block, '10ol1i6');
+	const y = _$_.track(20, __block, '5a4d4d');
+	const z = _$_.track(30, __block, '19fdn4');
 	var div_3 = root_3();
 
 	{
@@ -111,12 +111,12 @@ function MultipleTracked_render(__anchor, __block) {
 		a: '',
 		b: '',
 		c: '',
-		_x: x,
-		_div_4: div_4,
-		_y: y,
-		_div_5: div_5,
-		_z: z,
-		_div_6: div_6
+		_a: x,
+		_b: div_4,
+		_c: y,
+		_d: div_5,
+		_e: z,
+		_f: div_6
 	});
 
 	_$_.append(__anchor, div_3);
@@ -124,11 +124,11 @@ function MultipleTracked_render(__anchor, __block) {
 
 MultipleTracked[_$_.$r] = MultipleTracked_render;
 
-var root_4 = _$_.template(`<div class="name"> </div>`, 0);
+var root_4 = _$_.template_el('div', ['class', 'name'], ' ');
 
 function DerivedState_render(__anchor, __block) {
-	const firstName = _$_.track('John', __block, '6015eeca');
-	const lastName = _$_.track('Doe', __block, '4fa9a20e');
+	const firstName = _$_.track('John', __block, 'qnrtu2');
+	const lastName = _$_.track('Doe', __block, 'm3q77y');
 	const fullName = () => `${firstName.value} ${lastName.value}`;
 	var div_7 = root_4();
 

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="ready">ready</div>`, 1, 1);
+var root = _$_.template(`<div class=ready>ready`, 1, 1);
 
 function GuardReturnRenders_render(__anchor, __block) {
 	const ready = true;
@@ -17,7 +17,7 @@ function GuardReturnRenders_render(__anchor, __block) {
 
 GuardReturnRenders[_$_.$r] = GuardReturnRenders_render;
 
-var root_1 = _$_.template(`<div class="ready">ready</div>`, 1, 1);
+var root_1 = _$_.template(`<div class=ready>ready`, 1, 1);
 
 function GuardReturnNull_render(__anchor, __block) {
 	const ready = false;

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

@@ -1,20 +1,20 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="resolved"><span class="value"></span><button class="inc">inc</button></div>`, 0);
+var root = _$_.template(`<div class=resolved><span class=value></span><button class=inc>inc`);
 
 function render(__prev) {
-	var __a = __prev._data.value + ':' + __prev._count.value;
+	var __a = __prev._a.value + ':' + __prev._b.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._span, __a, __prev.a);
+		_$_.set_text_content(__prev._c, __a, __prev.a);
 		__prev.a = __a;
 	}
 }
 
 function BasicContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.basic.promise, __block, '703e438e');
-	const count = _$_.track(0, __block, '928bce39');
+	const data = _$_.track_async(() => controls.basic.promise, __block, 'v55zf2');
+	const count = _$_.track(0, __block, '14nt3jt');
 	var div = root();
 
 	{
@@ -24,15 +24,15 @@ function BasicContent_render(__anchor, __block) {
 		button.__click = () => count.value++;
 	}
 
-	_$_.render(render, { a: '', _data: data, _count: count, _span: span });
+	_$_.render(render, { a: '', _a: data, _b: count, _c: span });
 	_$_.append(__anchor, div);
 }
 
 BasicContent[_$_.$r] = BasicContent_render;
 
-var root_3 = _$_.template(`<!><footer class="after-async">after-async</footer>`, 1, 2);
-var root_4 = _$_.template(`<p class="loading">loading...</p>`, 0);
-var root_2 = _$_.template(`<span class="before">before</span><!><span class="sibling-after">sibling-after</span>`, 1, 3);
+var root_3 = _$_.template(`<!><footer class=after-async>after-async`, 1, 2);
+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);
 
 function StreamPending_render(__anchor, __block) {
@@ -71,10 +71,10 @@ function StreamPending_render(__anchor, __block) {
 
 StreamPending[_$_.$r] = StreamPending_render;
 
-var root_5 = _$_.template(`<p class="resolved"> </p>`, 0);
+var root_5 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function CatchOnlyContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.catchOnly.promise, __block, '50f939c6');
+	const data = _$_.track_async(() => controls.catchOnly.promise, __block, 'mgtlfq');
 	var p_1 = root_5();
 
 	{
@@ -89,8 +89,8 @@ function CatchOnlyContent_render(__anchor, __block) {
 
 CatchOnlyContent[_$_.$r] = CatchOnlyContent_render;
 
-var root_8 = _$_.template(`<em class="caught"> </em>`, 0);
-var root_7 = _$_.template(`<span class="before">before</span><!>`, 1, 2);
+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);
 
 function StreamCatchOnly_render(__anchor, __block) {
@@ -129,10 +129,10 @@ function StreamCatchOnly_render(__anchor, __block) {
 
 StreamCatchOnly[_$_.$r] = StreamCatchOnly_render;
 
-var root_9 = _$_.template(`<p class="resolved"> </p>`, 0);
+var root_9 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function RejectContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.rejects.promise, __block, '96452a54');
+	const data = _$_.track_async(() => controls.rejects.promise, __block, '15p08yc');
 	var p_2 = root_9();
 
 	{
@@ -147,8 +147,8 @@ function RejectContent_render(__anchor, __block) {
 
 RejectContent[_$_.$r] = RejectContent_render;
 
-var root_10 = _$_.template(`<em class="caught"> </em>`, 0);
-var root_11 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_10 = _$_.template_el('em', ['class', 'caught'], ' ');
+var root_11 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function StreamRejects_render(__anchor, __block) {
 	_$_.try(
@@ -179,10 +179,10 @@ function StreamRejects_render(__anchor, __block) {
 
 StreamRejects[_$_.$r] = StreamRejects_render;
 
-var root_12 = _$_.template(`<p class="resolved"> </p>`, 0);
+var root_12 = _$_.template_el('p', ['class', 'resolved'], ' ');
 
 function NoCatchContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.noCatch.promise, __block, '6baa716b');
+	const data = _$_.track_async(() => controls.noCatch.promise, __block, 'tvfywb');
 	var p_4 = root_12();
 
 	{
@@ -197,7 +197,7 @@ function NoCatchContent_render(__anchor, __block) {
 
 NoCatchContent[_$_.$r] = NoCatchContent_render;
 
-var root_13 = _$_.template(`<p class="loading">loading...</p>`, 0);
+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"> </section>`, 0);
+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</p>`, 0);
+var root_15 = _$_.template_el('p', ['class', 'root-pending'], 'root-loading');
 
 function RootPending_render(__anchor, __block) {
 	var p_6 = root_15();
@@ -246,11 +246,11 @@ function RootPending_render(__anchor, __block) {
 
 RootPending[_$_.$r] = RootPending_render;
 
-var root_17 = _$_.template(`<p class="head-content"> </p>`, 0);
+var root_17 = _$_.template_el('p', ['class', 'head-content'], ' ');
 var root_16 = _$_.template(`<!>`, 1, 1);
 
 function HeadContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.head.promise, __block, '9cd3c3cd');
+	const data = _$_.track_async(() => controls.head.promise, __block, '17ii47h');
 	var fragment_5 = root_16();
 	var node_5 = _$_.first_child_frag(fragment_5);
 
@@ -290,7 +290,7 @@ function HeadContent_render(__anchor, __block) {
 
 HeadContent[_$_.$r] = HeadContent_render;
 
-var root_18 = _$_.template(`<p class="loading">loading...</p>`, 0);
+var root_18 = _$_.template_el('p', ['class', 'loading'], 'loading...');
 
 function StreamHead_render(__anchor, __block) {
 	_$_.try(
@@ -310,10 +310,10 @@ function StreamHead_render(__anchor, __block) {
 
 StreamHead[_$_.$r] = StreamHead_render;
 
-var root_19 = _$_.template(`<p class="root-async"> </p>`, 0);
+var root_19 = _$_.template_el('p', ['class', 'root-async'], ' ');
 
 function StreamRootDirect_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.rootDirect.promise, __block, 'bc9e61da');
+	const data = _$_.track_async(() => controls.rootDirect.promise, __block, '1gc250a');
 	var p_9 = root_19();
 
 	{
@@ -328,10 +328,10 @@ function StreamRootDirect_render(__anchor, __block) {
 
 StreamRootDirect[_$_.$r] = StreamRootDirect_render;
 
-var root_20 = _$_.template(`<p class="outer"> </p>`, 0);
+var root_20 = _$_.template_el('p', ['class', 'outer'], ' ');
 
 function OuterContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.outer.promise, __block, '35931cce');
+	const data = _$_.track_async(() => controls.outer.promise, __block, 'ev54ge');
 	var p_10 = root_20();
 
 	{
@@ -346,10 +346,10 @@ function OuterContent_render(__anchor, __block) {
 
 OuterContent[_$_.$r] = OuterContent_render;
 
-var root_21 = _$_.template(`<p class="inner"> </p>`, 0);
+var root_21 = _$_.template_el('p', ['class', 'inner'], ' ');
 
 function InnerContent_render(__anchor, __block) {
-	const data = _$_.track_async(() => controls.inner.promise, __block, '6c7d38ed');
+	const data = _$_.track_async(() => controls.inner.promise, __block, 'u3o1kd');
 	var p_11 = root_21();
 
 	{
@@ -364,9 +364,9 @@ function InnerContent_render(__anchor, __block) {
 
 InnerContent[_$_.$r] = InnerContent_render;
 
-var root_23 = _$_.template(`<p class="inner-loading">inner-loading</p>`, 0);
+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</p>`, 0);
+var root_24 = _$_.template_el('p', ['class', 'outer-loading'], 'outer-loading');
 
 function StreamNested_render(__anchor, __block) {
 	_$_.try(
@@ -423,8 +423,6 @@ function make() {
 export const controls = {};
 
 export function resetControls() {
-	var __block = _$_.scope();
-
 	controls.basic = make();
 	controls.catchOnly = make();
 	controls.rejects = make();

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</div>`, 0);
-var root_1 = _$_.template(`<div class="status-error">Error</div>`, 0);
-var root_2 = _$_.template(`<div class="status-unknown">Unknown</div>`, 0);
+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</div>`, 0);
-var root_6 = _$_.template(`<div class="case-b">Case B</div>`, 0);
-var root_7 = _$_.template(`<div class="case-c">Case C</div>`, 0);
+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();
@@ -79,11 +79,11 @@ function switch_2(status) {
 	}
 }
 
-var root_4 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+var root_4 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);
 var root_3 = _$_.template(`<!>`, 1, 1);
 
 function SwitchReactive_render(__anchor, __block) {
-	const status = _$_.track('a', __block, '9b34d955');
+	const status = _$_.track('a', __block, '172bas5');
 	var fragment = root_3();
 	var node_1 = _$_.first_child_frag(fragment);
 
@@ -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</div>`, 0);
-var root_9 = _$_.template(`<div class="case-other">Other</div>`, 0);
+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</div>`, 0);
-var root_13 = _$_.template(`<div class="level-2">Level 2</div>`, 0);
-var root_14 = _$_.template(`<div class="level-3">Level 3</div>`, 0);
+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();
@@ -177,11 +177,11 @@ function switch_4(level) {
 	}
 }
 
-var root_11 = _$_.template(`<button class="level-toggle">Toggle Level</button><!>`, 1, 2);
+var root_11 = _$_.template(`<button class=level-toggle>Toggle Level</button><!>`, 1, 2);
 var root_10 = _$_.template(`<!>`, 1, 1);
 
 function SwitchNumericLevels_render(__anchor, __block) {
-	const level = _$_.track(1, __block, '7581a7ab');
+	const level = _$_.track(1, __block, 'wlqm5n');
 	var fragment_2 = root_10();
 	var node_3 = _$_.first_child_frag(fragment_2);
 
@@ -204,9 +204,9 @@ function SwitchNumericLevels_render(__anchor, __block) {
 
 SwitchNumericLevels[_$_.$r] = SwitchNumericLevels_render;
 
-var root_17 = _$_.template(`<div class="block-1">Block 1</div>`, 0);
-var root_18 = _$_.template(`<div class="block-2">Block 2</div>`, 0);
-var root_19 = _$_.template(`<div class="block-3">Block 3</div>`, 0);
+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();
@@ -239,11 +239,11 @@ function switch_5(level) {
 	}
 }
 
-var root_16 = _$_.template(`<button class="block-toggle">Toggle</button><!>`, 1, 2);
+var root_16 = _$_.template(`<button class=block-toggle>Toggle</button><!>`, 1, 2);
 var root_15 = _$_.template(`<!>`, 1, 1);
 
 function SwitchBlockScoped_render(__anchor, __block) {
-	const level = _$_.track(1, __block, 'ca9f9852');
+	const level = _$_.track(1, __block, '1k7y5oy');
 	var fragment_4 = root_15();
 	var node_5 = _$_.first_child_frag(fragment_4);
 
@@ -266,9 +266,9 @@ function SwitchBlockScoped_render(__anchor, __block) {
 
 SwitchBlockScoped[_$_.$r] = SwitchBlockScoped_render;
 
-var root_22 = _$_.template(`<div class="nobreak-1">NoBreak 1</div>`, 0);
-var root_23 = _$_.template(`<div class="nobreak-2">NoBreak 2</div>`, 0);
-var root_24 = _$_.template(`<div class="nobreak-3">NoBreak 3</div>`, 0);
+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();
@@ -301,11 +301,11 @@ function switch_6(level) {
 	}
 }
 
-var root_21 = _$_.template(`<button class="nobreak-toggle">Toggle</button><!>`, 1, 2);
+var root_21 = _$_.template(`<button class=nobreak-toggle>Toggle</button><!>`, 1, 2);
 var root_20 = _$_.template(`<!>`, 1, 1);
 
 function SwitchNoBreak_render(__anchor, __block) {
-	const level = _$_.track(1, __block, '6b7cb0ea');
+	const level = _$_.track(1, __block, 'ttnpbe');
 	var fragment_6 = root_20();
 	var node_7 = _$_.first_child_frag(fragment_6);