ripple 0.3.67 → 0.3.69

package/tests/client/try.test.tsrx

@@ -18,13 +18,15 @@ describe('try block with catch and pending', () => {
 			resolve_value = resolve;
 		});
 
-		component App() {
-			<span class="before">{'before'}</span>
-			try {
-				let &[data] = trackAsync(() => promise);
-				<p class="resolved">{data}</p>
-			} pending {}
-			<span class="after">{'after'}</span>
+		function App() {
+			return <>
+				<span class="before">{'before'}</span>
+				try {
+					let &[data] = trackAsync(() => promise);
+					<p class="resolved">{data}</p>
+				} pending {}
+				<span class="after">{'after'}</span>
+			</>;
 		}
 
 		render(App);
@@ -47,18 +49,22 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when a child throws synchronously', async () => {
-		component App() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p>{'loading...'}</p>
+				} catch (err) {
+					<p>{'caught error'}</p>
+				}
+			</>;
 		}
 
-		component ThrowingChild() {
-			throw new Error('sync error');
+		function ThrowingChild() {
+			return <>
+				throw new Error('sync error');
+			</>;
 		}
 
 		render(App);
@@ -70,20 +76,24 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when component throws after trackAsync with pending block', async () => {
-		component App() {
-			try {
-				<ThrowingAfterAsync />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<ThrowingAfterAsync />
+				} pending {
+					<p>{'loading...'}</p>
+				} catch (err) {
+					<p>{'caught error'}</p>
+				}
+			</>;
 		}
 
-		component ThrowingAfterAsync() {
-			let &[data] = trackAsync(() => Promise.resolve('hello'));
-			throw new Error('error after await');
-			<p>{data}</p>
+		function ThrowingAfterAsync() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('hello'));
+				throw new Error('error after await');
+				<p>{data}</p>
+			</>;
 		}
 
 		render(App);
