ripple 0.3.72 → 0.3.76

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

@@ -7,62 +7,78 @@ var root_3 = _$_.template(`<li> </li>`, 0);
 var root_2 = _$_.template(`<ul></ul>`, 0);
 var root_5 = _$_.template(`<li> </li>`, 0);
 var root_4 = _$_.template(`<ul></ul>`, 0);
-var root_7 = _$_.template(`<li> </li>`, 0);
-var root_6 = _$_.template(`<button class="add">Add</button><ul></ul>`, 1, 2);
-var root_9 = _$_.template(`<li> </li>`, 0);
-var root_8 = _$_.template(`<button class="remove">Remove</button><ul></ul>`, 1, 2);
-var root_11 = _$_.template(`<div><span class="value"> </span><button class="increment">+</button></div>`, 0);
-var root_10 = _$_.template(`<div></div>`, 0);
-var root_14 = _$_.template(`<span> </span>`, 0);
-var root_13 = _$_.template(`<div></div>`, 0);
-var root_12 = _$_.template(`<div class="grid"></div>`, 0);
+var root_8 = _$_.template(`<li> </li>`, 0);
+var root_7 = _$_.template(`<button class="add">Add</button><ul></ul>`, 1, 2);
+var root_6 = _$_.template(`<!>`, 1, 1);
+var root_11 = _$_.template(`<li> </li>`, 0);
+var root_10 = _$_.template(`<button class="remove">Remove</button><ul></ul>`, 1, 2);
+var root_9 = _$_.template(`<!>`, 1, 1);
+var root_13 = _$_.template(`<div><span class="value"> </span><button class="increment">+</button></div>`, 0);
+var root_12 = _$_.template(`<div></div>`, 0);
 var root_16 = _$_.template(`<span> </span>`, 0);
-var root_15 = _$_.template(`<div class="container"></div>`, 0);
-var root_18 = _$_.template(`<div><span class="name"> </span><span class="role"> </span></div>`, 0);
-var root_17 = _$_.template(`<div></div>`, 0);
-var root_20 = _$_.template(`<li> </li>`, 0);
-var root_19 = _$_.template(`<button class="reorder">Reorder</button><ul></ul>`, 1, 2);
-var root_22 = _$_.template(`<li> </li>`, 0);
-var root_21 = _$_.template(`<button class="update">Update</button><ul></ul>`, 1, 2);
-var root_24 = _$_.template(`<li> </li>`, 0);
-var root_23 = _$_.template(`<button class="shuffle">Shuffle</button><ul></ul>`, 1, 2);
-var root_27 = _$_.template(`<li> </li>`, 0);
-var root_26 = _$_.template(`<ul class="list"></ul>`, 0);
-var root_25 = _$_.template(`<button class="toggle">Toggle List</button><button class="add">Add Item</button><!>`, 1, 3);
+var root_15 = _$_.template(`<div></div>`, 0);
+var root_14 = _$_.template(`<div class="grid"></div>`, 0);
+var root_18 = _$_.template(`<span> </span>`, 0);
+var root_17 = _$_.template(`<div class="container"></div>`, 0);
+var root_20 = _$_.template(`<div><span class="name"> </span><span class="role"> </span></div>`, 0);
+var root_19 = _$_.template(`<div></div>`, 0);
+var root_23 = _$_.template(`<li> </li>`, 0);
+var root_22 = _$_.template(`<button class="reorder">Reorder</button><ul></ul>`, 1, 2);
+var root_21 = _$_.template(`<!>`, 1, 1);
+var root_26 = _$_.template(`<li> </li>`, 0);
+var root_25 = _$_.template(`<button class="update">Update</button><ul></ul>`, 1, 2);
+var root_24 = _$_.template(`<!>`, 1, 1);
 var root_29 = _$_.template(`<li> </li>`, 0);
