ripple 0.4.2 → 0.4.4

package/tests/hydration/compiled/client/if-fragment-controlflow.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_2 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_1 = _$_.template(`<!><span class="after">after</span>`, 1, 2);
+var root_2 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_1 = _$_.template(`<!><span class=after>after`, 1, 2);
 
-function consequent(__anchor, { hasLoaded, muzes }) {
+function consequent(__anchor, { a: hasLoaded, b: muzes }) {
 	var fragment = root_1();
 	var node_1 = _$_.first_child_frag(fragment);
 
@@ -31,11 +31,11 @@ function consequent(__anchor, { hasLoaded, muzes }) {
 	_$_.append(__anchor, fragment);
 }
 
-function if_1({ hasLoaded, muzes }) {
+function if_1({ a: hasLoaded, b: muzes }) {
 	if (hasLoaded) return consequent;
 }
 
-var root = _$_.template(`<div class="feed-c"><!></div>`, 0);
+var root = _$_.template(`<div class=feed-c><!>`);
 
 function IfFragmentForElement_render(__anchor, __block) {
 	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
@@ -45,7 +45,7 @@ function IfFragmentForElement_render(__anchor, __block) {
 	{
 		var node = _$_.hydrating ? _$_.hydrate_child() : div.firstChild;
 
-		_$_.if(node, if_1, false, { hasLoaded, muzes });
+		_$_.if(node, if_1, false, { a: hasLoaded, b: muzes });
 		_$_.hydrating && _$_.pop(div);
 	}
 
@@ -54,8 +54,8 @@ function IfFragmentForElement_render(__anchor, __block) {
 
 IfFragmentForElement[_$_.$r] = IfFragmentForElement_render;
 
-var root_5 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_6 = _$_.template(`<span class="has-items">has items</span>`, 0);
+var root_5 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_6 = _$_.template_el('span', ['class', 'has-items'], 'has items');
 
 function consequent_1(__anchor, muzes) {
 	var span = root_6();
@@ -67,7 +67,7 @@ function if_2(muzes) {
 	if (muzes.length > 0) return consequent_1;
 }
 
-var root_7 = _$_.template(`<span class="empty">empty</span>`, 0);
+var root_7 = _$_.template_el('span', ['class', 'empty'], 'empty');
 
 function consequent_2(__anchor, muzes) {
 	var span_1 = root_7();
@@ -81,7 +81,21 @@ function if_3(muzes) {
 
 var root_4 = _$_.template(`<!><!><!>`, 1, 3);
 
-function consequent_3(__anchor, { hasLoaded, muzes }) {
+function render(__prev) {
+	var __a = if_2(__prev._a);
+
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+
+	var __b = if_3(__prev._a);
+
+	if (__prev.b !== __b) {
+		_$_.if_update(__prev._c, __prev.b = __b);
+	}
+}
+
+function consequent_3(__anchor, { a: hasLoaded, b: muzes }) {
 	var fragment_1 = root_4();
 	var node_3 = _$_.first_child_frag(fragment_1);
 
@@ -105,20 +119,26 @@ function consequent_3(__anchor, { hasLoaded, muzes }) {
 	);
 
 	var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : node_3.nextSibling;
-
-	_$_.if(node_4, if_2, false, muzes);
-
+	var ifs = _$_.if_static(node_4, if_2, 0, muzes);
 	var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : node_4.nextSibling;
+	var ifs_1 = _$_.if_static(node_5, if_3, 0, muzes);
+
+	_$_.render(render, {
+		a: _$_.UNINITIALIZED,
+		b: _$_.UNINITIALIZED,
+		_a: muzes,
+		_b: ifs,
+		_c: ifs_1
+	});
 
-	_$_.if(node_5, if_3, false, muzes);
 	_$_.append(__anchor, fragment_1);
 }
 
-function if_4({ hasLoaded, muzes }) {
+function if_4({ a: hasLoaded, b: muzes }) {
 	if (hasLoaded) return consequent_3;
 }
 
-var root_3 = _$_.template(`<div class="feed"><!></div>`, 0);
+var root_3 = _$_.template(`<div class=feed><!>`);
 
 function IfFragmentForIfIf_render(__anchor, __block) {
 	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
@@ -128,7 +148,7 @@ function IfFragmentForIfIf_render(__anchor, __block) {
 	{
 		var node_2 = _$_.hydrating ? _$_.hydrate_child() : div_1.firstChild;
 
-		_$_.if(node_2, if_4, false, { hasLoaded, muzes });
+		_$_.if(node_2, if_4, false, { a: hasLoaded, b: muzes });
 		_$_.hydrating && _$_.pop(div_1);
 	}
 
@@ -137,7 +157,7 @@ function IfFragmentForIfIf_render(__anchor, __block) {
 
 IfFragmentForIfIf[_$_.$r] = IfFragmentForIfIf_render;
 
-var root_9 = _$_.template(`<p class="muze">b</p><p class="muze">c</p>`, 1, 2);
+var root_9 = _$_.template(`<p class=muze>b</p><p class=muze>c`, 1, 2);
 
 function consequent_4(__anchor, hasLoaded) {
 	var fragment_2 = root_9();
@@ -150,7 +170,7 @@ function if_5(hasLoaded) {
 	if (hasLoaded) return consequent_4;
 }
 
-var root_8 = _$_.template(`<div class="feed-b"><!></div>`, 0);
+var root_8 = _$_.template(`<div class=feed-b><!>`);
 
 function IfFragmentElements_render(__anchor, __block) {
 	const hasLoaded = true;
@@ -168,8 +188,8 @@ function IfFragmentElements_render(__anchor, __block) {
 
 IfFragmentElements[_$_.$r] = IfFragmentElements_render;
 
-var root_12 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_11 = _$_.template(`<!><span class="after">after</span>`, 1, 2);
+var root_12 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_11 = _$_.template(`<!><span class=after>after`, 1, 2);
 var root_10 = _$_.template(`<!>`, 1, 1);
 
 function ComponentBodyFragmentControlFlow_render(__anchor, __block) {
@@ -209,8 +229,8 @@ function ComponentBodyFragmentControlFlow_render(__anchor, __block) {
 
 ComponentBodyFragmentControlFlow[_$_.$r] = ComponentBodyFragmentControlFlow_render;
 
-var root_14 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_15 = _$_.template(`<!><span class="after">after</span>`, 1, 2);
+var root_14 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_15 = _$_.template(`<!><span class=after>after`, 1, 2);
 var root_13 = _$_.template(`<!>`, 1, 1);
 
 function ComponentBodyCodeBlockControlFlow_render(__anchor, __block) {
@@ -254,10 +274,10 @@ function ComponentBodyCodeBlockControlFlow_render(__anchor, __block) {
 
 ComponentBodyCodeBlockControlFlow[_$_.$r] = ComponentBodyCodeBlockControlFlow_render;
 
-var root_17 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_18 = _$_.template(`<!><span class="after">after</span>`, 1, 2);
+var root_17 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_18 = _$_.template(`<!><span class=after>after`, 1, 2);
 
-function consequent_5(__anchor, { hasLoaded, muzes }) {
+function consequent_5(__anchor, { a: hasLoaded, b: muzes }) {
 	var fragment_7 = root_18();
 	var expression_6 = _$_.first_child_frag(fragment_7);
 
@@ -288,11 +308,11 @@ function consequent_5(__anchor, { hasLoaded, muzes }) {
 	_$_.append(__anchor, fragment_7);
 }
 
-function if_6({ hasLoaded, muzes }) {
+function if_6({ a: hasLoaded, b: muzes }) {
 	if (hasLoaded) return consequent_5;
 }
 
-var root_16 = _$_.template(`<div class="feed-f"><!></div>`, 0);
+var root_16 = _$_.template(`<div class=feed-f><!>`);
 
 function IfCodeBlockControlFlow_render(__anchor, __block) {
 	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
@@ -302,7 +322,7 @@ function IfCodeBlockControlFlow_render(__anchor, __block) {
 	{
 		var node_10 = _$_.hydrating ? _$_.hydrate_child() : div_3.firstChild;
 
-		_$_.if(node_10, if_6, false, { hasLoaded, muzes });
+		_$_.if(node_10, if_6, false, { a: hasLoaded, b: muzes });
 		_$_.hydrating && _$_.pop(div_3);
 	}
 
@@ -311,17 +331,17 @@ function IfCodeBlockControlFlow_render(__anchor, __block) {
 
 IfCodeBlockControlFlow[_$_.$r] = IfCodeBlockControlFlow_render;
 
-var root_20 = _$_.template(`<span class="loading">loading</span>`, 0);
-var root_22 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_21 = _$_.template(`<!><span class="after">after</span>`, 1, 2);
+var root_20 = _$_.template_el('span', ['class', 'loading'], 'loading');
+var root_22 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_21 = _$_.template(`<!><span class=after>after`, 1, 2);
 
-function consequent_6(__anchor, { hasLoaded, muzes }) {
+function consequent_6(__anchor, { a: hasLoaded, b: muzes }) {
 	var span_2 = root_20();
 
 	_$_.append(__anchor, span_2);
 }
 
-function alternate(__anchor, { hasLoaded, muzes }) {
+function alternate(__anchor, { a: hasLoaded, b: muzes }) {
 	var fragment_8 = root_21();
 	var node_12 = _$_.first_child_frag(fragment_8);
 
@@ -348,11 +368,11 @@ function alternate(__anchor, { hasLoaded, muzes }) {
 	_$_.append(__anchor, fragment_8);
 }
 
-function if_7({ hasLoaded, muzes }) {
+function if_7({ a: hasLoaded, b: muzes }) {
 	if (hasLoaded) return consequent_6; else return alternate;
 }
 
-var root_19 = _$_.template(`<div class="feed-d"><!></div>`, 0);
+var root_19 = _$_.template(`<div class=feed-d><!>`);
 
 function IfElseFragment_render(__anchor, __block) {
 	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
@@ -362,7 +382,7 @@ function IfElseFragment_render(__anchor, __block) {
 	{
 		var node_11 = _$_.hydrating ? _$_.hydrate_child() : div_4.firstChild;
 
-		_$_.if(node_11, if_7, false, { hasLoaded, muzes });
+		_$_.if(node_11, if_7, false, { a: hasLoaded, b: muzes });
 		_$_.hydrating && _$_.pop(div_4);
 	}
 
@@ -371,10 +391,10 @@ function IfElseFragment_render(__anchor, __block) {
 
 IfElseFragment[_$_.$r] = IfElseFragment_render;
 
-var root_25 = _$_.template(`<p class="muze"> </p>`, 0);
-var root_24 = _$_.template(`<section><!><span class="after">after</span></section>`, 0);
+var root_25 = _$_.template_el('p', ['class', 'muze'], ' ');
+var root_24 = _$_.template(`<section><span class=after>after`);
 
-function consequent_7(__anchor, { hasLoaded, muzes }) {
+function consequent_7(__anchor, { a: hasLoaded, b: muzes }) {
 	var section = root_24();
 
 	{
@@ -405,11 +425,11 @@ function consequent_7(__anchor, { hasLoaded, muzes }) {
 	_$_.append(__anchor, section);
 }
 
-function if_8({ hasLoaded, muzes }) {
+function if_8({ a: hasLoaded, b: muzes }) {
 	if (hasLoaded) return consequent_7;
 }
 
-var root_23 = _$_.template(`<div class="feed-e"><!></div>`, 0);
+var root_23 = _$_.template(`<div class=feed-e><!>`);
 
 function IfDivFragment_render(__anchor, __block) {
 	const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
@@ -419,7 +439,7 @@ function IfDivFragment_render(__anchor, __block) {
 	{
 		var node_13 = _$_.hydrating ? _$_.hydrate_child() : div_5.firstChild;
 
-		_$_.if(node_13, if_8, false, { hasLoaded, muzes });
+		_$_.if(node_13, if_8, false, { a: hasLoaded, b: muzes });
 		_$_.hydrating && _$_.pop(div_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</div>`, 0);
+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</div>`, 0);
+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!</div>`, 0);
-var root_3 = _$_.template(`<div class="logged-out">Please log in</div>`, 0);
+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</div>`, 0);
+var root_6 = _$_.template_el('div', ['class', 'content'], 'Content visible');
 
 function consequent_3(__anchor, show) {
 	var div_4 = root_6();
@@ -80,11 +80,20 @@ function if_4(show) {
 	if (show.value) return consequent_3;
 }
 
-var root_5 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+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) {
-	const show = _$_.track(true, __block, '19a16ff0');
+	const show = _$_.track(true, __block, '740m40');
 	var fragment = root_4();
 	var node_1 = _$_.first_child_frag(fragment);
 
@@ -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</div>`, 0);
-var root_10 = _$_.template(`<div class="off">OFF</div>`, 0);
+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();
@@ -126,11 +136,20 @@ function if_5(isOn) {
 	if (isOn.value) return consequent_4; else return alternate_1;
 }
 
-var root_8 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+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) {
-	const isOn = _$_.track(false, __block, '41177f39');
+	const isOn = _$_.track(false, __block, 'i26m2h');
 	var fragment_2 = root_7();
 	var node_3 = _$_.first_child_frag(fragment_2);
 
@@ -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</span>`, 0);
+var root_14 = _$_.template_el('span', ['class', 'inner-content'], 'Inner');
 
 function consequent_5(__anchor, inner) {
 	var span = root_14();
@@ -165,32 +185,50 @@ function if_6(inner) {
 	if (inner.value) return consequent_5;
 }
 
-var root_13 = _$_.template(`<div class="outer-content">Outer</div>`, 0);
+var root_13 = _$_.template_el('div', ['class', 'outer-content'], 'Outer');
+
+function render_2(__prev) {
+	var __a = if_6(__prev._a);
 
-function consequent_6(__anchor, { outer, inner }) {
+	if (__prev.a !== __a) {
+		_$_.if_update(__prev._b, __prev.a = __a);
+	}
+}
+
+function consequent_6(__anchor, { a: outer, b: inner }) {
 	var div_7 = root_13();
 
 	{
 		var expression = _$_.hydrating ? _$_.hydrate_child() : div_7.firstChild;
-		var node_5 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_7);
+		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);
 }
 
-function if_7({ outer, inner }) {
+function if_7({ a: outer, b: inner }) {
 	if (outer.value) return consequent_6;
 }
 
-var root_12 = _$_.template(`<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!>`, 1, 3);
+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) {
-	const outer = _$_.track(true, __block, '7894e1df');
-	const inner = _$_.track(true, __block, 'f21b8c26');
+	const outer = _$_.track(true, __block, 'xggelb');
+	const inner = _$_.track(true, __block, '1v6cfmu');
 	var fragment_4 = root_11();
 	var node_6 = _$_.first_child_frag(fragment_4);
 
@@ -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, { outer, 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...</div>`, 0);
-var root_17 = _$_.template(`<div class="state">Success!</div>`, 0);
-var root_18 = _$_.template(`<div class="state">Error occurred</div>`, 0);
+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,10 +284,18 @@ 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</button></div>`, 0);
+var root_15 = _$_.template(`<div><button class=success>Success</button><button class=error>Error</button><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, '4c69c94a');
+	const status = _$_.track('loading', __block, 'l79qh6');
 	var div_8 = root_15();
 
 	{
@@ -270,12 +317,13 @@ function IfElseIfChain_render(__anchor, __block) {
 			status.value = 'loading';
 		};
 
-		var node_7 = _$_.hydrating ? _$_.hydrate_sibling() : _$_.append_into(div_8);
+		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);
 }