ripple 0.3.84 → 0.3.85

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

@@ -3,13 +3,12 @@ import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
 var root = _$_.template(`<div class="container"><h1>Main Content</h1><!></div>`, 0);
-var root_4 = _$_.template(`<div class="portal-content">Portal is visible</div>`, 0);
-var root_3 = _$_.template(`<!>`, 1, 1);
+var root_3 = _$_.template(`<div class="portal-content">Portal is visible</div>`, 0);
 var root_2 = _$_.template(`<div class="container"><button class="toggle">Toggle</button><!></div>`, 0);
-var root_6 = _$_.template(`<div class="portal-content">Modal content</div>`, 0);
-var root_5 = _$_.template(`<div><div class="main-content">Main page content</div><!><div class="footer">Footer</div></div>`, 0);
-var root_8 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
-var root_7 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div><!></div>`, 0);
+var root_5 = _$_.template(`<div class="portal-content">Modal content</div>`, 0);
+var root_4 = _$_.template(`<div><div class="main-content">Main page content</div><!><div class="footer">Footer</div></div>`, 0);
+var root_7 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
+var root_6 = _$_.template(`<div class="outer"><div class="inner"><span>Nested content</span></div><!></div>`, 0);
 
 import { Portal, track } from 'ripple';
 
@@ -54,22 +53,17 @@ export function ConditionalPortal() {
 
 			{
 				var consequent = (__anchor) => {
-					var fragment = root_3();
-					var node_2 = _$_.first_child_frag(fragment);
-
-					_$_.render_component(Portal, node_2, {
+					_$_.render_component(Portal, __anchor, {
 						get target() {
 							return typeof document !== 'undefined' ? document.body : null;
 						},
 
 						children: _$_.tsrx_element((__anchor, __block) => {
-							var div_4 = root_4();
+							var div_4 = root_3();
 
 							_$_.append(__anchor, div_4);
 						})
 					});
-
-					_$_.append(__anchor, fragment);
 				};
 
 				_$_.if(node_1, (__render) => {
@@ -86,19 +80,19 @@ export function ConditionalPortal() {
 
 export function PortalWithMainContent() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var div_5 = root_5();
+		var div_5 = root_4();
 
 		{
 			var div_6 = _$_.child(div_5);
-			var node_3 = _$_.sibling(div_6);
+			var node_2 = _$_.sibling(div_6);
 
-			_$_.render_component(Portal, node_3, {
+			_$_.render_component(Portal, node_2, {
 				get target() {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
 				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_7 = root_6();
+					var div_7 = root_5();
 
 					_$_.append(__anchor, div_7);
 				})
@@ -113,22 +107,22 @@ export function PortalWithMainContent() {
 
 export function NestedContentWithPortal() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var div_8 = root_7();
+		var div_8 = root_6();
 
 		{
 			var div_9 = _$_.child(div_8);
 
 			_$_.pop(div_9);
 
-			var node_4 = _$_.sibling(div_9);
+			var node_3 = _$_.sibling(div_9);
 
-			_$_.render_component(Portal, node_4, {
+			_$_.render_component(Portal, node_3, {
 				get target() {
 					return typeof document !== 'undefined' ? document.body : null;
 				},
 
 				children: _$_.tsrx_element((__anchor, __block) => {
-					var div_10 = root_8();
+					var div_10 = root_7();
 
 					_$_.append(__anchor, div_10);
 				})

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

@@ -3,10 +3,9 @@ import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="count"> </div>`, 0);
 var root_1 = _$_.template(`<div><span class="count"> </span></div>`, 0);
-var root_2 = _$_.template(`<!>`, 1, 1);
-var root_3 = _$_.template(`<div class="sum"> </div>`, 0);
-var root_4 = _$_.template(`<div class="multiple-tracked"><div class="x"> </div><div class="y"> </div><div class="z"> </div></div>`, 0);
-var root_5 = _$_.template(`<div class="name"> </div>`, 0);
+var root_2 = _$_.template(`<div class="sum"> </div>`, 0);
+var root_3 = _$_.template(`<div class="multiple-tracked"><div class="x"> </div><div class="y"> </div><div class="z"> </div></div>`, 0);
+var root_4 = _$_.template(`<div class="name"> </div>`, 0);
 
 import { track } from 'ripple';
 
