ripple 0.3.128 → 0.4.0

package/tests/hydration/compiled/server/if-children.js

@@ -5,14 +5,14 @@ import { track } from 'ripple/server';
 
 export function IfWithChildren({ children }) {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, 'c64714b1');
+		const expanded = _$_.track(true, 'c64714b1');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="container"><div role="button" class="header">Toggle</div><!--[-->';
 
-			if (lazy.value) {
+			if (expanded.value) {
 				__out += '<div class="content">';
 
 				{
@@ -77,14 +77,14 @@ export function TestIfWithChildren() {
 
 export function IfWithStaticChildren() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(true, '3bba8f77');
+		const expanded = _$_.track(true, '3bba8f77');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="container"><div role="button" class="header">Toggle</div><!--[-->';
 
-			if (lazy_1.value) {
+			if (expanded.value) {
 				__out += '<div class="content"><span>Static child 1</span><span>Static child 2</span></div>';
 			}
 
@@ -96,14 +96,14 @@ export function IfWithStaticChildren() {
 
 export function IfWithSiblingsAndChildren({ children }) {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track(true, 'a1b8fb4c');
+		const expanded = _$_.track(true, 'a1b8fb4c');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<section class="group"><div role="button" class="item"><div class="indicator"></div><h2 class="text">Title</h2><div class="caret"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"></path></svg></div></div><!--[-->';
 
-			if (lazy_2.value) {
+			if (expanded.value) {
 				__out += '<div class="items">';
 
 				{
@@ -157,14 +157,14 @@ export function TestIfWithSiblingsAndChildren() {
 
 export function ElementWithChildrenThenIf() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track(true, '7cd4817b');
+		const show = _$_.track(true, '7cd4817b');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="wrapper"><div class="nested-parent"><div class="nested-child"><span class="deep">Deep content</span></div></div><!--[-->';
 
-			if (lazy_3.value) {
+			if (show.value) {
 				__out += '<div class="conditional">Conditional content</div>';
 			}
 
@@ -176,14 +176,14 @@ export function ElementWithChildrenThenIf() {
 
 export function DeepNestingThenIf() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track(true, '923116be');
+		const visible = _$_.track(true, '923116be');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<section class="outer"><article class="middle"><div class="inner"><p class="leaf"><strong>Bold</strong><em>Italic</em></p></div></article><!--[-->';
 
-			if (lazy_4.value) {
+			if (visible.value) {
 				__out += '<footer class="footer">Footer</footer>';
 			}
 
@@ -195,14 +195,14 @@ export function DeepNestingThenIf() {
 
 export function DomElementChildrenThenSibling() {
 	return _$_.tsrx_element(() => {
-		let lazy_5 = _$_.track('code', '33a1e97f');
+		const activeTab = _$_.track('code', '33a1e97f');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="tabs"><div class="tab-list"><button' + _$_.attr('aria-selected', lazy_5.value === 'code' ? 'true' : 'false', false) + ' class="tab">Code</button><button' + _$_.attr('aria-selected', lazy_5.value === 'preview' ? 'true' : 'false', false) + ' class="tab">Preview</button></div><div class="panel"><!--[-->';
+			__out += '<div class="tabs"><div class="tab-list"><button' + _$_.attr('aria-selected', activeTab.value === 'code' ? 'true' : 'false', false) + ' class="tab">Code</button><button' + _$_.attr('aria-selected', activeTab.value === 'preview' ? 'true' : 'false', false) + ' class="tab">Preview</button></div><div class="panel"><!--[-->';
 
-			if (lazy_5.value === 'code') {
+			if (activeTab.value === 'code') {
 				__out += '<pre class="code">const x = 1;</pre>';
 			} else {
 				__out += '<div class="preview">Preview content</div>';
@@ -216,12 +216,12 @@ export function DomElementChildrenThenSibling() {
 
 export function DomChildrenThenStaticSiblings() {
 	return _$_.tsrx_element(() => {
-		let lazy_6 = _$_.track(0, '0ea64305');
+		const count = _$_.track(0, '0ea64305');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="container"><ul class="list"><li class="item">' + _$_.escape('Item count: ' + String(lazy_6.value ?? '')) + '</li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>';
+			__out += '<div class="container"><ul class="list"><li class="item">' + _$_.escape('Item count: ' + String(count.value ?? '')) + '</li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>';
 			_$_.output_push(__out);
 		});
 	});
@@ -236,4 +236,96 @@ export function StaticListThenStaticSiblings() {
 			_$_.output_push(__out);
 		});
 	});
+}
+
+function RootIfChild(props) {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
+			if (props.on.value) {
+				__out += '<span class="root-if">on</span>';
+			} else {
+				__out += '<span class="root-if">off</span>';
+			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+function RootForChild(props) {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
+			for (const item of props.items.value) {
+				__out += '<span class="root-for">' + _$_.escape(item) + '</span>';
+			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+function TrailingChild() {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<span class="trailing">end</span>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ComponentChildrenWithControlFlowRoots() {
+	return _$_.tsrx_element(() => {
+		const on = _$_.track(true, 'f3e4c6ee');
+		const items = _$_.track([1, 2, 3], '2bbbeeb0');
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="wrapper"><div class="host">';
+
+			{
+				{
+					const comp = RootIfChild;
+					const args = [{ on }];
+
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_component(comp, ...args);
+				}
+
+				{
+					const comp = RootForChild;
+					const args = [{ items }];
+
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_component(comp, ...args);
+				}
+
+				{
+					const comp = TrailingChild;
+					const args = [{}];
+
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_component(comp, ...args);
+				}
+			}
+
+			__out += '</div><button class="toggle">Toggle</button><button class="rotate">Rotate</button></div>';
+			_$_.output_push(__out);
+		});
+	});
 }

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

@@ -64,14 +64,14 @@ export function IfElse() {
 
 export function ReactiveIf() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, '19a16ff0');
+		const show = _$_.track(true, '19a16ff0');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="toggle">Toggle</button><!--[-->';
 
-			if (lazy.value) {
+			if (show.value) {
 				__out += '<div class="content">Content visible</div>';
 			}
 
@@ -83,14 +83,14 @@ export function ReactiveIf() {
 
 export function ReactiveIfElse() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(false, '41177f39');
+		const isOn = _$_.track(false, '41177f39');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="toggle">Toggle</button><!--[-->';
 
-			if (lazy_1.value) {
+			if (isOn.value) {
 				__out += '<div class="on">ON</div>';
 			} else {
 				__out += '<div class="off">OFF</div>';
@@ -104,18 +104,18 @@ export function ReactiveIfElse() {
 
 export function NestedIf() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track(true, '7894e1df');
-		let lazy_3 = _$_.track(true, 'f21b8c26');
+		const outer = _$_.track(true, '7894e1df');
+		const inner = _$_.track(true, 'f21b8c26');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!--[-->';
 
-			if (lazy_2.value) {
+			if (outer.value) {
 				__out += '<div class="outer-content">Outer<!--[-->';
 
-				if (lazy_3.value) {
+				if (inner.value) {
 					__out += '<span class="inner-content">Inner</span>';
 				}
 
@@ -130,25 +130,21 @@ export function NestedIf() {
 
 export function IfElseIfChain() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track('loading', '4c69c94a');
+		const status = _$_.track('loading', '4c69c94a');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!--[-->';
 
-			if (lazy_4.value === 'loading') {
+			if (status.value === 'loading') {
 				__out += '<div class="state">Loading...</div>';
 			} else {
-				__out += '<!--[-->';
-
-				if (lazy_4.value === 'success') {
+				if (status.value === 'success') {
 					__out += '<div class="state">Success!</div>';
 				} else {
 					__out += '<div class="state">Error occurred</div>';
 				}
-
-				__out += '<!--]-->';
 			}
 
 			__out += '<!--]--></div>';

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

@@ -78,22 +78,22 @@ export function MixedControlFlowStatic() {
 
 export function MixedControlFlowReactive() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, '5ae53d26');
-		let lazy_1 = _$_.track('a', '5b53eda2');
-		let lazy_2 = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
+		const show = _$_.track(true, '5ae53d26');
+		const mode = _$_.track('a', '5b53eda2');
+		const items = _$_.track([{ id: 1, label: 'One' }, { id: 2, label: 'Two' }], '7890dad6');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<button class="toggle-show">Toggle Show</button><button class="toggle-mode">Toggle Mode</button><button class="add-item">Add Item</button><!--[-->';
 
-			if (lazy.value) {
+			if (show.value) {
 				__out += '<div class="mixed-reactive-list"><!--[-->';
 
-				for (const item of lazy_2.value) {
+				for (const item of items.value) {
 					__out += '<!--[-->';
 
-					switch (lazy_1.value) {
+					switch (mode.value) {
 						case 'a':
 							_$_.output_push(__out);
 							__out = '';
@@ -214,7 +214,7 @@ export function MixedControlFlowAsyncPending() {
 
 function AsyncRow({ label }) {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
+		const value = _$_.track_async(() => Promise.resolve(label), '10cc79a0');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -224,7 +224,7 @@ function AsyncRow({ label }) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_3.value);
+				_$_.render_expression(value.value);
 			}
 
 			__out += '</div>';

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

@@ -30,11 +30,9 @@ export function SimplePortal() {
 					}
 				];
 
-				if (comp) {
-					_$_.output_push(__out);
-					__out = '';
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
 			__out += '</div>';
@@ -45,14 +43,14 @@ export function SimplePortal() {
 
 export function ConditionalPortal() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, '4f6df174');
+		const show = _$_.track(true, '4f6df174');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="container"><button class="toggle">Toggle</button><!--[-->';
 
-			if (lazy.value) {
+			if (show.value) {
 				{
 					const comp = Portal;
 
@@ -73,11 +71,9 @@ export function ConditionalPortal() {
 						}
 					];
 
-					if (comp) {
-						_$_.output_push(__out);
-						__out = '';
-						_$_.render_component(comp, ...args);
-					}
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_component(comp, ...args);
 				}
 			}
 
@@ -114,11 +110,9 @@ export function PortalWithMainContent() {
 					}
 				];
 
-				if (comp) {
-					_$_.output_push(__out);
-					__out = '';
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
 			__out += '<div class="footer">Footer</div></div>';
@@ -154,11 +148,9 @@ export function NestedContentWithPortal() {
 					}
 				];
 
-				if (comp) {
-					_$_.output_push(__out);
-					__out = '';
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
 			__out += '</div>';

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

@@ -5,12 +5,12 @@ import { track } from 'ripple/server';
 
 export function TrackedState() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(0, 'c1818584');
+		const count = _$_.track(0, 'c1818584');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="count">' + _$_.escape(lazy.value) + '</div>';
+			__out += '<div class="count">' + _$_.escape(count.value) + '</div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -18,7 +18,7 @@ export function TrackedState() {
 
 export function CounterWithInitial(props) {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track(props.initial, '03ea4348');
+		const count = _$_.track(props.initial, '03ea4348');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -28,7 +28,7 @@ export function CounterWithInitial(props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_1.value);
+				_$_.render_expression(count.value);
 			}
 
 			__out += '</span></div>';
@@ -52,9 +52,9 @@ export function CounterWrapper() {
 
 export function ComputedValues() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track(2, 'b78281db');
-		let lazy_3 = _$_.track(3, 'a0cf6c6d');
-		const sum = () => lazy_2.value + lazy_3.value;
+		const a = _$_.track(2, 'b78281db');
+		const b = _$_.track(3, 'a0cf6c6d');
+		const sum = () => a.value + b.value;
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -75,14 +75,14 @@ export function ComputedValues() {
 
 export function MultipleTracked() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track(10, '843522de');
-		let lazy_5 = _$_.track(20, '1308996d');
-		let lazy_6 = _$_.track(30, '048c3fd0');
+		const x = _$_.track(10, '843522de');
+		const y = _$_.track(20, '1308996d');
+		const z = _$_.track(30, '048c3fd0');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="multiple-tracked"><div class="x">' + _$_.escape(lazy_4.value) + '</div><div class="y">' + _$_.escape(lazy_5.value) + '</div><div class="z">' + _$_.escape(lazy_6.value) + '</div></div>';
+			__out += '<div class="multiple-tracked"><div class="x">' + _$_.escape(x.value) + '</div><div class="y">' + _$_.escape(y.value) + '</div><div class="z">' + _$_.escape(z.value) + '</div></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -90,9 +90,9 @@ export function MultipleTracked() {
 
 export function DerivedState() {
 	return _$_.tsrx_element(() => {
-		let lazy_7 = _$_.track('John', '6015eeca');
-		let lazy_8 = _$_.track('Doe', '4fa9a20e');
-		const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
+		const firstName = _$_.track('John', '6015eeca');
+		const lastName = _$_.track('Doe', '4fa9a20e');
+		const fullName = () => `${firstName.value} ${lastName.value}`;
 
 		_$_.regular_block(() => {
 			let __out = '';

package/tests/hydration/compiled/server/streaming.js

@@ -32,13 +32,13 @@ resetControls();
 
 function BasicContent() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track_async(() => controls.basic.promise, '703e438e');
-		let lazy_1 = _$_.track(0, '928bce39');
+		const data = _$_.track_async(() => controls.basic.promise, '703e438e');
+		const count = _$_.track(0, '928bce39');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div class="resolved"><span class="value">' + _$_.escape(lazy.value + ':' + lazy_1.value) + '</span><button class="inc">inc</button></div>';
+			__out += '<div class="resolved"><span class="value">' + _$_.escape(data.value + ':' + count.value) + '</span><button class="inc">inc</button></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -88,7 +88,7 @@ export function StreamPending() {
 
 function CatchOnlyContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track_async(() => controls.catchOnly.promise, '50f939c6');
+		const data = _$_.track_async(() => controls.catchOnly.promise, '50f939c6');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -98,7 +98,7 @@ function CatchOnlyContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_2.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -158,7 +158,7 @@ export function StreamCatchOnly() {
 
 function RejectContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track_async(() => controls.rejects.promise, '96452a54');
+		const data = _$_.track_async(() => controls.rejects.promise, '96452a54');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -168,7 +168,7 @@ function RejectContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_3.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -247,7 +247,7 @@ export function StreamRejects() {
 
 function NoCatchContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_4 = _$_.track_async(() => controls.noCatch.promise, '6baa716b');
+		const data = _$_.track_async(() => controls.noCatch.promise, '6baa716b');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -257,7 +257,7 @@ function NoCatchContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_4.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -342,27 +342,27 @@ export function RootPending() {
 
 function HeadContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_5 = _$_.track_async(() => controls.head.promise, '9cd3c3cd');
+		const data = _$_.track_async(() => controls.head.promise, '9cd3c3cd');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<!--[--><!--[-->';
 
-			if (lazy_5.value) {
+			if (data.value) {
 				__out += '<p class="head-content">';
 
 				{
 					_$_.output_push(__out);
 					__out = '';
-					_$_.render_expression(lazy_5.value);
+					_$_.render_expression(data.value);
 				}
 
 				__out += '</p>';
 				_$_.output_push(__out);
 				__out = '';
 				_$_.set_output_target('head');
-				__out += '<!--814bacd9--><title>' + _$_.escape('title:' + lazy_5.value) + '</title>';
+				__out += '<!--1ad4258e--><title>' + _$_.escape('title:' + data.value) + '</title>';
 				_$_.output_push(__out);
 				__out = '';
 				_$_.set_output_target(null);
@@ -420,7 +420,7 @@ export function StreamHead() {
 
 export function StreamRootDirect() {
 	return _$_.tsrx_element(() => {
-		let lazy_6 = _$_.track_async(() => controls.rootDirect.promise, 'bc9e61da');
+		const data = _$_.track_async(() => controls.rootDirect.promise, 'bc9e61da');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -430,7 +430,7 @@ export function StreamRootDirect() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_6.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -441,7 +441,7 @@ export function StreamRootDirect() {
 
 function OuterContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_7 = _$_.track_async(() => controls.outer.promise, '35931cce');
+		const data = _$_.track_async(() => controls.outer.promise, '35931cce');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -451,7 +451,7 @@ function OuterContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_7.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';
@@ -462,7 +462,7 @@ function OuterContent() {
 
 function InnerContent() {
 	return _$_.tsrx_element(() => {
-		let lazy_8 = _$_.track_async(() => controls.inner.promise, '6c7d38ed');
+		const data = _$_.track_async(() => controls.inner.promise, '6c7d38ed');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -472,7 +472,7 @@ function InnerContent() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_8.value);
+				_$_.render_expression(data.value);
 			}
 
 			__out += '</p>';