ripple 0.4.1 → 0.4.3

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

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<li> </li>`, 0);
-var root = _$_.template(`<ul></ul>`, 0);
+var root_1 = _$_.template(`<li> `);
+var root = _$_.template(`<ul>`);
 
 function StaticForLoop_render(__anchor, __block) {
 	const items = ['Apple', 'Banana', 'Cherry'];
@@ -35,17 +35,18 @@ function StaticForLoop_render(__anchor, __block) {
 
 StaticForLoop[_$_.$r] = StaticForLoop_render;
 
-var root_3 = _$_.template(`<li> </li>`, 0);
+var root_3 = _$_.template(`<li>`);
 
 function render(__prev) {
-	var __a = `${__prev._i.value}: ${__prev._item}`;
+	var __a = `${__prev._a.value}: ${__prev._b}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_1, __prev.a = __a);
+		_$_.set_text_content(__prev._c, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
-var root_2 = _$_.template(`<ul></ul>`, 0);
+var root_2 = _$_.template(`<ul>`);
 
 function ForLoopWithIndex_render(__anchor, __block) {
 	const items = ['A', 'B', 'C'];
@@ -58,14 +59,12 @@ function ForLoopWithIndex_render(__anchor, __block) {
 			(__anchor, item, i) => {
 				var li_1 = root_3();
 
-				{
-					var expression_1 = _$_.hydrating ? _$_.hydrate_text() : li_1.firstChild;
-				}
-
-				_$_.render(render, { a: ' ', _i: i, _item: item, _expression_1: expression_1 });
+				_$_.item({ a: '', _a: i, _b: item, _c: li_1 });
 				_$_.append(__anchor, li_1);
 			},
-			12
+			12,
+			void 0,
+			render
 		);
 
 		_$_.hydrating && _$_.pop(ul_1);
@@ -76,8 +75,8 @@ function ForLoopWithIndex_render(__anchor, __block) {
 
 ForLoopWithIndex[_$_.$r] = ForLoopWithIndex_render;
 
-var root_5 = _$_.template(`<li> </li>`, 0);
-var root_4 = _$_.template(`<ul></ul>`, 0);
+var root_5 = _$_.template(`<li> `);
+var root_4 = _$_.template(`<ul>`);
 
 function KeyedForLoop_render(__anchor, __block) {
 	const items = [
@@ -105,7 +104,7 @@ function KeyedForLoop_render(__anchor, __block) {
 				_$_.append(__anchor, li_2);
 			},
 			4,
-			(pattern) => _$_.get(pattern).id
+			(pattern) => pattern.id
 		);
 
 		_$_.hydrating && _$_.pop(ul_2);
@@ -116,12 +115,12 @@ function KeyedForLoop_render(__anchor, __block) {
 
 KeyedForLoop[_$_.$r] = KeyedForLoop_render;
 
-var root_8 = _$_.template(`<li> </li>`, 0);
-var root_7 = _$_.template(`<button class="add">Add</button><ul></ul>`, 1, 2);
+var root_8 = _$_.template(`<li> `);
+var root_7 = _$_.template(`<button class=add>Add</button><ul>`, 1, 2);
 var root_6 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveForLoopAdd_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B'], __block, 'e145678a');
+	const items = _$_.track(['A', 'B'], __block, '1qi64qy');
 	var fragment = root_6();
 	var node = _$_.first_child_frag(fragment);
 
@@ -165,12 +164,12 @@ function ReactiveForLoopAdd_render(__anchor, __block) {
 
 ReactiveForLoopAdd[_$_.$r] = ReactiveForLoopAdd_render;
 
-var root_11 = _$_.template(`<li> </li>`, 0);
-var root_10 = _$_.template(`<button class="remove">Remove</button><ul></ul>`, 1, 2);
+var root_11 = _$_.template(`<li> `);
+var root_10 = _$_.template(`<button class=remove>Remove</button><ul>`, 1, 2);
 var root_9 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveForLoopRemove_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B', 'C'], __block, 'b4e9bd54');
+	const items = _$_.track(['A', 'B', 'C'], __block, '1e738lw');
 	var fragment_2 = root_9();
 	var node_1 = _$_.first_child_frag(fragment_2);
 
@@ -214,20 +213,20 @@ function ReactiveForLoopRemove_render(__anchor, __block) {
 
 ReactiveForLoopRemove[_$_.$r] = ReactiveForLoopRemove_render;
 
-var root_13 = _$_.template(`<div><span class="value"> </span><button class="increment">+</button></div>`, 0);
+var root_13 = _$_.template(`<div><span class=value> </span><button class=increment>+`);
 
 function render_1(__prev) {
-	var __a = `item-${__prev._i.value}`;
+	var __a = `item-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_1, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_12 = _$_.template(`<div></div>`, 0);
+var root_12 = _$_.template(`<div>`);
 
 function ForLoopInteractive_render(__anchor, __block) {
-	const counts = _$_.track([0, 0, 0], __block, '36f563df');
+	const counts = _$_.track([0, 0, 0], __block, 'f8yrj3');
 	var div = root_12();
 
 	{
@@ -257,10 +256,12 @@ function ForLoopInteractive_render(__anchor, __block) {
 					};
 				}
 
-				_$_.render(render_1, { a: _$_.UNINITIALIZED, _i: i, _div_1: div_1 });
+				_$_.item({ a: _$_.UNINITIALIZED, _a: i, _b: div_1 });
 				_$_.append(__anchor, div_1);
 			},
-			12
+			12,
+			void 0,
+			render_1
 		);
 
 		_$_.hydrating && _$_.pop(div);
@@ -271,26 +272,26 @@ function ForLoopInteractive_render(__anchor, __block) {
 
 ForLoopInteractive[_$_.$r] = ForLoopInteractive_render;
 
-var root_16 = _$_.template(`<span> </span>`, 0);
+var root_16 = _$_.template(`<span> `);
 
 function render_2(__prev) {
-	var __a = `cell-${__prev._rowIndex.value}-${__prev._colIndex.value}`;
+	var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._span_1, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._c, __prev.a = __a);
 	}
 }
 
 function render_3(__prev) {
-	var __a = `row-${__prev._rowIndex.value}`;
+	var __a = `row-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_3, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_15 = _$_.template(`<div></div>`, 0);
-var root_14 = _$_.template(`<div class="grid"></div>`, 0);
+var root_15 = _$_.template(`<div>`);
+var root_14 = _$_.template(`<div class=grid>`);
 
 function NestedForLoop_render(__anchor, __block) {
 	const grid = [[1, 2], [3, 4]];
@@ -317,25 +318,23 @@ function NestedForLoop_render(__anchor, __block) {
 								_$_.hydrating && _$_.pop(span_1);
 							}
 
-							_$_.render(render_2, {
-								a: _$_.UNINITIALIZED,
-								_rowIndex: rowIndex,
-								_colIndex: colIndex,
-								_span_1: span_1
-							});
-
+							_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: colIndex, _c: span_1 });
 							_$_.append(__anchor, span_1);
 						},
-						12
+						12,
+						void 0,
+						render_2
 					);
 
 					_$_.hydrating && _$_.pop(div_3);
-					_$_.render(render_3, { a: _$_.UNINITIALIZED, _rowIndex: rowIndex, _div_3: div_3 });
+					_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: div_3 });
 				}
 
 				_$_.append(__anchor, div_3);
 			},
-			12
+			12,
+			void 0,
+			render_3
 		);
 
 		_$_.hydrating && _$_.pop(div_2);