-var root_28 = _$_.template(`<button class="populate">Populate</button><ul class="list"></ul>`, 1, 2);
-var root_31 = _$_.template(`<li> </li>`, 0);
-var root_30 = _$_.template(`<button class="clear">Clear</button><ul class="list"></ul>`, 1, 2);
-var root_34 = _$_.template(`<span> </span>`, 0);
-var root_33 = _$_.template(`<div></div>`, 0);
-var root_32 = _$_.template(`<button class="add-row">Add Row</button><button class="update-cell">Update Cell</button><div class="grid"></div>`, 1, 3);
-var root_38 = _$_.template(`<li class="member"> </li>`, 0);
-var root_37 = _$_.template(`<div><h3 class="team-name"> </h3><ul></ul></div>`, 0);
-var root_36 = _$_.template(`<div><h2 class="dept-name"> </h2><!></div>`, 0);
-var root_35 = _$_.template(`<div class="org"></div>`, 0);
-var root_40 = _$_.template(`<li> </li>`, 0);
-var root_39 = _$_.template(`<button class="prepend">Prepend</button><ul></ul>`, 1, 2);
-var root_42 = _$_.template(`<li> </li>`, 0);
-var root_41 = _$_.template(`<button class="reorder">Rotate</button><ul></ul>`, 1, 2);
-var root_44 = _$_.template(`<div> </div>`, 0);
-var root_43 = _$_.template(`<div class="wrapper"><header class="before">Before</header><!><footer class="after">After</footer></div><button class="add">Add</button>`, 1, 2);
-var root_46 = _$_.template(`<!>`, 1, 1);
-var root_45 = _$_.template(`<div></div>`, 0);
-var root_47 = _$_.template(`<div><input type="checkbox" class="checkbox"><span> </span></div>`, 0);
-var root_49 = _$_.template(`<li class="single"> </li>`, 0);
-var root_48 = _$_.template(`<ul></ul>`, 0);
-var root_51 = _$_.template(`<li> </li>`, 0);
-var root_50 = _$_.template(`<button class="prepend">Prepend A</button><ul></ul>`, 1, 2);
-var root_53 = _$_.template(`<li> </li>`, 0);
-var root_52 = _$_.template(`<button class="insert">Insert B</button><ul></ul>`, 1, 2);
-var root_55 = _$_.template(`<li> </li>`, 0);
-var root_54 = _$_.template(`<button class="remove-middle">Remove B</button><ul></ul>`, 1, 2);
-var root_57 = _$_.template(`<li> </li>`, 0);
-var root_56 = _$_.template(`<ul class="large-list"></ul>`, 0);
-var root_59 = _$_.template(`<li> </li>`, 0);
-var root_58 = _$_.template(`<button class="swap">Swap First and Last</button><ul></ul>`, 1, 2);
-var root_61 = _$_.template(`<li> </li>`, 0);
-var root_60 = _$_.template(`<button class="reverse">Reverse</button><ul></ul>`, 1, 2);
+var root_28 = _$_.template(`<button class="shuffle">Shuffle</button><ul></ul>`, 1, 2);
+var root_27 = _$_.template(`<!>`, 1, 1);
+var root_33 = _$_.template(`<li> </li>`, 0);
+var root_32 = _$_.template(`<ul class="list"></ul>`, 0);
+var root_31 = _$_.template(`<button class="toggle">Toggle List</button><button class="add">Add Item</button><!>`, 1, 3);
+var root_30 = _$_.template(`<!>`, 1, 1);
+var root_36 = _$_.template(`<li> </li>`, 0);
+var root_35 = _$_.template(`<button class="populate">Populate</button><ul class="list"></ul>`, 1, 2);
+var root_34 = _$_.template(`<!>`, 1, 1);
+var root_39 = _$_.template(`<li> </li>`, 0);
+var root_38 = _$_.template(`<button class="clear">Clear</button><ul class="list"></ul>`, 1, 2);
+var root_37 = _$_.template(`<!>`, 1, 1);
+var root_42 = _$_.template(`<span> </span>`, 0);
+var root_41 = _$_.template(`<div></div>`, 0);
+var root_40 = _$_.template(`<div class="nested-for-reactive"><button class="add-row">Add Row</button><button class="update-cell">Update Cell</button><div class="grid"></div></div>`, 0);
+var root_46 = _$_.template(`<li class="member"> </li>`, 0);
+var root_45 = _$_.template(`<div><h3 class="team-name"> </h3><ul></ul></div>`, 0);
+var root_44 = _$_.template(`<div><h2 class="dept-name"> </h2><!></div>`, 0);
+var root_43 = _$_.template(`<div class="org"></div>`, 0);
+var root_49 = _$_.template(`<li> </li>`, 0);
+var root_48 = _$_.template(`<button class="prepend">Prepend</button><ul></ul>`, 1, 2);
+var root_47 = _$_.template(`<!>`, 1, 1);
+var root_52 = _$_.template(`<li> </li>`, 0);
+var root_51 = _$_.template(`<button class="reorder">Rotate</button><ul></ul>`, 1, 2);
+var root_50 = _$_.template(`<!>`, 1, 1);
+var root_55 = _$_.template(`<div> </div>`, 0);
+var root_54 = _$_.template(`<div class="wrapper"><header class="before">Before</header><!><footer class="after">After</footer></div><button class="add">Add</button>`, 1, 2);
+var root_53 = _$_.template(`<!>`, 1, 1);
+var root_57 = _$_.template(`<!>`, 1, 1);
+var root_56 = _$_.template(`<div></div>`, 0);
+var root_58 = _$_.template(`<div><input type="checkbox" class="checkbox"><span> </span></div>`, 0);
+var root_60 = _$_.template(`<li class="single"> </li>`, 0);
+var root_59 = _$_.template(`<ul></ul>`, 0);
+var root_63 = _$_.template(`<li> </li>`, 0);
+var root_62 = _$_.template(`<button class="prepend">Prepend A</button><ul></ul>`, 1, 2);
+var root_61 = _$_.template(`<!>`, 1, 1);
+var root_66 = _$_.template(`<li> </li>`, 0);
+var root_65 = _$_.template(`<button class="insert">Insert B</button><ul></ul>`, 1, 2);
+var root_64 = _$_.template(`<!>`, 1, 1);
+var root_69 = _$_.template(`<li> </li>`, 0);
+var root_68 = _$_.template(`<button class="remove-middle">Remove B</button><ul></ul>`, 1, 2);
+var root_67 = _$_.template(`<!>`, 1, 1);
+var root_71 = _$_.template(`<li> </li>`, 0);
+var root_70 = _$_.template(`<ul class="large-list"></ul>`, 0);
+var root_74 = _$_.template(`<li> </li>`, 0);
+var root_73 = _$_.template(`<button class="swap">Swap First and Last</button><ul></ul>`, 1, 2);
+var root_72 = _$_.template(`<!>`, 1, 1);
+var root_77 = _$_.template(`<li> </li>`, 0);
+var root_76 = _$_.template(`<button class="reverse">Reverse</button><ul></ul>`, 1, 2);
+var root_75 = _$_.template(`<!>`, 1, 1);
 
 import { track } from 'ripple';
 
@@ -172,91 +188,105 @@ export function ReactiveForLoopAdd() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy = _$_.track(['A', 'B'], __block, 'e145678a');
 		var fragment = root_6();
-		var button_1 = _$_.first_child_frag(fragment);
+		var node = _$_.first_child_frag(fragment);
 
-		button_1.__click = () => {
-			_$_.set(lazy, [...lazy.value, 'C']);
-		};
+		_$_.expression(node, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_1 = root_7();
+			var button_1 = _$_.first_child_frag(fragment_1);
 
-		var ul_4 = _$_.sibling(button_1);
+			button_1.__click = () => {
+				_$_.set(lazy, [...lazy.value, 'C']);
+			};
 
-		{
-			_$_.for(
-				ul_4,
-				() => lazy.value,
-				(__anchor, item) => {
-					var li_4 = root_7();
+			var ul_4 = _$_.sibling(button_1);
 
-					{
-						var expression_3 = _$_.child(li_4);
+			{
+				_$_.for(
+					ul_4,
+					() => lazy.value,
+					(__anchor, item) => {
+						var li_4 = root_8();
 
-						_$_.expression(expression_3, () => item);
-						_$_.pop(li_4);
-					}
+						{
+							var expression_3 = _$_.child(li_4);
 
-					_$_.append(__anchor, li_4);
-				},
-				4
-			);
+							_$_.expression(expression_3, () => item);
+							_$_.pop(li_4);
+						}
 
-			_$_.pop(ul_4);
-		}
+						_$_.append(__anchor, li_4);
+					},
+					4
+				);
+
+				_$_.pop(ul_4);
+			}
 
-		_$_.next();
-		_$_.append(__anchor, fragment, true);
+			_$_.next();
+			_$_.append(__anchor, fragment_1, true);
+		}));
+
+		_$_.append(__anchor, fragment);
 	});
 }
 
 export function ReactiveForLoopRemove() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_1 = _$_.track(['A', 'B', 'C'], __block, 'b4e9bd54');
-		var fragment_1 = root_8();
-		var button_2 = _$_.first_child_frag(fragment_1);
+		var fragment_2 = root_9();
+		var node_1 = _$_.first_child_frag(fragment_2);
 
-		button_2.__click = () => {
-			_$_.set(lazy_1, _$_.with_scope(__block, () => lazy_1.value.slice(0, -1)));
-		};
+		_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_3 = root_10();
+			var button_2 = _$_.first_child_frag(fragment_3);
 
-		var ul_5 = _$_.sibling(button_2);
+			button_2.__click = () => {
+				_$_.set(lazy_1, _$_.with_scope(__block, () => lazy_1.value.slice(0, -1)));
+			};
 
-		{
-			_$_.for(
-				ul_5,
-				() => lazy_1.value,
-				(__anchor, item) => {
-					var li_5 = root_9();
+			var ul_5 = _$_.sibling(button_2);
 
-					{
-						var expression_4 = _$_.child(li_5);
+			{
+				_$_.for(
+					ul_5,
+					() => lazy_1.value,
+					(__anchor, item) => {
+						var li_5 = root_11();
 
-						_$_.expression(expression_4, () => item);
-						_$_.pop(li_5);
-					}
+						{
+							var expression_4 = _$_.child(li_5);
 
-					_$_.append(__anchor, li_5);
-				},
-				4
-			);
+							_$_.expression(expression_4, () => item);
+							_$_.pop(li_5);
+						}
 
-			_$_.pop(ul_5);
-		}
+						_$_.append(__anchor, li_5);
+					},
+					4
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_1, true);
+				_$_.pop(ul_5);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_3, true);
+		}));
+
+		_$_.append(__anchor, fragment_2);
 	});
 }
 
 export function ForLoopInteractive() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_2 = _$_.track([0, 0, 0], __block, '36f563df');
