ripple 0.4.3 → 0.4.5

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=layout><!>`);
+var root = _$_.template_el('div', ['class', 'layout'], [null]);
 
 function Layout_render(__anchor, __block, { children }) {
 	var div = root();
@@ -18,7 +18,7 @@ function Layout_render(__anchor, __block, { children }) {
 
 Layout[_$_.$r] = Layout_render;
 
-var root_1 = _$_.template(`<div class=layout>before<!>after`);
+var root_1 = _$_.template_el('div', ['class', 'layout'], ['before', null, 'after']);
 
 function TextWrappedLayout_render(__anchor, __block, { children }) {
 	var div_1 = root_1();
@@ -36,7 +36,7 @@ function TextWrappedLayout_render(__anchor, __block, { children }) {
 
 TextWrappedLayout[_$_.$r] = TextWrappedLayout_render;
 
-var root_2 = _$_.template(`<div class=single>single`);
+var root_2 = _$_.template_el('div', ['class', 'single'], 'single');
 
 function SingleChild_render(__anchor, __block) {
 	var div_2 = root_2();
@@ -141,6 +141,10 @@ DynamicTagElement[_$_.$r] = DynamicTagElement_render;
 
 var root_7 = _$_.template(`<!>`, 1, 1);
 
+function render(__prev) {
+	__prev.a = _$_.dynamic(__prev.a, __prev._a, __prev._b, {});
+}
+
 function DynamicTagComponent_render(__anchor, __block) {
 	const Comp = SingleChild;
 
@@ -149,7 +153,12 @@ function DynamicTagComponent_render(__anchor, __block) {
 			var fragment_4 = root_7();
 			var node_3 = _$_.first_child_frag(fragment_4);
 
-			_$_.composite(() => Comp, node_3, () => ({}));
+			_$_.render(render, {
+				a: _$_.dynamic_init(node_3, () => Comp, () => ({})),
+				_a: node_3,
+				_b: Comp
+			});
+
 			_$_.append(__anchor, fragment_4);
 		})
 	});

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

@@ -1,7 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div><button class=increment>Increment</button><span class=count>`);
+var root = _$_.template_el('div', null, [
+	['button', ['class', 'increment'], 'Increment'],
+	['span', ['class', 'count']]
+]);
 
 function render(__prev) {
 	var __a = __prev._a.value;
@@ -32,7 +35,11 @@ function ClickCounter_render(__anchor, __block) {
 
 ClickCounter[_$_.$r] = ClickCounter_render;
 
-var root_1 = _$_.template(`<div><button class=decrement>-</button><span class=count></span><button class=increment>+`);
+var root_1 = _$_.template_el('div', null, [
+	['button', ['class', 'decrement'], '-'],
+	['span', ['class', 'count']],
+	['button', ['class', 'increment'], '+']
+]);
 
 function render_1(__prev) {
 	var __a = __prev._a.value;
@@ -68,7 +75,11 @@ function IncrementDecrement_render(__anchor, __block) {
 
 IncrementDecrement[_$_.$r] = IncrementDecrement_render;
 
-var root_2 = _$_.template(`<div><button class=target>Target</button><span class=clicks></span><span class=hovers>`);
+var root_2 = _$_.template_el('div', null, [
+	['button', ['class', 'target'], 'Target'],
+	['span', ['class', 'clicks']],
+	['span', ['class', 'hovers']]
+]);
 
 function render_2(__prev) {
 	var __a = __prev._a.value;
@@ -112,7 +123,11 @@ function MultipleEvents_render(__anchor, __block) {
 
 MultipleEvents[_$_.$r] = MultipleEvents_render;
 
-var root_3 = _$_.template(`<div><button class=btn>Click</button><span class=count></span><span class=action> `);
+var root_3 = _$_.template_el('div', null, [
+	['button', ['class', 'btn'], 'Click'],
+	['span', ['class', 'count']],
+	['span', ['class', 'action'], ' ']
+]);
 
 function render_3(__prev) {
 	var __a = __prev._a.value;
@@ -156,7 +171,7 @@ function MultiStateUpdate_render(__anchor, __block) {
 
 MultiStateUpdate[_$_.$r] = MultiStateUpdate_render;
 
-var root_4 = _$_.template(`<div><button class=toggle>`);
+var root_4 = _$_.template_el('div', null, [['button', ['class', 'toggle']]]);
 
 function render_4(__prev) {
 	var __a = __prev._a.value ? 'ON' : 'OFF';
@@ -185,7 +200,7 @@ function ToggleButton_render(__anchor, __block) {
 
 ToggleButton[_$_.$r] = ToggleButton_render;
 
-var root_5 = _$_.template(`<button class=child-btn>`);
+var root_5 = _$_.template_el('button', ['class', 'child-btn']);
 
 function render_5(__prev) {
 	var __a = __prev._a.label;
@@ -206,7 +221,7 @@ function ChildButton_render(__anchor, __block, props) {
 
 ChildButton[_$_.$r] = ChildButton_render;
 
-var root_6 = _$_.template(`<div><span class=count>`);
+var root_6 = _$_.template_el('div', null, [['span', ['class', 'count']]]);
 
 function render_6(__prev) {
 	var __a = __prev._a.value;

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

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<li> `);
-var root = _$_.template(`<ul>`);
+var root_1 = _$_.template_el('li', null, ' ');
+var root = _$_.template_el('ul');
 
 function StaticForLoop_render(__anchor, __block) {
 	const items = ['Apple', 'Banana', 'Cherry'];
@@ -35,7 +35,7 @@ function StaticForLoop_render(__anchor, __block) {
 
 StaticForLoop[_$_.$r] = StaticForLoop_render;
 
-var root_3 = _$_.template(`<li>`);
+var root_3 = _$_.template_el('li');
 
 function render(__prev) {
 	var __a = `${__prev._a.value}: ${__prev._b}`;
@@ -46,7 +46,7 @@ function render(__prev) {
 	}
 }
 
-var root_2 = _$_.template(`<ul>`);
+var root_2 = _$_.template_el('ul');
 
 function ForLoopWithIndex_render(__anchor, __block) {
 	const items = ['A', 'B', 'C'];
@@ -75,8 +75,8 @@ function ForLoopWithIndex_render(__anchor, __block) {
 
 ForLoopWithIndex[_$_.$r] = ForLoopWithIndex_render;
 
-var root_5 = _$_.template(`<li> `);
-var root_4 = _$_.template(`<ul>`);
+var root_5 = _$_.template_el('li', null, ' ');
+var root_4 = _$_.template_el('ul');
 
 function KeyedForLoop_render(__anchor, __block) {
 	const items = [
@@ -115,7 +115,7 @@ function KeyedForLoop_render(__anchor, __block) {
 
 KeyedForLoop[_$_.$r] = KeyedForLoop_render;
 
-var root_8 = _$_.template(`<li> `);
+var root_8 = _$_.template_el('li', null, ' ');
 var root_7 = _$_.template(`<button class=add>Add</button><ul>`, 1, 2);
 var root_6 = _$_.template(`<!>`, 1, 1);
 
@@ -164,7 +164,7 @@ function ReactiveForLoopAdd_render(__anchor, __block) {
 
 ReactiveForLoopAdd[_$_.$r] = ReactiveForLoopAdd_render;
 
-var root_11 = _$_.template(`<li> `);
+var root_11 = _$_.template_el('li', null, ' ');
 var root_10 = _$_.template(`<button class=remove>Remove</button><ul>`, 1, 2);
 var root_9 = _$_.template(`<!>`, 1, 1);
 
@@ -213,7 +213,10 @@ function ReactiveForLoopRemove_render(__anchor, __block) {
 
 ReactiveForLoopRemove[_$_.$r] = ReactiveForLoopRemove_render;
 
-var root_13 = _$_.template(`<div><span class=value> </span><button class=increment>+`);
+var root_13 = _$_.template_el('div', null, [
+	['span', ['class', 'value'], ' '],
+	['button', ['class', 'increment'], '+']
+]);
 
 function render_1(__prev) {
 	var __a = `item-${__prev._a.value}`;
@@ -223,7 +226,7 @@ function render_1(__prev) {
 	}
 }
 
-var root_12 = _$_.template(`<div>`);
+var root_12 = _$_.template_el('div');
 
 function ForLoopInteractive_render(__anchor, __block) {
 	const counts = _$_.track([0, 0, 0], __block, 'f8yrj3');
@@ -272,7 +275,7 @@ function ForLoopInteractive_render(__anchor, __block) {
 
 ForLoopInteractive[_$_.$r] = ForLoopInteractive_render;
 
-var root_16 = _$_.template(`<span> `);
+var root_16 = _$_.template_el('span', null, ' ');
 
 function render_2(__prev) {
 	var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
@@ -290,8 +293,8 @@ function render_3(__prev) {
 	}
 }
 
-var root_15 = _$_.template(`<div>`);
-var root_14 = _$_.template(`<div class=grid>`);
+var root_15 = _$_.template_el('div');
+var root_14 = _$_.template_el('div', ['class', 'grid']);
 
 function NestedForLoop_render(__anchor, __block) {
 	const grid = [[1, 2], [3, 4]];
@@ -345,8 +348,8 @@ function NestedForLoop_render(__anchor, __block) {
 
 NestedForLoop[_$_.$r] = NestedForLoop_render;
 
-var root_18 = _$_.template(`<span>`);
-var root_17 = _$_.template(`<div class=container>`);
+var root_18 = _$_.template_el('span');
+var root_17 = _$_.template_el('div', ['class', 'container']);
 
 function EmptyForLoop_render(__anchor, __block) {
 	const items = [];
@@ -376,7 +379,10 @@ function EmptyForLoop_render(__anchor, __block) {
 
 EmptyForLoop[_$_.$r] = EmptyForLoop_render;
 
-var root_20 = _$_.template(`<div><span class=name> </span><span class=role> `);
+var root_20 = _$_.template_el('div', null, [
+	['span', ['class', 'name'], ' '],
+	['span', ['class', 'role'], ' ']
+]);
 
 function render_4(__prev) {
 	var __a = `user-${_$_.get(__prev._a).id}`;
@@ -386,7 +392,7 @@ function render_4(__prev) {
 	}
 }
 
-var root_19 = _$_.template(`<div>`);
+var root_19 = _$_.template_el('div');
 
 function ForLoopComplexObjects_render(__anchor, __block) {
 	const users = [
@@ -441,7 +447,7 @@ function ForLoopComplexObjects_render(__anchor, __block) {
 
 ForLoopComplexObjects[_$_.$r] = ForLoopComplexObjects_render;
 
-var root_23 = _$_.template(`<li> `);
+var root_23 = _$_.template_el('li', null, ' ');
 
 function render_5(__prev) {
 	var __a = `item-${_$_.get(__prev._a).id}`;
@@ -513,7 +519,7 @@ function KeyedForLoopReorder_render(__anchor, __block) {
 
 KeyedForLoopReorder[_$_.$r] = KeyedForLoopReorder_render;
 
-var root_26 = _$_.template(`<li> `);
+var root_26 = _$_.template_el('li', null, ' ');
 
 function render_6(__prev) {
 	var __a = `item-${_$_.get(__prev._a).id}`;
@@ -576,7 +582,7 @@ function KeyedForLoopUpdate_render(__anchor, __block) {
 
 KeyedForLoopUpdate[_$_.$r] = KeyedForLoopUpdate_render;
 
-var root_29 = _$_.template(`<li> `);
+var root_29 = _$_.template_el('li', null, ' ');
 var root_28 = _$_.template(`<button class=shuffle>Shuffle</button><ul>`, 1, 2);
 var root_27 = _$_.template(`<!>`, 1, 1);
 
@@ -627,8 +633,8 @@ function ForLoopMixedOperations_render(__anchor, __block) {
 
 ForLoopMixedOperations[_$_.$r] = ForLoopMixedOperations_render;
 
-var root_33 = _$_.template(`<li> `);
-var root_32 = _$_.template(`<ul class=list>`);
+var root_33 = _$_.template_el('li', null, ' ');
+var root_32 = _$_.template_el('ul', ['class', 'list']);
 
 function consequent(__anchor, { a: showList, b: items }) {
 	var ul_8 = root_32();
@@ -663,6 +669,15 @@ function if_1({ a: showList, b: items }) {
 }
 
 var root_31 = _$_.template(`<button class=toggle>Toggle List</button><button class=add>Add Item</button><!>`, 1, 3);
+
+function render_7(__prev) {
+	var __a = if_1({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 var root_30 = _$_.template(`<!>`, 1, 1);
 
 function ForLoopInsideIf_render(__anchor, __block) {
@@ -686,8 +701,9 @@ function ForLoopInsideIf_render(__anchor, __block) {
 		};
 
 		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : button_7.nextSibling;
+		var ifs = _$_.if_static(node_5, if_1, 0, { a: showList, b: items });
 
-		_$_.if(node_5, if_1, false, { a: showList, b: items });
+		_$_.render(render_7, { a: _$_.UNINITIALIZED, _a: showList, _b: items, _c: ifs });
 		_$_.append(__anchor, fragment_11);
 	}));
 
@@ -696,7 +712,7 @@ function ForLoopInsideIf_render(__anchor, __block) {
 
 ForLoopInsideIf[_$_.$r] = ForLoopInsideIf_render;
 
-var root_36 = _$_.template(`<li>`);
+var root_36 = _$_.template_el('li');
 var root_35 = _$_.template(`<button class=populate>Populate</button><ul class=list>`, 1, 2);
 var root_34 = _$_.template(`<!>`, 1, 1);
 
@@ -742,7 +758,7 @@ function ForLoopEmptyToPopulated_render(__anchor, __block) {
 
 ForLoopEmptyToPopulated[_$_.$r] = ForLoopEmptyToPopulated_render;
 
-var root_39 = _$_.template(`<li> `);
+var root_39 = _$_.template_el('li', null, ' ');
 var root_38 = _$_.template(`<button class=clear>Clear</button><ul class=list>`, 1, 2);
 var root_37 = _$_.template(`<!>`, 1, 1);
 
@@ -791,9 +807,9 @@ function ForLoopPopulatedToEmpty_render(__anchor, __block) {
 
 ForLoopPopulatedToEmpty[_$_.$r] = ForLoopPopulatedToEmpty_render;
 
-var root_42 = _$_.template(`<span> `);
+var root_42 = _$_.template_el('span', null, ' ');
 
-function render_7(__prev) {
+function render_8(__prev) {
 	var __a = `cell-${__prev._a.value}-${__prev._b.value}`;
 
 	if (__prev.a !== __a) {
@@ -801,7 +817,7 @@ function render_7(__prev) {
 	}
 }
 
-function render_8(__prev) {
+function render_9(__prev) {
 	var __a = `row-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
@@ -809,8 +825,13 @@ function render_8(__prev) {
 	}
 }
 
-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>`);
+var root_41 = _$_.template_el('div');
+
+var root_40 = _$_.template_el('div', ['class', 'nested-for-reactive'], [
+	['button', ['class', 'add-row'], 'Add Row'],
+	['button', ['class', 'update-cell'], 'Update Cell'],
+	['div', ['class', 'grid']]
+]);
 
 function NestedForLoopReactive_render(__anchor, __block) {
 	const grid = _$_.track([[1, 2], [3, 4]], __block, '197p4tv');
@@ -860,7 +881,7 @@ function NestedForLoopReactive_render(__anchor, __block) {
 							},
 							12,
 							void 0,
-							render_7
+							render_8
 						);
 
 						_$_.hydrating && _$_.pop(div_9);
@@ -871,7 +892,7 @@ function NestedForLoopReactive_render(__anchor, __block) {
 				},
 				12,
 				void 0,
-				render_8
+				render_9
 			);
 
 			_$_.hydrating && _$_.pop(div_8);
@@ -883,10 +904,10 @@ function NestedForLoopReactive_render(__anchor, __block) {
 
 NestedForLoopReactive[_$_.$r] = NestedForLoopReactive_render;
 
-var root_46 = _$_.template(`<li class=member> `);
-var root_45 = _$_.template(`<div><h3 class=team-name> </h3><ul>`);
+var root_46 = _$_.template_el('li', ['class', 'member'], ' ');
+var root_45 = _$_.template_el('div', null, [['h3', ['class', 'team-name'], ' '], ['ul']]);
 
-function render_9(__prev) {
+function render_10(__prev) {
 	var __a = `team-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
@@ -894,9 +915,9 @@ function render_9(__prev) {
 	}
 }
 
-var root_44 = _$_.template(`<div><h2 class=dept-name> `);
+var root_44 = _$_.template_el('div', null, [['h2', ['class', 'dept-name'], ' ']]);
 
-function render_10(__prev) {
+function render_11(__prev) {
 	var __a = `dept-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
@@ -904,7 +925,7 @@ function render_10(__prev) {
 	}
 }
 
-var root_43 = _$_.template(`<div class=org>`);
+var root_43 = _$_.template_el('div', ['class', 'org']);
 
 function ForLoopDeeplyNested_render(__anchor, __block) {
 	const departments = [
@@ -993,7 +1014,7 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 						(pattern_5) => pattern_5.id,
 						void 0,
 						void 0,
-						render_9
+						render_10
 					);
 
 					_$_.hydrating && _$_.pop(div_11);
@@ -1006,7 +1027,7 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 			(pattern_4) => pattern_4.id,
 			void 0,
 			void 0,
-			render_10
+			render_11
 		);
 
 		_$_.hydrating && _$_.pop(div_10);
@@ -1017,9 +1038,9 @@ function ForLoopDeeplyNested_render(__anchor, __block) {
 
 ForLoopDeeplyNested[_$_.$r] = ForLoopDeeplyNested_render;
 
-var root_49 = _$_.template(`<li>`);
+var root_49 = _$_.template_el('li');
 
-function render_11(__prev) {
+function render_12(__prev) {
 	var __a = `[${__prev._a.value}] ${__prev._b}`;
 
 	if (__prev.a !== __a) {
@@ -1064,7 +1085,7 @@ function ForLoopIndexUpdate_render(__anchor, __block) {
 				},
 				12,
 				void 0,
-				render_11
+				render_12
 			);
 
 			_$_.hydrating && _$_.pop(ul_12);
@@ -1078,9 +1099,9 @@ function ForLoopIndexUpdate_render(__anchor, __block) {
 
 ForLoopIndexUpdate[_$_.$r] = ForLoopIndexUpdate_render;
 
-var root_52 = _$_.template(`<li>`);
+var root_52 = _$_.template_el('li');
 
-function render_12(__prev) {
+function render_13(__prev) {
 	var __pattern_6 = _$_.get(__prev._a);
 	var __a = `[${__prev._b.value}] ${__pattern_6.id}: ${__pattern_6.value}`;
 
@@ -1092,7 +1113,7 @@ function render_12(__prev) {
 	var __b = __prev._b.value;
 
 	if (__prev.b !== __b) {
-		_$_.set_attribute(__prev._c, 'data-index', __prev.b = __b);
+		_$_.set_attribute_value(__prev._c, 'data-index', __prev.b = __b);
 	}
 
 	var __c = `item-${__pattern_6.id}`;
@@ -1151,7 +1172,7 @@ function KeyedForLoopWithIndex_render(__anchor, __block) {
 				(pattern_6, i) => pattern_6.id,
 				void 0,
 				void 0,
-				render_12
+				render_13
 			);
 
 			_$_.hydrating && _$_.pop(ul_13);
@@ -1165,7 +1186,7 @@ function KeyedForLoopWithIndex_render(__anchor, __block) {
 
 KeyedForLoopWithIndex[_$_.$r] = KeyedForLoopWithIndex_render;
 
-var root_55 = _$_.template(`<div> `);
+var root_55 = _$_.template_el('div', null, ' ');
 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);
 
@@ -1219,7 +1240,7 @@ function ForLoopWithSiblings_render(__anchor, __block) {
 
 ForLoopWithSiblings[_$_.$r] = ForLoopWithSiblings_render;
 
-var root_56 = _$_.template(`<div>`);
+var root_56 = _$_.template_el('div');
 
 function ForLoopItemState_render(__anchor, __block) {
 	const initialItems = [
@@ -1249,10 +1270,19 @@ function ForLoopItemState_render(__anchor, __block) {
 
 ForLoopItemState[_$_.$r] = ForLoopItemState_render;
 
-var root_57 = _$_.template(`<div><input type=checkbox class=checkbox><span>`);
+var root_57 = _$_.template_el(
+	'div',
+	null,
+	[
+		['input', ['type', 'checkbox', 'class', 'checkbox']],
+		['span']
+	],
+	1
+);
 
-function render_13(__prev) {
-	var __a = __prev._a.value;
+function render_14(__prev) {
+	var __done_value = __prev._a.value;
+	var __a = __done_value;
 
 	if (__prev.a !== __a) {
 		_$_.set_checked(__prev._b, __prev.a = __a);
@@ -1265,7 +1295,7 @@ function render_13(__prev) {
 		__prev.b = __b;
 	}
 
-	var __c = __prev._a.value ? 'completed' : 'pending';
+	var __c = __done_value ? 'completed' : 'pending';
 
 	if (__prev.c !== __c) {
 		_$_.set_class(__prev._d, __prev.c = __c);
@@ -1292,7 +1322,7 @@ function TodoItem_render(__anchor, __block, props) {
 		var span_6 = _$_.hydrating ? _$_.hydrate_sibling() : input.nextSibling;
 	}
 
-	_$_.render(render_13, {
+	_$_.render(render_14, {
 		a: void 0,
 		b: '',
 		c: _$_.UNINITIALIZED,
@@ -1309,8 +1339,8 @@ function TodoItem_render(__anchor, __block, props) {
 
 TodoItem[_$_.$r] = TodoItem_render;
 
-var root_59 = _$_.template(`<li class=single> `);
-var root_58 = _$_.template(`<ul>`);
+var root_59 = _$_.template_el('li', ['class', 'single'], ' ');
+var root_58 = _$_.template_el('ul');
 
 function ForLoopSingleItem_render(__anchor, __block) {
 	const items = ['Only'];
@@ -1343,7 +1373,7 @@ function ForLoopSingleItem_render(__anchor, __block) {
 
 ForLoopSingleItem[_$_.$r] = ForLoopSingleItem_render;
 
-var root_62 = _$_.template(`<li> `);
+var root_62 = _$_.template_el('li', null, ' ');
 var root_61 = _$_.template(`<button class=prepend>Prepend A</button><ul>`, 1, 2);
 var root_60 = _$_.template(`<!>`, 1, 1);
 
@@ -1394,7 +1424,7 @@ function ForLoopAddAtBeginning_render(__anchor, __block) {
 
 ForLoopAddAtBeginning[_$_.$r] = ForLoopAddAtBeginning_render;
 
-var root_65 = _$_.template(`<li> `);
+var root_65 = _$_.template_el('li', null, ' ');
 var root_64 = _$_.template(`<button class=insert>Insert B</button><ul>`, 1, 2);
 var root_63 = _$_.template(`<!>`, 1, 1);
 
@@ -1448,7 +1478,7 @@ function ForLoopAddInMiddle_render(__anchor, __block) {
 
 ForLoopAddInMiddle[_$_.$r] = ForLoopAddInMiddle_render;
 
-var root_68 = _$_.template(`<li> `);
+var root_68 = _$_.template_el('li', null, ' ');
 var root_67 = _$_.template(`<button class=remove-middle>Remove B</button><ul>`, 1, 2);
 var root_66 = _$_.template(`<!>`, 1, 1);
 
@@ -1499,9 +1529,9 @@ function ForLoopRemoveFromMiddle_render(__anchor, __block) {
 
 ForLoopRemoveFromMiddle[_$_.$r] = ForLoopRemoveFromMiddle_render;
 
-var root_70 = _$_.template(`<li> `);
+var root_70 = _$_.template_el('li', null, ' ');
 
-function render_14(__prev) {
+function render_15(__prev) {
 	var __a = `item-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
@@ -1509,7 +1539,7 @@ function render_14(__prev) {
 	}
 }
 
-var root_69 = _$_.template(`<ul class=large-list>`);
+var root_69 = _$_.template_el('ul', ['class', 'large-list']);
 
 function ForLoopLargeList_render(__anchor, __block) {
 	const items = _$_.with_scope(__block, () => Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));
@@ -1534,7 +1564,7 @@ function ForLoopLargeList_render(__anchor, __block) {
 			},
 			12,
 			void 0,
-			render_14
+			render_15
 		);
 
 		_$_.hydrating && _$_.pop(ul_18);
@@ -1545,7 +1575,7 @@ function ForLoopLargeList_render(__anchor, __block) {
 
 ForLoopLargeList[_$_.$r] = ForLoopLargeList_render;
 
-var root_73 = _$_.template(`<li> `);
+var root_73 = _$_.template_el('li', null, ' ');
 var root_72 = _$_.template(`<button class=swap>Swap First and Last</button><ul>`, 1, 2);
 var root_71 = _$_.template(`<!>`, 1, 1);
 
@@ -1599,7 +1629,7 @@ function ForLoopSwap_render(__anchor, __block) {
 
 ForLoopSwap[_$_.$r] = ForLoopSwap_render;
 
-var root_76 = _$_.template(`<li> `);
+var root_76 = _$_.template_el('li', null, ' ');
 var root_75 = _$_.template(`<button class=reverse>Reverse</button><ul>`, 1, 2);
 var root_74 = _$_.template(`<!>`, 1, 1);
 
@@ -1650,8 +1680,13 @@ function ForLoopReverse_render(__anchor, __block) {
 
 ForLoopReverse[_$_.$r] = ForLoopReverse_render;
 
-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`);
+var root_78 = _$_.template_el('span', ['class', 'item'], ' ');
+
+var root_77 = _$_.template_el('div', ['class', 'wrapper'], [
+	['div', ['class', 'host'], [['p', ['class', 'tail'], 'p']]],
+	['button', ['class', 'push'], 'Push'],
+	['button', ['class', 'rotate'], 'Rotate']
+]);
 
 function KeyedForLoopAppendAndRotate_render(__anchor, __block) {
 	const items = _$_.track([1, 2, 3], __block, '1at4qo4');
@@ -1701,9 +1736,9 @@ function KeyedForLoopAppendAndRotate_render(__anchor, __block) {
 
 KeyedForLoopAppendAndRotate[_$_.$r] = KeyedForLoopAppendAndRotate_render;
 
-var root_79 = _$_.template(`<span class=item>`);
+var root_79 = _$_.template_el('span', ['class', 'item']);
 
-function render_15(__prev) {
+function render_16(__prev) {
 	var __a = __prev.$item;
 
 	if (__prev.a !== __a) {
@@ -1726,13 +1761,17 @@ function RootKeyedList_render(__anchor, __block, props) {
 		void 0,
 		void 0,
 		void 0,
-		render_15
+		render_16
 	);
 }
 
 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`);
+var root_80 = _$_.template_el('div', ['class', 'wrapper'], [
+	['div', ['class', 'host'], [['p', ['class', 'tail'], 'p']]],
+	['button', ['class', 'push'], 'Push'],
+	['button', ['class', 'rotate'], 'Rotate']
+]);
 
 function RootKeyedForLoopAppendAndRotate_render(__anchor, __block) {
 	const items = _$_.track([1, 2, 3], __block, 'mdp2e8');