ripple 0.3.7 → 0.3.9

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

@@ -1,4 +1,4 @@
-import { flushSync, track, trackSplit } from 'ripple';
+import { flushSync, track } from 'ripple';
 
 describe('lazy destructuring', () => {
 	it('supports tracked value getter and setter', () => {
@@ -29,14 +29,14 @@ describe('lazy destructuring', () => {
 		}
 
 		component Test() {
-			let a = track(1);
-			let b = track('hello');
+			let &[a] = track(1);
+			let &[b] = track('hello');
 
-			<Inner {@a} {@b} />
+			<Inner {a} {b} />
 			<button
 				onClick={() => {
-					@a = 2;
-					@b = 'world';
+					a = 2;
+					b = 'world';
 				}}
 			>
 				{'update'}
@@ -56,14 +56,14 @@ describe('lazy destructuring', () => {
 		}
 
 		component Test() {
-			let first = track(10);
-			let second = track(20);
+			let &[first] = track(10);
+			let &[second] = track(20);
 
-			<Inner {@first} {@second} />
+			<Inner {first} {second} />
 			<button
 				onClick={() => {
-					@first = 30;
-					@second = 40;
+					first = 30;
+					second = 40;
 				}}
 			>
 				{'update'}
@@ -107,12 +107,12 @@ describe('lazy destructuring', () => {
 		}
 
 		component Test() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			<Inner {@count} />
+			<Inner {count} />
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'increment'}
@@ -126,6 +126,38 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('1');
 	});
 
+	it('supports nested lazy destructuring in non-lazy component params', () => {
+		component Inner({ something: &[first, second] }) {
+			first = second.value + 1;
+			<pre>{`${first}-${second.value}`}</pre>
+		}
+
+		component Test() {
+			<Inner something={track(1)} />
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2-2');
+	});
+
+	it(
+		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy component params',
+		() => {
+			component Inner({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+				const before = `${first_rest?.value ?? 'nil'}-${rest_length}`;
+				rest_length = 0;
+				<pre>{`${head}-${before}-${first_rest?.value ?? 'nil'}-${rest_length}`}</pre>
+			}
+
+			component Test() {
+				<Inner values={[10, track(20), track(30)]} />
+			}
+
+			render(Test);
+			expect(container.querySelector('pre')!.textContent).toBe('10-20-2-nil-0');
+		},
+	);
+
 	it('supports lazy destructuring in function params', () => {
 		component Test() {
 			function getInfo(&{ x, y }: { x: number; y: number }) {
@@ -139,6 +171,42 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('10');
 	});
 
+	it('supports nested lazy destructuring in non-lazy function params', () => {
+		component Test() {
+			const something = track(1);
+
+			function getInfo({ something: &[first, second] }) {
+				first = second.value + 1;
+				return `${first}-${second.value}`;
+			}
+
+			const result = getInfo({ something });
+			<pre>{result}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('2-2');
+	});
+
+	it(
+		'preserves lazy getter/setter behavior for nested rest destructuring in non-lazy function params',
+		() => {
+			component Test() {
+				function summarize({ values: [head, ...&{ length: rest_length, 0: first_rest }] }) {
+					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);
+			expect(container.querySelector('pre')!.textContent).toBe('5-6-2-nil-0');
+		},
+	);
+
 	it('supports let lazy destructuring with assignment writeback', () => {
 		component Test() {
 			const obj = { a: 1, b: 2 };
@@ -205,21 +273,10 @@ describe('lazy destructuring', () => {
 		expect(container.querySelector('pre')!.textContent).toBe('1-99');
 	});
 
-	it('does not apply the track tuple fast-path to trackSplit lazy arrays', () => {
-		component Test() {
-			const source = { a: 1, b: 2, c: 3 };
-			let &[a, b, rest] = trackSplit(source, ['a', 'b']);
-			<pre>{`${@a}-${@b}-${@rest.c}`}</pre>
-		}
-
-		render(Test);
-		expect(container.querySelector('pre')!.textContent).toBe('1-2-3');
-	});
-
 	it('supports rest destructuring from iterable array-like tracked values', () => {
 		component Test() {
 			let &[value, ...rest] = track(0);
-			<pre>{`${value}-${@rest.length}-${@rest[0] === value}`}</pre>
+			<pre>{`${value}-${rest.length}-${rest[0] === value}`}</pre>
 		}
 
 		render(Test);
@@ -260,4 +317,59 @@ describe('lazy destructuring', () => {
 		render(Test);
 		expect(container.querySelector('pre')!.textContent).toBe('Alice-30');
 	});
+
+	it('supports standalone lazy array destructuring with track()', () => {
+		component Test() {
+			let count;
+			&[count] = track(0);
+			<div>{count}</div>
+			<button
+				onClick={() => {
+					count++;
+				}}
+			>
+				{'inc'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('div')!.textContent).toBe('0');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('div')!.textContent).toBe('1');
+	});
+
+	it('supports standalone lazy array destructuring with second element', () => {
+		component Test() {
+			let value;
+			let tracked;
+			&[value, tracked] = track(42);
+			<div>{value}</div>
+			<button
+				onClick={() => {
+					value = 100;
+				}}
+			>
+				{'set'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('div')!.textContent).toBe('42');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('div')!.textContent).toBe('100');
+	});
+
+	it('supports standalone lazy object destructuring', () => {
+		component Test() {
+			let a;
+			let b;
+			&{ a, b } = { a: 10, b: 20 };
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('10-20');
+	});
 });

package/tests/client/map.test.ripple

@@ -4,16 +4,16 @@ describe('RippleMap', () => {
 	it('handles set with update and delete operations with a reactive size var', () => {
 		component MapTest() {
 			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let value = track(() => map.get('a'));
-			let size = track(() => map.size);
+			let &[value] = track(() => map.get('a'));
+			let &[size] = track(() => map.size);
 
 			<button onClick={() => map.set('d', 4)}>{'set'}</button>
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
 			<button onClick={() => map.set('a', 5)}>{'update'}</button>
 
 			<pre>{map.get('d')}</pre>
-			<pre>{@size}</pre>
-			<pre>{@value}</pre>
+			<pre>{size}</pre>
+			<pre>{value}</pre>
 		}
 
 		render(MapTest);
@@ -61,10 +61,10 @@ describe('RippleMap', () => {
 	it('handles has operation and tracks reactive $has', () => {
 		component MapTest() {
 			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let has = track(() => map.has('b'));
+			let &[has] = track(() => map.has('b'));
 
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
-			<pre>{@has}</pre>
+			<pre>{has}</pre>
 		}
 
 		render(MapTest);
@@ -81,15 +81,15 @@ describe('RippleMap', () => {
 	it('handles reactivity of keys, values, and entries', () => {
 		component MapTest() {
 			let map = RippleMap([['x', 10], ['y', 20]]);
-			let keys = track(() => Array.from(map.keys()));
-			let values = track(() => Array.from(map.values()));
-			let entries = track(() => Array.from(map.entries()));
+			let &[keys] = track(() => Array.from(map.keys()));
+			let &[values] = track(() => Array.from(map.values()));
+			let &[entries] = track(() => Array.from(map.entries()));
 
 			<button onClick={() => map.delete('x')}>{'delete'}</button>
 
-			<pre>{JSON.stringify(@keys)}</pre>
-			<pre>{JSON.stringify(@values)}</pre>
-			<pre>{JSON.stringify(@entries)}</pre>
+			<pre>{JSON.stringify(keys)}</pre>
+			<pre>{JSON.stringify(values)}</pre>
+			<pre>{JSON.stringify(entries)}</pre>
 		}
 
 		render(MapTest);
@@ -142,11 +142,11 @@ describe('RippleMap', () => {
 	it('creates RippleMap with initial entries using RippleMap() shorthand syntax', () => {
 		component MapTest() {
 			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
-			let value = track(() => map.get('b'));
+			let &[value] = track(() => map.get('b'));
 
 			<button onClick={() => map.set('b', 10)}>{'update'}</button>
 			<pre>{map.size}</pre>
-			<pre>{@value}</pre>
+			<pre>{value}</pre>
 		}
 
 		render(MapTest);
@@ -164,13 +164,13 @@ describe('RippleMap', () => {
 	it('handles all operations with RippleMap() shorthand syntax', () => {
 		component MapTest() {
 			let map = RippleMap([['x', 100], ['y', 200]]);
-			let keys = track(() => Array.from(map.keys()));
+			let &[keys] = track(() => Array.from(map.keys()));
 
 			<button onClick={() => map.set('z', 300)}>{'add'}</button>
 			<button onClick={() => map.delete('x')}>{'delete'}</button>
 			<button onClick={() => map.clear()}>{'clear'}</button>
 
-			<pre>{JSON.stringify(@keys)}</pre>
+			<pre>{JSON.stringify(keys)}</pre>
 			<pre>{map.size}</pre>
 		}
 

package/tests/client/media-query.test.ripple

@@ -51,10 +51,10 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			const medium = MediaQuery(media);
+			let &[medium] = MediaQuery(media);
 
 			<div>
-				<p>{@medium}</p>
+				<p>{medium}</p>
 			</div>
 		}
 
@@ -86,20 +86,20 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			let show = track(true);
+			let &[show] = track(true);
 
-			if (@show) {
+			if (show) {
 				<Child />
 			}
 
-			<button onClick={() => (@show = !@show)}>{'Toggle Child'}</button>
+			<button onClick={() => (show = !show)}>{'Toggle Child'}</button>
 		}
 
 		component Child() {
-			const medium = MediaQuery(media);
+			let &[medium] = MediaQuery(media);
 
 			<div>
-				<p>{@medium}</p>
+				<p>{medium}</p>
 			</div>
 		}
 

package/tests/client/portal.test.ripple

@@ -46,15 +46,15 @@ describe('Portal', () => {
 
 	it('cleans up portal content when destroyed via conditional rendering', () => {
 		component TestPortal() {
-			let open = track(true);
+			let &[open] = track(true);
 
-			if (@open) {
+			if (open) {
 				<Portal target={document.body}>
 					<div class="test-portal">{'Conditional content'}</div>
 				</Portal>
 			}
 
-			<button onClick={() => (@open = false)}>{'Close'}</button>
+			<button onClick={() => (open = false)}>{'Close'}</button>
 		}
 
 		render(TestPortal);
@@ -72,19 +72,19 @@ describe('Portal', () => {
 
 	it('opens and closes portal via conditional rendering', () => {
 		component TestPortal() {
-			let open = track(false);
+			let &[open] = track(false);
 
-			if (@open) {
+			if (open) {
 				<Portal target={document.body}>
 					<div class="test-portal">
 						{'Content'}
-						<button onClick={() => (@open = false)}>{'Close'}</button>
+						<button onClick={() => (open = false)}>{'Close'}</button>
 					</div>
 				</Portal>
 			}
 
-			if (!@open) {
-				<button onClick={() => (@open = true)}>{'Open'}</button>
+			if (!open) {
+				<button onClick={() => (open = true)}>{'Open'}</button>
 			}
 		}
 
@@ -138,13 +138,13 @@ describe('Portal', () => {
 
 	it('handles portal with reactive content', () => {
 		component TestReactivePortal() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			<Portal target={document.body}>
 				<div class="test-portal">
 					{'Count: '}
-					{String(@count)}
-					<button onClick={() => @count++}>{'Increment'}</button>
+					{String(count)}
+					<button onClick={() => count++}>{'Increment'}</button>
 				</div>
 			</Portal>
 		}

package/tests/client/ref.test.ripple

@@ -50,7 +50,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = track('test');
+			let &[value] = track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
@@ -58,7 +58,7 @@ describe('refs', () => {
 
 			const props = {
 				id: 'example',
-				@value,
+				value,
 				[createRefKey()]: inputRef,
 			};
 
@@ -81,7 +81,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = track('test');
+			let &[value] = track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
@@ -89,7 +89,7 @@ describe('refs', () => {
 
 			const props = {
 				id: 'example',
-				@value,
+				value,
 			};
 
 			<input type="text" {ref inputRef} {...props} />