ripple 0.3.72 → 0.3.74

package/tests/client/lazy-array.test.tsrx

@@ -3,24 +3,18 @@ import { flushSync, track } from 'ripple';
 
 describe('lazy array destructuring', () => {
 	it('updates unknown lazy array bindings through tracked values', () => {
-		function Child({ tr: &[count, tr] }) {
-			return <>
-				<button
-					onClick={() => {
-						count++;
-						tr[0]++;
-					}}
-				>
-					{count}
-				</button>
-			</>;
+		function Child({ tr: &[count, tr] }) @{
+			<button
+				onClick={() => {
+					count++;
+					tr[0]++;
+				}}
+			>{count}</button>
 		}
 
-		function App() {
-			return <>
-				let tracked = track(0);
-				<Child tr={tracked} />
-			</>;
+		function App() @{
+			let tracked = track(0);
+			<Child tr={tracked} />
 		}
 
 		render(App);

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

@@ -3,19 +3,17 @@ import { flushSync, track } from 'ripple';
 
 describe('lazy destructuring', () => {
 	it('supports tracked value getter and setter', () => {
-		function Test() {
-			return <>
-				let count = track(1);
-				let doubled = track(() => count.value * 2);
+		function Test() @{
+			let count = track(1);
+			let doubled = track(() => count.value * 2);
+			<>
 				<div>{`${count.value}-${doubled.value}`}</div>
 				<button
 					onClick={() => {
 						count.value = 5;
 					}}
-				>
-					{'set'}
-				</button>
-			</>;
+				>{'set'}</button>
+			</>
 		}
 
 		render(Test);
@@ -26,24 +24,22 @@ describe('lazy destructuring', () => {
 	});
 
 	it('lazily accesses object properties with const', () => {
-		function Inner(&{ a, b }: { a: number; b: string }) {
-			return <><pre>{`${a}-${b}`}</pre></>;
+		function Inner(&{ a, b }: { a: number; b: string }) @{
+			<pre>{`${a}-${b}`}</pre>
 		}
 
-		function Test() {
-			return <>
-				let &[a] = track(1);
-				let &[b] = track('hello');
+		function Test() @{
+			let &[a] = track(1);
+			let &[b] = track('hello');
+			<>
 				<Inner {a} {b} />
 				<button
 					onClick={() => {
 						a = 2;
 						b = 'world';
 					}}
-				>
-					{'update'}
-				</button>
-			</>;
+				>{'update'}</button>
+			</>
 		}
 
 		render(Test);
@@ -54,24 +50,22 @@ describe('lazy destructuring', () => {
 	});
 
 	it('lazily accesses array elements with const', () => {
-		function Inner(&{ first, second }: { first: number; second: number }) {
-			return <><pre>{`${first}-${second}`}</pre></>;
+		function Inner(&{ first, second }: { first: number; second: number }) @{
+			<pre>{`${first}-${second}`}</pre>
 		}
 
-		function Test() {
-			return <>
-				let &[first] = track(10);
-				let &[second] = track(20);
+		function Test() @{
+			let &[first] = track(10);
+			let &[second] = track(20);
+			<>
 				<Inner {first} {second} />
 				<button
 					onClick={() => {
 						first = 30;
 						second = 40;
 					}}
-				>
-					{'update'}
-				</button>
-			</>;
+				>{'update'}</button>
+			</>
 		}
 
 		render(Test);
@@ -82,12 +76,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('preserves numeric member access on lazy array value bindings', () => {
-		function Child({ pair: &[first] }: { pair: [{ 0: string }] }) {
-			return <><pre>{first[0]}</pre></>;
+		function Child({ pair: &[first] }: { pair: [{ 0: string }] }) @{
+			<pre>{first[0]}</pre>
 		}
 
-		function Test() {
-			return <><Child pair={[{ 0: 'x' }]} /></>;
+		function Test() @{
+			<Child pair={[{ 0: 'x' }]} />
 		}
 
 		render(Test);
@@ -95,12 +89,10 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports default values in lazy object destructuring', () => {
-		function Test() {
-			return <>
-				const obj: { a: number; b?: number } = { a: 5 };
-				const &{ a, b = 99 } = obj;
-				<pre>{`${a}-${b}`}</pre>
-			</>;
+		function Test() @{
+			const obj: { a: number; b?: number } = { a: 5 };
+			const &{ a, b = 99 } = obj;
+			<pre>{`${a}-${b}`}</pre>
 		}
 
 		render(Test);
@@ -108,12 +100,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports lazy destructuring in component params', () => {
-		function Inner(&{ name, age }: { name: string; age: number }) {
-			return <><pre>{`${name}-${age}`}</pre></>;
+		function Inner(&{ name, age }: { name: string; age: number }) @{
+			<pre>{`${name}-${age}`}</pre>
 		}
 
-		function Test() {
-			return <><Inner name="Alice" age={30} /></>;
+		function Test() @{
+			<Inner name="Alice" age={30} />
 		}
 
 		render(Test);
@@ -121,22 +113,20 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports lazy destructuring in component params with reactivity', () => {
-		function Inner(&{ count }: { count: number }) {
-			return <><pre>{count}</pre></>;
+		function Inner(&{ count }: { count: number }) @{
+			<pre>{count}</pre>
 		}
 
-		function Test() {
-			return <>
-				let &[count] = track(0);
+		function Test() @{
+			let &[count] = track(0);
+			<>
 				<Inner {count} />
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'increment'}
-				</button>
-			</>;
+				>{'increment'}</button>
+			</>
 		}
 
 		render(Test);
@@ -147,15 +137,13 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports nested lazy destructuring in non-lazy component params', () => {
-		function Inner({ something: &[first, second] }: { something: Tracked<number> }) {
-			return <>
-				first = second.value + 1;
-				<pre>{`${first}-${second.value}`}</pre>
-			</>;
+		function Inner({ something: &[first, second] }: { something: Tracked<number> }) @{
+			first = second.value + 1;
+			<pre>{`${first}-${second.value}`}</pre>
 		}
 
-		function Test() {
-			return <><Inner something={track(1)} /></>;
+		function Test() @{
+			<Inner something={track(1)} />
 		}
 
 		render(Test);
@@ -169,16 +157,14 @@ describe('lazy destructuring', () => {
 				values: [head, ...&{ length: rest_length, 0: first_rest }],
 			}: {
 				values: [number, Tracked<number>, Tracked<number>];
-			}) {
-				return <>
-					const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
-					rest_length = 0;
-					<pre>{`${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`}</pre>
-				</>;
+			}) @{
+				const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
+				rest_length = 0;
+				<pre>{`${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`}</pre>
 			}
 
-			function Test() {
-				return <><Inner values={[10, track(20), track(30)]} /></>;
+			function Test() @{
+				<Inner values={[10, track(20), track(30)]} />
 			}
 
 			render(Test);
@@ -187,14 +173,12 @@ describe('lazy destructuring', () => {
 	);
 
 	it('supports lazy destructuring in function params', () => {
-		function Test() {
-			return <>
-				function getInfo(&{ x, y }: { x: number; y: number }) {
-					return x + y;
-				}
-				const result = getInfo({ x: 3, y: 7 });
-				<pre>{result}</pre>
-			</>;
+		function Test() @{
+			function getInfo(&{ x, y }: { x: number; y: number }) {
+				return x + y;
+			}
+			const result = getInfo({ x: 3, y: 7 });
+			<pre>{result}</pre>
 		}
 
 		render(Test);
@@ -202,16 +186,14 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports nested lazy destructuring in non-lazy function params', () => {
-		function Test() {
-			return <>
-				const something = track(1);
-				function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
-					first = second.value + 1;
-					return `${first}-${second.value}`;
-				}
-				const result = getInfo({ something });
-				<pre>{result}</pre>
-			</>;
+		function Test() @{
+			const something = track(1);
+			function getInfo({ something: &[first, second] }: { something: Tracked<number> }) {
+				first = second.value + 1;
+				return `${first}-${second.value}`;
+			}
+			const result = getInfo({ something });
+			<pre>{result}</pre>
 		}
 
 		render(Test);
@@ -221,20 +203,18 @@ describe('lazy destructuring', () => {
 	it(
 		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy function params',
 		() => {
-			function Test() {
-				return <>
-					function summarize({
-						values: [head, ...&{ length: rest_length, 0: first_rest }],
-					}: {
-						values: [number, Tracked<number>, Tracked<number>];
-					}) {
-						const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
-						rest_length = 0;
-						return `${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`;
-					}
-					const result = summarize({ values: [5, track(6), track(7)] });
-					<pre>{result}</pre>
-				</>;
+			function Test() @{
+				function summarize({
+					values: [head, ...&{ length: rest_length, 0: first_rest }],
+				}: {
+					values: [number, Tracked<number>, Tracked<number>];
+				}) {
+					const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
+					rest_length = 0;
+					return `${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`;
+				}
+				const result = summarize({ values: [5, track(6), track(7)] });
+				<pre>{result}</pre>
 			}
 
 			render(Test);
@@ -243,14 +223,12 @@ describe('lazy destructuring', () => {
 	);
 
 	it('supports let lazy destructuring with assignment writeback', () => {
-		function Test() {
-			return <>
-				const obj = { a: 1, b: 2 };
-				let &{ a, b } = obj;
-				a = 10;
-				b = 20;
-				<pre>{`${obj.a}-${obj.b}`}</pre>
-			</>;
+		function Test() @{
+			const obj = { a: 1, b: 2 };
+			let &{ a, b } = obj;
+			a = 10;
+			b = 20;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
 		}
 
 		render(Test);
@@ -258,14 +236,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports compound assignment operators on lazy bindings', () => {
-		function Test() {
-			return <>
-				const obj = { a: 5, b: 10 };
-				let &{ a, b } = obj;
-				a += 3;
-				b *= 2;
-				<pre>{`${obj.a}-${obj.b}`}</pre>
-			</>;
+		function Test() @{
+			const obj = { a: 5, b: 10 };
+			let &{ a, b } = obj;
+			a += 3;
+			b *= 2;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
 		}
 
 		render(Test);
@@ -273,15 +249,13 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports update expressions on lazy bindings', () => {
-		function Test() {
-			return <>
-				const obj = { count: 0 };
-				let &{ count } = obj;
-				count++;
-				count++;
-				count--;
-				<pre>{obj.count}</pre>
-			</>;
+		function Test() @{
+			const obj = { count: 0 };
+			let &{ count } = obj;
+			count++;
+			count++;
+			count--;
+			<pre>{obj.count}</pre>
 		}
 
 		render(Test);
@@ -289,15 +263,13 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports function params with lazy destructuring and default values', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Test);
@@ -305,13 +277,11 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports lazy destructuring with default value writeback', () => {
-		function Test() {
-			return <>
-				const obj: { a: number; b?: number } = { a: 1 };
-				let &{ a, b = 50 } = obj;
-				b = 99;
-				<pre>{`${a}-${obj.b}`}</pre>
-			</>;
+		function Test() @{
+			const obj: { a: number; b?: number } = { a: 1 };
+			let &{ a, b = 50 } = obj;
+			b = 99;
+			<pre>{`${a}-${obj.b}`}</pre>
 		}
 
 		render(Test);
@@ -319,11 +289,9 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest destructuring from iterable array-like tracked values', () => {
-		function Test() {
-			return <>
-				let &[value, ...rest] = track(0);
-				<pre>{`${value}-${rest.length}-${(rest[0] as Tracked<number>).value === value}`}</pre>
-			</>;
+		function Test() @{
+			let &[value, ...rest] = track(0);
+			<pre>{`${value}-${rest.length}-${(rest[0] as Tracked<number>).value === value}`}</pre>
 		}
 
 		render(Test);
@@ -331,12 +299,10 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest destructuring from length-only array-like sources', () => {
-		function Test() {
-			return <>
-				const source = { 0: 'x', 1: 'y', 2: 'z', length: 3 };
-				const &[first, ...rest] = source;
-				<pre>{`${first}-${rest.join(',')}`}</pre>
-			</>;
+		function Test() @{
+			const source = { 0: 'x', 1: 'y', 2: 'z', length: 3 };
+			const &[first, ...rest] = source;
+			<pre>{`${first}-${rest.join(',')}`}</pre>
 		}
 
 		render(Test);
@@ -344,18 +310,16 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports rest destructuring from iterable sources', () => {
-		function Test() {
-			return <>
-				const source = {
-					*[Symbol.iterator]() {
-						yield 'x';
-						yield 'y';
-						yield 'z';
-					},
-				};
-				const &[first, ...rest] = source;
-				<pre>{`${first}-${rest.join(',')}`}</pre>
-			</>;
+		function Test() @{
+			const source = {
+				*[Symbol.iterator]() {
+					yield 'x';
+					yield 'y';
+					yield 'z';
+				},
+			};
+			const &[first, ...rest] = source;
+			<pre>{`${first}-${rest.join(',')}`}</pre>
 		}
 
 		render(Test);
@@ -363,14 +327,12 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports update expressions on lazy bindings with default values', () => {
-		function Test() {
-			return <>
-				const obj: { count?: number } = {};
-				let &{ count = 0 } = obj;
-				count++;
-				count++;
-				<pre>{obj.count}</pre>
-			</>;
+		function Test() @{
+			const obj: { count?: number } = {};
+			let &{ count = 0 } = obj;
+			count++;
+			count++;
+			<pre>{obj.count}</pre>
 		}
 
 		render(Test);
@@ -378,12 +340,10 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports member access on lazy destructured objects', () => {
-		function Test() {
-			return <>
-				const obj = { user: { name: 'Alice', age: 30 } };
-				const &{ user } = obj;
-				<pre>{`${user.name}-${user.age}`}</pre>
-			</>;
+		function Test() @{
+			const obj = { user: { name: 'Alice', age: 30 } };
+			const &{ user } = obj;
+			<pre>{`${user.name}-${user.age}`}</pre>
 		}
 
 		render(Test);
@@ -391,19 +351,17 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports standalone lazy array destructuring with track()', () => {
-		function Test() {
-			return <>
-				let count: number;
-				&[count] = track(0);
+		function Test() @{
+			let count: number;
+			&[count] = track(0);
+			<>
 				<div>{count}</div>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'inc'}
-				</button>
-			</>;
+				>{'inc'}</button>
+			</>
 		}
 
 		render(Test);
@@ -414,20 +372,18 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports standalone lazy array destructuring with second element', () => {
-		function Test() {
-			return <>
-				let value;
-				let tracked;
-				&[value, tracked] = track(42);
+		function Test() @{
+			let value;
+			let tracked;
+			&[value, tracked] = track(42);
+			<>
 				<div>{value}</div>
 				<button
 					onClick={() => {
 						value = 100;
 					}}
-				>
-					{'set'}
-				</button>
-			</>;
+				>{'set'}</button>
+			</>
 		}
 
 		render(Test);
@@ -438,16 +394,14 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports direct value access on tracked values', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Test);
@@ -455,19 +409,15 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports lazy destructured tracked ref value access', () => {
-		function Child({ pair: &[value, tracked_ref] }: { pair: Tracked<number> }) {
-			return <>
-				++tracked_ref.value;
-				tracked_ref.value++;
-				<pre>{`${value}-${tracked_ref.value}`}</pre>
-			</>;
+		function Child({ pair: &[value, tracked_ref] }: { pair: Tracked<number> }) @{
+			++tracked_ref.value;
+			tracked_ref.value++;
+			<pre>{`${value}-${tracked_ref.value}`}</pre>
 		}
 
-		function Test() {
-			return <>
-				let tracked = track(0);
-				<Child pair={tracked} />
-			</>;
+		function Test() @{
+			let tracked = track(0);
+			<Child pair={tracked} />
 		}
 
 		render(Test);
@@ -475,13 +425,11 @@ describe('lazy destructuring', () => {
 	});
 
 	it('supports standalone lazy object destructuring', () => {
-		function Test() {
-			return <>
-				let a;
-				let b;
-				&{ a, b } = { a: 10, b: 20 };
-				<pre>{`${a}-${b}`}</pre>
-			</>;
+		function Test() @{
+			let a;
+			let b;
+			&{ a, b } = { a: 10, b: 20 };
+			<pre>{`${a}-${b}`}</pre>
 		}
 
 		render(Test);