ripple 0.3.72 → 0.3.74

package/tests/client/try.test.tsrx

@@ -18,15 +18,15 @@ describe('try block with catch and pending', () => {
 			resolve_value = resolve;
 		});
 
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<span class="before">{'before'}</span>
-				try {
+				@try {
 					let &[data] = trackAsync(() => promise);
 					<p class="resolved">{data}</p>
-				} pending {}
+				} @pending {}
 				<span class="after">{'after'}</span>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -49,22 +49,18 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when a child throws synchronously', async () => {
-		function App() {
-			return <>
-				try {
-					<ThrowingChild />
-				} pending {
-					<p>{'loading...'}</p>
-				} catch (err) {
-					<p>{'caught error'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<ThrowingChild />
+			} @pending {
+				<p>{'loading...'}</p>
+			} @catch (err) {
+				<p>{'caught error'}</p>
+			}
 		}
 
 		function ThrowingChild() {
-			return <>
-				throw new Error('sync error');
-			</>;
+			throw new Error('sync error');
 		}
 
 		render(App);
@@ -76,24 +72,20 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when component throws after trackAsync with pending block', async () => {
-		function App() {
-			return <>
-				try {
-					<ThrowingAfterAsync />
-				} pending {
-					<p>{'loading...'}</p>
-				} catch (err) {
-					<p>{'caught error'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<ThrowingAfterAsync />
+			} @pending {
+				<p>{'loading...'}</p>
+			} @catch (err) {
+				<p>{'caught error'}</p>
+			}
 		}
 
-		function ThrowingAfterAsync() {
-			return <>
-				let &[data] = trackAsync(() => Promise.resolve('hello'));
-				throw new Error('error after await');
-				<p>{data}</p>
-			</>;
+		function ThrowingAfterAsync() @{
+			let &[data] = trackAsync(() => Promise.resolve('hello'));
+			throw new Error('error after await');
+			<p>{data}</p>
 		}
 
 		render(App);
@@ -106,17 +98,15 @@ describe('try block with catch and pending', () => {
 	});
 
 	it('catch block works when trackAsync rejects', async () => {
-		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>
-				}
-			</>;
+		function App() @{
+			@try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('rejected')));
+				<p>{data}</p>
+			} @pending {
+				<p>{'loading...'}</p>
+			} @catch (err) {
+				<p>{'caught rejection'}</p>
+			}
 		}
 
 		render(App);
@@ -147,19 +137,19 @@ describe('try block with catch and pending', () => {
 			return promise;
 		}
 
-		function App() {
-			return <>
-				let &[version] = track(0);
-				try {
+		function App() @{
+			let &[version] = track(0);
+			<>
+				@try {
 					let &[data] = trackAsync(() => createRequest(version));
 					<p class="resolved">{data}</p>
-				} pending {
+				} @pending {
 					<p class="pending">{'loading...'}</p>
-				} catch (err) {
+				} @catch (err) {
 					<p class="caught">{(err as Error).message}</p>
 				}
 				<button class="retry" onClick={() => version++}>{'Retry'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -211,18 +201,18 @@ describe('try block with catch and pending', () => {
 			return promise;
 		}
 
-		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) {
+		function 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"
@@ -230,11 +220,9 @@ describe('try block with catch and pending', () => {
 							version++;
 							reset();
 						}}
-					>
-						{'Retry'}
-					</button>
-				}
-			</>;
+					>{'Retry'}</button>
+				</>
+			}
 		}
 
 		render(App);
@@ -274,17 +262,17 @@ describe('try block', () => {
 	it(
 		'does not compile ref binds as async callbacks inside try/pending trackAsync branches',
 		async () => {
-			function App() {
-				return <>
-					let &[value, valueTracked] = track(1);
-					try {
-						let &[loaded] = trackAsync(() => Promise.resolve(value + 1));
+			function 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>
-					}
-				</>;
+					</>
+				} @pending {
+					<p>{'loading...'}</p>
+				}
 			}
 
 			render(App);
@@ -300,25 +288,21 @@ describe('try block', () => {
 	);
 
 	it('does not crash when trackAsync is used to render a list inside try/pending', async () => {
-		function App() {
-			return <>
-				try {
-					<AsyncChild />
-				} pending {
-					<p>{'loading...'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<AsyncChild />
+			} @pending {
+				<p>{'loading...'}</p>
+			}
 		}
 
-		function AsyncChild() {
-			return <>
-				let &[data] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
-				<ul>
-					for (let item of data) {
-						<li>{item}</li>
-					}
-				</ul>
-			</>;
+		function AsyncChild() @{
+			let &[data] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
+			<ul>
+				@for (let item of data) {
+					<li>{item}</li>
+				}
+			</ul>
 		}
 
 		render(App);
@@ -335,29 +319,25 @@ describe('try block', () => {
 	it(
 		'does not crash when async component with tracked state is used inside try/pending',
 		async () => {
-			function App() {
-				return <>
-					let &[query, queryTracked] = track('');
-					try {
-						<FilteredList {queryTracked} />
-					} pending {
-						<p>{'loading...'}</p>
-					}
-				</>;
+			function App() @{
+				let &[query, queryTracked] = track('');
+				@try {
+					<FilteredList {queryTracked} />
+				} @pending {
+					<p>{'loading...'}</p>
+				}
 			}
 
-			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>
-				</>;
+			function 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>
 			}
 
 			render(App);
@@ -371,20 +351,18 @@ describe('try block', () => {
 	);
 
 	it('if test condition stays synchronous once trackAsync has resolved', async () => {
-		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>
+		function 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>
 				}
-			</>;
+			} @pending {
+				<p>{'loading...'}</p>
+			}
 		}
 
 		render(App);
@@ -398,30 +376,28 @@ describe('try block', () => {
 	it('destroying try block while in pending state cleans up pending branch', async () => {
 		let pending_effect_teardown_count = 0;
 
-		function PendingChild() {
-			return <>
-				effect(() => {
-					return () => {
-						pending_effect_teardown_count++;
-					};
-				});
-				<p class="pending">{'loading...'}</p>
-			</>;
+		function PendingChild() @{
+			effect(() => {
+				return () => {
+					pending_effect_teardown_count++;
+				};
+			});
+			<p class="pending">{'loading...'}</p>
 		}
 
-		function App() {
-			return <>
-				let &[show] = track(true);
-				if (show) {
-					try {
+		function App() @{
+			let &[show] = track(true);
+			<>
+				@if (show) {
+					@try {
 						let &[data] = trackAsync(() => new Promise(() => {}));
 						<p class="resolved">{data}</p>
-					} pending {
+					} @pending {
 						<PendingChild />
 					}
 				}
 				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -446,32 +422,30 @@ describe('try block', () => {
 	it('destroying try block while in resolved state cleans up resolved branch', async () => {
 		let resolved_effect_teardown_count = 0;
 
-		function ResolvedChild(&{ data }: { data: string }) {
-			return <>
-				effect(() => {
-					return () => {
-						resolved_effect_teardown_count++;
-					};
-				});
-				<p class="resolved">{data}</p>
-			</>;
+		function ResolvedChild(&{ data }: { data: string }) @{
+			effect(() => {
+				return () => {
+					resolved_effect_teardown_count++;
+				};
+			});
+			<p class="resolved">{data}</p>
 		}
 
-		function App() {
-			return <>
-				let &[show] = track(true);
-				if (show) {
-					try {
+		function App() @{
+			let &[show] = track(true);
+			<>
+				@if (show) {
+					@try {
 						let &[data] = trackAsync(() => Promise.resolve('hello'));
 						<ResolvedChild {data} />
-					} pending {
+					} @pending {
 						<p class="pending">{'loading...'}</p>
-					} catch (err) {
+					} @catch (err) {
 						<p class="caught">{(err as Error).message}</p>
 					}
 				}
 				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -497,32 +471,30 @@ describe('try block', () => {
 	it('destroying try block while in catch state cleans up catch branch', async () => {
 		let catch_effect_teardown_count = 0;
 
-		function CatchChild({ error }: { error: Error }) {
-			return <>
-				effect(() => {
-					return () => {
-						catch_effect_teardown_count++;
-					};
-				});
-				<p class="caught">{error.message}</p>
-			</>;
+		function CatchChild({ error }: { error: Error }) @{
+			effect(() => {
+				return () => {
+					catch_effect_teardown_count++;
+				};
+			});
+			<p class="caught">{error.message}</p>
 		}
 
-		function App() {
-			return <>
-				let &[show] = track(true);
-				if (show) {
-					try {
+		function App() @{
+			let &[show] = track(true);
+			<>
+				@if (show) {
+					@try {
 						let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
 						<p class="resolved">{data}</p>
-					} pending {
+					} @pending {
 						<p class="pending">{'loading...'}</p>
-					} catch (err) {
+					} @catch (err) {
 						<CatchChild error={err as Error} />
 					}
 				}
 				<button class="toggle" onClick={() => (show = !show)}>{'toggle'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -544,23 +516,18 @@ describe('try block', () => {
 
 	it('pending block throwing renders catch block from the same try block', async () => {
 		function ThrowingPending() {
-			return <>
-				throw new Error('pending exploded');
-				<p>{'should not render'}</p>
-			</>;
+			throw new Error('pending exploded');
 		}
 
-		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>
-				}
-			</>;
+		function App() @{
+			@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);
@@ -577,31 +544,24 @@ describe('try block', () => {
 
 	it('pending block throwing without catch bubbles to parent try/catch', async () => {
 		function ThrowingPending() {
-			return <>
-				throw new Error('pending exploded');
-				<p>{'should not render'}</p>
-			</>;
+			throw new Error('pending exploded');
 		}
 
-		function App() {
-			return <>
-				try {
-					<Inner />
-				} catch (err) {
-					<p class="parent-caught">{(err as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<Inner />
+			} @catch (err) {
+				<p class="parent-caught">{(err as Error).message}</p>
+			}
 		}
 
-		function Inner() {
-			return <>
-				try {
-					let &[data] = trackAsync(() => new Promise(() => {}));
-					<p class="resolved">{data}</p>
-				} pending {
-					<ThrowingPending />
-				}
-			</>;
+		function Inner() @{
+			@try {
+				let &[data] = trackAsync(() => new Promise(() => {}));
+				<p class="resolved">{data}</p>
+			} @pending {
+				<ThrowingPending />
+			}
 		}
 
 		render(App);
@@ -623,27 +583,25 @@ describe('try block', () => {
 			first_resolve = resolve;
 		});
 
-		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>
-				}
-			</>;
+		function 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>
+			}
 		}
 
 		render(App);
@@ -686,32 +644,28 @@ describe('try block', () => {
 				first_resolve = resolve;
 			});
 
-			function PendingTracker() {
-				return <>
-					pending_render_count++;
-					<p class="pending">{'loading...'}</p>
-				</>;
+			function PendingTracker() @{
+				pending_render_count++;
+				<p class="pending">{'loading...'}</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 {
-						<PendingTracker />
-					}
-				</>;
+			function 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 />
+				}
 			}
 
 			render(App);
@@ -753,27 +707,25 @@ describe('try block', () => {
 				first_reject = reject;
 			});
 
-			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>
-					}
-				</>;
+			function 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>
+				}
 			}
 
 			render(App);
@@ -810,27 +762,25 @@ describe('try block', () => {
 				first_resolve = resolve;
 			});
 
-			function App() {
-				return <>
-					try {
-						let &[name] = trackAsync(() => first_promise);
-						let &[length] = trackAsync(() => {
-							const n = name;
-							return new Promise<number>((_, reject) => {
-								second_reject = reject;
-							});
+			function App() @{
+				@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);
@@ -864,31 +814,25 @@ describe('try block', () => {
 	);
 
 	it('resolved try block without catch bubbles error to parent try/catch', async () => {
-		function ThrowingChild() {
-			return <>
-				let &[data] = trackAsync(() => Promise.reject(new Error('async failed')));
-				<p class="resolved">{data}</p>
-			</>;
+		function ThrowingChild() @{
+			let &[data] = trackAsync(() => Promise.reject(new Error('async failed')));
+			<p class="resolved">{data}</p>
 		}
 
-		function App() {
-			return <>
-				try {
-					<Inner />
-				} catch (err) {
-					<p class="parent-caught">{(err as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<Inner />
+			} @catch (err) {
+				<p class="parent-caught">{(err as Error).message}</p>
+			}
 		}
 
-		function Inner() {
-			return <>
-				try {
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				}
-			</>;
+		function Inner() @{
+			@try {
+				<ThrowingChild />
+			} @pending {
+				<p class="pending">{'loading...'}</p>
+			}
 		}
 
 		render(App);
@@ -922,17 +866,15 @@ describe('try block', () => {
 
 			let data: any;
 
-			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>
-					}
-				</>;
+			function 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>
+				}
 			}
 
 			render(App);
@@ -977,27 +919,25 @@ describe('try block', () => {
 			let name: any;
 			let length: any;
 
-			function App() {
-				return <>
-					try {
-						name = trackAsync(() => first_promise);
-						length = trackAsync(() => {
-							const n = name.value;
-							return new Promise<number>((resolve) => {
-								resolve(n.length);
-							});
+			function App() @{
+				@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);
@@ -1047,31 +987,29 @@ describe('try block', () => {
 		let a: any;
 		let b: any;
 		let c: any;
-		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>
-				}
-			</>;
+		function 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>
+			}
 		}
 
 		render(App);
@@ -1133,22 +1071,20 @@ describe('try block', () => {
 
 		let name: any;
 		let count: any;
-		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>
-				}
-			</>;
+		function 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>
+			}
 		}
 
 		render(App);
@@ -1201,31 +1137,27 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (promise_settled = { type: 'rejected', value: e }),
 			);
 
-			function App() {
-				return <>
-					try {
+			function App() @{
+				@try {
+					<>
 						<AsyncChild />
 						<ThrowingChild />
-					} pending {
-						<p class="pending">{'loading...'}</p>
-					} catch (err: Error) {
-						<p class="caught">{err.message}</p>
-					}
-				</>;
+					</>
+				} @pending {
+					<p class="pending">{'loading...'}</p>
+				} @catch (err: Error) {
+					<p class="caught">{err.message}</p>
+				}
 			}
 
 			let data: any;
-			function AsyncChild() {
-				return <>
-					data = trackAsync(() => user_promise);
-					<p class="async-resolved">{data.value}</p>
-				</>;
+			function AsyncChild() @{
+				data = trackAsync(() => user_promise);
+				<p class="async-resolved">{data.value}</p>
 			}
 
 			function ThrowingChild() {
-				return <>
-					throw new Error('sync boom');
-				</>;
+				throw new Error('sync boom');
 			}
 
 			render(App);
@@ -1272,31 +1204,27 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (promise_settled = { type: 'rejected', value: e }),
 			);
 
-			function App() {
-				return <>
-					try {
+			function App() @{
+				@try {
+					<>
 						<AsyncChild />
 						<ThrowingChild />
-					} pending {
-						<p class="pending">{'loading...'}</p>
-					} catch (err: Error) {
-						<p class="caught">{err.message}</p>
-					}
-				</>;
+					</>
+				} @pending {
+					<p class="pending">{'loading...'}</p>
+				} @catch (err: Error) {
+					<p class="caught">{err.message}</p>
+				}
 			}
 
 			let data: any;
-			function AsyncChild() {
-				return <>
-					data = trackAsync(() => user_promise);
-					<p class="async-resolved">{data.value}</p>
-				</>;
+			function AsyncChild() @{
+				data = trackAsync(() => user_promise);
+				<p class="async-resolved">{data.value}</p>
 			}
 
 			function ThrowingChild() {
-				return <>
-					throw new Error('sync boom');
-				</>;
+				throw new Error('sync boom');
 			}
 
 			render(App);
@@ -1350,40 +1278,34 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (settled_b = { type: 'rejected', value: e }),
 			);
 
-			function App() {
-				return <>
-					try {
+			function App() @{
+				@try {
+					<>
 						<ChildA />
 						<ChildB />
 						<ThrowingChild />
-					} pending {
-						<p class="pending">{'loading...'}</p>
-					} catch (err: Error) {
-						<p class="caught">{err.message}</p>
-					}
-				</>;
+					</>
+				} @pending {
+					<p class="pending">{'loading...'}</p>
+				} @catch (err: Error) {
+					<p class="caught">{err.message}</p>
+				}
 			}
 
 			let dataA: any;
-			function ChildA() {
-				return <>
-					dataA = trackAsync(() => promise_a);
-					<p class="a">{dataA.value}</p>
-				</>;
+			function ChildA() @{
+				dataA = trackAsync(() => promise_a);
+				<p class="a">{dataA.value}</p>
 			}
 
 			let dataB: any;
-			function ChildB() {
-				return <>
-					dataB = trackAsync(() => promise_b);
-					<p class="b">{dataB.value}</p>
-				</>;
+			function ChildB() @{
+				dataB = trackAsync(() => promise_b);
+				<p class="b">{dataB.value}</p>
 			}
 
 			function ThrowingChild() {
-				return <>
-					throw new Error('sync boom');
-				</>;
+				throw new Error('sync boom');
 			}
 
 			render(App);
@@ -1443,40 +1365,34 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (settled_b = { type: 'rejected', value: e }),
 			);
 
-			function App() {
-				return <>
-					try {
+			function App() @{
+				@try {
+					<>
 						<ChildA />
 						<ChildB />
 						<ThrowingChild />
-					} pending {
-						<p class="pending">{'loading...'}</p>
-					} catch (err: Error) {
-						<p class="caught">{err.message}</p>
-					}
-				</>;
+					</>
+				} @pending {
+					<p class="pending">{'loading...'}</p>
+				} @catch (err: Error) {
+					<p class="caught">{err.message}</p>
+				}
 			}
 
 			let dataA: any;
-			function ChildA() {
-				return <>
-					dataA = trackAsync(() => promise_a);
-					<p class="a">{dataA.value}</p>
-				</>;
+			function ChildA() @{
+				dataA = trackAsync(() => promise_a);
+				<p class="a">{dataA.value}</p>
 			}
 
 			let dataB: any;
-			function ChildB() {
-				return <>
-					dataB = trackAsync(() => promise_b);
-					<p class="b">{dataB.value}</p>
-				</>;
+			function ChildB() @{
+				dataB = trackAsync(() => promise_b);
+				<p class="b">{dataB.value}</p>
 			}
 
 			function ThrowingChild() {
-				return <>
-					throw new Error('sync boom');
-				</>;
+				throw new Error('sync boom');
 			}
 
 			render(App);
@@ -1515,30 +1431,23 @@ describe('sync error while async deriveds are pending', () => {
 
 	it('try block without catch propagates sync error to upstream boundary', async () => {
 		function ThrowingChild() {
-			return <>
-				throw new Error('no catch here');
-				<p>{'should not render'}</p>
-			</>;
+			throw new Error('no catch here');
 		}
 
-		function App() {
-			return <>
-				try {
-					<Inner />
-				} catch (err) {
-					<p class="upstream-caught">{(err as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<Inner />
+			} @catch (err) {
+				<p class="upstream-caught">{(err as Error).message}</p>
+			}
 		}
 
-		function Inner() {
-			return <>
-				try {
-					<ThrowingChild />
-				} pending {
-					<p class="inner-pending">{'loading...'}</p>
-				}
-			</>;
+		function Inner() @{
+			@try {
+				<ThrowingChild />
+			} @pending {
+				<p class="inner-pending">{'loading...'}</p>
+			}
 		}
 
 		render(App);
@@ -1549,25 +1458,21 @@ describe('sync error while async deriveds are pending', () => {
 	});
 
 	it('try block without catch propagates async rejection to upstream boundary', async () => {
-		function App() {
-			return <>
-				try {
-					<Inner />
-				} catch (err) {
-					<p class="upstream-caught">{(err as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<Inner />
+			} @catch (err) {
+				<p class="upstream-caught">{(err as Error).message}</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>
-				}
-			</>;
+		function Inner() @{
+			@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);
@@ -1586,25 +1491,21 @@ describe('sync error while async deriveds are pending', () => {
 				reject_fn = reject;
 			});
 
-			function App() {
-				return <>
-					try {
-						<Inner />
-					} catch (err) {
-						<p class="upstream-caught">{(err as Error).message}</p>
-					}
-				</>;
+			function App() @{
+				@try {
+					<Inner />
+				} @catch (err) {
+					<p class="upstream-caught">{(err as Error).message}</p>
+				}
 			}
 
-			function Inner() {
-				return <>
-					try {
-						let &[data] = trackAsync(() => user_promise);
-						<p class="resolved">{data}</p>
-					} pending {
-						<p class="inner-pending">{'loading...'}</p>
-					}
-				</>;
+			function Inner() @{
+				@try {
+					let &[data] = trackAsync(() => user_promise);
+					<p class="resolved">{data}</p>
+				} @pending {
+					<p class="inner-pending">{'loading...'}</p>
+				}
 			}
 
 			render(App);
@@ -1626,40 +1527,31 @@ describe('sync error while async deriveds are pending', () => {
 
 	it('nested try blocks without catch propagate error through multiple levels', async () => {
 		function ThrowingChild() {
-			return <>
-				throw new Error('deep error');
-				<p>{'should not render'}</p>
-			</>;
+			throw new Error('deep error');
 		}
 
-		function App() {
-			return <>
-				try {
-					<Middle />
-				} catch (err) {
-					<p class="top-caught">{(err as Error).message}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<Middle />
+			} @catch (err) {
+				<p class="top-caught">{(err as Error).message}</p>
+			}
 		}
 
-		function Middle() {
-			return <>
-				try {
-					<Inner />
-				} pending {
-					<p class="mid-pending">{'loading...'}</p>
-				}
-			</>;
+		function Middle() @{
+			@try {
+				<Inner />
+			} @pending {
+				<p class="mid-pending">{'loading...'}</p>
+			}
 		}
 
-		function Inner() {
-			return <>
-				try {
-					<ThrowingChild />
-				} pending {
-					<p class="inner-pending">{'loading...'}</p>
-				}
-			</>;
+		function Inner() @{
+			@try {
+				<ThrowingChild />
+			} @pending {
+				<p class="inner-pending">{'loading...'}</p>
+			}
 		}
 
 		render(App);
@@ -1671,20 +1563,15 @@ describe('sync error while async deriveds are pending', () => {
 
 	it('try block without catch throws to global when no upstream boundary exists', async () => {
 		function ThrowingChild() {
-			return <>
-				throw new Error('unhandled error');
-				<p>{'should not render'}</p>
-			</>;
+			throw new Error('unhandled error');
 		}
 
-		function App() {
-			return <>
-				try {
-					<ThrowingChild />
-				} pending {
-					<p class="pending">{'loading...'}</p>
-				}
-			</>;
+		function App() @{
+			@try {
+				<ThrowingChild />
+			} @pending {
+				<p class="pending">{'loading...'}</p>
+			}
 		}
 
 		expect(() => {
@@ -1700,25 +1587,21 @@ describe('sync error while async deriveds are pending', () => {
 				reject_fn = reject;
 			});
 
-			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>
-					}
-				</>;
+			function Inner() @{
+				@try {
+					let &[data] = trackAsync(() => user_promise);
+					<p class="resolved">{data}</p>
+				} @catch (err) {
+					<p class="downstream-caught">{(err as Error).message}</p>
+				}
 			}
 
-			function App() {
-				return <>
-					try {
-						<Inner />
-					} pending {
-						<p class="outer-pending">{'loading...'}</p>
-					}
-				</>;
+			function App() @{
+				@try {
+					<Inner />
+				} @pending {
+					<p class="outer-pending">{'loading...'}</p>
+				}
 			}
 
 			render(App);
@@ -1757,26 +1640,22 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (user_settled = { type: 'rejected', value: e }),
 			);
 
-			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>
-					}
-				</>;
+			function 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 App() {
-				return <>
-					try {
-						<Inner />
-					} pending {
-						<p class="outer-pending">{'loading...'}</p>
-					}
-				</>;
+			function App() @{
+				@try {
+					<Inner />
+				} @pending {
+					<p class="outer-pending">{'loading...'}</p>
+				}
 			}
 
 			render(App);
@@ -1816,26 +1695,22 @@ describe('sync error while async deriveds are pending', () => {
 				(e) => (user_settled = { type: 'rejected', value: e }),
 			);
 
-			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>
-					}
-				</>;
+			function 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 App() {
-				return <>
-					try {
-						<Inner />
-					} pending {
-						<p class="outer-pending">{'loading...'}</p>
-					}
-				</>;
+			function App() @{
+				@try {
+					<Inner />
+				} @pending {
+					<p class="outer-pending">{'loading...'}</p>
+				}
 			}
 
 			render(App);