ripple 0.3.67 → 0.3.69

package/tests/server/lazy-destructuring.test.tsrx

@@ -3,13 +3,13 @@ import { track } from 'ripple';
 
 describe('lazy destructuring', () => {
 	it('supports tracked value getter and setter', async () => {
-		component Test() {
-			let count = track(1);
-			let derived = track(() => count.value * 2);
-
-			count.value = 3;
-
-			<pre>{`${count.value}-${derived.value}`}</pre>
+		function Test() {
+			return <>
+				let count = track(1);
+				let derived = track(() => count.value * 2);
+				count.value = 3;
+				<pre>{`${count.value}-${derived.value}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -17,12 +17,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('lazily accesses object properties', async () => {
-		component Inner(&{ a, b }: { a: number; b: string }) {
-			<pre>{`${a}-${b}`}</pre>
+		function Inner(&{ a, b }: { a: number; b: string }) {
+			return <><pre>{`${a}-${b}`}</pre></>;
 		}
 
-		component Test() {
-			<Inner a={1} b="hello" />
+		function Test() {
+			return <><Inner a={1} b="hello" /></>;
 		}
 
 		const { body } = await render(Test);
@@ -30,10 +30,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports default values in lazy object destructuring', async () => {
-		component Test() {
-			const obj: { a: number; b?: number } = { a: 5 };
-			const &{ a, b = 99 } = obj;
-			<pre>{`${a}-${b}`}</pre>
+		function Test() {
+			return <>
+				const obj: { a: number; b?: number } = { a: 5 };
+				const &{ a, b = 99 } = obj;
+				<pre>{`${a}-${b}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -41,13 +43,15 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports nested lazy destructuring in non-lazy component params', async () => {
-		component Inner({ something: &[first, second] }: { something: Tracked<number> }) {
-			first = second.value + 1;
-			<pre>{`${first}-${second.value}`}</pre>
+		function Inner({ something: &[first, second] }: { something: Tracked<number> }) {
+			return <>
+				first = second.value + 1;
+				<pre>{`${first}-${second.value}`}</pre>
+			</>;
 		}
 
-		component Test() {
-			<Inner something={track(1)} />
+		function Test() {
+			return <><Inner something={track(1)} /></>;
 		}
 
 		const { body } = await render(Test);
@@ -55,12 +59,14 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports let lazy destructuring with assignment writeback', async () => {
-		component Test() {
-			const obj = { a: 1, b: 2 };
-			let &{ a, b } = obj;
-			a = 10;
-			b = 20;
-			<pre>{`${obj.a}-${obj.b}`}</pre>
+		function Test() {
+			return <>
+				const obj = { a: 1, b: 2 };
+				let &{ a, b } = obj;
+				a = 10;
+				b = 20;
+				<pre>{`${obj.a}-${obj.b}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -68,12 +74,14 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports compound assignment operators on lazy bindings', async () => {
-		component Test() {
-			const obj = { a: 5, b: 10 };
-			let &{ a, b } = obj;
-			a += 3;
-			b *= 2;
-			<pre>{`${obj.a}-${obj.b}`}</pre>
+		function Test() {
+			return <>
+				const obj = { a: 5, b: 10 };
+				let &{ a, b } = obj;
+				a += 3;
+				b *= 2;
+				<pre>{`${obj.a}-${obj.b}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -81,13 +89,15 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports update expressions on lazy bindings', async () => {
-		component Test() {
-			const obj = { count: 0 };
-			let &{ count } = obj;
-			count++;
-			count++;
-			count--;
-			<pre>{obj.count}</pre>
+		function Test() {
+			return <>
+				const obj = { count: 0 };
+				let &{ count } = obj;
+				count++;
+				count++;
+				count--;
+				<pre>{obj.count}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -95,12 +105,14 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports update expressions on lazy bindings with default values', async () => {
-		component Test() {
-			const obj: { count?: number } = {};
-			let &{ count = 0 } = obj;
-			count++;
-			count++;
-			<pre>{obj.count}</pre>
+		function Test() {
+			return <>
+				const obj: { count?: number } = {};
+				let &{ count = 0 } = obj;
+				count++;
+				count++;
+				<pre>{obj.count}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -108,13 +120,15 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports function params with lazy destructuring and default values', async () => {
-		component Test() {
-			function calc(&{ x, y = 100 }: { x: number; y?: number }) {
-				return x + y;
-			}
-			const a = calc({ x: 5, y: 10 });
-			const b = calc({ x: 5 });
-			<pre>{`${a}-${b}`}</pre>
+		function Test() {
+			return <>
+				function calc(&{ x, y = 100 }: { x: number; y?: number }) {
+					return x + y;
+				}
+				const a = calc({ x: 5, y: 10 });
+				const b = calc({ x: 5 });
+				<pre>{`${a}-${b}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -122,15 +136,15 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports nested lazy destructuring in non-lazy function params', async () => {
-		component Test() {
-			const something = track(1);
-
-			function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
-				first = second.value + 1;
-				return `${first}-${second.value}`;
-			}
-
-			<pre>{getInfo({ something })}</pre>
+		function Test() {
+			return <>
+				const something = track(1);
+				function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
+					first = second.value + 1;
+					return `${first}-${second.value}`;
+				}
+				<pre>{getInfo({ something })}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -140,18 +154,20 @@ describe('lazy destructuring', () => {
 	it(
 		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy component params',
 		async () => {
-			component Inner({
+			function Inner({
 				values: [head, ...&{ 0: first_rest, length: rest_length }],
 			}: {
 				values: number[];
 			}) {
-				const before = `${first_rest}-${rest_length}`;
-				rest_length = 0;
-				<pre>{`${head}-${before}-${first_rest}-${rest_length}`}</pre>
+				return <>
+					const before = `${first_rest}-${rest_length}`;
+					rest_length = 0;
+					<pre>{`${head}-${before}-${first_rest}-${rest_length}`}</pre>
+				</>;
 			}
 
-			component Test() {
-				<Inner values={[10, 20, 30]} />
+			function Test() {
+				return <><Inner values={[10, 20, 30]} /></>;
 			}
 
 			const { body } = await render(Test);
@@ -162,18 +178,19 @@ describe('lazy destructuring', () => {
 	it(
 		'preserves lazy getter/setter behavior for RestElement nested destructuring in non-lazy function params',
 		async () => {
-			component Test() {
-				function getInfo({
-					values: [head, ...&{ 0: first_rest, length: rest_length }],
-				}: {
-					values: number[];
-				}) {
-					const before = `${first_rest}-${rest_length}`;
-					rest_length = 0;
-					return `${head}-${before}-${first_rest}-${rest_length}`;
-				}
-
-				<pre>{getInfo({ values: [5, 6, 7] })}</pre>
+			function Test() {
+				return <>
+					function getInfo({
+						values: [head, ...&{ 0: first_rest, length: rest_length }],
+					}: {
+						values: number[];
+					}) {
+						const before = `${first_rest}-${rest_length}`;
+						rest_length = 0;
+						return `${head}-${before}-${first_rest}-${rest_length}`;
+					}
+					<pre>{getInfo({ values: [5, 6, 7] })}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -182,10 +199,12 @@ describe('lazy destructuring', () => {
 	);
 
 	it('supports member access on lazy destructured objects', async () => {
-		component Test() {
-			const obj = { user: { name: 'Alice', age: 30 } };
-			const &{ user } = obj;
-			<pre>{`${user.name}-${user.age}`}</pre>
+		function Test() {
+			return <>
+				const obj = { user: { name: 'Alice', age: 30 } };
+				const &{ user } = obj;
+				<pre>{`${user.name}-${user.age}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -193,12 +212,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('preserves numeric member access on lazy array value bindings', async () => {
-		component Child({ pair: &[first] }: { pair: [{ 0: string }] }) {
-			<pre>{first[0]}</pre>
+		function Child({ pair: &[first] }: { pair: [{ 0: string }] }) {
+			return <><pre>{first[0]}</pre></>;
 		}
 
-		component Test() {
-			<Child pair={[{ 0: 'x' }]} />
+		function Test() {
+			return <><Child pair={[{ 0: 'x' }]} /></>;
 		}
 
 		const { body } = await render(Test);
@@ -206,10 +225,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest in lazy array destructuring for tracked tuples (iterable)', async () => {
-		component Test() {
-			let tracked_value = track(0);
-			let &[value, ...rest] = tracked_value;
-			<pre>{`${value}-${rest.length}-${rest[0] === tracked_value}`}</pre>
+		function Test() {
+			return <>
+				let tracked_value = track(0);
+				let &[value, ...rest] = tracked_value;
+				<pre>{`${value}-${rest.length}-${rest[0] === tracked_value}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -217,10 +238,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest in lazy array destructuring for length-only array-like values', async () => {
-		component Test() {
-			const array_like = { 0: 'x', 1: 'y', 2: 'z', length: 3 };
-			const &[first, ...rest] = array_like;
-			<pre>{`${first}-${rest.join('')}`}</pre>
+		function Test() {
+			return <>
+				const array_like = { 0: 'x', 1: 'y', 2: 'z', length: 3 };
+				const &[first, ...rest] = array_like;
+				<pre>{`${first}-${rest.join('')}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -228,16 +251,18 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest in lazy array destructuring for iterable values', async () => {
-		component Test() {
-			const source = {
-				*[Symbol.iterator]() {
-					yield 'x';
-					yield 'y';
-					yield 'z';
-				},
-			};
-			const &[first, ...rest] = source;
-			<pre>{`${first}-${rest.join('')}`}</pre>
+		function Test() {
+			return <>
+				const source = {
+					*[Symbol.iterator]() {
+						yield 'x';
+						yield 'y';
+						yield 'z';
+					},
+				};
+				const &[first, ...rest] = source;
+				<pre>{`${first}-${rest.join('')}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -245,10 +270,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports standalone lazy array destructuring with track()', async () => {
-		component Test() {
-			let count;
-			&[count] = track(0);
-			<div>{count}</div>
+		function Test() {
+			return <>
+				let count;
+				&[count] = track(0);
+				<div>{count}</div>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -256,15 +283,16 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports direct value access on tracked values during SSR', async () => {
-		component Test() {
-			let tracked = track(0);
-			++tracked.value;
-			tracked.value++;
-			tracked.value = tracked.value + 1;
-			let value = tracked.value;
-			let ref = tracked;
-
-			<pre>{`${value}-${ref === tracked}`}</pre>
+		function Test() {
+			return <>
+				let tracked = track(0);
+				++tracked.value;
+				tracked.value++;
+				tracked.value = tracked.value + 1;
+				let value = tracked.value;
+				let ref = tracked;
+				<pre>{`${value}-${ref === tracked}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -272,15 +300,19 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports lazy destructured tracked ref value access during SSR', async () => {
-		component Child({ pair: &[value, tracked_ref] }: { pair: Tracked<number> }) {
-			++tracked_ref.value;
-			tracked_ref.value++;
-			<pre>{`${value}-${tracked_ref.value}`}</pre>
+		function Child({ pair: &[value, tracked_ref] }: { pair: Tracked<number> }) {
+			return <>
+				++tracked_ref.value;
+				tracked_ref.value++;
+				<pre>{`${value}-${tracked_ref.value}`}</pre>
+			</>;
 		}
 
-		component Test() {
-			let tracked = track(0);
-			<Child pair={tracked} />
+		function Test() {
+			return <>
+				let tracked = track(0);
+				<Child pair={tracked} />
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -288,11 +320,13 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports standalone lazy object destructuring', async () => {
-		component Test() {
-			let a;
-			let b;
-			&{ a, b } = { a: 10, b: 20 };
-			<pre>{`${a}-${b}`}</pre>
+		function Test() {
+			return <>
+				let a;
+				let b;
+				&{ a, b } = { a: 10, b: 20 };
+				<pre>{`${a}-${b}`}</pre>
+			</>;
 		}
 
 		const { body } = await render(Test);
@@ -303,19 +337,23 @@ describe('lazy destructuring', () => {
 		it('preserves nested lazy object access inside lazy object as component params', async () => {
 			let inner_value = 7;
 
-			component Inner(&{ outer: &{ inner } }: { outer: { inner: number } }) {
-				const before = inner;
-				inner_value = 8;
-				<pre>{`${before}-${inner}`}</pre>
+			function Inner(&{ outer: &{ inner } }: { outer: { inner: number } }) {
+				return <>
+					const before = inner;
+					inner_value = 8;
+					<pre>{`${before}-${inner}`}</pre>
+				</>;
 			}
 
-			component Test() {
-				const outer = {
-					get inner() {
-						return inner_value;
-					},
-				};
-				<Inner {outer} />
+			function Test() {
+				return <>
+					const outer = {
+						get inner() {
+							return inner_value;
+						},
+					};
+					<Inner {outer} />
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -326,18 +364,22 @@ describe('lazy destructuring', () => {
 			let first_value = 3;
 			let second_value = 4;
 
-			component Inner({ pair: &[first, second] }: { pair: [number, number] }) {
-				const before = `${first}-${second}`;
-				first_value = 5;
-				second_value = 6;
-				<pre>{`${before}-${first}-${second}`}</pre>
+			function Inner({ pair: &[first, second] }: { pair: [number, number] }) {
+				return <>
+					const before = `${first}-${second}`;
+					first_value = 5;
+					second_value = 6;
+					<pre>{`${before}-${first}-${second}`}</pre>
+				</>;
 			}
 
-			component Test() {
-				const pair = [0, 0] as [number, number];
-				Object.defineProperty(pair, 0, { get: () => first_value });
-				Object.defineProperty(pair, 1, { get: () => second_value });
-				<Inner {pair} />
+			function Test() {
+				return <>
+					const pair = [0, 0] as [number, number];
+					Object.defineProperty(pair, 0, { get: () => first_value });
+					Object.defineProperty(pair, 1, { get: () => second_value });
+					<Inner {pair} />
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -345,19 +387,21 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves nested lazy object access inside lazy array as function params', async () => {
-			component Test() {
-				let name_value = 'Alice';
-				function getName(&[&{ name }]: [{ name: string }]) {
-					const before = name;
-					name_value = 'Bob';
-					return `${before}-${name}`;
-				}
-				const user = {
-					get name() {
-						return name_value;
-					},
-				};
-				<pre>{getName([user])}</pre>
+			function Test() {
+				return <>
+					let name_value = 'Alice';
+					function getName(&[&{ name }]: [{ name: string }]) {
+						const before = name;
+						name_value = 'Bob';
+						return `${before}-${name}`;
+					}
+					const user = {
+						get name() {
+							return name_value;
+						},
+					};
+					<pre>{getName([user])}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -365,19 +409,21 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves nested lazy array access inside lazy array as function params', async () => {
-			component Test() {
-				let first_value = 5;
-				let second_value = 6;
-				function getValues(&[&[a, b]]: [[number, number]]) {
-					const before = `${a}-${b}`;
-					first_value = 7;
-					second_value = 8;
-					return `${before}-${a}-${b}`;
-				}
-				const pair = [0, 0] as [number, number];
-				Object.defineProperty(pair, 0, { get: () => first_value });
-				Object.defineProperty(pair, 1, { get: () => second_value });
-				<pre>{getValues([pair])}</pre>
+			function Test() {
+				return <>
+					let first_value = 5;
+					let second_value = 6;
+					function getValues(&[&[a, b]]: [[number, number]]) {
+						const before = `${a}-${b}`;
+						first_value = 7;
+						second_value = 8;
+						return `${before}-${a}-${b}`;
+					}
+					const pair = [0, 0] as [number, number];
+					Object.defineProperty(pair, 0, { get: () => first_value });
+					Object.defineProperty(pair, 1, { get: () => second_value });
+					<pre>{getValues([pair])}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -387,21 +433,25 @@ describe('lazy destructuring', () => {
 		it('preserves three-level lazy object access as component params', async () => {
 			let c_value = 42;
 
-			component Inner(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
-				const before = c;
-				c_value = 43;
-				<pre>{`${before}-${c}`}</pre>
+			function Inner(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
+				return <>
+					const before = c;
+					c_value = 43;
+					<pre>{`${before}-${c}`}</pre>
+				</>;
 			}
 
-			component Test() {
-				const a = {
-					b: {
-						get c() {
-							return c_value;
+			function Test() {
+				return <>
+					const a = {
+						b: {
+							get c() {
+								return c_value;
+							},
 						},
-					},
-				};
-				<Inner {a} />
+					};
+					<Inner {a} />
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -409,19 +459,21 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves nested lazy object access inside lazy object as function params', async () => {
-			component Test() {
-				let inner_value = 11;
-				function getValue(&{ outer: &{ inner } }: { outer: { inner: number } }) {
-					const before = inner;
-					inner_value = 12;
-					return `${before}-${inner}`;
-				}
-				const outer = {
-					get inner() {
-						return inner_value;
-					},
-				};
-				<pre>{getValue({ outer })}</pre>
+			function Test() {
+				return <>
+					let inner_value = 11;
+					function getValue(&{ outer: &{ inner } }: { outer: { inner: number } }) {
+						const before = inner;
+						inner_value = 12;
+						return `${before}-${inner}`;
+					}
+					const outer = {
+						get inner() {
+							return inner_value;
+						},
+					};
+					<pre>{getValue({ outer })}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -431,14 +483,16 @@ describe('lazy destructuring', () => {
 		it(
 			'supports nested lazy array inside lazy object as function params with writeback',
 			async () => {
-				component Test() {
-					const obj = { pair: [1, 2] as [number, number] };
-					function bump(&{ pair: &[first, second] }: { pair: [number, number] }) {
-						first = first + 10;
-						second = second + 20;
-					}
-					bump(obj);
-					<pre>{`${obj.pair[0]}-${obj.pair[1]}`}</pre>
+				function Test() {
+					return <>
+						const obj = { pair: [1, 2] as [number, number] };
+						function bump(&{ pair: &[first, second] }: { pair: [number, number] }) {
+							first = first + 10;
+							second = second + 20;
+						}
+						bump(obj);
+						<pre>{`${obj.pair[0]}-${obj.pair[1]}`}</pre>
+					</>;
 				}
 
 				const { body } = await render(Test);
@@ -447,21 +501,23 @@ describe('lazy destructuring', () => {
 		);
 
 		it('preserves three-level lazy object access as function params', async () => {
-			component Test() {
-				let c_value = 99;
-				function getValue(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
-					const before = c;
-					c_value = 100;
-					return `${before}-${c}`;
-				}
-				const a = {
-					b: {
-						get c() {
-							return c_value;
+			function Test() {
+				return <>
+					let c_value = 99;
+					function getValue(&{ a: &{ b: &{ c } } }: { a: { b: { c: number } } }) {
+						const before = c;
+						c_value = 100;
+						return `${before}-${c}`;
+					}
+					const a = {
+						b: {
+							get c() {
+								return c_value;
+							},
 						},
-					},
-				};
-				<pre>{getValue({ a })}</pre>
+					};
+					<pre>{getValue({ a })}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -469,19 +525,21 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves nested lazy object access inside lazy object in const declaration', async () => {
-			component Test() {
-				let inner_value = 5;
-				const data = {
-					outer: {
-						get inner() {
-							return inner_value;
+			function Test() {
+				return <>
+					let inner_value = 5;
+					const data = {
+						outer: {
+							get inner() {
+								return inner_value;
+							},
 						},
-					},
-				};
-				const &{ outer: &{ inner } } = data;
-				const before = inner;
-				inner_value = 6;
-				<pre>{`${before}-${inner}`}</pre>
+					};
+					const &{ outer: &{ inner } } = data;
+					const before = inner;
+					inner_value = 6;
+					<pre>{`${before}-${inner}`}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -489,11 +547,13 @@ describe('lazy destructuring', () => {
 		});
 
 		it('supports nested lazy object inside lazy object in let with writeback', async () => {
-			component Test() {
-				const data = { outer: { inner: 5 } };
-				let &{ outer: &{ inner } } = data;
-				inner = 50;
-				<pre>{data.outer.inner}</pre>
+			function Test() {
+				return <>
+					const data = { outer: { inner: 5 } };
+					let &{ outer: &{ inner } } = data;
+					inner = 50;
+					<pre>{data.outer.inner}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -501,12 +561,14 @@ describe('lazy destructuring', () => {
 		});
 
 		it('supports nested lazy array inside lazy object in let with writeback', async () => {
-			component Test() {
-				const data = { pair: [1, 2] as [number, number] };
-				let &{ pair: &[first, second] } = data;
-				first = 100;
-				second = 200;
-				<pre>{`${data.pair[0]}-${data.pair[1]}`}</pre>
+			function Test() {
+				return <>
+					const data = { pair: [1, 2] as [number, number] };
+					let &{ pair: &[first, second] } = data;
+					first = 100;
+					second = 200;
+					<pre>{`${data.pair[0]}-${data.pair[1]}`}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -514,11 +576,13 @@ describe('lazy destructuring', () => {
 		});
 
 		it('supports three-level lazy object nesting in let with writeback', async () => {
-			component Test() {
-				const data = { a: { b: { c: 1 } } };
-				let &{ a: &{ b: &{ c } } } = data;
-				c = 999;
-				<pre>{data.a.b.c}</pre>
+			function Test() {
+				return <>
+					const data = { a: { b: { c: 1 } } };
+					let &{ a: &{ b: &{ c } } } = data;
+					c = 999;
+					<pre>{data.a.b.c}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -526,12 +590,14 @@ describe('lazy destructuring', () => {
 		});
 
 		it('supports compound assignment on deeply nested lazy bindings', async () => {
-			component Test() {
-				const data = { a: { b: { c: 5 } } };
-				let &{ a: &{ b: &{ c } } } = data;
-				c += 10;
-				c *= 2;
-				<pre>{data.a.b.c}</pre>
+			function Test() {
+				return <>
+					const data = { a: { b: { c: 5 } } };
+					let &{ a: &{ b: &{ c } } } = data;
+					c += 10;
+					c *= 2;
+					<pre>{data.a.b.c}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -539,19 +605,21 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves default values inside nested lazy destructuring', async () => {
-			component Test() {
-				let inner_value: number | undefined;
-				const data: { outer: { inner?: number } } = {
-					outer: {
-						get inner() {
-							return inner_value;
+			function Test() {
+				return <>
+					let inner_value: number | undefined;
+					const data: { outer: { inner?: number } } = {
+						outer: {
+							get inner() {
+								return inner_value;
+							},
 						},
-					},
-				};
-				const &{ outer: &{ inner = 42 } } = data;
-				const before = inner;
-				inner_value = 43;
-				<pre>{`${before}-${inner}`}</pre>
+					};
+					const &{ outer: &{ inner = 42 } } = data;
+					const before = inner;
+					inner_value = 43;
+					<pre>{`${before}-${inner}`}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -559,26 +627,28 @@ describe('lazy destructuring', () => {
 		});
 
 		it('preserves multiple sibling nested lazy destructures', async () => {
-			component Test() {
-				let x_value = 1;
-				let y_value = 2;
-				const data = {
-					a: {
-						get x() {
-							return x_value;
+			function Test() {
+				return <>
+					let x_value = 1;
+					let y_value = 2;
+					const data = {
+						a: {
+							get x() {
+								return x_value;
+							},
 						},
-					},
-					b: {
-						get y() {
-							return y_value;
+						b: {
+							get y() {
+								return y_value;
+							},
 						},
-					},
-				};
-				const &{ a: &{ x }, b: &{ y } } = data;
-				const before = `${x}-${y}`;
-				x_value = 3;
-				y_value = 4;
-				<pre>{`${before}-${x}-${y}`}</pre>
+					};
+					const &{ a: &{ x }, b: &{ y } } = data;
+					const before = `${x}-${y}`;
+					x_value = 3;
+					y_value = 4;
+					<pre>{`${before}-${x}-${y}`}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);
@@ -586,12 +656,14 @@ describe('lazy destructuring', () => {
 		});
 
 		it('supports multiple sibling nested lazy destructures with writeback', async () => {
-			component Test() {
-				const data = { a: { x: 1 }, b: { y: 2 } };
-				let &{ a: &{ x }, b: &{ y } } = data;
-				x = 11;
-				y = 22;
-				<pre>{`${data.a.x}-${data.b.y}`}</pre>
+			function Test() {
+				return <>
+					const data = { a: { x: 1 }, b: { y: 2 } };
+					let &{ a: &{ x }, b: &{ y } } = data;
+					x = 11;
+					y = 22;
+					<pre>{`${data.a.x}-${data.b.y}`}</pre>
+				</>;
 			}
 
 			const { body } = await render(Test);