-		var div_1 = root_10();
+		var div_1 = root_12();
 
 		{
 			_$_.for(
 				div_1,
 				() => lazy_2.value,
 				(__anchor, count, i) => {
-					var div_2 = root_11();
+					var div_2 = root_13();
 
 					{
 						var span_1 = _$_.child(div_2);
@@ -297,21 +327,21 @@ export function ForLoopInteractive() {
 export function NestedForLoop() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const grid = [[1, 2], [3, 4]];
-		var div_3 = root_12();
+		var div_3 = root_14();
 
 		{
 			_$_.for(
 				div_3,
 				() => grid,
 				(__anchor, row, rowIndex) => {
-					var div_4 = root_13();
+					var div_4 = root_15();
 
 					{
 						_$_.for(
 							div_4,
 							() => row,
 							(__anchor, cell, colIndex) => {
-								var span_2 = root_14();
+								var span_2 = root_16();
 
 								{
 									var expression_6 = _$_.child(span_2);
@@ -351,14 +381,14 @@ export function NestedForLoop() {
 export function EmptyForLoop() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const items = [];
-		var div_5 = root_15();
+		var div_5 = root_17();
 
 		{
 			_$_.for(
 				div_5,
 				() => items,
 				(__anchor, item) => {
-					var span_3 = root_16();
+					var span_3 = root_18();
 
 					{
 						var expression_7 = _$_.child(span_3);
@@ -386,14 +416,14 @@ export function ForLoopComplexObjects() {
 			{ id: 2, name: 'Bob', role: 'User' }
 		];
 
-		var div_6 = root_17();
+		var div_6 = root_19();
 
 		{
 			_$_.for_keyed(
 				div_6,
 				() => users,
 				(__anchor, pattern_1) => {
-					var div_7 = root_18();
+					var div_7 = root_20();
 
 					{
 						var span_4 = _$_.child(div_7);
@@ -444,129 +474,150 @@ export function KeyedForLoopReorder() {
 			'e7abc6a3'
 		);
 
-		var fragment_2 = root_19();
-		var button_4 = _$_.first_child_frag(fragment_2);
+		var fragment_4 = root_21();
+		var node_2 = _$_.first_child_frag(fragment_4);
 
-		button_4.__click = () => {
-			_$_.set(lazy_3, [lazy_3.value[2], lazy_3.value[0], lazy_3.value[1]]);
-		};
+		_$_.expression(node_2, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_5 = root_22();
+			var button_4 = _$_.first_child_frag(fragment_5);
 
-		var ul_6 = _$_.sibling(button_4);
+			button_4.__click = () => {
+				_$_.set(lazy_3, [lazy_3.value[2], lazy_3.value[0], lazy_3.value[1]]);
+			};
 
-		{
-			_$_.for_keyed(
-				ul_6,
-				() => lazy_3.value,
-				(__anchor, pattern_2) => {
-					var li_6 = root_20();
+			var ul_6 = _$_.sibling(button_4);
 
-					{
-						var expression_10 = _$_.child(li_6);
+			{
+				_$_.for_keyed(
+					ul_6,
+					() => lazy_3.value,
+					(__anchor, pattern_2) => {
+						var li_6 = root_23();
 
-						_$_.expression(expression_10, () => _$_.get(pattern_2).name);
-						_$_.pop(li_6);
-					}
+						{
+							var expression_10 = _$_.child(li_6);
 
-					_$_.render(() => {
-						_$_.set_class(li_6, `item-${_$_.get(pattern_2).id}`, void 0, true);
-					});
+							_$_.expression(expression_10, () => _$_.get(pattern_2).name);
+							_$_.pop(li_6);
+						}
 
-					_$_.append(__anchor, li_6);
-				},
-				4,
-				(pattern_2) => _$_.get(pattern_2).id
-			);
+						_$_.render(() => {
+							_$_.set_class(li_6, `item-${_$_.get(pattern_2).id}`, void 0, true);
+						});
 
-			_$_.pop(ul_6);
-		}
+						_$_.append(__anchor, li_6);
+					},
+					4,
+					(pattern_2) => _$_.get(pattern_2).id
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_2, true);
+				_$_.pop(ul_6);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_5, true);
+		}));
+
+		_$_.append(__anchor, fragment_4);
 	});
 }
 
 export function KeyedForLoopUpdate() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_4 = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], __block, '7a2c2ada');
-		var fragment_3 = root_21();
-		var button_5 = _$_.first_child_frag(fragment_3);
+		var fragment_6 = root_24();
+		var node_3 = _$_.first_child_frag(fragment_6);
 
-		button_5.__click = () => {
-			_$_.set(lazy_4, _$_.with_scope(__block, () => lazy_4.value.map((item) => item.id === 1 ? { ...item, name: 'Updated' } : item)));
-		};
+		_$_.expression(node_3, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_7 = root_25();
+			var button_5 = _$_.first_child_frag(fragment_7);
 
-		var ul_7 = _$_.sibling(button_5);
+			button_5.__click = () => {
+				_$_.set(lazy_4, _$_.with_scope(__block, () => lazy_4.value.map((item) => item.id === 1 ? { ...item, name: 'Updated' } : item)));
+			};
 
-		{
-			_$_.for_keyed(
-				ul_7,
-				() => lazy_4.value,
-				(__anchor, pattern_3) => {
-					var li_7 = root_22();
+			var ul_7 = _$_.sibling(button_5);
 
-					{
-						var expression_11 = _$_.child(li_7);
+			{
+				_$_.for_keyed(
+					ul_7,
+					() => lazy_4.value,
+					(__anchor, pattern_3) => {
+						var li_7 = root_26();
 
-						_$_.expression(expression_11, () => _$_.get(pattern_3).name);
-						_$_.pop(li_7);
-					}
+						{
+							var expression_11 = _$_.child(li_7);
 
-					_$_.render(() => {
-						_$_.set_class(li_7, `item-${_$_.get(pattern_3).id}`, void 0, true);
-					});
+							_$_.expression(expression_11, () => _$_.get(pattern_3).name);
+							_$_.pop(li_7);
+						}
 
-					_$_.append(__anchor, li_7);
-				},
-				4,
-				(pattern_3) => _$_.get(pattern_3).id
-			);
+						_$_.render(() => {
+							_$_.set_class(li_7, `item-${_$_.get(pattern_3).id}`, void 0, true);
+						});
 
-			_$_.pop(ul_7);
-		}
+						_$_.append(__anchor, li_7);
+					},
+					4,
+					(pattern_3) => _$_.get(pattern_3).id
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_3, true);
+				_$_.pop(ul_7);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_7, true);
+		}));
+
+		_$_.append(__anchor, fragment_6);
 	});
 }
 
 export function ForLoopMixedOperations() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_5 = _$_.track(['A', 'B', 'C', 'D'], __block, '3dd7c7b6');
-		var fragment_4 = root_23();
-		var button_6 = _$_.first_child_frag(fragment_4);
+		var fragment_8 = root_27();
+		var node_4 = _$_.first_child_frag(fragment_8);
 
-		button_6.__click = () => {
-			_$_.set(lazy_5, ['D', 'C', 'A', 'E']);
-		};
+		_$_.expression(node_4, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_9 = root_28();
+			var button_6 = _$_.first_child_frag(fragment_9);
 
-		var ul_8 = _$_.sibling(button_6);
+			button_6.__click = () => {
+				_$_.set(lazy_5, ['D', 'C', 'A', 'E']);
+			};
 
-		{
-			_$_.for(
-				ul_8,
-				() => lazy_5.value,
-				(__anchor, item) => {
-					var li_8 = root_24();
+			var ul_8 = _$_.sibling(button_6);
 
-					_$_.set_class(li_8, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_8,
+					() => lazy_5.value,
+					(__anchor, item) => {
+						var li_8 = root_29();
 
-					{
-						var expression_12 = _$_.child(li_8);
+						_$_.set_class(li_8, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_12, () => item);
-						_$_.pop(li_8);
-					}
+						{
+							var expression_12 = _$_.child(li_8);
 
-					_$_.append(__anchor, li_8);
-				},
-				4
-			);
+							_$_.expression(expression_12, () => item);
+							_$_.pop(li_8);
+						}
 
-			_$_.pop(ul_8);
-		}
+						_$_.append(__anchor, li_8);
+					},
+					4
+				);
+
+				_$_.pop(ul_8);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_9, true);
+		}));
 
-		_$_.next();
-		_$_.append(__anchor, fragment_4, true);
+		_$_.append(__anchor, fragment_8);
 	});
 }
 
@@ -574,205 +625,228 @@ export function ForLoopInsideIf() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_6 = _$_.track(true, __block, '0528df30');
 		let lazy_7 = _$_.track(['X', 'Y', 'Z'], __block, 'bf375103');
-		var fragment_5 = root_25();
-		var button_7 = _$_.first_child_frag(fragment_5);
+		var fragment_10 = root_30();
+		var node_6 = _$_.first_child_frag(fragment_10);
 
-		button_7.__click = () => {
-			_$_.set(lazy_6, !lazy_6.value);
-		};
+		_$_.expression(node_6, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_11 = root_31();
+			var button_7 = _$_.first_child_frag(fragment_11);
 
-		var button_8 = _$_.sibling(button_7);
+			button_7.__click = () => {
+				_$_.set(lazy_6, !lazy_6.value);
+			};
 
-		button_8.__click = () => {
-			_$_.set(lazy_7, [...lazy_7.value, 'W']);
-		};
+			var button_8 = _$_.sibling(button_7);
 
-		var node = _$_.sibling(button_8);
+			button_8.__click = () => {
+				_$_.set(lazy_7, [...lazy_7.value, 'W']);
+			};
 
-		{
-			var consequent = (__anchor) => {
-				var ul_9 = root_26();
+			var node_5 = _$_.sibling(button_8);
 
-				{
-					_$_.for(
-						ul_9,
-						() => lazy_7.value,
-						(__anchor, item) => {
-							var li_9 = root_27();
+			{
+				var consequent = (__anchor) => {
+					var ul_9 = root_32();
 
-							{
-								var expression_13 = _$_.child(li_9);
+					{
+						_$_.for(
+							ul_9,
+							() => lazy_7.value,
+							(__anchor, item) => {
+								var li_9 = root_33();
 
-								_$_.expression(expression_13, () => item);
-								_$_.pop(li_9);
-							}
+								{
+									var expression_13 = _$_.child(li_9);
 
-							_$_.append(__anchor, li_9);
-						},
-						4
-					);
+									_$_.expression(expression_13, () => item);
+									_$_.pop(li_9);
+								}
 
-					_$_.pop(ul_9);
-				}
+								_$_.append(__anchor, li_9);
+							},
+							4
+						);
 
-				_$_.append(__anchor, ul_9);
-			};
+						_$_.pop(ul_9);
+					}
 
-			_$_.if(node, (__render) => {
-				if (lazy_6.value) __render(consequent);
-			});
-		}
+					_$_.append(__anchor, ul_9);
+				};
+
+				_$_.if(node_5, (__render) => {
+					if (lazy_6.value) __render(consequent);
+				});
+			}
 
-		_$_.append(__anchor, fragment_5);
+			_$_.append(__anchor, fragment_11);
+		}));
+
+		_$_.append(__anchor, fragment_10);
 	});
 }
 
 export function ForLoopEmptyToPopulated() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_8 = _$_.track([], __block, '525c5dbc');