@@ -48,11 +47,7 @@ export function CounterWithInitial(props) {
 
 export function CounterWrapper() {
 	return _$_.tsrx_element((__anchor, __block) => {
-		var fragment = root_2();
-		var node = _$_.first_child_frag(fragment);
-
-		_$_.render_component(CounterWithInitial, node, { initial: 5 });
-		_$_.append(__anchor, fragment);
+		_$_.render_component(CounterWithInitial, __anchor, { initial: 5 });
 	});
 }
 
@@ -61,7 +56,7 @@ export function ComputedValues() {
 		let lazy_2 = _$_.track(2, __block, 'b78281db');
 		let lazy_3 = _$_.track(3, __block, 'a0cf6c6d');
 		const sum = () => lazy_2.value + lazy_3.value;
-		var div_3 = root_3();
+		var div_3 = root_2();
 
 		{
 			var expression_2 = _$_.child(div_3);
@@ -79,7 +74,7 @@ export function MultipleTracked() {
 		let lazy_4 = _$_.track(10, __block, '843522de');
 		let lazy_5 = _$_.track(20, __block, '1308996d');
 		let lazy_6 = _$_.track(30, __block, '048c3fd0');
-		var div_4 = root_4();
+		var div_4 = root_3();
 
 		{
 			var div_5 = _$_.child(div_4);
@@ -119,7 +114,7 @@ export function DerivedState() {
 		let lazy_7 = _$_.track('John', __block, '6015eeca');
 		let lazy_8 = _$_.track('Doe', __block, '4fa9a20e');
 		const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
-		var div_8 = root_5();
+		var div_8 = root_4();
 
 		{
 			var expression_6 = _$_.child(div_8);

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

@@ -1,120 +1,118 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
-var root_1 = _$_.template(`<div class="status-success">Success</div>`, 0);
-var root_2 = _$_.template(`<div class="status-error">Error</div>`, 0);
-var root_3 = _$_.template(`<div class="status-unknown">Unknown</div>`, 0);
-var root = _$_.template(`<!>`, 1, 1);
-var root_6 = _$_.template(`<div class="case-a">Case A</div>`, 0);
-var root_7 = _$_.template(`<div class="case-b">Case B</div>`, 0);
-var root_8 = _$_.template(`<div class="case-c">Case C</div>`, 0);
-var root_5 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
-var root_4 = _$_.template(`<!>`, 1, 1);
-var root_10 = _$_.template(`<div class="case-1-2">1 or 2</div>`, 0);
-var root_11 = _$_.template(`<div class="case-other">Other</div>`, 0);
-var root_9 = _$_.template(`<!>`, 1, 1);
-var root_14 = _$_.template(`<div class="level-1">Level 1</div>`, 0);
-var root_15 = _$_.template(`<div class="level-2">Level 2</div>`, 0);
-var root_16 = _$_.template(`<div class="level-3">Level 3</div>`, 0);
-var root_13 = _$_.template(`<button class="level-toggle">Toggle Level</button><!>`, 1, 2);
-var root_12 = _$_.template(`<!>`, 1, 1);
-var root_19 = _$_.template(`<div class="block-1">Block 1</div>`, 0);
-var root_20 = _$_.template(`<div class="block-2">Block 2</div>`, 0);
-var root_21 = _$_.template(`<div class="block-3">Block 3</div>`, 0);
-var root_18 = _$_.template(`<button class="block-toggle">Toggle</button><!>`, 1, 2);
-var root_17 = _$_.template(`<!>`, 1, 1);
-var root_24 = _$_.template(`<div class="nobreak-1">NoBreak 1</div>`, 0);
-var root_25 = _$_.template(`<div class="nobreak-2">NoBreak 2</div>`, 0);
-var root_26 = _$_.template(`<div class="nobreak-3">NoBreak 3</div>`, 0);
-var root_23 = _$_.template(`<button class="nobreak-toggle">Toggle</button><!>`, 1, 2);
-var root_22 = _$_.template(`<!>`, 1, 1);
+var root = _$_.template(`<div class="status-success">Success</div>`, 0);
+var root_1 = _$_.template(`<div class="status-error">Error</div>`, 0);
+var root_2 = _$_.template(`<div class="status-unknown">Unknown</div>`, 0);
+var root_5 = _$_.template(`<div class="case-a">Case A</div>`, 0);
+var root_6 = _$_.template(`<div class="case-b">Case B</div>`, 0);
+var root_7 = _$_.template(`<div class="case-c">Case C</div>`, 0);
+var root_4 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1, 2);
+var root_3 = _$_.template(`<!>`, 1, 1);
+var root_8 = _$_.template(`<div class="case-1-2">1 or 2</div>`, 0);
+var root_9 = _$_.template(`<div class="case-other">Other</div>`, 0);
+var root_12 = _$_.template(`<div class="level-1">Level 1</div>`, 0);
+var root_13 = _$_.template(`<div class="level-2">Level 2</div>`, 0);
+var root_14 = _$_.template(`<div class="level-3">Level 3</div>`, 0);
+var root_11 = _$_.template(`<button class="level-toggle">Toggle Level</button><!>`, 1, 2);
+var root_10 = _$_.template(`<!>`, 1, 1);
+var root_17 = _$_.template(`<div class="block-1">Block 1</div>`, 0);
+var root_18 = _$_.template(`<div class="block-2">Block 2</div>`, 0);
+var root_19 = _$_.template(`<div class="block-3">Block 3</div>`, 0);
+var root_16 = _$_.template(`<button class="block-toggle">Toggle</button><!>`, 1, 2);
+var root_15 = _$_.template(`<!>`, 1, 1);
+var root_22 = _$_.template(`<div class="nobreak-1">NoBreak 1</div>`, 0);
+var root_23 = _$_.template(`<div class="nobreak-2">NoBreak 2</div>`, 0);
+var root_24 = _$_.template(`<div class="nobreak-3">NoBreak 3</div>`, 0);
+var root_21 = _$_.template(`<button class="nobreak-toggle">Toggle</button><!>`, 1, 2);
+var root_20 = _$_.template(`<!>`, 1, 1);
 
 import { track } from 'ripple';
 
 export function SwitchStatic() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const status = 'success';
-		var fragment = root();
-		var node = _$_.first_child_frag(fragment);
 
 		{
 			var switch_case_0 = (__anchor) => {
-				var div_1 = root_1();
+				var div_1 = root();
 
 				_$_.append(__anchor, div_1);
 			};
 
 			var switch_case_1 = (__anchor) => {
-				var div_2 = root_2();
+				var div_2 = root_1();
 
 				_$_.append(__anchor, div_2);
 			};
 
 			var switch_case_default = (__anchor) => {
-				var div_3 = root_3();
+				var div_3 = root_2();
 
 				_$_.append(__anchor, div_3);
 			};
 
-			_$_.switch(node, () => {
-				var result = [];
+			_$_.switch(
+				__anchor,
+				() => {
+					var result = [];
 
-				switch (status) {
-					case 'success':
-						result.push(switch_case_0);
-						return result;
+					switch (status) {
+						case 'success':
+							result.push(switch_case_0);
+							return result;
 
-					case 'error':
-						result.push(switch_case_1);
-						return result;
+						case 'error':
+							result.push(switch_case_1);
+							return result;
 
-					default:
-						result.push(switch_case_default);
-						return result;
-				}
-			});
+						default:
+							result.push(switch_case_default);
+							return result;
+					}
+				},
+				true
+			);
 		}
-
-		_$_.append(__anchor, fragment);
 	});
 }
 
 export function SwitchReactive() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy = _$_.track('a', __block, '9b34d955');
-		var fragment_1 = root_4();
-		var node_2 = _$_.first_child_frag(fragment_1);
+		var fragment = root_3();
+		var node_1 = _$_.first_child_frag(fragment);
 
-		_$_.expression(node_2, () => _$_.tsrx_element((__anchor, __block) => {
-			var fragment_2 = root_5();
-			var button_1 = _$_.first_child_frag(fragment_2);
+		_$_.expression(node_1, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_1 = root_4();
+			var button_1 = _$_.first_child_frag(fragment_1);
 
 			button_1.__click = () => {
 				if (lazy.value === 'a') _$_.set(lazy, 'b'); else if (lazy.value === 'b') _$_.set(lazy, 'c'); else _$_.set(lazy, 'a');
 			};
 
-			var node_1 = _$_.sibling(button_1);
+			var node = _$_.sibling(button_1);
 
 			{
 				var switch_case_0_1 = (__anchor) => {
-					var div_4 = root_6();
+					var div_4 = root_5();
 
 					_$_.append(__anchor, div_4);
 				};
 
 				var switch_case_1_1 = (__anchor) => {
-					var div_5 = root_7();
+					var div_5 = root_6();
 
 					_$_.append(__anchor, div_5);
 				};
 
 				var switch_case_default_1 = (__anchor) => {
-					var div_6 = root_8();
+					var div_6 = root_7();
 
 					_$_.append(__anchor, div_6);
 				};
 
-				_$_.switch(node_1, () => {
+				_$_.switch(node, () => {
 					var result = [];
 
 					switch (lazy.value) {
@@ -133,90 +131,90 @@ export function SwitchReactive() {
 				});
 			}
 
-			_$_.append(__anchor, fragment_2);
+			_$_.append(__anchor, fragment_1);
 		}));
 
-		_$_.append(__anchor, fragment_1);
+		_$_.append(__anchor, fragment);
 	});
 }
 
 export function SwitchFallthrough() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		const val = 1;
-		var fragment_3 = root_9();
-		var node_3 = _$_.first_child_frag(fragment_3);
 
 		{
 			var switch_case_0_2 = (__anchor) => {
-				var div_7 = root_10();
+				var div_7 = root_8();
 
 				_$_.append(__anchor, div_7);
 			};
 
 			var switch_case_default_2 = (__anchor) => {
-				var div_8 = root_11();
+				var div_8 = root_9();
 
 				_$_.append(__anchor, div_8);
 			};
 
-			_$_.switch(node_3, () => {
-				var result = [];
+			_$_.switch(
+				__anchor,
+				() => {
+					var result = [];
 
-				switch (val) {
-					case 1:
-						return result;
+					switch (val) {
+						case 1:
+							return result;
 
-					case 2:
-						result.push(switch_case_0_2);
-						return result;
+						case 2:
+							result.push(switch_case_0_2);
+							return result;
 
-					default:
-						result.push(switch_case_default_2);
-						return result;
-				}
-			});
+						default:
+							result.push(switch_case_default_2);
+							return result;
+					}
+				},
+				true
+			);
 		}
-
-		_$_.append(__anchor, fragment_3);
 	});
 }
 
 export function SwitchNumericLevels() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_1 = _$_.track(1, __block, '7581a7ab');
-		var fragment_4 = root_12();
-		var node_5 = _$_.first_child_frag(fragment_4);
+		var fragment_2 = root_10();
+		var node_3 = _$_.first_child_frag(fragment_2);
 
-		_$_.expression(node_5, () => _$_.tsrx_element((__anchor, __block) => {
-			var fragment_5 = root_13();
-			var button_2 = _$_.first_child_frag(fragment_5);
+		_$_.expression(node_3, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_3 = root_11();
+			var button_2 = _$_.first_child_frag(fragment_3);
 
 			button_2.__click = () => {
 				if (lazy_1.value === 1) _$_.set(lazy_1, 2); else if (lazy_1.value === 2) _$_.set(lazy_1, 3); else _$_.set(lazy_1, 1);
 			};
 
-			var node_4 = _$_.sibling(button_2);
+			var node_2 = _$_.sibling(button_2);
 
 			{
 				var switch_case_0_3 = (__anchor) => {
-					var div_9 = root_14();
+					var div_9 = root_12();
 
 					_$_.append(__anchor, div_9);
 				};
 
 				var switch_case_1_2 = (__anchor) => {
-					var div_10 = root_15();
+					var div_10 = root_13();
 
 					_$_.append(__anchor, div_10);
 				};
 
 				var switch_case_2 = (__anchor) => {
-					var div_11 = root_16();
+					var div_11 = root_14();
 
 					_$_.append(__anchor, div_11);
 				};
 
-				_$_.switch(node_4, () => {
+				_$_.switch(node_2, () => {
 					var result = [];
 
 					switch (lazy_1.value) {
@@ -235,49 +233,49 @@ export function SwitchNumericLevels() {
 				});
 			}
 
-			_$_.append(__anchor, fragment_5);
+			_$_.append(__anchor, fragment_3);
 		}));
 
-		_$_.append(__anchor, fragment_4);
+		_$_.append(__anchor, fragment_2);
 	});
 }
 
 export function SwitchBlockScoped() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_2 = _$_.track(1, __block, 'ca9f9852');
-		var fragment_6 = root_17();
-		var node_7 = _$_.first_child_frag(fragment_6);
+		var fragment_4 = root_15();
+		var node_5 = _$_.first_child_frag(fragment_4);
 
-		_$_.expression(node_7, () => _$_.tsrx_element((__anchor, __block) => {
-			var fragment_7 = root_18();
-			var button_3 = _$_.first_child_frag(fragment_7);
+		_$_.expression(node_5, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_5 = root_16();
+			var button_3 = _$_.first_child_frag(fragment_5);
 
 			button_3.__click = () => {
 				if (lazy_2.value === 1) _$_.set(lazy_2, 2); else if (lazy_2.value === 2) _$_.set(lazy_2, 3); else _$_.set(lazy_2, 1);
 			};
 
-			var node_6 = _$_.sibling(button_3);
+			var node_4 = _$_.sibling(button_3);
 
 			{
 				var switch_case_0_4 = (__anchor) => {
-					var div_12 = root_19();
+					var div_12 = root_17();
 
 					_$_.append(__anchor, div_12);
 				};
 
 				var switch_case_1_3 = (__anchor) => {
-					var div_13 = root_20();
+					var div_13 = root_18();
 
 					_$_.append(__anchor, div_13);
 				};
 
 				var switch_case_2_1 = (__anchor) => {
-					var div_14 = root_21();
+					var div_14 = root_19();
 
 					_$_.append(__anchor, div_14);
 				};
 
-				_$_.switch(node_6, () => {
+				_$_.switch(node_4, () => {
 					var result = [];
 
 					switch (lazy_2.value) {
@@ -296,49 +294,49 @@ export function SwitchBlockScoped() {
 				});
 			}
 
-			_$_.append(__anchor, fragment_7);
+			_$_.append(__anchor, fragment_5);
 		}));
 
-		_$_.append(__anchor, fragment_6);
+		_$_.append(__anchor, fragment_4);
 	});
 }
 
 export function SwitchNoBreak() {
 	return _$_.tsrx_element((__anchor, __block) => {
 		let lazy_3 = _$_.track(1, __block, '6b7cb0ea');
-		var fragment_8 = root_22();
-		var node_9 = _$_.first_child_frag(fragment_8);
+		var fragment_6 = root_20();
+		var node_7 = _$_.first_child_frag(fragment_6);
 
-		_$_.expression(node_9, () => _$_.tsrx_element((__anchor, __block) => {
-			var fragment_9 = root_23();
-			var button_4 = _$_.first_child_frag(fragment_9);
+		_$_.expression(node_7, () => _$_.tsrx_element((__anchor, __block) => {
+			var fragment_7 = root_21();
+			var button_4 = _$_.first_child_frag(fragment_7);
 
 			button_4.__click = () => {
 				if (lazy_3.value === 1) _$_.set(lazy_3, 2); else if (lazy_3.value === 2) _$_.set(lazy_3, 3); else _$_.set(lazy_3, 1);
 			};
 
-			var node_8 = _$_.sibling(button_4);
+			var node_6 = _$_.sibling(button_4);
 
 			{
 				var switch_case_0_5 = (__anchor) => {
-					var div_15 = root_24();
+					var div_15 = root_22();
 
 					_$_.append(__anchor, div_15);
 				};
 
 				var switch_case_1_4 = (__anchor) => {
-					var div_16 = root_25();
+					var div_16 = root_23();
 
 					_$_.append(__anchor, div_16);
 				};
 
 				var switch_case_2_2 = (__anchor) => {
-					var div_17 = root_26();
+					var div_17 = root_24();
 
 					_$_.append(__anchor, div_17);
 				};
 
-				_$_.switch(node_8, () => {
+				_$_.switch(node_6, () => {
 					var result = [];
 
 					switch (lazy_3.value) {
@@ -357,10 +355,10 @@ export function SwitchNoBreak() {
 				});
 			}
 
-			_$_.append(__anchor, fragment_9);
+			_$_.append(__anchor, fragment_7);
 		}));
 
-		_$_.append(__anchor, fragment_8);
+		_$_.append(__anchor, fragment_6);
 	});
 }