ripple 0.4.3 → 0.4.5

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root = _$_.template(`<div class=shown>Visible`);
+var root = _$_.template_el('div', ['class', 'shown'], 'Visible');
 
 function consequent(__anchor, show) {
 	var div = root();
@@ -21,7 +21,7 @@ function IfTruthy_render(__anchor, __block) {
 
 IfTruthy[_$_.$r] = IfTruthy_render;
 
-var root_1 = _$_.template(`<div class=shown>Visible`);
+var root_1 = _$_.template_el('div', ['class', 'shown'], 'Visible');
 
 function consequent_1(__anchor, show) {
 	var div_1 = root_1();
@@ -41,8 +41,8 @@ function IfFalsy_render(__anchor, __block) {
 
 IfFalsy[_$_.$r] = IfFalsy_render;
 
-var root_2 = _$_.template(`<div class=logged-in>Welcome back!`);
-var root_3 = _$_.template(`<div class=logged-out>Please log in`);
+var root_2 = _$_.template_el('div', ['class', 'logged-in'], 'Welcome back!');
+var root_3 = _$_.template_el('div', ['class', 'logged-out'], 'Please log in');
 
 function consequent_2(__anchor, isLoggedIn) {
 	var div_2 = root_2();
@@ -68,7 +68,7 @@ function IfElse_render(__anchor, __block) {
 
 IfElse[_$_.$r] = IfElse_render;
 
-var root_6 = _$_.template(`<div class=content>Content visible`);
+var root_6 = _$_.template_el('div', ['class', 'content'], 'Content visible');
 
 function consequent_3(__anchor, show) {
 	var div_4 = root_6();
@@ -81,6 +81,15 @@ function if_4(show) {
 }
 
 var root_5 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);
+
+function render(__prev) {
+	var __a = if_4(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_4 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveIf_render(__anchor, __block) {
@@ -97,8 +106,9 @@ function ReactiveIf_render(__anchor, __block) {
 		};
 
 		var node = _$_.hydrating ? _$_.hydrate_sibling() : button.nextSibling;
+		var ifs = _$_.if_static(node, if_4, 0, show);
 
-		_$_.if(node, if_4, false, show);
+		_$_.render(render, { a: _$_.UNINITIALIZED, _a: show, _b: ifs });
 		_$_.append(__anchor, fragment_1);
 	}));
 
@@ -107,8 +117,8 @@ function ReactiveIf_render(__anchor, __block) {
 
 ReactiveIf[_$_.$r] = ReactiveIf_render;
 
-var root_9 = _$_.template(`<div class=on>ON`);
-var root_10 = _$_.template(`<div class=off>OFF`);
+var root_9 = _$_.template_el('div', ['class', 'on'], 'ON');
+var root_10 = _$_.template_el('div', ['class', 'off'], 'OFF');
 
 function consequent_4(__anchor, isOn) {
 	var div_5 = root_9();
@@ -127,6 +137,15 @@ function if_5(isOn) {
 }
 
 var root_8 = _$_.template(`<button class=toggle>Toggle</button><!>`, 1, 2);
+
+function render_1(__prev) {
+	var __a = if_5(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
 var root_7 = _$_.template(`<!>`, 1, 1);
 
 function ReactiveIfElse_render(__anchor, __block) {
@@ -143,8 +162,9 @@ function ReactiveIfElse_render(__anchor, __block) {
 		};
 
 		var node_2 = _$_.hydrating ? _$_.hydrate_sibling() : button_1.nextSibling;
+		var ifs_1 = _$_.if_static(node_2, if_5, 0, isOn);
 
-		_$_.if(node_2, if_5, false, isOn);
+		_$_.render(render_1, { a: _$_.UNINITIALIZED, _a: isOn, _b: ifs_1 });
 		_$_.append(__anchor, fragment_3);
 	}));
 
@@ -153,7 +173,7 @@ function ReactiveIfElse_render(__anchor, __block) {
 
 ReactiveIfElse[_$_.$r] = ReactiveIfElse_render;
 
-var root_14 = _$_.template(`<span class=inner-content>Inner`);
+var root_14 = _$_.template_el('span', ['class', 'inner-content'], 'Inner');
 
 function consequent_5(__anchor, inner) {
 	var span = root_14();
@@ -165,7 +185,15 @@ function if_6(inner) {
 	if (inner.value) return consequent_5;
 }
 
-var root_13 = _$_.template(`<div class=outer-content>Outer`);
+var root_13 = _$_.template_el('div', ['class', 'outer-content'], 'Outer');
+
+function render_2(__prev) {
+	var __a = if_6(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
 
 function consequent_6(__anchor, { a: outer, b: inner }) {
 	var div_7 = root_13();
@@ -173,11 +201,12 @@ function consequent_6(__anchor, { a: outer, b: inner }) {
 	{
 		var expression = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
 		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7, true);
+		var ifs_2 = _$_.if_static(node_5, if_6, 0, inner);
 
-		_$_.if(node_5, if_6, false, inner);
 		_$_.hydrating && _$_.pop(div_7);
 	}
 
+	_$_.render(render_2, { a: _$_.UNINITIALIZED, _a: inner, _b: ifs_2 });
 	_$_.append(__anchor, div_7);
 }
 
@@ -186,6 +215,15 @@ function if_7({ a: outer, b: inner }) {
 }
 
 var root_12 = _$_.template(`<button class=outer-toggle>Outer</button><button class=inner-toggle>Inner</button><!>`, 1, 3);
+
+function render_3(__prev) {
+	var __a = if_7({ a: __prev._a, b: __prev._b });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._c, __prev.a = __a);
+	}
+}
+
 var root_11 = _$_.template(`<!>`, 1, 1);
 
 function NestedIf_render(__anchor, __block) {
@@ -209,8 +247,9 @@ function NestedIf_render(__anchor, __block) {
 		};
 
 		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
+		var ifs_3 = _$_.if_static(node_4, if_7, 0, { a: outer, b: inner });
 
-		_$_.if(node_4, if_7, false, { a: outer, b: inner });
+		_$_.render(render_3, { a: _$_.UNINITIALIZED, _a: outer, _b: inner, _c: ifs_3 });
 		_$_.append(__anchor, fragment_5);
 	}));
 
@@ -219,9 +258,9 @@ function NestedIf_render(__anchor, __block) {
 
 NestedIf[_$_.$r] = NestedIf_render;
 
-var root_16 = _$_.template(`<div class=state>Loading...`);
-var root_17 = _$_.template(`<div class=state>Success!`);
-var root_18 = _$_.template(`<div class=state>Error occurred`);
+var root_16 = _$_.template_el('div', ['class', 'state'], 'Loading...');
+var root_17 = _$_.template_el('div', ['class', 'state'], 'Success!');
+var root_18 = _$_.template_el('div', ['class', 'state'], 'Error occurred');
 
 function consequent_7(__anchor, status) {
 	var div_9 = root_16();
@@ -245,7 +284,19 @@ function if_8(status) {
 	if (status.value === 'loading') return consequent_7; else if (status.value === 'success') return consequent_8; else return alternate_2;
 }
 
-var root_15 = _$_.template(`<div><button class=success>Success</button><button class=error>Error</button><button class=loading>Loading`);
+var root_15 = _$_.template_el('div', null, [
+	['button', ['class', 'success'], 'Success'],
+	['button', ['class', 'error'], 'Error'],
+	['button', ['class', 'loading'], 'Loading']
+]);
+
+function render_4(__prev) {
+	var __a = if_8(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
 
 function IfElseIfChain_render(__anchor, __block) {
 	const status = _$_.track('loading', __block, 'l79qh6');
@@ -271,11 +322,12 @@ function IfElseIfChain_render(__anchor, __block) {
 		};
 
 		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_8, true);
+		var ifs_4 = _$_.if_static(node_7, if_8, 0, status);
 
-		_$_.if(node_7, if_8, false, status);
 		_$_.hydrating && _$_.pop(div_8);
 	}
 
+	_$_.render(render_4, { a: _$_.UNINITIALIZED, _a: status, _b: ifs_4 });
 	_$_.append(__anchor, div_8);
 }
 

package/tests/hydration/compiled/client/mixed-control-flow.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div>`);
+var root_1 = _$_.template_el('div');
 
 function render(__prev) {
 	var __pattern = _$_.get(__prev._a);
@@ -19,7 +19,7 @@ function render(__prev) {
 	}
 }
 
-var root_2 = _$_.template(`<div>pending a`);
+var root_2 = _$_.template_el('div', null, 'pending a');
 
 function render_1(__prev) {
 	var __a = `pending pending-${_$_.get(__prev._a).id}`;
@@ -29,7 +29,7 @@ function render_1(__prev) {
 	}
 }
 
-var root_3 = _$_.template(`<div>`);
+var root_3 = _$_.template_el('div');
 
 function render_2(__prev) {
 	var __pattern_1 = _$_.get(__prev._a);
@@ -47,7 +47,7 @@ function render_2(__prev) {
 	}
 }
 
-var root_4 = _$_.template(`<div>pending b`);
+var root_4 = _$_.template_el('div', null, 'pending b');
 
 function render_3(__prev) {
 	var __a = `pending pending-${_$_.get(__prev._a).id}`;
@@ -115,7 +115,15 @@ function if_1(pattern) {
 	if (_$_.get(pattern).enabled) return consequent;
 }
 
-var root = _$_.template(`<section class=mixed-static>`);
+function render_4(__prev) {
+	var __a = if_1(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
+var root = _$_.template_el('section', ['class', 'mixed-static']);
 
 function MixedControlFlowStatic_render(__anchor, __block) {
 	const rows = [
@@ -131,10 +139,15 @@ function MixedControlFlowStatic_render(__anchor, __block) {
 			section,
 			() => rows,
 			(__anchor, pattern) => {
-				_$_.if(__anchor, if_1, true, pattern);
+				var ifs = _$_.if_static(__anchor, if_1, 3, pattern);
+
+				_$_.item({ a: _$_.UNINITIALIZED, _a: pattern, _b: ifs });
 			},
 			4,
-			(pattern) => pattern.id
+			(pattern) => pattern.id,
+			void 0,
+			void 0,
+			render_4
 		);
 
 		_$_.hydrating && _$_.pop(section);
@@ -145,9 +158,9 @@ function MixedControlFlowStatic_render(__anchor, __block) {
 
 MixedControlFlowStatic[_$_.$r] = MixedControlFlowStatic_render;
 
-var root_8 = _$_.template(`<p>`);
+var root_8 = _$_.template_el('p');
 
-function render_4(__prev) {
+function render_5(__prev) {
 	var __pattern_1_1 = _$_.get(__prev._a);
 	var __a = `A:${__pattern_1_1.label}`;
 
@@ -163,10 +176,10 @@ function render_4(__prev) {
 	}
 }
 
-var root_9 = _$_.template(`<p class=pending>pending a`);
-var root_10 = _$_.template(`<p>`);
+var root_9 = _$_.template_el('p', ['class', 'pending'], 'pending a');
+var root_10 = _$_.template_el('p');
 
-function render_5(__prev) {
+function render_6(__prev) {
 	var __pattern_1_2 = _$_.get(__prev._a);
 	var __a = `B:${__pattern_1_2.label}`;
 
@@ -182,7 +195,7 @@ function render_5(__prev) {
 	}
 }
 
-var root_11 = _$_.template(`<p class=pending>pending b`);
+var root_11 = _$_.template_el('p', ['class', 'pending'], 'pending b');
 
 function switch_case_0_1(__anchor, { a: mode, b: pattern_1 }) {
 	_$_.try(
@@ -190,7 +203,7 @@ function switch_case_0_1(__anchor, { a: mode, b: pattern_1 }) {
 		(__anchor) => {
 			var p = root_8();
 
-			_$_.render(render_4, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p });
+			_$_.render(render_5, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p });
 			_$_.append(__anchor, p);
 		},
 		null,
@@ -209,7 +222,7 @@ function switch_case_default_1(__anchor, { a: mode, b: pattern_1 }) {
 		(__anchor) => {
 			var p_2 = root_10();
 
-			_$_.render(render_5, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p_2 });
+			_$_.render(render_6, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p_2 });
 			_$_.append(__anchor, p_2);
 		},
 		null,
@@ -232,7 +245,7 @@ function switch_2({ a: mode, b: pattern_1 }) {
 	}
 }
 
-var root_7 = _$_.template(`<div class=mixed-reactive-list>`);
+var root_7 = _$_.template_el('div', ['class', 'mixed-reactive-list']);
 
 function consequent_1(__anchor, { a: show, b: items, c: mode }) {
 	var div_4 = root_7();
@@ -259,6 +272,15 @@ function if_2({ a: show, b: items, c: mode }) {
 }
 
 var root_6 = _$_.template(`<button class=toggle-show>Toggle Show</button><button class=toggle-mode>Toggle Mode</button><button class=add-item>Add Item</button><!>`, 1, 4);
+
+function render_7(__prev) {
+	var __a = if_2({ a: __prev._a, b: __prev._b, c: __prev._c });
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._d, __prev.a = __a);
+	}
+}
+
 var root_5 = _$_.template(`<!>`, 1, 1);
 
 function MixedControlFlowReactive_render(__anchor, __block) {
@@ -289,8 +311,16 @@ function MixedControlFlowReactive_render(__anchor, __block) {
 		};
 
 		var node = _$_.hydrating ? _$_.hydrate_sibling() : button_2.nextSibling;
+		var ifs_1 = _$_.if_static(node, if_2, 0, { a: show, b: items, c: mode });
+
+		_$_.render(render_7, {
+			a: _$_.UNINITIALIZED,
+			_a: show,
+			_b: items,
+			_c: mode,
+			_d: ifs_1
+		});
 
-		_$_.if(node, if_2, false, { a: show, b: items, c: mode });
 		_$_.append(__anchor, fragment_1);
 	}));
 
@@ -299,8 +329,8 @@ function MixedControlFlowReactive_render(__anchor, __block) {
 
 MixedControlFlowReactive[_$_.$r] = MixedControlFlowReactive_render;
 
-var root_14 = _$_.template(`<div>`);
-var root_15 = _$_.template(`<div class=unexpected>unexpected`);
+var root_14 = _$_.template_el('div');
+var root_15 = _$_.template_el('div', ['class', 'unexpected'], 'unexpected');
 
 function switch_case_0_2(__anchor, { a: state, b: row }) {
 	_$_.try(
@@ -379,7 +409,7 @@ function MixedControlFlowAsyncPending_render(__anchor, __block) {
 
 MixedControlFlowAsyncPending[_$_.$r] = MixedControlFlowAsyncPending_render;
 
-var root_16 = _$_.template(`<div class=resolved-row> `);
+var root_16 = _$_.template_el('div', ['class', 'resolved-row'], ' ');
 
 function AsyncRow_render(__anchor, __block, { label }) {
 	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '4nsq00');