-		var fragment_6 = root_28();
-		var button_9 = _$_.first_child_frag(fragment_6);
+		var fragment_12 = root_34();
+		var node_7 = _$_.first_child_frag(fragment_12);
 
-		button_9.__click = () => {
-			_$_.set(lazy_8, ['One', 'Two', 'Three']);
-		};
+		_$_.expression(node_7, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_13 = root_35();
+			var button_9 = _$_.first_child_frag(fragment_13);
 
-		var ul_10 = _$_.sibling(button_9);
+			button_9.__click = () => {
+				_$_.set(lazy_8, ['One', 'Two', 'Three']);
+			};
 
-		{
-			_$_.for(
-				ul_10,
-				() => lazy_8.value,
-				(__anchor, item) => {
-					var li_10 = root_29();
+			var ul_10 = _$_.sibling(button_9);
 
-					{
-						var expression_14 = _$_.child(li_10);
+			{
+				_$_.for(
+					ul_10,
+					() => lazy_8.value,
+					(__anchor, item) => {
+						var li_10 = root_36();
 
-						_$_.expression(expression_14, () => item);
-						_$_.pop(li_10);
-					}
+						{
+							var expression_14 = _$_.child(li_10);
 
-					_$_.append(__anchor, li_10);
-				},
-				4
-			);
+							_$_.expression(expression_14, () => item);
+							_$_.pop(li_10);
+						}
 
-			_$_.pop(ul_10);
-		}
+						_$_.append(__anchor, li_10);
+					},
+					4
+				);
+
+				_$_.pop(ul_10);
+			}
 
-		_$_.next();
-		_$_.append(__anchor, fragment_6, true);
+			_$_.next();
+			_$_.append(__anchor, fragment_13, true);
+		}));
+
+		_$_.append(__anchor, fragment_12);
 	});
 }
 
 export function ForLoopPopulatedToEmpty() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_9 = _$_.track(['One', 'Two', 'Three'], __block, 'ee47f078');
-		var fragment_7 = root_30();
-		var button_10 = _$_.first_child_frag(fragment_7);
+		var fragment_14 = root_37();
+		var node_8 = _$_.first_child_frag(fragment_14);
 