@@ -96,15 +106,17 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when trackAsync rejects', async () => {
-		component App() {
-			try {
-				let &[data] = trackAsync(() => Promise.reject(new Error('rejected')));
-				<p>{data}</p>
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught rejection'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[data] = trackAsync(() => Promise.reject(new Error('rejected')));
+					<p>{data}</p>
+				} pending {
+					<p>{'loading...'}</p>
+				} catch (err) {
+					<p>{'caught rejection'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -135,19 +147,19 @@ describe('try block with catch and pending', () => {
 			return promise;
 		}
 
-		component App() {
-			let &[version] = track(0);
-
-			try {
-				let &[data] = trackAsync(() => createRequest(version));
-				<p class="resolved">{data}</p>
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			} catch (err) {
-				<p class="caught">{(err as Error).message}</p>
-			}
-
-			<button class="retry" onClick={() => version++}>{'Retry'}</button>
+		function App() {
+			return <>
+				let &[version] = track(0);
+				try {
+					let &[data] = trackAsync(() => createRequest(version));
+					<p class="resolved">{data}</p>
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				} catch (err) {
+					<p class="caught">{(err as Error).message}</p>
+				}
+				<button class="retry" onClick={() => version++}>{'Retry'}</button>
+			</>;
 		}
 
 		render(App);
@@ -199,29 +211,30 @@ describe('try block with catch and pending', () => {
 			return promise;
 		}
 
-		component App() {
-			let &[version] = track(0);
-
-			try {
-				let &[data] = trackAsync(() => {
-					version;
-					return createRequest(version);
-				});
-				<p class="resolved">{data}</p>
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			} catch (err, reset) {
-				<p class="caught">{(err as Error).message}</p>
-				<button
-					class="retry"
-					onClick={() => {
-						version++;
-						reset();
-					}}
-				>
-					{'Retry'}
-				</button>
-			}
+		function App() {
+			return <>
+				let &[version] = track(0);
+				try {
+					let &[data] = trackAsync(() => {
+						version;
+						return createRequest(version);
+					});
+					<p class="resolved">{data}</p>
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				} catch (err, reset) {
+					<p class="caught">{(err as Error).message}</p>
+					<button
+						class="retry"
+						onClick={() => {
+							version++;
+							reset();
+						}}
+					>
+						{'Retry'}
+					</button>
+				}
+			</>;
 		}
 
 		render(App);
@@ -261,16 +274,17 @@ describe('try block', () => {
 	it(
 		'does not compile ref binds as async callbacks inside try/pending trackAsync branches',
 		async () => {
-			component App() {
-				let &[value, valueTracked] = track(1);
-
-				try {
-					let &[loaded] = trackAsync(() => Promise.resolve(value + 1));
-					<input type="number" {ref bindValue(valueTracked)} />
-					<span>{loaded}</span>
-				} pending {
-					<p>{'loading...'}</p>
-				}
+			function App() {
+				return <>
+					let &[value, valueTracked] = track(1);
+					try {
+						let &[loaded] = trackAsync(() => Promise.resolve(value + 1));
+						<input type="number" ref={bindValue(valueTracked)} />
+						<span>{loaded}</span>
+					} pending {
+						<p>{'loading...'}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -286,22 +300,25 @@ describe('try block', () => {
 	);
 
 	it('does not crash when trackAsync is used to render a list inside try/pending', async () => {
-		component App() {
-			try {
-				<AsyncChild />
-			} pending {
-				<p>{'loading...'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<AsyncChild />
+				} pending {
+					<p>{'loading...'}</p>
+				}
+			</>;
 		}
 
-		component AsyncChild() {
-			let &[data] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
-
-			<ul>
-				for (let item of data) {
-					<li>{item}</li>
-				}
-			</ul>
+		function AsyncChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
+				<ul>
+					for (let item of data) {
+						<li>{item}</li>
+					}
+				</ul>
+			</>;
 		}
 
 		render(App);
@@ -318,27 +335,29 @@ describe('try block', () => {
 	it(
 		'does not crash when async component with tracked state is used inside try/pending',
 		async () => {
-			component App() {
-				let &[query, queryTracked] = track('');
-
-				try {
-					<FilteredList {queryTracked} />
-				} pending {
-					<p>{'loading...'}</p>
-				}
+			function App() {
+				return <>
+					let &[query, queryTracked] = track('');
+					try {
+						<FilteredList {queryTracked} />
+					} pending {
+						<p>{'loading...'}</p>
+					}
+				</>;
 			}
 
-			component FilteredList({ queryTracked }: { queryTracked: Tracked<string> }) {
-				let &[items] = trackAsync(() => Promise.resolve(['apple', 'banana', 'cherry']));
-				let &[filtered] = track(
-					() => items.filter((item: string) => item.includes(queryTracked.value)),
-				);
-
-				<ul>
-					for (let item of filtered) {
-						<li>{item}</li>
-					}
-				</ul>
+			function FilteredList({ queryTracked }: { queryTracked: Tracked<string> }) {
+				return <>
+					let &[items] = trackAsync(() => Promise.resolve(['apple', 'banana', 'cherry']));
+					let &[filtered] = track(
+						() => items.filter((item: string) => item.includes(queryTracked.value)),
+					);
+					<ul>
+						for (let item of filtered) {
+							<li>{item}</li>
+						}
+					</ul>
+				</>;
 			}
 
 			render(App);
@@ -352,18 +371,20 @@ describe('try block', () => {
 	);
 
 	it('if test condition stays synchronous once trackAsync has resolved', async () => {
-		component App() {
-			try {
-				let &[items] = trackAsync(() => Promise.resolve(['apple', 'banana', 'cherry']));
-
-				if (items.includes('not-in-list')) {
-					<p>{'not-in-list is in the list!'}</p>
-				} else {
-					<p>{'not-in-list is not in the list.'}</p>
+		function App() {
+			return <>
+				try {
+					let &[items] = trackAsync(() => Promise.resolve(['apple', 'banana', 'cherry']));
+
+					if (items.includes('not-in-list')) {
+						<p>{'not-in-list is in the list!'}</p>
+					} else {
+						<p>{'not-in-list is not in the list.'}</p>
+					}
+				} pending {
+					<p>{'loading...'}</p>
 				}
-			} pending {
-				<p>{'loading...'}</p>
-			}
+			</>;
 		}
 
 		render(App);
@@ -377,28 +398,30 @@ describe('try block', () => {
 	it('destroying try block while in pending state cleans up pending branch', async () => {
 		let pending_effect_teardown_count = 0;
 
-		component PendingChild() {
-			effect(() => {
-				return () => {
-					pending_effect_teardown_count++;
-				};
-			});
-			<p class="pending">{'loading...'}</p>
+		function PendingChild() {
+			return <>
+				effect(() => {
+					return () => {
+						pending_effect_teardown_count++;
+					};
+				});
+				<p class="pending">{'loading...'}</p>
+			</>;
 		}
 
-		component App() {
-			let &[show] = track(true);
-
-			if (show) {
-				try {
-					let &[data] = trackAsync(() => new Promise(() => {}));
-					<p class="resolved">{data}</p>
-				} pending {
-					<PendingChild />
+		function App() {
+			return <>
+				let &[show] = track(true);
+				if (show) {
+					try {
+						let &[data] = trackAsync(() => new Promise(() => {}));
+						<p class="resolved">{data}</p>
+					} pending {
+						<PendingChild />
+					}
 				}
-			}
-
-			<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+			</>;
 		}
 
 		render(App);
@@ -423,30 +446,32 @@ describe('try block', () => {
 	it('destroying try block while in resolved state cleans up resolved branch', async () => {
 		let resolved_effect_teardown_count = 0;
 
-		component ResolvedChild(&{ data }: { data: string }) {
-			effect(() => {
-				return () => {
-					resolved_effect_teardown_count++;
-				};
-			});
-			<p class="resolved">{data}</p>
+		function ResolvedChild(&{ data }: { data: string }) {
+			return <>
+				effect(() => {
+					return () => {
+						resolved_effect_teardown_count++;
+					};
+				});
+				<p class="resolved">{data}</p>
+			</>;
 		}
 
-		component App() {
-			let &[show] = track(true);
-
-			if (show) {
-				try {
-					let &[data] = trackAsync(() => Promise.resolve('hello'));
-					<ResolvedChild {data} />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<p class="caught">{(err as Error).message}</p>
+		function App() {
+			return <>
+				let &[show] = track(true);
+				if (show) {
+					try {
+						let &[data] = trackAsync(() => Promise.resolve('hello'));
+						<ResolvedChild {data} />
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<p class="caught">{(err as Error).message}</p>
+					}
 				}
-			}
-
-			<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+			</>;
 		}
 
 		render(App);
@@ -472,30 +497,32 @@ describe('try block', () => {
 	it('destroying try block while in catch state cleans up catch branch', async () => {
 		let catch_effect_teardown_count = 0;
 
-		component CatchChild({ error }: { error: Error }) {
-			effect(() => {
-				return () => {
-					catch_effect_teardown_count++;
-				};
-			});
-			<p class="caught">{error.message}</p>
+		function CatchChild({ error }: { error: Error }) {
+			return <>
+				effect(() => {
+					return () => {
+						catch_effect_teardown_count++;
+					};
+				});
+				<p class="caught">{error.message}</p>
+			</>;
 		}
 
-		component App() {
-			let &[show] = track(true);
-
-			if (show) {
-				try {
-					let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
-					<p class="resolved">{data}</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<CatchChild error={err as Error} />
+		function App() {
+			return <>
+				let &[show] = track(true);
+				if (show) {
+					try {
+						let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
+						<p class="resolved">{data}</p>
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<CatchChild error={err as Error} />
+					}
 				}
-			}
-
-			<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
+			</>;
 		}
 
 		render(App);
@@ -516,20 +543,24 @@ describe('try block', () => {
 	});
 
 	it('pending block throwing renders catch block from the same try block', async () => {
-		component ThrowingPending() {
-			throw new Error('pending exploded');
-			<p>{'should not render'}</p>
+		function ThrowingPending() {
+			return <>
+				throw new Error('pending exploded');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				let &[data] = trackAsync(() => new Promise(() => {}));
-				<p class="resolved">{data}</p>
-			} pending {
-				<ThrowingPending />
-			} catch (err) {
-				<p class="caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[data] = trackAsync(() => new Promise(() => {}));
+					<p class="resolved">{data}</p>
+				} pending {
+					<ThrowingPending />
+				} catch (err) {
+					<p class="caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -545,26 +576,32 @@ describe('try block', () => {
 	});
 
 	it('pending block throwing without catch bubbles to parent try/catch', async () => {
-		component ThrowingPending() {
-			throw new Error('pending exploded');
-			<p>{'should not render'}</p>
+		function ThrowingPending() {
+			return <>
+				throw new Error('pending exploded');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p class="parent-caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p class="parent-caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
-		component Inner() {
-			try {
-				let &[data] = trackAsync(() => new Promise(() => {}));
-				<p class="resolved">{data}</p>
-			} pending {
-				<ThrowingPending />
-			}
+		function Inner() {
+			return <>
+				try {
+					let &[data] = trackAsync(() => new Promise(() => {}));
+					<p class="resolved">{data}</p>
+				} pending {
+					<ThrowingPending />
+				}
+			</>;
 		}
 
 		render(App);
@@ -586,25 +623,27 @@ describe('try block', () => {
 			first_resolve = resolve;
 		});
 
-		component App() {
-			try {
-				let &[name] = trackAsync(() => first_promise);
-				let &[length] = trackAsync(() => {
-					// Read name synchronously — throws ASYNC_DERIVED_READ_THROWN
-					// while name is still pending, triggering the deferred mechanism.
-					const n = name;
-					return new Promise<number>((resolve) => {
-						second_resolve = resolve;
-					}).then((val) => n.length + val);
-				});
-				<p class="resolved">
-					{name}
-					{' has length '}
-					{length}
-				</p>
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[name] = trackAsync(() => first_promise);
+					let &[length] = trackAsync(() => {
+						// Read name synchronously — throws ASYNC_DERIVED_READ_THROWN
+						// while name is still pending, triggering the deferred mechanism.
+						const n = name;
+						return new Promise<number>((resolve) => {
+							second_resolve = resolve;
+						}).then((val) => n.length + val);
+					});
+					<p class="resolved">
+						{name}
+						{' has length '}
+						{length}
+					</p>
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -647,28 +686,32 @@ describe('try block', () => {
 				first_resolve = resolve;
 			});
 
-			component PendingTracker() {
-				pending_render_count++;
-				<p class="pending">{'loading...'}</p>
+			function PendingTracker() {
+				return <>
+					pending_render_count++;
+					<p class="pending">{'loading...'}</p>
+				</>;
 			}
 
-			component App() {
-				try {
-					let &[name] = trackAsync(() => first_promise);
-					let &[length] = trackAsync(() => {
-						const n = name;
-						return new Promise<number>((resolve) => {
-							second_resolve = resolve;
-						}).then((val) => n.length + val);
-					});
-					<p class="resolved">
-						{name}
-						{' has length '}
-						{length}
-					</p>
-				} pending {
-					<PendingTracker />
-				}
+			function App() {
+				return <>
+					try {
+						let &[name] = trackAsync(() => first_promise);
+						let &[length] = trackAsync(() => {
+							const n = name;
+							return new Promise<number>((resolve) => {
+								second_resolve = resolve;
+							}).then((val) => n.length + val);
+						});
+						<p class="resolved">
+							{name}
+							{' has length '}
+							{length}
+						</p>
+					} pending {
+						<PendingTracker />
+					}
+				</>;
 			}
 
 			render(App);
@@ -710,25 +753,27 @@ describe('try block', () => {
 				first_reject = reject;
 			});
 
-			component App() {
-				try {
-					let &[name] = trackAsync(() => first_promise);
-					let &[length] = trackAsync(() => {
-						const n = name;
-						return new Promise<number>((resolve) => {
-							second_resolve = resolve;
-						}).then((val) => n.length + val);
-					});
-					<p class="resolved">
-						{name}
-						{' has length '}
-						{length}
-					</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<p class="caught">{(err as Error).message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						let &[name] = trackAsync(() => first_promise);
+						let &[length] = trackAsync(() => {
+							const n = name;
+							return new Promise<number>((resolve) => {
+								second_resolve = resolve;
+							}).then((val) => n.length + val);
+						});
+						<p class="resolved">
+							{name}
+							{' has length '}
+							{length}
+						</p>
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<p class="caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -765,25 +810,27 @@ describe('try block', () => {
 				first_resolve = resolve;
 			});
 
-			component App() {
-				try {
-					let &[name] = trackAsync(() => first_promise);
-					let &[length] = trackAsync(() => {
-						const n = name;
-						return new Promise<number>((_, reject) => {
-							second_reject = reject;
+			function App() {
+				return <>
+					try {
+						let &[name] = trackAsync(() => first_promise);
+						let &[length] = trackAsync(() => {
+							const n = name;
+							return new Promise<number>((_, reject) => {
+								second_reject = reject;
+							});
 						});
-					});
-					<p class="resolved">
-						{name}
-						{' has length '}
-						{length}
-					</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<p class="caught">{(err as Error).message}</p>
-				}
+						<p class="resolved">
+							{name}
+							{' has length '}
+							{length}
+						</p>
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<p class="caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -817,25 +864,31 @@ describe('try block', () => {
 	);
 
 	it('resolved try block without catch bubbles error to parent try/catch', async () => {
-		component ThrowingChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('async failed')));
-			<p class="resolved">{data}</p>
+		function ThrowingChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('async failed')));
+				<p class="resolved">{data}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p class="parent-caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p class="parent-caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -869,15 +922,17 @@ describe('try block', () => {
 
 			let data: any;
 
-			component App() {
-				try {
-					data = trackAsync(() => user_promise);
-					<p class="resolved">{data.value}</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<p class="caught">{(err as Error).message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						data = trackAsync(() => user_promise);
+						<p class="resolved">{data.value}</p>
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<p class="caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -922,25 +977,27 @@ describe('try block', () => {
 			let name: any;
 			let length: any;
 
-			component App() {
-				try {
-					name = trackAsync(() => first_promise);
-					length = trackAsync(() => {
-						const n = name.value;
-						return new Promise<number>((resolve) => {
-							resolve(n.length);
+			function App() {
+				return <>
+					try {
+						name = trackAsync(() => first_promise);
+						length = trackAsync(() => {
+							const n = name.value;
+							return new Promise<number>((resolve) => {
+								resolve(n.length);
+							});
 						});
-					});
-					<p class="resolved">
-						{name.value}
-						{' has length '}
-						{length.value}
-					</p>
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err) {
-					<p class="caught">{(err as Error).message}</p>
-				}
+						<p class="resolved">
+							{name.value}
+							{' has length '}
+							{length.value}
+						</p>
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err) {
+						<p class="caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -990,29 +1047,31 @@ describe('try block', () => {
 		let a: any;
 		let b: any;
 		let c: any;
-		component App() {
-			try {
-				a = trackAsync(() => a_promise);
-				b = trackAsync(() => {
-					const val = a.value;
-					return Promise.resolve(val.toUpperCase());
-				});
-				c = trackAsync(() => {
-					const val = b.value;
-					return Promise.resolve(val.length);
-				});
-				<p class="resolved">
-					{a.value}
-					{' → '}
-					{b.value}
-					{' → '}
-					{c.value}
-				</p>
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			} catch (err) {
-				<p class="caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					a = trackAsync(() => a_promise);
+					b = trackAsync(() => {
+						const val = a.value;
+						return Promise.resolve(val.toUpperCase());
+					});
+					c = trackAsync(() => {
+						const val = b.value;
+						return Promise.resolve(val.length);
+					});
+					<p class="resolved">
+						{a.value}
+						{' → '}
+						{b.value}
+						{' → '}
+						{c.value}
+					</p>
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				} catch (err) {
+					<p class="caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -1074,20 +1133,22 @@ describe('try block', () => {
 
 		let name: any;
 		let count: any;
-		component App() {
-			try {
-				name = trackAsync(() => first_promise);
-				count = trackAsync(() => second_promise);
-				<p class="resolved">
-					{name.value}
-					{' count: '}
-					{count.value}
-				</p>
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			} catch (err) {
-				<p class="caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					name = trackAsync(() => first_promise);
+					count = trackAsync(() => second_promise);
+					<p class="resolved">
+						{name.value}
+						{' count: '}
+						{count.value}
+					</p>
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				} catch (err) {
+					<p class="caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -1140,25 +1201,31 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (promise_settled = { type: 'rejected', value: e }),
 			);
 
-			component App() {
-				try {
-					<AsyncChild />
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err: Error) {
-					<p class="caught">{err.message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<AsyncChild />
+						<ThrowingChild />
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err: Error) {
+						<p class="caught">{err.message}</p>
+					}
+				</>;
 			}
 
 			let data: any;
-			component AsyncChild() {
-				data = trackAsync(() => user_promise);
-				<p class="async-resolved">{data.value}</p>
+			function AsyncChild() {
+				return <>
+					data = trackAsync(() => user_promise);
+					<p class="async-resolved">{data.value}</p>
+				</>;
 			}
 
-			component ThrowingChild() {
-				throw new Error('sync boom');
+			function ThrowingChild() {
+				return <>
+					throw new Error('sync boom');
+				</>;
 			}
 
 			render(App);
@@ -1205,25 +1272,31 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (promise_settled = { type: 'rejected', value: e }),
 			);
 
-			component App() {
-				try {
-					<AsyncChild />
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err: Error) {
-					<p class="caught">{err.message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<AsyncChild />
+						<ThrowingChild />
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err: Error) {
+						<p class="caught">{err.message}</p>
+					}
+				</>;
 			}
 
 			let data: any;
-			component AsyncChild() {
-				data = trackAsync(() => user_promise);
-				<p class="async-resolved">{data.value}</p>
+			function AsyncChild() {
+				return <>
+					data = trackAsync(() => user_promise);
+					<p class="async-resolved">{data.value}</p>
+				</>;
 			}
 
-			component ThrowingChild() {
-				throw new Error('sync boom');
+			function ThrowingChild() {
+				return <>
+					throw new Error('sync boom');
+				</>;
 			}
 
 			render(App);
@@ -1277,32 +1350,40 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (settled_b = { type: 'rejected', value: e }),
 			);
 
-			component App() {
-				try {
-					<ChildA />
-					<ChildB />
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err: Error) {
-					<p class="caught">{err.message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<ChildA />
+						<ChildB />
+						<ThrowingChild />
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err: Error) {
+						<p class="caught">{err.message}</p>
+					}
+				</>;
 			}
 
 			let dataA: any;
-			component ChildA() {
-				dataA = trackAsync(() => promise_a);
-				<p class="a">{dataA.value}</p>
+			function ChildA() {
+				return <>
+					dataA = trackAsync(() => promise_a);
+					<p class="a">{dataA.value}</p>
+				</>;
 			}
 
 			let dataB: any;
-			component ChildB() {
-				dataB = trackAsync(() => promise_b);
-				<p class="b">{dataB.value}</p>
+			function ChildB() {
+				return <>
+					dataB = trackAsync(() => promise_b);
+					<p class="b">{dataB.value}</p>
+				</>;
 			}
 
-			component ThrowingChild() {
-				throw new Error('sync boom');
+			function ThrowingChild() {
+				return <>
+					throw new Error('sync boom');
+				</>;
 			}
 
 			render(App);
@@ -1362,32 +1443,40 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (settled_b = { type: 'rejected', value: e }),
 			);
 
-			component App() {
-				try {
-					<ChildA />
-					<ChildB />
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				} catch (err: Error) {
-					<p class="caught">{err.message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<ChildA />
+						<ChildB />
+						<ThrowingChild />
+					} pending {
+						<p class="pending">{'loading...'}</p>
+					} catch (err: Error) {
+						<p class="caught">{err.message}</p>
+					}
+				</>;
 			}
 
 			let dataA: any;
-			component ChildA() {
-				dataA = trackAsync(() => promise_a);
-				<p class="a">{dataA.value}</p>
+			function ChildA() {
+				return <>
+					dataA = trackAsync(() => promise_a);
+					<p class="a">{dataA.value}</p>
+				</>;
 			}
 
 			let dataB: any;
-			component ChildB() {
-				dataB = trackAsync(() => promise_b);
-				<p class="b">{dataB.value}</p>
+			function ChildB() {
+				return <>
+					dataB = trackAsync(() => promise_b);
+					<p class="b">{dataB.value}</p>
+				</>;
 			}
 
-			component ThrowingChild() {
-				throw new Error('sync boom');
+			function ThrowingChild() {
+				return <>
+					throw new Error('sync boom');
+				</>;
 			}
 
 			render(App);
@@ -1425,25 +1514,31 @@ describe('sync error while async deriveds are pending', () => {
 	);
 
 	it('try block without catch propagates sync error to upstream boundary', async () => {
-		component ThrowingChild() {
-			throw new Error('no catch here');
-			<p>{'should not render'}</p>
+		function ThrowingChild() {
+			return <>
+				throw new Error('no catch here');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p class="upstream-caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p class="upstream-caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p class="inner-pending">{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p class="inner-pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -1454,21 +1549,25 @@ describe('sync error while async deriveds are pending', () => {
 	});
 
 	it('try block without catch propagates async rejection to upstream boundary', async () => {
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p class="upstream-caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p class="upstream-caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
-		component Inner() {
-			try {
-				let &[data] = trackAsync(() => Promise.reject(new Error('async no catch')));
-				<p class="resolved">{data}</p>
-			} pending {
-				<p class="inner-pending">{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					let &[data] = trackAsync(() => Promise.reject(new Error('async no catch')));
+					<p class="resolved">{data}</p>
+				} pending {
+					<p class="inner-pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -1487,21 +1586,25 @@ describe('sync error while async deriveds are pending', () => {
 				reject_fn = reject;
 			});
 
-			component App() {
-				try {
-					<Inner />
-				} catch (err) {
-					<p class="upstream-caught">{(err as Error).message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<Inner />
+					} catch (err) {
+						<p class="upstream-caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
-			component Inner() {
-				try {
-					let &[data] = trackAsync(() => user_promise);
-					<p class="resolved">{data}</p>
-				} pending {
-					<p class="inner-pending">{'loading...'}</p>
-				}
+			function Inner() {
+				return <>
+					try {
+						let &[data] = trackAsync(() => user_promise);
+						<p class="resolved">{data}</p>
+					} pending {
+						<p class="inner-pending">{'loading...'}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -1522,33 +1625,41 @@ describe('sync error while async deriveds are pending', () => {
 	);
 
 	it('nested try blocks without catch propagate error through multiple levels', async () => {
-		component ThrowingChild() {
-			throw new Error('deep error');
-			<p>{'should not render'}</p>
+		function ThrowingChild() {
+			return <>
+				throw new Error('deep error');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<Middle />
-			} catch (err) {
-				<p class="top-caught">{(err as Error).message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Middle />
+				} catch (err) {
+					<p class="top-caught">{(err as Error).message}</p>
+				}
+			</>;
 		}
 
-		component Middle() {
-			try {
-				<Inner />
-			} pending {
-				<p class="mid-pending">{'loading...'}</p>
-			}
+		function Middle() {
+			return <>
+				try {
+					<Inner />
+				} pending {
+					<p class="mid-pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p class="inner-pending">{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p class="inner-pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		render(App);
@@ -1559,17 +1670,21 @@ describe('sync error while async deriveds are pending', () => {
 	});
 
 	it('try block without catch throws to global when no upstream boundary exists', async () => {
-		component ThrowingChild() {
-			throw new Error('unhandled error');
-			<p>{'should not render'}</p>
+		function ThrowingChild() {
+			return <>
+				throw new Error('unhandled error');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p class="pending">{'loading...'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p class="pending">{'loading...'}</p>
+				}
+			</>;
 		}
 
 		expect(() => {
@@ -1585,21 +1700,25 @@ describe('sync error while async deriveds are pending', () => {
 				reject_fn = reject;
 			});
 
-			component Inner() {
-				try {
-					let &[data] = trackAsync(() => user_promise);
-					<p class="resolved">{data}</p>
-				} catch (err) {
-					<p class="downstream-caught">{(err as Error).message}</p>
-				}
+			function Inner() {
+				return <>
+					try {
+						let &[data] = trackAsync(() => user_promise);
+						<p class="resolved">{data}</p>
+					} catch (err) {
+						<p class="downstream-caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
-			component App() {
-				try {
-					<Inner />
-				} pending {
-					<p class="outer-pending">{'loading...'}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<Inner />
+					} pending {
+						<p class="outer-pending">{'loading...'}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -1638,22 +1757,26 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (user_settled = { type: 'rejected', value: e }),
 			);
 
-			component Inner() {
-				try {
-					let &[data] = trackAsync(() => user_promise);
-					throw new Error('synchronous error');
-					<p class="resolved">{data}</p>
-				} catch (err) {
-					<p class="downstream-caught">{(err as Error).message}</p>
-				}
+			function Inner() {
+				return <>
+					try {
+						let &[data] = trackAsync(() => user_promise);
+						throw new Error('synchronous error');
+						<p class="resolved">{data}</p>
+					} catch (err) {
+						<p class="downstream-caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
-			component App() {
-				try {
-					<Inner />
-				} pending {
-					<p class="outer-pending">{'loading...'}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<Inner />
+					} pending {
+						<p class="outer-pending">{'loading...'}</p>
+					}
+				</>;
 			}
 
 			render(App);
@@ -1693,22 +1816,26 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (user_settled = { type: 'rejected', value: e }),
 			);
 
-			component Inner() {
-				try {
-					let &[data] = trackAsync(() => user_promise);
-					throw new Error('synchronous error');
-					<p class="resolved">{data}</p>
-				} catch (err) {
-					<p class="downstream-caught">{(err as Error).message}</p>
-				}
+			function Inner() {
+				return <>
+					try {
+						let &[data] = trackAsync(() => user_promise);
+						throw new Error('synchronous error');
+						<p class="resolved">{data}</p>
+					} catch (err) {
+						<p class="downstream-caught">{(err as Error).message}</p>
+					}
+				</>;
 			}
 
-			component App() {
-				try {
-					<Inner />
-				} pending {
-					<p class="outer-pending">{'loading...'}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<Inner />
+					} pending {
+						<p class="outer-pending">{'loading...'}</p>
+					}
+				</>;
 			}
 
 			render(App);