ripple 0.4.3 → 0.4.4

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);
 
@@ -223,7 +223,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 +272,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 +290,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 +345,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 = [];
@@ -386,7 +386,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 +441,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 +513,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 +576,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 +627,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 +663,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 +695,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 +706,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 +752,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 +801,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 +811,7 @@ function render_7(__prev) {
 	}
 }
 
-function render_8(__prev) {
+function render_9(__prev) {
 	var __a = `row-${__prev._a.value}`;
 
 	if (__prev.a !== __a) {
@@ -809,7 +819,7 @@ function render_8(__prev) {
 	}
 }
 
-var root_41 = _$_.template(`<div>`);
+var root_41 = _$_.template_el('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) {
@@ -860,7 +870,7 @@ function NestedForLoopReactive_render(__anchor, __block) {
 							},
 							12,
 							void 0,
-							render_7
+							render_8
 						);
 
 						_$_.hydrating && _$_.pop(div_9);
@@ -871,7 +881,7 @@ function NestedForLoopReactive_render(__anchor, __block) {
 				},
 				12,
 				void 0,
-				render_8
+				render_9
 			);
 
 			_$_.hydrating && _$_.pop(div_8);
@@ -883,10 +893,10 @@ function NestedForLoopReactive_render(__anchor, __block) {
 
 NestedForLoopReactive[_$_.$r] = NestedForLoopReactive_render;
 
-var root_46 = _$_.template(`<li class=member> `);
+var root_46 = _$_.template_el('li', ['class', 'member'], ' ');
 var root_45 = _$_.template(`<div><h3 class=team-name> </h3><ul>`);
 
-function render_9(__prev) {
+function render_10(__prev) {
 	var __a = `team-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
@@ -896,7 +906,7 @@ function render_9(__prev) {
 
 var root_44 = _$_.template(`<div><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 +914,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 +1003,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 +1016,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 +1027,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 +1074,7 @@ function ForLoopIndexUpdate_render(__anchor, __block) {
 				},
 				12,
 				void 0,
-				render_11
+				render_12
 			);
 
 			_$_.hydrating && _$_.pop(ul_12);
@@ -1078,9 +1088,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}`;
 
@@ -1151,7 +1161,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 +1175,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 +1229,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 = [
@@ -1251,8 +1261,9 @@ ForLoopItemState[_$_.$r] = ForLoopItemState_render;
 
 var root_57 = _$_.template(`<div><input type=checkbox class=checkbox><span>`);
 
-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 +1276,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 +1303,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 +1320,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 +1354,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 +1405,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 +1459,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 +1510,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 +1520,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 +1545,7 @@ function ForLoopLargeList_render(__anchor, __block) {
 			},
 			12,
 			void 0,
-			render_14
+			render_15
 		);
 
 		_$_.hydrating && _$_.pop(ul_18);
@@ -1545,7 +1556,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 +1610,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,7 +1661,7 @@ function ForLoopReverse_render(__anchor, __block) {
 
 ForLoopReverse[_$_.$r] = ForLoopReverse_render;
 
-var root_78 = _$_.template(`<span class=item> `);
+var root_78 = _$_.template_el('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) {
@@ -1701,9 +1712,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,7 +1737,7 @@ function RootKeyedList_render(__anchor, __block, props) {
 		void 0,
 		void 0,
 		void 0,
-		render_15
+		render_16
 	);
 }