-		button_10.__click = () => {
-			_$_.set(lazy_9, []);
-		};
+		_$_.expression(node_8, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_15 = root_38();
+			var button_10 = _$_.first_child_frag(fragment_15);
 
-		var ul_11 = _$_.sibling(button_10);
+			button_10.__click = () => {
+				_$_.set(lazy_9, []);
+			};
 
-		{
-			_$_.for(
-				ul_11,
-				() => lazy_9.value,
-				(__anchor, item) => {
-					var li_11 = root_31();
+			var ul_11 = _$_.sibling(button_10);
 
-					{
-						var expression_15 = _$_.child(li_11);
+			{
+				_$_.for(
+					ul_11,
+					() => lazy_9.value,
+					(__anchor, item) => {
+						var li_11 = root_39();
 
-						_$_.expression(expression_15, () => item);
-						_$_.pop(li_11);
-					}
+						{
+							var expression_15 = _$_.child(li_11);
 
-					_$_.append(__anchor, li_11);
-				},
-				4
-			);
+							_$_.expression(expression_15, () => item);
+							_$_.pop(li_11);
+						}
 
-			_$_.pop(ul_11);
-		}
+						_$_.append(__anchor, li_11);
+					},
+					4
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_7, true);
+				_$_.pop(ul_11);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_15, true);
+		}));
+
+		_$_.append(__anchor, fragment_14);
 	});
 }
 
 export function NestedForLoopReactive() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_10 = _$_.track([[1, 2], [3, 4]], __block, 'a2f41fb3');
-		var fragment_8 = root_32();
-		var button_11 = _$_.first_child_frag(fragment_8);
+		var div_8 = root_40();
 
-		button_11.__click = () => {
-			_$_.set(lazy_10, [...lazy_10.value, [5, 6]]);
-		};
+		{
+			var button_11 = _$_.child(div_8);
 
-		var button_12 = _$_.sibling(button_11);
+			button_11.__click = () => {
+				_$_.set(lazy_10, [...lazy_10.value, [5, 6]]);
+			};
 
-		button_12.__click = () => {
-			const newGrid = _$_.with_scope(__block, () => lazy_10.value.map((row) => [...row]));
+			var button_12 = _$_.sibling(button_11);
 
-			newGrid[0][0] = 99;
-			_$_.set(lazy_10, newGrid);
-		};
+			button_12.__click = () => {
+				const newGrid = _$_.with_scope(__block, () => lazy_10.value.map((row) => [...row]));
 
-		var div_8 = _$_.sibling(button_12);
+				newGrid[0][0] = 99;
+				_$_.set(lazy_10, newGrid);
+			};
 
-		{
-			_$_.for(
-				div_8,
-				() => lazy_10.value,
-				(__anchor, row, rowIndex) => {
-					var div_9 = root_33();
+			var div_9 = _$_.sibling(button_12);
 
-					{
-						_$_.for(
-							div_9,
-							() => row,
-							(__anchor, cell, colIndex) => {
-								var span_6 = root_34();
+			{
+				_$_.for(
+					div_9,
+					() => lazy_10.value,
+					(__anchor, row, rowIndex) => {
+						var div_10 = root_41();
 
-								{
-									var expression_16 = _$_.child(span_6);
+						{
+							_$_.for(
+								div_10,
+								() => row,
+								(__anchor, cell, colIndex) => {
+									var span_6 = root_42();
 
-									_$_.expression(expression_16, () => cell);
-									_$_.pop(span_6);
-								}
+									{
+										var expression_16 = _$_.child(span_6);
 
-								_$_.render(() => {
-									_$_.set_class(span_6, `cell-${rowIndex.value}-${colIndex.value}`, void 0, true);
-								});
+										_$_.expression(expression_16, () => cell);
+										_$_.pop(span_6);
+									}
 
-								_$_.append(__anchor, span_6);
-							},
-							12
-						);
+									_$_.render(() => {
+										_$_.set_class(span_6, `cell-${rowIndex.value}-${colIndex.value}`, void 0, true);
+									});
 
-						_$_.pop(div_9);
+									_$_.append(__anchor, span_6);
+								},
+								12
+							);
 
-						_$_.render(() => {
-							_$_.set_class(div_9, `row-${rowIndex.value}`, void 0, true);
-						});
-					}
+							_$_.pop(div_10);
 
-					_$_.append(__anchor, div_9);
-				},
-				12
-			);
+							_$_.render(() => {
+								_$_.set_class(div_10, `row-${rowIndex.value}`, void 0, true);
+							});
+						}
+
+						_$_.append(__anchor, div_10);
+					},
+					12
+				);
 
-			_$_.pop(div_8);
+				_$_.pop(div_9);
+			}
 		}
 
-		_$_.next(2);
-		_$_.append(__anchor, fragment_8, true);
+		_$_.append(__anchor, div_8);
 	});
 }
 
@@ -795,17 +869,17 @@ export function ForLoopDeeplyNested() {
 			}
 		];
 
