ripple 0.3.6 → 0.3.8

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

@@ -1,20 +1,42 @@
-import { flushSync, track } from 'ripple';
+import { flushSync, track, trackSplit } from 'ripple';
 
 describe('lazy destructuring', () => {
+	it('supports tracked value getter and setter', () => {
+		component Test() {
+			let count = track(1);
+			let doubled = track(() => count.value * 2);
+
+			<div>{`${count.value}-${doubled.value}`}</div>
+			<button
+				onClick={() => {
+					count.value = 5;
+				}}
+			>
+				{'set'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('div')!.textContent).toBe('1-2');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('div')!.textContent).toBe('5-10');
+	});
+
 	it('lazily accesses object properties with const', () => {
 		component Inner(&{ a, b }: { a: number; b: string }) {
 			<pre>{`${a}-${b}`}</pre>
 		}
 
 		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'}
@@ -34,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'}
@@ -85,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'}
@@ -183,6 +205,38 @@ 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.value}-${b.value}-${rest.value.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>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('0-1-false');
+	});
+
+	it('supports rest destructuring from length-only array-like sources', () => {
+		component Test() {
+			const source = { 0: 'x', 1: 'y', 2: 'z', length: 3 };
+			const &[first, ...rest] = source;
+			<pre>{`${first}-${rest.join(',')}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('x-y,z');
+	});
+
 	it('supports update expressions on lazy bindings with default values', () => {
 		component Test() {
 			const obj: { count?: number } = {};
@@ -206,4 +260,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} />