ripple 0.3.7 → 0.3.8

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

@@ -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'}
@@ -208,8 +208,8 @@ describe('lazy destructuring', () => {
 	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>
+			let [a, b, rest] = trackSplit(source, ['a', 'b']);
+			<pre>{`${a.value}-${b.value}-${rest.value.c}`}</pre>
 		}
 
 		render(Test);
@@ -219,7 +219,7 @@ describe('lazy destructuring', () => {
 	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 +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} />

package/tests/client/return.test.ripple

@@ -64,16 +64,16 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from false to true hides rest', () => {
 		component App() {
-			let condition = track(false);
+			let &[condition] = track(false);
 
 			<button
 				onClick={() => {
-					@condition = true;
+					condition = true;
 				}}
 			>
 				{'toggle'}
 			</button>
-			if (@condition) {
+			if (condition) {
 				<div class="guard">{'guard hit'}</div>
 				return;
 			}
@@ -93,16 +93,16 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from true to false shows rest', () => {
 		component App() {
-			let condition = track(true);
+			let &[condition] = track(true);
 
 			<button
 				onClick={() => {
-					@condition = false;
+					condition = false;
 				}}
 			>
 				{'toggle'}
 			</button>
-			if (@condition) {
+			if (condition) {
 				<div class="guard">{'guard hit'}</div>
 				return;
 			}
@@ -905,19 +905,19 @@ describe('early return in client components', () => {
 
 	it('reactive: nested return condition changes', () => {
 		component App() {
-			let a = track(true);
-			let b = track(true);
+			let &[a] = track(true);
+			let &[b] = track(true);
 
 			<button
 				onClick={() => {
-					@b = false;
+					b = false;
 				}}
 			>
 				{'toggle b'}
 			</button>
-			if (@a) {
+			if (a) {
 				<div class="a">{'a is true'}</div>
-				if (@b) {
+				if (b) {
 					<div class="b">{'b is true'}</div>
 					return;
 				}
@@ -940,18 +940,18 @@ describe('early return in client components', () => {
 
 	it('reactive: return in nested element scope', () => {
 		component App() {
-			let show = track(true);
+			let &[show] = track(true);
 
 			<button
 				onClick={() => {
-					@show = false;
+					show = false;
 				}}
 			>
 				{'toggle'}
 			</button>
 			<div class="outer">
 				<span class="label">{'outer'}</span>
-				if (@show) {
+				if (show) {
 					<p class="inner">{'inner'}</p>
 					return;
 				}
@@ -1214,17 +1214,17 @@ describe('early return in client components', () => {
 
 		it('reactive: nested return - outer condition changes to false shows rest', () => {
 			component App() {
-				let a = track(true);
+				let &[a] = track(true);
 				let b = true;
 
 				<button
 					onClick={() => {
-						@a = false;
+						a = false;
 					}}
 				>
 					{'toggle a'}
 				</button>
-				if (@a) {
+				if (a) {
 					<div class="a">{'a'}</div>
 					if (b) {
 						<div class="b">{'b'}</div>
@@ -1251,11 +1251,11 @@ describe('early return in client components', () => {
 			component App() {
 				let a = true;
 				let b = true;
-				let c = track(true);
+				let &[c] = track(true);
 
 				<button
 					onClick={() => {
-						@c = false;
+						c = false;
 					}}
 				>
 					{'toggle c'}
@@ -1264,7 +1264,7 @@ describe('early return in client components', () => {
 					<div class="a">{'a'}</div>
 					if (b) {
 						<div class="b">{'b'}</div>
-						if (@c) {
+						if (c) {
 							<div class="c">{'c'}</div>
 							return;
 						}
@@ -2208,15 +2208,15 @@ describe('early return in client components', () => {
 
 		it('nested reactive: toggling conditions updates DOM', () => {
 			component App() {
-				let a = track(false);
-				let b = track(false);
-				let c = track(false);
-				let d = track(false);
+				let &[a] = track(false);
+				let &[b] = track(false);
+				let &[c] = track(false);
+				let &[d] = track(false);
 
 				<button
 					class="toggle-c"
 					onClick={() => {
-						@c = !@c;
+						c = !c;
 					}}
 				>
 					{'toggle c'}
@@ -2224,24 +2224,24 @@ describe('early return in client components', () => {
 				<button
 					class="toggle-d"
 					onClick={() => {
-						@d = !@d;
+						d = !d;
 					}}
 				>
 					{'toggle d'}
 				</button>
 
 				<div class="outer">
-					if (@a) {
+					if (a) {
 						<span class="a">{'branch a'}</span>
 					}
 					<div class="inner">
-						if (@b) {
+						if (b) {
 							<span class="b">{'branch b'}</span>
 						}
-						if (@c) {
+						if (c) {
 							return;
 						}
-						if (@d) {
+						if (d) {
 							<span class="d">{'branch d'}</span>
 							return;
 						}
@@ -2279,19 +2279,19 @@ describe('early return in client components', () => {
 			() => {
 				component App() {
 					let a = true;
-					let b = track(true);
+					let &[b] = track(true);
 
 					<button
 						class="toggle"
 						onClick={() => {
-							@b = !@b;
+							b = !b;
 						}}
 					>
 						{'Toggle'}
 					</button>
 					if (a) {
 						<div class="a">{'a'}</div>
-						if (@b) {
+						if (b) {
 							<div class="b">{'b'}</div>
 							return;
 						}
@@ -2326,29 +2326,29 @@ describe('early return in client components', () => {
 
 		it('reactive sibling returns cycle through first, second, and fallback branches', () => {
 			component App() {
-				let mode = track('first');
+				let &[mode] = track('first');
 
 				<button
 					class="toggle"
 					onClick={() => {
-						if (@mode === 'first') {
-							@mode = 'second';
-						} else if (@mode === 'second') {
-							@mode = 'none';
+						if (mode === 'first') {
+							mode = 'second';
+						} else if (mode === 'second') {
+							mode = 'none';
 						} else {
-							@mode = 'first';
+							mode = 'first';
 						}
 					}}
 				>
 					{'toggle'}
 				</button>
 
-				if (@mode === 'first') {
+				if (mode === 'first') {
 					<div class="first">{'first guard'}</div>
 					return;
 				}
 
-				if (@mode === 'second') {
+				if (mode === 'second') {
 					<div class="second">{'second guard'}</div>
 					return;
 				}
@@ -2382,13 +2382,13 @@ describe('early return in client components', () => {
 
 		it('reactive nested returns with tracked outer and inner flags transition correctly', () => {
 			component App() {
-				let a = track(true);
-				let b = track(true);
+				let &[a] = track(true);
+				let &[b] = track(true);
 
 				<button
 					class="toggle-a"
 					onClick={() => {
-						@a = !@a;
+						a = !a;
 					}}
 				>
 					{'toggle a'}
@@ -2397,21 +2397,21 @@ describe('early return in client components', () => {
 				<button
 					class="toggle-b"
 					onClick={() => {
-						@b = !@b;
+						b = !b;
 					}}
 				>
 					{'toggle b'}
 				</button>
 
-				if (@a) {
+				if (a) {
 					<div class="a">{'a'}</div>
-					if (@b) {
+					if (b) {
 						<div class="b">{'b'}</div>
 						return;
 					}
 				}
 
-				<div class="rest">{@a ? 'a-on rest' : 'a-off rest'}</div>
+				<div class="rest">{a ? 'a-on rest' : 'a-off rest'}</div>
 			}
 
 			render(App);
@@ -2446,21 +2446,21 @@ describe('early return in client components', () => {
 
 		it('reactive else-if return chain transitions between return and non-return states', () => {
 			component App() {
-				let status = track(0);
+				let &[status] = track(0);
 
 				<button
 					class="toggle"
 					onClick={() => {
-						@status = (@status + 1) % 3;
+						status = (status + 1) % 3;
 					}}
 				>
 					{'toggle'}
 				</button>
 
-				if (@status === 0) {
+				if (status === 0) {
 					<div class="zero">{'zero'}</div>
 					return;
-				} else if (@status === 1) {
+				} else if (status === 1) {
 					<div class="one">{'one'}</div>
 					return;
 				}