-		var div_10 = root_35();
+		var div_11 = root_43();
 
 		{
 			_$_.for_keyed(
-				div_10,
+				div_11,
 				() => departments,
 				(__anchor, pattern_4) => {
-					var div_11 = root_36();
+					var div_12 = root_44();
 
 					{
-						var h2_1 = _$_.child(div_11);
+						var h2_1 = _$_.child(div_12);
 
 						{
 							var expression_17 = _$_.child(h2_1);
@@ -814,16 +888,16 @@ export function ForLoopDeeplyNested() {
 							_$_.pop(h2_1);
 						}
 
-						var node_1 = _$_.sibling(h2_1);
+						var node_9 = _$_.sibling(h2_1);
 
 						_$_.for_keyed(
-							node_1,
+							node_9,
 							() => _$_.get(pattern_4).teams,
 							(__anchor, pattern_5) => {
-								var div_12 = root_37();
+								var div_13 = root_45();
 
 								{
-									var h3_1 = _$_.child(div_12);
+									var h3_1 = _$_.child(div_13);
 
 									{
 										var expression_18 = _$_.child(h3_1);
@@ -839,7 +913,7 @@ export function ForLoopDeeplyNested() {
 											ul_12,
 											() => _$_.get(pattern_5).members,
 											(__anchor, member) => {
-												var li_12 = root_38();
+												var li_12 = root_46();
 
 												{
 													var expression_19 = _$_.child(li_12);
@@ -858,87 +932,94 @@ export function ForLoopDeeplyNested() {
 								}
 
 								_$_.render(() => {
-									_$_.set_class(div_12, `team-${_$_.get(pattern_5).id}`, void 0, true);
+									_$_.set_class(div_13, `team-${_$_.get(pattern_5).id}`, void 0, true);
 								});
 
-								_$_.append(__anchor, div_12);
+								_$_.append(__anchor, div_13);
 							},
 							0,
 							(pattern_5) => _$_.get(pattern_5).id
 						);
 
-						_$_.pop(div_11);
+						_$_.pop(div_12);
 					}
 
 					_$_.render(() => {
-						_$_.set_class(div_11, `dept-${_$_.get(pattern_4).id}`, void 0, true);
+						_$_.set_class(div_12, `dept-${_$_.get(pattern_4).id}`, void 0, true);
 					});
 
-					_$_.append(__anchor, div_11);
+					_$_.append(__anchor, div_12);
 				},
 				4,
 				(pattern_4) => _$_.get(pattern_4).id
 			);
 
-			_$_.pop(div_10);
+			_$_.pop(div_11);
 		}
 
-		_$_.append(__anchor, div_10);
+		_$_.append(__anchor, div_11);
 	});
 }
 
 export function ForLoopIndexUpdate() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_11 = _$_.track(['First', 'Second', 'Third'], __block, 'f61e31e6');
-		var fragment_9 = root_39();
-		var button_13 = _$_.first_child_frag(fragment_9);
+		var fragment_16 = root_47();
+		var node_10 = _$_.first_child_frag(fragment_16);
 
-		button_13.__click = () => {
-			_$_.set(lazy_11, ['Zeroth', ...lazy_11.value]);
-		};
+		_$_.expression(node_10, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_17 = root_48();
+			var button_13 = _$_.first_child_frag(fragment_17);
 
-		var ul_13 = _$_.sibling(button_13);
+			button_13.__click = () => {
+				_$_.set(lazy_11, ['Zeroth', ...lazy_11.value]);
+			};
 
-		{
-			_$_.for(
-				ul_13,
-				() => lazy_11.value,
-				(__anchor, item, i) => {
-					var li_13 = root_40();
+			var ul_13 = _$_.sibling(button_13);
 
-					{
-						var expression_20 = _$_.child(li_13, true);
+			{
+				_$_.for(
+					ul_13,
+					() => lazy_11.value,
+					(__anchor, item, i) => {
+						var li_13 = root_49();
 
-						_$_.pop(li_13);
-					}
+						{
+							var expression_20 = _$_.child(li_13, true);
 
-					_$_.render(
-						(__prev) => {
-							var __a = `[${i.value}] ${item}`;
+							_$_.pop(li_13);
+						}
 
-							if (__prev.a !== __a) {
-								_$_.set_text(expression_20, __prev.a = __a);
-							}
+						_$_.render(
+							(__prev) => {
+								var __a = `[${i.value}] ${item}`;
 
-							var __b = `item-${i.value}`;
+								if (__prev.a !== __a) {
+									_$_.set_text(expression_20, __prev.a = __a);
+								}
 
-							if (__prev.b !== __b) {
-								_$_.set_class(li_13, __prev.b = __b, void 0, true);
-							}
-						},
-						{ a: ' ', b: Symbol() }
-					);
+								var __b = `item-${i.value}`;
 
-					_$_.append(__anchor, li_13);
-				},
-				12
-			);
+								if (__prev.b !== __b) {
+									_$_.set_class(li_13, __prev.b = __b, void 0, true);
+								}
+							},
+							{ a: ' ', b: Symbol() }
+						);
 
-			_$_.pop(ul_13);
-		}
+						_$_.append(__anchor, li_13);
+					},
+					12
+				);
+
+				_$_.pop(ul_13);
+			}
 
-		_$_.next();
-		_$_.append(__anchor, fragment_9, true);
+			_$_.next();
+			_$_.append(__anchor, fragment_17, true);
+		}));
+
+		_$_.append(__anchor, fragment_16);
 	});
 }
 
@@ -954,106 +1035,120 @@ export function KeyedForLoopWithIndex() {
 			'3467975a'
 		);
 
-		var fragment_10 = root_41();
-		var button_14 = _$_.first_child_frag(fragment_10);
+		var fragment_18 = root_50();
+		var node_11 = _$_.first_child_frag(fragment_18);
 
-		button_14.__click = () => {
-			_$_.set(lazy_12, [lazy_12.value[1], lazy_12.value[2], lazy_12.value[0]]);
-		};
+		_$_.expression(node_11, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_19 = root_51();
+			var button_14 = _$_.first_child_frag(fragment_19);
 
-		var ul_14 = _$_.sibling(button_14);
+			button_14.__click = () => {
+				_$_.set(lazy_12, [lazy_12.value[1], lazy_12.value[2], lazy_12.value[0]]);
+			};
 
-		{
-			_$_.for_keyed(
-				ul_14,
-				() => lazy_12.value,
-				(__anchor, pattern_6, i) => {
-					var li_14 = root_42();
+			var ul_14 = _$_.sibling(button_14);
 
-					{
-						var expression_21 = _$_.child(li_14, true);
+			{
+				_$_.for_keyed(
+					ul_14,
+					() => lazy_12.value,
+					(__anchor, pattern_6, i) => {
+						var li_14 = root_52();
 
-						_$_.pop(li_14);
-					}
+						{
+							var expression_21 = _$_.child(li_14, true);
 
-					_$_.render(
-						(__prev) => {
-							var __a = `[${i.value}] ${_$_.get(pattern_6).id}: ${_$_.get(pattern_6).value}`;
+							_$_.pop(li_14);
+						}
 
-							if (__prev.a !== __a) {
-								_$_.set_text(expression_21, __prev.a = __a);
-							}
+						_$_.render(
+							(__prev) => {
+								var __a = `[${i.value}] ${_$_.get(pattern_6).id}: ${_$_.get(pattern_6).value}`;
 
-							var __b = i.value;
+								if (__prev.a !== __a) {
+									_$_.set_text(expression_21, __prev.a = __a);
+								}
 
-							if (__prev.b !== __b) {
-								_$_.set_attribute(li_14, 'data-index', __prev.b = __b);
-							}
+								var __b = i.value;
 
-							var __c = `item-${_$_.get(pattern_6).id}`;
+								if (__prev.b !== __b) {
+									_$_.set_attribute(li_14, 'data-index', __prev.b = __b);
+								}
 
-							if (__prev.c !== __c) {
-								_$_.set_class(li_14, __prev.c = __c, void 0, true);
-							}
-						},
-						{ a: ' ', b: void 0, c: Symbol() }
-					);
+								var __c = `item-${_$_.get(pattern_6).id}`;
 
-					_$_.append(__anchor, li_14);
-				},
-				12,
-				(pattern_6, i) => _$_.get(pattern_6).id
-			);
+								if (__prev.c !== __c) {
+									_$_.set_class(li_14, __prev.c = __c, void 0, true);
+								}
+							},
+							{ a: ' ', b: void 0, c: Symbol() }
+						);
 
-			_$_.pop(ul_14);
-		}
+						_$_.append(__anchor, li_14);
+					},
+					12,
+					(pattern_6, i) => _$_.get(pattern_6).id
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_10, true);
+				_$_.pop(ul_14);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_19, true);
+		}));
+
+		_$_.append(__anchor, fragment_18);
 	});
 }
 
 export function ForLoopWithSiblings() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_13 = _$_.track(['A', 'B'], __block, '3c7e8152');
-		var fragment_11 = root_43();
-		var div_13 = _$_.first_child_frag(fragment_11);
+		var fragment_20 = root_53();
+		var node_13 = _$_.first_child_frag(fragment_20);
 
