ripple 0.4.2 → 0.4.3

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(`<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(`<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(`<div class=logged-in>Welcome back!`);
+var root_3 = _$_.template(`<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(`<div class=content>Content visible`);
 
 function consequent_3(__anchor, show) {
 	var div_4 = root_6();
@@ -80,11 +80,11 @@ 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);
 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);
 
@@ -107,8 +107,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(`<div class=on>ON`);
+var root_10 = _$_.template(`<div class=off>OFF`);
 
 function consequent_4(__anchor, isOn) {
 	var div_5 = root_9();
@@ -126,11 +126,11 @@ 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);
 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);
 
@@ -153,7 +153,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(`<span class=inner-content>Inner`);
 
 function consequent_5(__anchor, inner) {
 	var span = root_14();
@@ -165,14 +165,14 @@ 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(`<div class=outer-content>Outer`);
 
-function consequent_6(__anchor, { outer, inner }) {
+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);
 
 		_$_.if(node_5, if_6, false, inner);
 		_$_.hydrating && _$_.pop(div_7);
@@ -181,16 +181,16 @@ function consequent_6(__anchor, { outer, inner }) {
 	_$_.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);
 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);
 
@@ -210,7 +210,7 @@ function NestedIf_render(__anchor, __block) {
 
 		var node_4 = _$_.hydrating ? _$_.hydrate_sibling() : button_3.nextSibling;
 
-		_$_.if(node_4, if_7, false, { outer, inner });
+		_$_.if(node_4, if_7, false, { a: outer, b: inner });
 		_$_.append(__anchor, fragment_5);
 	}));
 
@@ -219,9 +219,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(`<div class=state>Loading...`);
+var root_17 = _$_.template(`<div class=state>Success!`);
+var root_18 = _$_.template(`<div class=state>Error occurred`);
 
 function consequent_7(__anchor, status) {
 	var div_9 = root_16();
@@ -245,10 +245,10 @@ 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 IfElseIfChain_render(__anchor, __block) {
-	const status = _$_.track('loading', __block, '4c69c94a');
+	const status = _$_.track('loading', __block, 'l79qh6');
 	var div_8 = root_15();
 
 	{
@@ -270,7 +270,7 @@ 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);
 
 		_$_.if(node_7, if_8, false, status);
 		_$_.hydrating && _$_.pop(div_8);

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

@@ -1,59 +1,59 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div></div>`, 0);
+var root_1 = _$_.template(`<div>`);
 
 function render(__prev) {
-	var __pattern = _$_.get(__prev._pattern);
+	var __pattern = _$_.get(__prev._a);
 	var __a = `A-${__pattern.id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._div, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 
 	var __b = `row row-${__pattern.id} kind-a`;
 
 	if (__prev.b !== __b) {
-		_$_.set_class(__prev._div, __prev.b = __b, void 0, true);
+		_$_.set_class(__prev._b, __prev.b = __b);
 	}
 }
 
-var root_2 = _$_.template(`<div>pending a</div>`, 0);
+var root_2 = _$_.template(`<div>pending a`);
 
 function render_1(__prev) {
-	var __a = `pending pending-${_$_.get(__prev._pattern).id}`;
+	var __a = `pending pending-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_1, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
-var root_3 = _$_.template(`<div></div>`, 0);
+var root_3 = _$_.template(`<div>`);
 
 function render_2(__prev) {
-	var __pattern_1 = _$_.get(__prev._pattern);
+	var __pattern_1 = _$_.get(__prev._a);
 	var __a = `B-${__pattern_1.id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._div_2, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 
 	var __b = `row row-${__pattern_1.id} kind-b`;
 
 	if (__prev.b !== __b) {
-		_$_.set_class(__prev._div_2, __prev.b = __b, void 0, true);
+		_$_.set_class(__prev._b, __prev.b = __b);
 	}
 }
 
-var root_4 = _$_.template(`<div>pending b</div>`, 0);
+var root_4 = _$_.template(`<div>pending b`);
 
 function render_3(__prev) {
-	var __a = `pending pending-${_$_.get(__prev._pattern).id}`;
+	var __a = `pending pending-${_$_.get(__prev._a).id}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_class(__prev._div_3, __prev.a = __a, void 0, true);
+		_$_.set_class(__prev._b, __prev.a = __a);
 	}
 }
 
@@ -63,14 +63,14 @@ function switch_case_0(__anchor, pattern) {
 		(__anchor) => {
 			var div = root_1();
 
-			_$_.render(render, { a: '', b: _$_.UNINITIALIZED, _pattern: pattern, _div: div });
+			_$_.render(render, { a: '', b: _$_.UNINITIALIZED, _a: pattern, _b: div });
 			_$_.append(__anchor, div);
 		},
 		null,
 		(__anchor) => {
 			var div_1 = root_2();
 
-			_$_.render(render_1, { a: _$_.UNINITIALIZED, _pattern: pattern, _div_1: div_1 });
+			_$_.render(render_1, { a: _$_.UNINITIALIZED, _a: pattern, _b: div_1 });
 			_$_.append(__anchor, div_1);
 		},
 		true
@@ -83,20 +83,14 @@ function switch_case_default(__anchor, pattern) {
 		(__anchor) => {
 			var div_2 = root_3();
 
-			_$_.render(render_2, {
-				a: '',
-				b: _$_.UNINITIALIZED,
-				_pattern: pattern,
-				_div_2: div_2
-			});
-
+			_$_.render(render_2, { a: '', b: _$_.UNINITIALIZED, _a: pattern, _b: div_2 });
 			_$_.append(__anchor, div_2);
 		},
 		null,
 		(__anchor) => {
 			var div_3 = root_4();
 
-			_$_.render(render_3, { a: _$_.UNINITIALIZED, _pattern: pattern, _div_3: div_3 });
+			_$_.render(render_3, { a: _$_.UNINITIALIZED, _a: pattern, _b: div_3 });
 			_$_.append(__anchor, div_3);
 		},
 		true
@@ -121,7 +115,7 @@ function if_1(pattern) {
 	if (_$_.get(pattern).enabled) return consequent;
 }
 
-var root = _$_.template(`<section class="mixed-static"></section>`, 0);
+var root = _$_.template(`<section class=mixed-static>`);
 
 function MixedControlFlowStatic_render(__anchor, __block) {
 	const rows = [
@@ -151,52 +145,52 @@ function MixedControlFlowStatic_render(__anchor, __block) {
 
 MixedControlFlowStatic[_$_.$r] = MixedControlFlowStatic_render;
 
-var root_8 = _$_.template(`<p></p>`, 0);
+var root_8 = _$_.template(`<p>`);
 
 function render_4(__prev) {
-	var __pattern_1_1 = _$_.get(__prev._pattern_1);
+	var __pattern_1_1 = _$_.get(__prev._a);
 	var __a = `A:${__pattern_1_1.label}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._p, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 
 	var __b = `item item-${__pattern_1_1.id}`;
 
 	if (__prev.b !== __b) {
-		_$_.set_class(__prev._p, __prev.b = __b, void 0, true);
+		_$_.set_class(__prev._b, __prev.b = __b);
 	}
 }
 
-var root_9 = _$_.template(`<p class="pending">pending a</p>`, 0);
-var root_10 = _$_.template(`<p></p>`, 0);
+var root_9 = _$_.template(`<p class=pending>pending a`);
+var root_10 = _$_.template(`<p>`);
 
 function render_5(__prev) {
-	var __pattern_1_2 = _$_.get(__prev._pattern_1);
+	var __pattern_1_2 = _$_.get(__prev._a);
 	var __a = `B:${__pattern_1_2.label}`;
 
 	if (__prev.a !== __a) {
-		_$_.set_text_content(__prev._p_2, __a, __prev.a);
+		_$_.set_text_content(__prev._b, __a, __prev.a);
 		__prev.a = __a;
 	}
 
 	var __b = `item item-${__pattern_1_2.id}`;
 
 	if (__prev.b !== __b) {
-		_$_.set_class(__prev._p_2, __prev.b = __b, void 0, true);
+		_$_.set_class(__prev._b, __prev.b = __b);
 	}
 }
 
-var root_11 = _$_.template(`<p class="pending">pending b</p>`, 0);
+var root_11 = _$_.template(`<p class=pending>pending b`);
 
-function switch_case_0_1(__anchor, { mode, pattern_1 }) {
+function switch_case_0_1(__anchor, { a: mode, b: pattern_1 }) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
 			var p = root_8();
 
-			_$_.render(render_4, { a: '', b: _$_.UNINITIALIZED, _pattern_1: pattern_1, _p: p });
+			_$_.render(render_4, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p });
 			_$_.append(__anchor, p);
 		},
 		null,
@@ -209,19 +203,13 @@ function switch_case_0_1(__anchor, { mode, pattern_1 }) {
 	);
 }
 
-function switch_case_default_1(__anchor, { mode, pattern_1 }) {
+function switch_case_default_1(__anchor, { a: mode, b: pattern_1 }) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
 			var p_2 = root_10();
 
-			_$_.render(render_5, {
-				a: '',
-				b: _$_.UNINITIALIZED,
-				_pattern_1: pattern_1,
-				_p_2: p_2
-			});
-
+			_$_.render(render_5, { a: '', b: _$_.UNINITIALIZED, _a: pattern_1, _b: p_2 });
 			_$_.append(__anchor, p_2);
 		},
 		null,
@@ -234,7 +222,7 @@ function switch_case_default_1(__anchor, { mode, pattern_1 }) {
 	);
 }
 
-function switch_2({ mode, pattern_1 }) {
+function switch_2({ a: mode, b: pattern_1 }) {
 	switch (mode.value) {
 		case 'a':
 			return switch_case_0_1;
@@ -244,9 +232,9 @@ function switch_2({ mode, pattern_1 }) {
 	}
 }
 
-var root_7 = _$_.template(`<div class="mixed-reactive-list"></div>`, 0);
+var root_7 = _$_.template(`<div class=mixed-reactive-list>`);
 
-function consequent_1(__anchor, { show, items, mode }) {
+function consequent_1(__anchor, { a: show, b: items, c: mode }) {
 	var div_4 = root_7();
 
 	{
@@ -254,7 +242,7 @@ function consequent_1(__anchor, { show, items, mode }) {
 			div_4,
 			() => items.value,
 			(__anchor, pattern_1) => {
-				_$_.switch(__anchor, switch_2, true, { mode, pattern_1 });
+				_$_.switch(__anchor, switch_2, true, { a: mode, b: pattern_1 });
 			},
 			4,
 			(pattern_1) => pattern_1.id
@@ -266,17 +254,17 @@ function consequent_1(__anchor, { show, items, mode }) {
 	_$_.append(__anchor, div_4);
 }
 
-function if_2({ show, items, mode }) {
+function if_2({ a: show, b: items, c: mode }) {
 	if (show.value) return consequent_1;
 }
 
-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);
+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);
 var root_5 = _$_.template(`<!>`, 1, 1);
 
 function MixedControlFlowReactive_render(__anchor, __block) {
-	const show = _$_.track(true, __block, '5ae53d26');
-	const mode = _$_.track('a', __block, '5b53eda2');
-	const items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], __block, '7890dad6');
+	const show = _$_.track(true, __block, 'p7xgkm');
+	const mode = _$_.track('a', __block, 'pc8xwi');
+	const items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], __block, 'xgaqxi');
 	var fragment = root_5();
 	var node_1 = _$_.first_child_frag(fragment);
 
@@ -302,7 +290,7 @@ function MixedControlFlowReactive_render(__anchor, __block) {
 
 		var node = _$_.hydrating ? _$_.hydrate_sibling() : button_2.nextSibling;
 
-		_$_.if(node, if_2, false, { show, items, mode });
+		_$_.if(node, if_2, false, { a: show, b: items, c: mode });
 		_$_.append(__anchor, fragment_1);
 	}));
 
@@ -311,10 +299,10 @@ function MixedControlFlowReactive_render(__anchor, __block) {
 
 MixedControlFlowReactive[_$_.$r] = MixedControlFlowReactive_render;
 
-var root_14 = _$_.template(`<div></div>`, 0);
-var root_15 = _$_.template(`<div class="unexpected">unexpected</div>`, 0);
+var root_14 = _$_.template(`<div>`);
+var root_15 = _$_.template(`<div class=unexpected>unexpected`);
 
-function switch_case_0_2(__anchor, { state, row }) {
+function switch_case_0_2(__anchor, { a: state, b: row }) {
 	_$_.try(
 		__anchor,
 		(__anchor) => {
@@ -324,7 +312,7 @@ function switch_case_0_2(__anchor, { state, row }) {
 		(__anchor) => {
 			var div_6 = root_14();
 
-			_$_.set_class(div_6, `pending-row pending-row-${row}`, void 0, true);
+			_$_.set_class(div_6, `pending-row pending-row-${row}`);
 
 			{
 				div_6.textContent = `pending ${row}`;
@@ -336,13 +324,13 @@ function switch_case_0_2(__anchor, { state, row }) {
 	);
 }
 
-function switch_case_default_2(__anchor, { state, row }) {
+function switch_case_default_2(__anchor, { a: state, b: row }) {
 	var div_7 = root_15();
 
 	_$_.append(__anchor, div_7);
 }
 
-function switch_3({ state, row }) {
+function switch_3({ a: state, b: row }) {
 	switch (state) {
 		case 'slow':
 			return switch_case_0_2;
@@ -352,15 +340,15 @@ function switch_3({ state, row }) {
 	}
 }
 
-function consequent_2(__anchor, { row, state }) {
-	_$_.switch(__anchor, switch_3, true, { state, row });
+function consequent_2(__anchor, { a: row, b: state }) {
+	_$_.switch(__anchor, switch_3, true, { a: state, b: row });
 }
 
-function if_3({ row, state }) {
+function if_3({ a: row, b: state }) {
 	if (row === 1) return consequent_2;
 }
 
-var root_13 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
+var root_13 = _$_.template(`<div class=before>before</div><!>`, 1, 2);
 var root_12 = _$_.template(`<!>`, 1, 1);
 
 function MixedControlFlowAsyncPending_render(__anchor, __block) {
@@ -378,7 +366,7 @@ function MixedControlFlowAsyncPending_render(__anchor, __block) {
 			node_2,
 			() => rows,
 			(__anchor, row) => {
-				_$_.if(__anchor, if_3, true, { row, state });
+				_$_.if(__anchor, if_3, true, { a: row, b: state });
 			},
 			0
 		);
@@ -391,10 +379,10 @@ function MixedControlFlowAsyncPending_render(__anchor, __block) {
 
 MixedControlFlowAsyncPending[_$_.$r] = MixedControlFlowAsyncPending_render;
 
-var root_16 = _$_.template(`<div class="resolved-row"> </div>`, 0);
+var root_16 = _$_.template(`<div class=resolved-row> `);
 
 function AsyncRow_render(__anchor, __block, { label }) {
-	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '10cc79a0');
+	const value = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block, '4nsq00');
 	var div_8 = root_16();
 
 	{