@@ -346,8 +345,8 @@ function NestedForLoop_render(__anchor, __block) {
 
 NestedForLoop[_$_.$r] = NestedForLoop_render;
 
-var root_18 = _$_.template(`<span> </span>`, 0);
-var root_17 = _$_.template(`<div class="container"></div>`, 0);
+var root_18 = _$_.template(`<span>`);
+var root_17 = _$_.template(`<div class=container>`);
 
 function EmptyForLoop_render(__anchor, __block) {
 	const items = [];
@@ -361,9 +360,7 @@ function EmptyForLoop_render(__anchor, __block) {
 				var span_2 = root_18();
 
 				{
-					var expression_7 = _$_.hydrating ? _$_.hydrate_text() : span_2.firstChild;
-
-					expression_7.nodeValue = item;
+					span_2.textContent = item;
 				}
 
 				_$_.append(__anchor, span_2);
@@ -379,17 +376,17 @@ function EmptyForLoop_render(__anchor, __block) {
 
 EmptyForLoop[_$_.$r] = EmptyForLoop_render;
 
-var root_20 = _$_.template(`<div><span class="name"> </span><span class="role"> </span></div>`, 0);
+var root_20 = _$_.template(`<div><span class=name> </span><span class=role> `);
 
 function render_4(__prev) {
-	var __a = `user-${_$_.get(__prev._pattern_1).id}`;
+	var __a = `user-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_6, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_19 = _$_.template(`<div></div>`, 0);
+var root_19 = _$_.template(`<div>`);
 
 function ForLoopComplexObjects_render(__anchor, __block) {
 	const users = [
@@ -426,11 +423,14 @@ function ForLoopComplexObjects_render(__anchor, __block) {
 					}
 				}
 
-				_$_.render(render_4, { a: _$_.UNINITIALIZED, _pattern_1: pattern_1, _div_6: div_6 });
+				_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_1, _b: div_6 });
 				_$_.append(__anchor, div_6);
 			},
 			4,
-			(pattern_1) => _$_.get(pattern_1).id
+			(pattern_1) => pattern_1.id,
+			void 0,
+			void 0,
+			render_4
 		);
 
 		_$_.hydrating && _$_.pop(div_5);
@@ -441,17 +441,17 @@ function ForLoopComplexObjects_render(__anchor, __block) {
 
 ForLoopComplexObjects[_$_.$r] = ForLoopComplexObjects_render;
 
-var root_23 = _$_.template(`<li> </li>`, 0);
+var root_23 = _$_.template(`<li> `);
 
 function render_5(__prev) {
-	var __a = `item-${_$_.get(__prev._pattern_2).id}`;
+	var __a = `item-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._li_5, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_22 = _$_.template(`<button class="reorder">Reorder</button><ul></ul>`, 1, 2);
+var root_22 = _$_.template(`<button class=reorder>Reorder</button><ul>`, 1, 2);
 var root_21 = _$_.template(`<!>`, 1, 1);
 
 function KeyedForLoopReorder_render(__anchor, __block) {
@@ -462,7 +462,7 @@ function KeyedForLoopReorder_render(__anchor, __block) {
 			{ id: 3, name: 'Third' }
 		],
 		__block,
-		'e7abc6a3'
+		'1sa3hr7'
 	);
 
 	var fragment_4 = root_21();
@@ -492,11 +492,14 @@ function KeyedForLoopReorder_render(__anchor, __block) {
 						_$_.hydrating && _$_.pop(li_5);
 					}
 
-					_$_.render(render_5, { a: _$_.UNINITIALIZED, _pattern_2: pattern_2, _li_5: li_5 });
+					_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_2, _b: li_5 });
 					_$_.append(__anchor, li_5);
 				},
 				4,
-				(pattern_2) => _$_.get(pattern_2).id
+				(pattern_2) => pattern_2.id,
+				void 0,
+				void 0,
+				render_5
 			);
 
 			_$_.hydrating && _$_.pop(ul_5);
@@ -510,21 +513,21 @@ function KeyedForLoopReorder_render(__anchor, __block) {
 
 KeyedForLoopReorder[_$_.$r] = KeyedForLoopReorder_render;
 
-var root_26 = _$_.template(`<li> </li>`, 0);
+var root_26 = _$_.template(`<li> `);
 
 function render_6(__prev) {
-	var __a = `item-${_$_.get(__prev._pattern_3).id}`;
+	var __a = `item-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._li_6, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_25 = _$_.template(`<button class="update">Update</button><ul></ul>`, 1, 2);
+var root_25 = _$_.template(`<button class=update>Update</button><ul>`, 1, 2);
 var root_24 = _$_.template(`<!>`, 1, 1);
 
 function KeyedForLoopUpdate_render(__anchor, __block) {
-	const items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], __block, '7a2c2ada');
+	const items = _$_.track([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], __block, 'xwci56');
 	var fragment_6 = root_24();
 	var node_3 = _$_.first_child_frag(fragment_6);
 
@@ -552,11 +555,14 @@ function KeyedForLoopUpdate_render(__anchor, __block) {
 						_$_.hydrating && _$_.pop(li_6);
 					}
 
-					_$_.render(render_6, { a: _$_.UNINITIALIZED, _pattern_3: pattern_3, _li_6: li_6 });
+					_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_3, _b: li_6 });
 					_$_.append(__anchor, li_6);
 				},
 				4,
-				(pattern_3) => _$_.get(pattern_3).id
+				(pattern_3) => pattern_3.id,
+				void 0,
+				void 0,
+				render_6
 			);
 
 			_$_.hydrating && _$_.pop(ul_6);
@@ -570,12 +576,12 @@ function KeyedForLoopUpdate_render(__anchor, __block) {
 
 KeyedForLoopUpdate[_$_.$r] = KeyedForLoopUpdate_render;
 
-var root_29 = _$_.template(`<li> </li>`, 0);
-var root_28 = _$_.template(`<button class="shuffle">Shuffle</button><ul></ul>`, 1, 2);
+var root_29 = _$_.template(`<li> `);
+var root_28 = _$_.template(`<button class=shuffle>Shuffle</button><ul>`, 1, 2);
 var root_27 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopMixedOperations_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B', 'C', 'D'], __block, '3dd7c7b6');
+	const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'h5qbw6');
 	var fragment_8 = root_27();
 	var node_4 = _$_.first_child_frag(fragment_8);
 
@@ -596,7 +602,7 @@ function ForLoopMixedOperations_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_7 = root_29();
 
-					_$_.set_class(li_7, `item-${item}`, void 0, true);
+					_$_.set_class(li_7, `item-${item}`);
 
 					{
 						var expression_12 = _$_.hydrating ? _$_.hydrate_child() : li_7.firstChild;
@@ -621,10 +627,10 @@ function ForLoopMixedOperations_render(__anchor, __block) {
 
 ForLoopMixedOperations[_$_.$r] = ForLoopMixedOperations_render;
 
-var root_33 = _$_.template(`<li> </li>`, 0);
-var root_32 = _$_.template(`<ul class="list"></ul>`, 0);
+var root_33 = _$_.template(`<li> `);
+var root_32 = _$_.template(`<ul class=list>`);
 
-function consequent(__anchor, { showList, items }) {
+function consequent(__anchor, { a: showList, b: items }) {
 	var ul_8 = root_32();
 
 	{
@@ -652,16 +658,16 @@ function consequent(__anchor, { showList, items }) {
 	_$_.append(__anchor, ul_8);
 }
 
-function if_1({ showList, items }) {
+function if_1({ a: showList, b: items }) {
 	if (showList.value) return consequent;
 }
 
-var root_31 = _$_.template(`<button class="toggle">Toggle List</button><button class="add">Add Item</button><!>`, 1, 3);
+var root_31 = _$_.template(`<button class=toggle>Toggle List</button><button class=add>Add Item</button><!>`, 1, 3);
 var root_30 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopInsideIf_render(__anchor, __block) {
-	const showList = _$_.track(true, __block, '0528df30');
-	const items = _$_.track(['X', 'Y', 'Z'], __block, 'bf375103');
+	const showList = _$_.track(true, __block, '1fjdps');
+	const items = _$_.track(['X', 'Y', 'Z'], __block, '1h205c3');
 	var fragment_10 = root_30();
 	var node_6 = _$_.first_child_frag(fragment_10);
 
@@ -681,7 +687,7 @@ function ForLoopInsideIf_render(__anchor, __block) {
 
 		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : button_7.nextSibling;
 
-		_$_.if(node_5, if_1, false, { showList, items });
+		_$_.if(node_5, if_1, false, { a: showList, b: items });
 		_$_.append(__anchor, fragment_11);
 	}));
 
@@ -690,12 +696,12 @@ function ForLoopInsideIf_render(__anchor, __block) {
 
 ForLoopInsideIf[_$_.$r] = ForLoopInsideIf_render;
 
-var root_36 = _$_.template(`<li> </li>`, 0);
-var root_35 = _$_.template(`<button class="populate">Populate</button><ul class="list"></ul>`, 1, 2);
+var root_36 = _$_.template(`<li>`);
+var root_35 = _$_.template(`<button class=populate>Populate</button><ul class=list>`, 1, 2);
 var root_34 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopEmptyToPopulated_render(__anchor, __block) {
-	const items = _$_.track([], __block, '525c5dbc');
+	const items = _$_.track([], __block, 'muog58');
 	var fragment_12 = root_34();
 	var node_7 = _$_.first_child_frag(fragment_12);
 
@@ -717,10 +723,7 @@ function ForLoopEmptyToPopulated_render(__anchor, __block) {
 					var li_9 = root_36();
 
 					{
-						var expression_14 = _$_.hydrating ? _$_.hydrate_child() : li_9.firstChild;
-
-						_$_.expression(expression_14, () => item);
-						_$_.hydrating && _$_.pop(li_9);
+						li_9.textContent = item;
 					}
 
 					_$_.append(__anchor, li_9);
@@ -739,12 +742,12 @@ function ForLoopEmptyToPopulated_render(__anchor, __block) {
 
 ForLoopEmptyToPopulated[_$_.$r] = ForLoopEmptyToPopulated_render;
 
-var root_39 = _$_.template(`<li> </li>`, 0);
-var root_38 = _$_.template(`<button class="clear">Clear</button><ul class="list"></ul>`, 1, 2);
+var root_39 = _$_.template(`<li> `);
+var root_38 = _$_.template(`<button class=clear>Clear</button><ul class=list>`, 1, 2);
 var root_37 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopPopulatedToEmpty_render(__anchor, __block) {
-	const items = _$_.track(['One', 'Two', 'Three'], __block, 'ee47f078');
+	const items = _$_.track(['One', 'Two', 'Three'], __block, '1u44ewo');
 	var fragment_14 = root_37();
 	var node_8 = _$_.first_child_frag(fragment_14);
 
@@ -788,29 +791,29 @@ function ForLoopPopulatedToEmpty_render(__anchor, __block) {
 
 ForLoopPopulatedToEmpty[_$_.$r] = ForLoopPopulatedToEmpty_render;
 
-var root_42 = _$_.template(`<span> </span>`, 0);
+var root_42 = _$_.template(`<span> `);
 
 function render_7(__prev) {
-	var __a = `cell-${__prev._rowIndex.value}-${__prev._colIndex.value}`;
+	var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._span_5, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._c, __prev.a = __a);
 	}
 }
 
 function render_8(__prev) {
-	var __a = `row-${__prev._rowIndex.value}`;
+	var __a = `row-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_9, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-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_41 = _$_.template(`<div>`);
+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>`);
 
 function NestedForLoopReactive_render(__anchor, __block) {
-	const grid = _$_.track([[1, 2], [3, 4]], __block, 'a2f41fb3');
+	const grid = _$_.track([[1, 2], [3, 4]], __block, '197p4tv');
 	var div_7 = root_40();
 
 	{
@@ -852,25 +855,23 @@ function NestedForLoopReactive_render(__anchor, __block) {
 									_$_.hydrating && _$_.pop(span_5);
 								}
 
-								_$_.render(render_7, {
-									a: _$_.UNINITIALIZED,
-									_rowIndex: rowIndex,
-									_colIndex: colIndex,
-									_span_5: span_5
-								});
-
+								_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: colIndex, _c: span_5 });
 								_$_.append(__anchor, span_5);
 							},
-							12
+							12,
+							void 0,
+							render_7
 						);
 
 						_$_.hydrating && _$_.pop(div_9);
-						_$_.render(render_8, { a: _$_.UNINITIALIZED, _rowIndex: rowIndex, _div_9: div_9 });
+						_$_.item({ a: _$_.UNINITIALIZED, _a: rowIndex, _b: div_9 });
 					}
 
 					_$_.append(__anchor, div_9);
 				},
-				12
+				12,
+				void 0,
+				render_8
 			);
 
 			_$_.hydrating && _$_.pop(div_8);
@@ -882,28 +883,28 @@ function NestedForLoopReactive_render(__anchor, __block) {
 
 NestedForLoopReactive[_$_.$r] = NestedForLoopReactive_render;
 
-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_46 = _$_.template(`<li class=member> `);
+var root_45 = _$_.template(`<div><h3 class=team-name> </h3><ul>`);
 
 function render_9(__prev) {
-	var __a = `team-${_$_.get(__prev._pattern_5).id}`;
+	var __a = `team-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_12, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_44 = _$_.template(`<div><h2 class="dept-name"> </h2><!></div>`, 0);
+var root_44 = _$_.template(`<div><h2 class=dept-name> `);
 
 function render_10(__prev) {
-	var __a = `dept-${_$_.get(__prev._pattern_4).id}`;
+	var __a = `dept-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_11, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_43 = _$_.template(`<div class="org"></div>`, 0);
+var root_43 = _$_.template(`<div class=org>`);
 
 function ForLoopDeeplyNested_render(__anchor, __block) {
 	const departments = [
@@ -942,7 +943,7 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 						_$_.hydrating && _$_.pop(h2);
 					}
 
-					var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : h2.nextSibling;
+					var node_9 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_11);
 
 					_$_.for_keyed(
 						node_9,
@@ -985,21 +986,27 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 								}
 							}
 
-							_$_.render(render_9, { a: _$_.UNINITIALIZED, _pattern_5: pattern_5, _div_12: div_12 });
+							_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_5, _b: div_12 });
 							_$_.append(__anchor, div_12);
 						},
 						0,
-						(pattern_5) => _$_.get(pattern_5).id
+						(pattern_5) => pattern_5.id,
+						void 0,
+						void 0,
+						render_9
 					);
 
 					_$_.hydrating && _$_.pop(div_11);
 				}
 
-				_$_.render(render_10, { a: _$_.UNINITIALIZED, _pattern_4: pattern_4, _div_11: div_11 });
+				_$_.item({ a: _$_.UNINITIALIZED, _a: pattern_4, _b: div_11 });
 				_$_.append(__anchor, div_11);
 			},
 			4,
-			(pattern_4) => _$_.get(pattern_4).id
+			(pattern_4) => pattern_4.id,
+			void 0,
+			void 0,
+			render_10
 		);
 
 		_$_.hydrating && _$_.pop(div_10);
@@ -1010,27 +1017,28 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 
 ForLoopDeeplyNested[_$_.$r] = ForLoopDeeplyNested_render;
 
-var root_49 = _$_.template(`<li> </li>`, 0);
+var root_49 = _$_.template(`<li>`);
 
 function render_11(__prev) {
-	var __a = `[${__prev._i.value}] ${__prev._item}`;
+	var __a = `[${__prev._a.value}] ${__prev._b}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_20, __prev.a = __a);
+		_$_.set_text_content(__prev._c, __a, __prev.a);
+		__prev.a = __a;
 	}
 
-	var __b = `item-${__prev._i.value}`;
+	var __b = `item-${__prev._a.value}`;
 
 	if (__prev.b !== __b) {
-		_$_.set_class(__prev._li_12, __prev.b = __b, void 0, true);
+		_$_.set_class(__prev._c, __prev.b = __b);
 	}
 }
 
-var root_48 = _$_.template(`<button class="prepend">Prepend</button><ul></ul>`, 1, 2);
+var root_48 = _$_.template(`<button class=prepend>Prepend</button><ul>`, 1, 2);
 var root_47 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopIndexUpdate_render(__anchor, __block) {
-	const items = _$_.track(['First', 'Second', 'Third'], __block, 'f61e31e6');
+	const items = _$_.track(['First', 'Second', 'Third'], __block, '1waej1i');
 	var fragment_16 = root_47();
 	var node_10 = _$_.first_child_frag(fragment_16);
 
@@ -1051,22 +1059,12 @@ function ForLoopIndexUpdate_render(__anchor, __block) {
 				(__anchor, item, i) => {
 					var li_12 = root_49();
 
-					{
-						var expression_20 = _$_.hydrating ? _$_.hydrate_text() : li_12.firstChild;
-					}
-
-					_$_.render(render_11, {
-						a: ' ',
-						b: _$_.UNINITIALIZED,
-						_i: i,
-						_item: item,
-						_expression_20: expression_20,
-						_li_12: li_12
-					});
-
+					_$_.item({ a: '', b: _$_.UNINITIALIZED, _a: i, _b: item, _c: li_12 });
 					_$_.append(__anchor, li_12);
 				},
-				12
+				12,
+				void 0,
+				render_11
 			);
 
 			_$_.hydrating && _$_.pop(ul_12);
@@ -1080,30 +1078,31 @@ function ForLoopIndexUpdate_render(__anchor, __block) {
 
 ForLoopIndexUpdate[_$_.$r] = ForLoopIndexUpdate_render;
 
-var root_52 = _$_.template(`<li> </li>`, 0);
+var root_52 = _$_.template(`<li>`);
 
 function render_12(__prev) {
-	var __pattern_6 = _$_.get(__prev._pattern_6);
-	var __a = `[${__prev._i.value}] ${__pattern_6.id}: ${__pattern_6.value}`;
+	var __pattern_6 = _$_.get(__prev._a);
+	var __a = `[${__prev._b.value}] ${__pattern_6.id}: ${__pattern_6.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_21, __prev.a = __a);
+		_$_.set_text_content(__prev._c, __a, __prev.a);
+		__prev.a = __a;
 	}
 
-	var __b = __prev._i.value;
+	var __b = __prev._b.value;
 
 	if (__prev.b !== __b) {
-		_$_.set_attribute(__prev._li_13, 'data-index', __prev.b = __b);
+		_$_.set_attribute(__prev._c, 'data-index', __prev.b = __b);
 	}
 
 	var __c = `item-${__pattern_6.id}`;
 
 	if (__prev.c !== __c) {
-		_$_.set_class(__prev._li_13, __prev.c = __c, void 0, true);
+		_$_.set_class(__prev._c, __prev.c = __c);
 	}
 }
 
-var root_51 = _$_.template(`<button class="reorder">Rotate</button><ul></ul>`, 1, 2);
+var root_51 = _$_.template(`<button class=reorder>Rotate</button><ul>`, 1, 2);
 var root_50 = _$_.template(`<!>`, 1, 1);
 
 function KeyedForLoopWithIndex_render(__anchor, __block) {
@@ -1114,7 +1113,7 @@ function KeyedForLoopWithIndex_render(__anchor, __block) {
 			{ id: 'c', value: 'Gamma' }
 		],
 		__block,
-		'3467975a'
+		'ejgeai'
 	);
 
 	var fragment_18 = root_50();
@@ -1137,24 +1136,22 @@ function KeyedForLoopWithIndex_render(__anchor, __block) {
 				(__anchor, pattern_6, i) => {
 					var li_13 = root_52();
 
-					{
-						var expression_21 = _$_.hydrating ? _$_.hydrate_text() : li_13.firstChild;
-					}
-
-					_$_.render(render_12, {
-						a: ' ',
+					_$_.item({
+						a: '',
 						b: void 0,
 						c: _$_.UNINITIALIZED,
-						_pattern_6: pattern_6,
-						_i: i,
-						_expression_21: expression_21,
-						_li_13: li_13
+						_a: pattern_6,
+						_b: i,
+						_c: li_13
 					});
 
 					_$_.append(__anchor, li_13);
 				},
 				12,
-				(pattern_6, i) => _$_.get(pattern_6).id
+				(pattern_6, i) => pattern_6.id,
+				void 0,
+				void 0,
+				render_12
 			);
 
 			_$_.hydrating && _$_.pop(ul_13);
@@ -1168,12 +1165,12 @@ function KeyedForLoopWithIndex_render(__anchor, __block) {
 
 KeyedForLoopWithIndex[_$_.$r] = KeyedForLoopWithIndex_render;
 
-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_55 = _$_.template(`<div> `);
+var root_54 = _$_.template(`<div class=wrapper><header class=before>Before</header><footer class=after>After</footer></div><button class=add>Add`, 1, 2);
 var root_53 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopWithSiblings_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B'], __block, '3c7e8152');
+	const items = _$_.track(['A', 'B'], __block, 'gs9c2a');
 	var fragment_20 = root_53();
 	var node_13 = _$_.first_child_frag(fragment_20);
 
@@ -1191,7 +1188,7 @@ function ForLoopWithSiblings_render(__anchor, __block) {
 				(__anchor, item) => {
 					var div_14 = root_55();
 
-					_$_.set_class(div_14, `item-${item}`, void 0, true);
+					_$_.set_class(div_14, `item-${item}`);
 
 					{
 						var expression_22 = _$_.hydrating ? _$_.hydrate_child() : div_14.firstChild;
@@ -1222,7 +1219,7 @@ function ForLoopWithSiblings_render(__anchor, __block) {
 
 ForLoopWithSiblings[_$_.$r] = ForLoopWithSiblings_render;
 
-var root_56 = _$_.template(`<div></div>`, 0);
+var root_56 = _$_.template(`<div>`);
 
 function ForLoopItemState_render(__anchor, __block) {
 	const initialItems = [
@@ -1241,7 +1238,7 @@ function ForLoopItemState_render(__anchor, __block) {
 				_$_.render_component(TodoItem, __anchor, { id: _$_.get(pattern_7).id, text: _$_.get(pattern_7).text });
 			},
 			4,
-			(pattern_7) => _$_.get(pattern_7).id
+			(pattern_7) => pattern_7.id
 		);
 
 		_$_.hydrating && _$_.pop(div_15);
@@ -1252,36 +1249,37 @@ function ForLoopItemState_render(__anchor, __block) {
 
 ForLoopItemState[_$_.$r] = ForLoopItemState_render;
 
-var root_57 = _$_.template(`<div><input type="checkbox" class="checkbox"><span> </span></div>`, 0);
+var root_57 = _$_.template(`<div><input type=checkbox class=checkbox><span>`);
 
 function render_13(__prev) {
-	var __a = __prev._done.value;
+	var __a = __prev._a.value;
 
 	if (__prev.a !== __a) {
-		_$_.set_checked(__prev._input, __prev.a = __a);
+		_$_.set_checked(__prev._b, __prev.a = __a);
 	}
 
-	var __b = __prev._props.text;
+	var __b = __prev._c.text;
 
 	if (__prev.b !== __b) {
-		_$_.set_text(__prev._expression_23, __prev.b = __b);
+		_$_.set_text_content(__prev._d, __b, __prev.b);
+		__prev.b = __b;
 	}
 
-	var __c = __prev._done.value ? 'completed' : 'pending';
+	var __c = __prev._a.value ? 'completed' : 'pending';
 
 	if (__prev.c !== __c) {
-		_$_.set_class(__prev._span_6, __prev.c = __c, void 0, true);
+		_$_.set_class(__prev._d, __prev.c = __c);
 	}
 
-	var __d = `todo-${__prev._props.id}`;
+	var __d = `todo-${__prev._c.id}`;
 
 	if (__prev.d !== __d) {
-		_$_.set_class(__prev._div_16, __prev.d = __d, void 0, true);
+		_$_.set_class(__prev._e, __prev.d = __d);
 	}
 }
 
 function TodoItem_render(__anchor, __block, props) {
-	const done = _$_.track(false, __block, '4f2402a4');
+	const done = _$_.track(false, __block, 'lyii78');
 	var div_16 = root_57();
 
 	{
@@ -1292,23 +1290,18 @@ function TodoItem_render(__anchor, __block, props) {
 		};
 
 		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : input.nextSibling;
-
-		{
-			var expression_23 = _$_.hydrating ? _$_.hydrate_text() : span_6.firstChild;
-		}
 	}
 
 	_$_.render(render_13, {
 		a: void 0,
-		b: ' ',
+		b: '',
 		c: _$_.UNINITIALIZED,
 		d: _$_.UNINITIALIZED,
-		_done: done,
-		_input: input,
-		_props: props,
-		_expression_23: expression_23,
-		_span_6: span_6,
-		_div_16: div_16
+		_a: done,
+		_b: input,
+		_c: props,
+		_d: span_6,
+		_e: div_16
 	});
 
 	_$_.append(__anchor, div_16);
@@ -1316,8 +1309,8 @@ function TodoItem_render(__anchor, __block, props) {
 
 TodoItem[_$_.$r] = TodoItem_render;
 
-var root_59 = _$_.template(`<li class="single"> </li>`, 0);
-var root_58 = _$_.template(`<ul></ul>`, 0);
+var root_59 = _$_.template(`<li class=single> `);
+var root_58 = _$_.template(`<ul>`);
 
 function ForLoopSingleItem_render(__anchor, __block) {
 	const items = ['Only'];
@@ -1350,12 +1343,12 @@ function ForLoopSingleItem_render(__anchor, __block) {
 
 ForLoopSingleItem[_$_.$r] = ForLoopSingleItem_render;
 
-var root_62 = _$_.template(`<li> </li>`, 0);
-var root_61 = _$_.template(`<button class="prepend">Prepend A</button><ul></ul>`, 1, 2);
+var root_62 = _$_.template(`<li> `);
+var root_61 = _$_.template(`<button class=prepend>Prepend A</button><ul>`, 1, 2);
 var root_60 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopAddAtBeginning_render(__anchor, __block) {
-	const items = _$_.track(['B', 'C'], __block, '1561403a');
+	const items = _$_.track(['B', 'C'], __block, '5xk2t6');
 	var fragment_22 = root_60();
 	var node_14 = _$_.first_child_frag(fragment_22);
 
@@ -1376,7 +1369,7 @@ function ForLoopAddAtBeginning_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_15 = root_62();
 
-					_$_.set_class(li_15, `item-${item}`, void 0, true);
+					_$_.set_class(li_15, `item-${item}`);
 
 					{
 						var expression_25 = _$_.hydrating ? _$_.hydrate_child() : li_15.firstChild;
@@ -1401,12 +1394,12 @@ function ForLoopAddAtBeginning_render(__anchor, __block) {
 
 ForLoopAddAtBeginning[_$_.$r] = ForLoopAddAtBeginning_render;
 
-var root_65 = _$_.template(`<li> </li>`, 0);
-var root_64 = _$_.template(`<button class="insert">Insert B</button><ul></ul>`, 1, 2);
+var root_65 = _$_.template(`<li> `);
+var root_64 = _$_.template(`<button class=insert>Insert B</button><ul>`, 1, 2);
 var root_63 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopAddInMiddle_render(__anchor, __block) {
-	const items = _$_.track(['A', 'C'], __block, '1bc60b46');
+	const items = _$_.track(['A', 'C'], __block, '7pf806');
 	var fragment_24 = root_63();
 	var node_15 = _$_.first_child_frag(fragment_24);
 
@@ -1430,7 +1423,7 @@ function ForLoopAddInMiddle_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_16 = root_65();
 
-					_$_.set_class(li_16, `item-${item}`, void 0, true);
+					_$_.set_class(li_16, `item-${item}`);
 
 					{
 						var expression_26 = _$_.hydrating ? _$_.hydrate_child() : li_16.firstChild;
@@ -1455,12 +1448,12 @@ function ForLoopAddInMiddle_render(__anchor, __block) {
 
 ForLoopAddInMiddle[_$_.$r] = ForLoopAddInMiddle_render;
 
-var root_68 = _$_.template(`<li> </li>`, 0);
-var root_67 = _$_.template(`<button class="remove-middle">Remove B</button><ul></ul>`, 1, 2);
+var root_68 = _$_.template(`<li> `);
+var root_67 = _$_.template(`<button class=remove-middle>Remove B</button><ul>`, 1, 2);
 var root_66 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopRemoveFromMiddle_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B', 'C'], __block, '1c87f95f');
+	const items = _$_.track(['A', 'B', 'C'], __block, '7wzmn3');
 	var fragment_26 = root_66();
 	var node_16 = _$_.first_child_frag(fragment_26);
 
@@ -1481,7 +1474,7 @@ function ForLoopRemoveFromMiddle_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_17 = root_68();
 
-					_$_.set_class(li_17, `item-${item}`, void 0, true);
+					_$_.set_class(li_17, `item-${item}`);
 
 					{
 						var expression_27 = _$_.hydrating ? _$_.hydrate_child() : li_17.firstChild;
@@ -1506,17 +1499,17 @@ function ForLoopRemoveFromMiddle_render(__anchor, __block) {
 
 ForLoopRemoveFromMiddle[_$_.$r] = ForLoopRemoveFromMiddle_render;
 
-var root_70 = _$_.template(`<li> </li>`, 0);
+var root_70 = _$_.template(`<li> `);
 
 function render_14(__prev) {
-	var __a = `item-${__prev._i.value}`;
+	var __a = `item-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._li_18, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_69 = _$_.template(`<ul class="large-list"></ul>`, 0);
+var root_69 = _$_.template(`<ul class=large-list>`);
 
 function ForLoopLargeList_render(__anchor, __block) {
 	const items = _$_.with_scope(__block, () => Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));
@@ -1536,10 +1529,12 @@ function ForLoopLargeList_render(__anchor, __block) {
 					_$_.hydrating && _$_.pop(li_18);
 				}
 
-				_$_.render(render_14, { a: _$_.UNINITIALIZED, _i: i, _li_18: li_18 });
+				_$_.item({ a: _$_.UNINITIALIZED, _a: i, _b: li_18 });
 				_$_.append(__anchor, li_18);
 			},
-			12
+			12,
+			void 0,
+			render_14
 		);
 
 		_$_.hydrating && _$_.pop(ul_18);
@@ -1550,12 +1545,12 @@ function ForLoopLargeList_render(__anchor, __block) {
 
 ForLoopLargeList[_$_.$r] = ForLoopLargeList_render;
 
-var root_73 = _$_.template(`<li> </li>`, 0);
-var root_72 = _$_.template(`<button class="swap">Swap First and Last</button><ul></ul>`, 1, 2);
+var root_73 = _$_.template(`<li> `);
+var root_72 = _$_.template(`<button class=swap>Swap First and Last</button><ul>`, 1, 2);
 var root_71 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopSwap_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B', 'C', 'D'], __block, '5f8d152f');
+	const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'qiflm7');
 	var fragment_28 = root_71();
 	var node_17 = _$_.first_child_frag(fragment_28);
 
@@ -1579,7 +1574,7 @@ function ForLoopSwap_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_19 = root_73();
 
-					_$_.set_class(li_19, `item-${item}`, void 0, true);
+					_$_.set_class(li_19, `item-${item}`);
 
 					{
 						var expression_29 = _$_.hydrating ? _$_.hydrate_child() : li_19.firstChild;
@@ -1604,12 +1599,12 @@ function ForLoopSwap_render(__anchor, __block) {
 
 ForLoopSwap[_$_.$r] = ForLoopSwap_render;
 
-var root_76 = _$_.template(`<li> </li>`, 0);
-var root_75 = _$_.template(`<button class="reverse">Reverse</button><ul></ul>`, 1, 2);
+var root_76 = _$_.template(`<li> `);
+var root_75 = _$_.template(`<button class=reverse>Reverse</button><ul>`, 1, 2);
 var root_74 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopReverse_render(__anchor, __block) {
-	const items = _$_.track(['A', 'B', 'C', 'D'], __block, '24602e64');
+	const items = _$_.track(['A', 'B', 'C', 'D'], __block, 'a3chgk');
 	var fragment_30 = root_74();
 	var node_18 = _$_.first_child_frag(fragment_30);
 
@@ -1630,7 +1625,7 @@ function ForLoopReverse_render(__anchor, __block) {
 				(__anchor, item) => {
 					var li_20 = root_76();
 
-					_$_.set_class(li_20, `item-${item}`, void 0, true);
+					_$_.set_class(li_20, `item-${item}`);
 
 					{
 						var expression_30 = _$_.hydrating ? _$_.hydrate_child() : li_20.firstChild;
@@ -1655,11 +1650,11 @@ function ForLoopReverse_render(__anchor, __block) {
 
 ForLoopReverse[_$_.$r] = ForLoopReverse_render;
 
-var root_78 = _$_.template(`<span class="item"> </span>`, 0);
-var root_77 = _$_.template(`<div class="wrapper"><div class="host"><!><p class="tail">p</p></div><button class="push">Push</button><button class="rotate">Rotate</button></div>`, 0);
+var root_78 = _$_.template(`<span class=item> `);
+var root_77 = _$_.template(`<div class=wrapper><div class=host><p class=tail>p</p></div><button class=push>Push</button><button class=rotate>Rotate`);
 
 function KeyedForLoopAppendAndRotate_render(__anchor, __block) {
-	const items = _$_.track([1, 2, 3], __block, 'a8b41504');
+	const items = _$_.track([1, 2, 3], __block, '1at4qo4');
 	var div_17 = root_77();
 
 	{
@@ -1706,13 +1701,14 @@ function KeyedForLoopAppendAndRotate_render(__anchor, __block) {
 
 KeyedForLoopAppendAndRotate[_$_.$r] = KeyedForLoopAppendAndRotate_render;
 
-var root_79 = _$_.template(`<span class="item"> </span>`, 0);
+var root_79 = _$_.template(`<span class=item>`);
 
 function render_15(__prev) {
-	var __a = _$_.get(__prev._pattern_9);
+	var __a = __prev.$item;
 
 	if (__prev.a !== __a) {
-		_$_.set_text(__prev._expression_32, __prev.a = __a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
+		__prev.a = __a;
 	}
 }
 
@@ -1723,23 +1719,23 @@ function RootKeyedList_render(__anchor, __block, props) {
 		(__anchor, pattern_9) => {
 			var span_8 = root_79();
 
-			{
-				var expression_32 = _$_.hydrating ? _$_.hydrate_text() : span_8.firstChild;
-			}
-
-			_$_.render(render_15, { a: ' ', _pattern_9: pattern_9, _expression_32: expression_32 });
+			_$_.item({ a: '', $item: pattern_9, _b: span_8 });
 			_$_.append(__anchor, span_8);
 		},
-		16
+		144,
+		void 0,
+		void 0,
+		void 0,
+		render_15
 	);
 }
 
 RootKeyedList[_$_.$r] = RootKeyedList_render;
 
-var root_80 = _$_.template(`<div class="wrapper"><div class="host"><!><p class="tail">p</p></div><button class="push">Push</button><button class="rotate">Rotate</button></div>`, 0);
+var root_80 = _$_.template(`<div class=wrapper><div class=host><p class=tail>p</p></div><button class=push>Push</button><button class=rotate>Rotate`);
 
 function RootKeyedForLoopAppendAndRotate_render(__anchor, __block) {
-	const items = _$_.track([1, 2, 3], __block, '50a91d60');
+	const items = _$_.track([1, 2, 3], __block, 'mdp2e8');
 	var div_19 = root_80();
 
 	{