-		{
-			var header_1 = _$_.child(div_13);
-			var node_2 = _$_.sibling(header_1);
+		_$_.expression(node_13, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_21 = root_54();
+			var div_14 = _$_.first_child_frag(fragment_21);
 
-			_$_.for(
-				node_2,
-				() => lazy_13.value,
-				(__anchor, item) => {
-					var div_14 = root_44();
+			{
+				var header_1 = _$_.child(div_14);
+				var node_12 = _$_.sibling(header_1);
 
-					_$_.set_class(div_14, `item-${item}`, void 0, true);
+				_$_.for(
+					node_12,
+					() => lazy_13.value,
+					(__anchor, item) => {
+						var div_15 = root_55();
 
-					{
-						var expression_22 = _$_.child(div_14);
+						_$_.set_class(div_15, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_22, () => item);
-						_$_.pop(div_14);
-					}
+						{
+							var expression_22 = _$_.child(div_15);
 
-					_$_.append(__anchor, div_14);
-				},
-				0
-			);
+							_$_.expression(expression_22, () => item);
+							_$_.pop(div_15);
+						}
 
-			_$_.pop(div_13);
-		}
+						_$_.append(__anchor, div_15);
+					},
+					0
+				);
 
-		var button_15 = _$_.sibling(div_13);
+				_$_.pop(div_14);
+			}
 
-		button_15.__click = () => {
-			_$_.set(lazy_13, [...lazy_13.value, 'C']);
-		};
+			var button_15 = _$_.sibling(div_14);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_11, true);
+			button_15.__click = () => {
+				_$_.set(lazy_13, [...lazy_13.value, 'C']);
+			};
+
+			_$_.next();
+			_$_.append(__anchor, fragment_21, true);
+		}));
+
+		_$_.append(__anchor, fragment_20);
 	});
 }
 
@@ -1065,17 +1160,17 @@ export function ForLoopItemState() {
 			{ id: 3, text: 'Todo 3' }
 		];
 
-		var div_15 = root_45();
+		var div_16 = root_56();
 
 		{
 			_$_.for_keyed(
-				div_15,
+				div_16,
 				() => initialItems,
 				(__anchor, pattern_7) => {
-					var fragment_12 = root_46();
-					var node_3 = _$_.first_child_frag(fragment_12);
+					var fragment_22 = root_57();
+					var node_14 = _$_.first_child_frag(fragment_22);
 
-					_$_.render_component(TodoItem, node_3, {
+					_$_.render_component(TodoItem, node_14, {
 						get id() {
 							return _$_.get(pattern_7).id;
 						},
@@ -1085,26 +1180,26 @@ export function ForLoopItemState() {
 						}
 					});
 
-					_$_.append(__anchor, fragment_12);
+					_$_.append(__anchor, fragment_22);
 				},
 				4,
 				(pattern_7) => _$_.get(pattern_7).id
 			);
 
-			_$_.pop(div_15);
+			_$_.pop(div_16);
 		}
 
-		_$_.append(__anchor, div_15);
+		_$_.append(__anchor, div_16);
 	});
 }
 
 function TodoItem(props) {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_14 = _$_.track(false, __block, '4f2402a4');
-		var div_16 = root_47();
+		var div_17 = root_58();
 
 		{
-			var input_1 = _$_.child(div_16);
+			var input_1 = _$_.child(div_17);
 
 			input_1.__change = (e) => {
 				_$_.set(lazy_14, e.target.checked);
@@ -1137,27 +1232,27 @@ function TodoItem(props) {
 				var __c = `todo-${props.id}`;
 
 				if (__prev.c !== __c) {
-					_$_.set_class(div_16, __prev.c = __c, void 0, true);
+					_$_.set_class(div_17, __prev.c = __c, void 0, true);
 				}
 			},
 			{ a: void 0, b: Symbol(), c: Symbol() }
 		);
 
-		_$_.append(__anchor, div_16);
+		_$_.append(__anchor, div_17);
 	});
 }
 
 export function ForLoopSingleItem() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const items = ['Only'];
-		var ul_15 = root_48();
+		var ul_15 = root_59();
 
 		{
 			_$_.for(
 				ul_15,
 				() => items,
 				(__anchor, item) => {
-					var li_15 = root_49();
+					var li_15 = root_60();
 
 					{
 						var expression_24 = _$_.child(li_15);
@@ -1181,140 +1276,161 @@ export function ForLoopSingleItem() {
 export function ForLoopAddAtBeginning() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_15 = _$_.track(['B', 'C'], __block, '1561403a');
-		var fragment_13 = root_50();
-		var button_16 = _$_.first_child_frag(fragment_13);
+		var fragment_23 = root_61();
+		var node_15 = _$_.first_child_frag(fragment_23);
 
-		button_16.__click = () => {
-			_$_.set(lazy_15, ['A', ...lazy_15.value]);
-		};
+		_$_.expression(node_15, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_24 = root_62();
+			var button_16 = _$_.first_child_frag(fragment_24);
 
-		var ul_16 = _$_.sibling(button_16);
+			button_16.__click = () => {
+				_$_.set(lazy_15, ['A', ...lazy_15.value]);
+			};
 
-		{
-			_$_.for(
-				ul_16,
-				() => lazy_15.value,
-				(__anchor, item) => {
-					var li_16 = root_51();
+			var ul_16 = _$_.sibling(button_16);
 
-					_$_.set_class(li_16, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_16,
+					() => lazy_15.value,
+					(__anchor, item) => {
+						var li_16 = root_63();
 
-					{
-						var expression_25 = _$_.child(li_16);
+						_$_.set_class(li_16, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_25, () => item);
-						_$_.pop(li_16);
-					}
+						{
+							var expression_25 = _$_.child(li_16);
 
-					_$_.append(__anchor, li_16);
-				},
-				4
-			);
+							_$_.expression(expression_25, () => item);
+							_$_.pop(li_16);
+						}
 
-			_$_.pop(ul_16);
-		}
+						_$_.append(__anchor, li_16);
+					},
+					4
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_13, true);
+				_$_.pop(ul_16);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_24, true);
+		}));
+
+		_$_.append(__anchor, fragment_23);
 	});
 }
 
 export function ForLoopAddInMiddle() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_16 = _$_.track(['A', 'C'], __block, '1bc60b46');
-		var fragment_14 = root_52();
-		var button_17 = _$_.first_child_frag(fragment_14);
+		var fragment_25 = root_64();
+		var node_16 = _$_.first_child_frag(fragment_25);
 
-		button_17.__click = () => {
-			const copy = [...lazy_16.value];
+		_$_.expression(node_16, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_26 = root_65();
+			var button_17 = _$_.first_child_frag(fragment_26);
 
-			_$_.with_scope(__block, () => copy.splice(1, 0, 'B'));
-			_$_.set(lazy_16, copy);
-		};
+			button_17.__click = () => {
+				const copy = [...lazy_16.value];
 
-		var ul_17 = _$_.sibling(button_17);
+				_$_.with_scope(__block, () => copy.splice(1, 0, 'B'));
+				_$_.set(lazy_16, copy);
+			};
 
-		{
-			_$_.for(
-				ul_17,
-				() => lazy_16.value,
-				(__anchor, item) => {
-					var li_17 = root_53();
+			var ul_17 = _$_.sibling(button_17);
 
-					_$_.set_class(li_17, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_17,
+					() => lazy_16.value,
+					(__anchor, item) => {
+						var li_17 = root_66();
 
-					{
-						var expression_26 = _$_.child(li_17);
+						_$_.set_class(li_17, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_26, () => item);
-						_$_.pop(li_17);
-					}
+						{
+							var expression_26 = _$_.child(li_17);
 
-					_$_.append(__anchor, li_17);
-				},
-				4
-			);
+							_$_.expression(expression_26, () => item);
+							_$_.pop(li_17);
+						}
 
-			_$_.pop(ul_17);
-		}
+						_$_.append(__anchor, li_17);
+					},
+					4
+				);
+
+				_$_.pop(ul_17);
+			}
 
