ripple 0.4.1 → 0.4.3

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(`<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(`<div class=portal-content>Portal is visible`);
 
 function consequent(__anchor, show) {
 	_$_.portal(__anchor, () => typeof document !== 'undefined' ? document.body : null, (__anchor, __block) => {
@@ -39,10 +39,10 @@ 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 ConditionalPortal_render(__anchor, __block) {
-	const show = _$_.track(true, __block, '4f6df174');
+	const show = _$_.track(true, __block, 'm1ectw');
 	var div_2 = root_2();
 
 	{
@@ -50,7 +50,7 @@ function ConditionalPortal_render(__anchor, __block) {
 
 		button.__click = () => show.value = !show.value;
 
-		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
+		var node_1 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_2, true);
 
 		_$_.if(node_1, if_1, false, show);
 		_$_.hydrating && _$_.pop(div_2);
@@ -61,8 +61,8 @@ function ConditionalPortal_render(__anchor, __block) {
 
 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(`<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 +85,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(`<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,34 +1,31 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class="count"> </div>`, 0);
+var root = _$_.template(`<div class=count>`);
 
 function render(__prev) {
-	var __a = __prev._count.value;
+	var __a = __prev._a.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression, __prev.a = __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();
 
-	{
-		var expression = _$_.hydrating ? _$_.hydrate_text() : div.firstChild;
-	}
-
-	_$_.render(render, { a: ' ', _count: count, _expression: expression });
+	_$_.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();
 
 	{
@@ -53,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(`<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();
 
@@ -73,64 +70,53 @@ 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(__prev._expression_3, __prev.a = __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(__prev._expression_4, __prev.b = __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(__prev._expression_5, __prev.c = __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();
 
 	{
 		var div_4 = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
-
-		{
-			var expression_3 = _$_.hydrating ? _$_.hydrate_text() : div_4.firstChild;
-		}
-
 		var div_5 = _$_.hydrating ? _$_.hydrate_sibling() : div_4.nextSibling;
-
-		{
-			var expression_4 = _$_.hydrating ? _$_.hydrate_text() : div_5.firstChild;
-		}
-
 		var div_6 = _$_.hydrating ? _$_.hydrate_sibling() : div_5.nextSibling;
-
-		{
-			var expression_5 = _$_.hydrating ? _$_.hydrate_text() : div_6.firstChild;
-		}
 	}
 
 	_$_.render(render_1, {
-		a: ' ',
-		b: ' ',
-		c: ' ',
-		_x: x,
-		_expression_3: expression_3,
-		_y: y,
-		_expression_4: expression_4,
-		_z: z,
-		_expression_5: expression_5
+		a: '',
+		b: '',
+		c: '',
+		_a: x,
+		_b: div_4,
+		_c: y,
+		_d: div_5,
+		_e: z,
+		_f: div_6
 	});
 
 	_$_.append(__anchor, div_3);
@@ -138,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(`<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,42 +1,38 @@
 // @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(__prev._expression, __prev.a = __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();
 
 	{
 		var span = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
-
-		{
-			var expression = _$_.hydrating ? _$_.hydrate_text() : span.firstChild;
-		}
-
 		var button = _$_.hydrating ? _$_.hydrate_sibling() : span.nextSibling;
 
 		button.__click = () => count.value++;
 	}
 
-	_$_.render(render, { a: ' ', _data: data, _count: count, _expression: expression });
+	_$_.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(`<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) {
@@ -75,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(`<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();
 
 	{
@@ -93,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(`<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) {
@@ -133,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(`<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();
 
 	{
@@ -151,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(`<em class=caught> `);
+var root_11 = _$_.template(`<p class=loading>loading...`);
 
 function StreamRejects_render(__anchor, __block) {
 	_$_.try(
@@ -183,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(`<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();
 
 	{
@@ -201,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(`<p class=loading>loading...`);
 
 function StreamNoCatch_render(__anchor, __block) {
 	_$_.try(
@@ -221,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(`<section class=root-catch> `);
 
 function RootCatch_render(__anchor, __block, { error, reset }) {
 	var section = root_14();
@@ -240,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(`<p class=root-pending>root-loading`);
 
 function RootPending_render(__anchor, __block) {
 	var p_6 = root_15();
@@ -250,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(`<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);
 
@@ -294,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(`<p class=loading>loading...`);
 
 function StreamHead_render(__anchor, __block) {
 	_$_.try(
@@ -314,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(`<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();
 
 	{
@@ -332,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(`<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();
 
 	{
@@ -350,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(`<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();
 
 	{
@@ -368,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(`<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(`<p class=outer-loading>outer-loading`);
 
 function StreamNested_render(__anchor, __block) {
 	_$_.try(
@@ -427,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(`<div class=status-success>Success`);
+var root_1 = _$_.template(`<div class=status-error>Error`);
+var root_2 = _$_.template(`<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(`<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`);
 
 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(`<div class=case-1-2>1 or 2`);
+var root_9 = _$_.template(`<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(`<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`);
 
 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(`<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`);
 
 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(`<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`);
 
 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);