ripple 0.3.68 → 0.3.70

package/tests/server/try.test.tsrx

@@ -2,13 +2,15 @@ import { trackAsync } from 'ripple';
 
 describe('try block with catch and pending (server)', () => {
 	it('renders resolved content with an empty pending fallback', async () => {
-		component App() {
-			<span>{'before'}</span>
-			try {
-				let &[data] = trackAsync(() => Promise.resolve('resolved value'));
-				<p>{data}</p>
-			} pending {}
-			<span>{'after'}</span>
+		function App() {
+			return <>
+				<span>{'before'}</span>
+				try {
+					let &[data] = trackAsync(() => Promise.resolve('resolved value'));
+					<p>{data}</p>
+				} pending {}
+				<span>{'after'}</span>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -19,20 +21,24 @@ describe('try block with catch and pending (server)', () => {
 	});
 
 	it('catch block works when component throws before await with pending block', async () => {
-		component ThrowingChild() {
-			throw new Error('sync error');
-			let &[data] = trackAsync(() => Promise.resolve('hello'));
-			<p>{data}</p>
-		}
-
-		component App() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
+		function ThrowingChild() {
+			return <>
+				throw new Error('sync error');
+				let &[data] = trackAsync(() => Promise.resolve('hello'));
+				<p>{data}</p>
+			</>;
+		}
+
+		function App() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p>{'loading...'}</p>
+				} catch (err) {
+					<p>{'caught error'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -41,20 +47,24 @@ describe('try block with catch and pending (server)', () => {
 	});
 
 	it('catch block works when component throws after await with pending block', async () => {
-		component ThrowingAfterAwait() {
-			let &[data] = trackAsync(() => Promise.resolve('hello'));
-			throw new Error('error after await');
-			<p>{data}</p>
-		}
-
-		component App() {
-			try {
-				<ThrowingAfterAwait />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
+		function ThrowingAfterAwait() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('hello'));
+				throw new Error('error after await');
+				<p>{data}</p>
+			</>;
+		}
+
+		function App() {
+			return <>
+				try {
+					<ThrowingAfterAwait />
+				} pending {
+					<p>{'loading...'}</p>
+				} catch (err) {
+					<p>{'caught error'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -63,15 +73,17 @@ describe('try block with catch and pending (server)', () => {
 	});
 
 	it('catch block works with try/catch/pending when async body 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>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -80,17 +92,19 @@ describe('try block with catch and pending (server)', () => {
 	});
 
 	it('removes pending content for nested try/pending blocks', async () => {
-		component App() {
-			try {
+		function App() {
+			return <>
 				try {
-					let &[data] = trackAsync(() => Promise.resolve('resolved'));
-					<p>{data}</p>
+					try {
+						let &[data] = trackAsync(() => Promise.resolve('resolved'));
+						<p>{data}</p>
+					} pending {
+						<p>{'inner loading...'}</p>
+					}
 				} pending {
-					<p>{'inner loading...'}</p>
+					<p>{'outer loading...'}</p>
 				}
-			} pending {
-				<p>{'outer loading...'}</p>
-			}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -102,17 +116,21 @@ describe('try block with catch and pending (server)', () => {
 
 describe('trackAsync directly in component body (server)', () => {
 	it('resolves trackAsync used directly in a component', async () => {
-		component App() {
-			try {
-				<DataChild />
-			} catch (err) {
-				<p>{'error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<DataChild />
+				} catch (err) {
+					<p>{'error'}</p>
+				}
+			</>;
 		}
 
-		component DataChild() {
-			let &[data] = trackAsync(() => Promise.resolve('from child'));
-			<p>{data}</p>
+		function DataChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('from child'));
+				<p>{data}</p>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -121,18 +139,20 @@ describe('trackAsync directly in component body (server)', () => {
 	});
 
 	it('resolves multiple trackAsync values in the same component', async () => {
-		component App() {
-			try {
-				let &[a] = trackAsync(() => Promise.resolve('hello'));
-				let &[b] = trackAsync(() => Promise.resolve('world'));
-				<p>
-					{a}
-					{' '}
-					{b}
-				</p>
-			} catch (err) {
-				<p>{'error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[a] = trackAsync(() => Promise.resolve('hello'));
+					let &[b] = trackAsync(() => Promise.resolve('world'));
+					<p>
+						{a}
+						{' '}
+						{b}
+					</p>
+				} catch (err) {
+					<p>{'error'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -141,17 +161,21 @@ describe('trackAsync directly in component body (server)', () => {
 	});
 
 	it('renders catch when trackAsync rejects in a child component without its own try', async () => {
-		component RejectChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('child rejected')));
-			<p>{data}</p>
+		function RejectChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('child rejected')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<RejectChild />
-			} catch (err) {
-				<p>{'parent caught it'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<RejectChild />
+				} catch (err) {
+					<p>{'parent caught it'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -159,17 +183,19 @@ describe('trackAsync directly in component body (server)', () => {
 	});
 
 	it('chained trackAsync resolves both values', async () => {
-		component App() {
-			try {
-				let &[name] = trackAsync(() => Promise.resolve('ripple'));
-				let &[upper] = trackAsync(() => {
-					const n = name;
-					return Promise.resolve(n.toUpperCase());
-				});
-				<p>{upper}</p>
-			} catch (err) {
-				<p>{'error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[name] = trackAsync(() => Promise.resolve('ripple'));
+					let &[upper] = trackAsync(() => {
+						const n = name;
+						return Promise.resolve(n.toUpperCase());
+					});
+					<p>{upper}</p>
+				} catch (err) {
+					<p>{'error'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -178,17 +204,19 @@ describe('trackAsync directly in component body (server)', () => {
 	});
 
 	it('chained trackAsync catches when first rejects', async () => {
-		component App() {
-			try {
-				let &[name] = trackAsync(() => Promise.reject<string>(new Error('first failed')));
-				let &[upper] = trackAsync(() => {
-					const n = name;
-					return Promise.resolve(n.toUpperCase());
-				});
-				<p>{upper}</p>
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[name] = trackAsync(() => Promise.reject<string>(new Error('first failed')));
+					let &[upper] = trackAsync(() => {
+						const n = name;
+						return Promise.resolve(n.toUpperCase());
+					});
+					<p>{upper}</p>
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -196,17 +224,19 @@ describe('trackAsync directly in component body (server)', () => {
 	});
 
 	it('chained trackAsync catches when second rejects', async () => {
-		component App() {
-			try {
-				let &[name] = trackAsync(() => Promise.resolve('ripple'));
-				let &[upper] = trackAsync(() => {
-					const n = name;
-					return Promise.reject(new Error('second failed'));
-				});
-				<p>{upper}</p>
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					let &[name] = trackAsync(() => Promise.resolve('ripple'));
+					let &[upper] = trackAsync(() => {
+						const n = name;
+						return Promise.reject(new Error('second failed'));
+					});
+					<p>{upper}</p>
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -216,25 +246,31 @@ describe('trackAsync directly in component body (server)', () => {
 
 describe('nested child components with try/catch boundaries (server)', () => {
 	it('inner try/catch catches error from its own child', async () => {
-		component ThrowingChild() {
-			throw new Error('inner error');
-			<p>{'should not render'}</p>
+		function ThrowingChild() {
+			return <>
+				throw new Error('inner error');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<ThrowingChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<ThrowingChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p>{'outer caught'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p>{'outer caught'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -243,25 +279,31 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('inner try/catch catches async rejection from its own child', async () => {
-		component AsyncChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('async inner error')));
-			<p>{data}</p>
+		function AsyncChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('async inner error')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<AsyncChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<AsyncChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err) {
-				<p>{'outer caught'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err) {
+					<p>{'outer caught'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -270,25 +312,31 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('error propagates to outer catch when inner try has no catch', async () => {
-		component ThrowingChild() {
-			throw new Error('propagated error');
-			<p>{'should not render'}</p>
+		function ThrowingChild() {
+			return <>
+				throw new Error('propagated error');
+				<p>{'should not render'}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p>{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<ThrowingChild />
+				} pending {
+					<p>{'loading...'}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -297,25 +345,31 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('async rejection propagates to outer catch when inner try has no catch', async () => {
-		component AsyncChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('async propagated')));
-			<p>{data}</p>
+		function AsyncChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('async propagated')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<AsyncChild />
-			} pending {
-				<p>{'loading...'}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<AsyncChild />
+				} pending {
+					<p>{'loading...'}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -326,33 +380,41 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	it(
 		'multiple nested levels: error propagates through pending-only boundaries to nearest catch',
 		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 Level3() {
-				try {
-					<ThrowingChild />
-				} pending {
-					<p>{'level3 loading'}</p>
-				}
+			function Level3() {
+				return <>
+					try {
+						<ThrowingChild />
+					} pending {
+						<p>{'level3 loading'}</p>
+					}
+				</>;
 			}
 
-			component Level2() {
-				try {
-					<Level3 />
-				} pending {
-					<p>{'level2 loading'}</p>
-				}
+			function Level2() {
+				return <>
+					try {
+						<Level3 />
+					} pending {
+						<p>{'level2 loading'}</p>
+					}
+				</>;
 			}
 
-			component App() {
-				try {
-					<Level2 />
-				} catch (err: Error) {
-					<p>{err.message}</p>
-				}
+			function App() {
+				return <>
+					try {
+						<Level2 />
+					} catch (err: Error) {
+						<p>{err.message}</p>
+					}
+				</>;
 			}
 
 			const { body } = await render(App);
@@ -361,23 +423,29 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	);
 
 	it('sibling components: one fails, the other does not affect catch', async () => {
-		component GoodChild() {
-			let &[data] = trackAsync(() => Promise.resolve('good'));
-			<p>{data}</p>
+		function GoodChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('good'));
+				<p>{data}</p>
+			</>;
 		}
 
-		component BadChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('bad child')));
-			<p>{data}</p>
+		function BadChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('bad child')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<GoodChild />
-				<BadChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<GoodChild />
+					<BadChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -386,27 +454,33 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('independent try/catch boundaries each handle their own errors', async () => {
-		component FailChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
-			<p>{data}</p>
+		function FailChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component SuccessChild() {
-			let &[data] = trackAsync(() => Promise.resolve('success'));
-			<p>{data}</p>
+		function SuccessChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('success'));
+				<p>{data}</p>
+			</>;
 		}
 
-		component App() {
-			try {
-				<FailChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
-			try {
-				<SuccessChild />
-			} catch (err) {
-				<p>{'should not catch'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<FailChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+				try {
+					<SuccessChild />
+				} catch (err) {
+					<p>{'should not catch'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -416,24 +490,30 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('inner catch handles rejection, outer renders normally', async () => {
-		component AsyncChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('handled inside')));
-			<p>{data}</p>
+		function AsyncChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('handled inside')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<AsyncChild />
-			} catch (err: Error) {
-				<span>{err.message}</span>
-			}
+		function Inner() {
+			return <>
+				try {
+					<AsyncChild />
+				} catch (err: Error) {
+					<span>{err.message}</span>
+				}
+			</>;
 		}
 
-		component App() {
-			<div>
-				<h1>{'App'}</h1>
-				<Inner />
-			</div>
+		function App() {
+			return <>
+				<div>
+					<h1>{'App'}</h1>
+					<Inner />
+				</div>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -442,22 +522,26 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('sync error in child after trackAsync routes to catch boundary', async () => {
-		component BrokenChild() {
-			let &[data] = trackAsync(() => Promise.resolve('loaded'));
-			throw new Error('sync after async');
-			<p>{data}</p>
+		function BrokenChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('loaded'));
+				throw new Error('sync after async');
+				<p>{data}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<BrokenChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<BrokenChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			<Inner />
+		function App() {
+			return <><Inner /></>;
 		}
 
 		const { body } = await render(App);
@@ -465,25 +549,31 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('outer try with pending, inner try with catch: rejection goes to inner catch', async () => {
-		component AsyncChild() {
-			let &[data] = trackAsync(() => Promise.reject(new Error('inner rejection')));
-			<p>{data}</p>
+		function AsyncChild() {
+			return <>
+				let &[data] = trackAsync(() => Promise.reject(new Error('inner rejection')));
+				<p>{data}</p>
+			</>;
 		}
 
-		component Inner() {
-			try {
-				<AsyncChild />
-			} catch (err: Error) {
-				<p>{err.message}</p>
-			}
+		function Inner() {
+			return <>
+				try {
+					<AsyncChild />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			</>;
 		}
 
-		component App() {
-			try {
-				<Inner />
-			} pending {
-				<p>{'outer loading'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Inner />
+				} pending {
+					<p>{'outer loading'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -492,25 +582,29 @@ describe('nested child components with try/catch boundaries (server)', () => {
 	});
 
 	it('deeply nested: async resolves through multiple component layers', async () => {
-		component DataFetcher() {
-			let &[data] = trackAsync(() => Promise.resolve('deep data'));
-			<span>{data}</span>
+		function DataFetcher() {
+			return <>
+				let &[data] = trackAsync(() => Promise.resolve('deep data'));
+				<span>{data}</span>
+			</>;
 		}
 
-		component Level2() {
-			<div><DataFetcher /></div>
+		function Level2() {
+			return <><div><DataFetcher /></div></>;
 		}
 
-		component Level1() {
-			<section><Level2 /></section>
+		function Level1() {
+			return <><section><Level2 /></section></>;
 		}
 
-		component App() {
-			try {
-				<Level1 />
-			} catch (err) {
-				<p>{'error'}</p>
-			}
+		function App() {
+			return <>
+				try {
+					<Level1 />
+				} catch (err) {
+					<p>{'error'}</p>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);