-		_$_.next();
-		_$_.append(__anchor, fragment_14, true);
+			_$_.next();
+			_$_.append(__anchor, fragment_26, true);
+		}));
+
+		_$_.append(__anchor, fragment_25);
 	});
 }
 
 export function ForLoopRemoveFromMiddle() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_17 = _$_.track(['A', 'B', 'C'], __block, '1c87f95f');
-		var fragment_15 = root_54();
-		var button_18 = _$_.first_child_frag(fragment_15);
+		var fragment_27 = root_67();
+		var node_17 = _$_.first_child_frag(fragment_27);
 
-		button_18.__click = () => {
-			_$_.set(lazy_17, _$_.with_scope(__block, () => lazy_17.value.filter((item) => item !== 'B')));
-		};
+		_$_.expression(node_17, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_28 = root_68();
+			var button_18 = _$_.first_child_frag(fragment_28);
 
-		var ul_18 = _$_.sibling(button_18);
+			button_18.__click = () => {
+				_$_.set(lazy_17, _$_.with_scope(__block, () => lazy_17.value.filter((item) => item !== 'B')));
+			};
 
-		{
-			_$_.for(
-				ul_18,
-				() => lazy_17.value,
-				(__anchor, item) => {
-					var li_18 = root_55();
+			var ul_18 = _$_.sibling(button_18);
 
-					_$_.set_class(li_18, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_18,
+					() => lazy_17.value,
+					(__anchor, item) => {
+						var li_18 = root_69();
 
-					{
-						var expression_27 = _$_.child(li_18);
+						_$_.set_class(li_18, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_27, () => item);
-						_$_.pop(li_18);
-					}
+						{
+							var expression_27 = _$_.child(li_18);
 
-					_$_.append(__anchor, li_18);
-				},
-				4
-			);
+							_$_.expression(expression_27, () => item);
+							_$_.pop(li_18);
+						}
 
-			_$_.pop(ul_18);
-		}
+						_$_.append(__anchor, li_18);
+					},
+					4
+				);
+
+				_$_.pop(ul_18);
+			}
 
-		_$_.next();
-		_$_.append(__anchor, fragment_15, true);
+			_$_.next();
+			_$_.append(__anchor, fragment_28, true);
+		}));
+
+		_$_.append(__anchor, fragment_27);
 	});
 }
 
 export function ForLoopLargeList() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const items = _$_.with_scope(__block, () => Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));
-		var ul_19 = root_56();
+		var ul_19 = root_70();
 
 		{
 			_$_.for(
 				ul_19,
 				() => items,
 				(__anchor, item, i) => {
-					var li_19 = root_57();
+					var li_19 = root_71();
 
 					{
 						var expression_28 = _$_.child(li_19);
@@ -1342,85 +1458,99 @@ export function ForLoopLargeList() {
 export function ForLoopSwap() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_18 = _$_.track(['A', 'B', 'C', 'D'], __block, '5f8d152f');
-		var fragment_16 = root_58();
-		var button_19 = _$_.first_child_frag(fragment_16);
+		var fragment_29 = root_72();
+		var node_18 = _$_.first_child_frag(fragment_29);
 
-		button_19.__click = () => {
-			const copy = [...lazy_18.value];
+		_$_.expression(node_18, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_30 = root_73();
+			var button_19 = _$_.first_child_frag(fragment_30);
 
-			[copy[0], copy[3]] = [copy[3], copy[0]];
-			_$_.set(lazy_18, copy);
-		};
+			button_19.__click = () => {
+				const copy = [...lazy_18.value];
 
-		var ul_20 = _$_.sibling(button_19);
+				[copy[0], copy[3]] = [copy[3], copy[0]];
+				_$_.set(lazy_18, copy);
+			};
 
-		{
-			_$_.for(
-				ul_20,
-				() => lazy_18.value,
-				(__anchor, item) => {
-					var li_20 = root_59();
+			var ul_20 = _$_.sibling(button_19);
 
-					_$_.set_class(li_20, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_20,
+					() => lazy_18.value,
+					(__anchor, item) => {
+						var li_20 = root_74();
 
-					{
-						var expression_29 = _$_.child(li_20);
+						_$_.set_class(li_20, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_29, () => item);
-						_$_.pop(li_20);
-					}
+						{
+							var expression_29 = _$_.child(li_20);
 
-					_$_.append(__anchor, li_20);
-				},
-				4
-			);
+							_$_.expression(expression_29, () => item);
+							_$_.pop(li_20);
+						}
 
-			_$_.pop(ul_20);
-		}
+						_$_.append(__anchor, li_20);
+					},
+					4
+				);
 
-		_$_.next();
-		_$_.append(__anchor, fragment_16, true);
+				_$_.pop(ul_20);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_30, true);
+		}));
+
+		_$_.append(__anchor, fragment_29);
 	});
 }
 
 export function ForLoopReverse() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_19 = _$_.track(['A', 'B', 'C', 'D'], __block, '24602e64');
-		var fragment_17 = root_60();
-		var button_20 = _$_.first_child_frag(fragment_17);
+		var fragment_31 = root_75();
+		var node_19 = _$_.first_child_frag(fragment_31);
 
-		button_20.__click = () => {
-			_$_.set(lazy_19, _$_.with_scope(__block, () => [...lazy_19.value].reverse()));
-		};
+		_$_.expression(node_19, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_32 = root_76();
+			var button_20 = _$_.first_child_frag(fragment_32);
 
-		var ul_21 = _$_.sibling(button_20);
+			button_20.__click = () => {
+				_$_.set(lazy_19, _$_.with_scope(__block, () => [...lazy_19.value].reverse()));
+			};
 
-		{
-			_$_.for(
-				ul_21,
-				() => lazy_19.value,
-				(__anchor, item) => {
-					var li_21 = root_61();
+			var ul_21 = _$_.sibling(button_20);
 
-					_$_.set_class(li_21, `item-${item}`, void 0, true);
+			{
+				_$_.for(
+					ul_21,
+					() => lazy_19.value,
+					(__anchor, item) => {
+						var li_21 = root_77();
 
-					{
-						var expression_30 = _$_.child(li_21);
+						_$_.set_class(li_21, `item-${item}`, void 0, true);
 
-						_$_.expression(expression_30, () => item);
-						_$_.pop(li_21);
-					}
+						{
+							var expression_30 = _$_.child(li_21);
 
-					_$_.append(__anchor, li_21);
-				},
-				4
-			);
+							_$_.expression(expression_30, () => item);
+							_$_.pop(li_21);
+						}
 
-			_$_.pop(ul_21);
-		}
+						_$_.append(__anchor, li_21);
+					},
+					4
+				);
+
+				_$_.pop(ul_21);
+			}
+
+			_$_.next();
+			_$_.append(__anchor, fragment_32, true);
+		}));
 
-		_$_.next();
-		_$_.append(__anchor, fragment_17, true);
+		_$_.append(__anchor, fragment_31);
 	});
 }