ripple 0.3.7 → 0.3.9

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;
 				}

package/tests/client/set.test.ripple

@@ -60,10 +60,10 @@ describe('RippleSet', () => {
 	it('handles has operation', () => {
 		component SetTest() {
 			let items = new RippleSet([1, 2, 3]);
-			let hasValue = track(() => items.has(2));
+			let &[hasValue] = track(() => items.has(2));
 
 			<button onClick={() => items.delete(2)}>{'delete'}</button>
-			<pre>{@hasValue}</pre>
+			<pre>{hasValue}</pre>
 		}
 
 		render(SetTest);
@@ -100,11 +100,11 @@ describe('RippleSet', () => {
 	it('creates RippleSet with initial values using RippleSet() shorthand syntax', () => {
 		component SetTest() {
 			let items = RippleSet([1, 2, 3, 4]);
-			let hasValue = track(() => items.has(3));
+			let &[hasValue] = track(() => items.has(3));
 
 			<button onClick={() => items.delete(3)}>{'delete'}</button>
 			<pre>{items.size}</pre>
-			<pre>{@hasValue}</pre>
+			<pre>{hasValue}</pre>
 		}
 
 		render(SetTest);
@@ -123,13 +123,13 @@ describe('RippleSet', () => {
 	it('handles all operations with RippleSet() shorthand syntax', () => {
 		component SetTest() {
 			let items = RippleSet([10, 20, 30]);
-			let values = track(() => Array.from(items.values()));
+			let &[values] = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.add(40)}>{'add'}</button>
 			<button onClick={() => items.delete(20)}>{'delete'}</button>
 			<button onClick={() => items.clear()}>{'clear'}</button>
 
-			<pre>{JSON.stringify(@values)}</pre>
+			<pre>{JSON.stringify(values)}</pre>
 			<pre>{items.size}</pre>
 		}
 

package/tests/client/svg.test.ripple

@@ -290,7 +290,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let dynTag = track('polygon');
+			let &[dynTag] = track('polygon');
 			<SVG>
 				<@dynTag points="0,0 30,0 15,10" />
 			</SVG>
@@ -317,7 +317,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let &[Component] = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>
@@ -334,19 +334,19 @@ describe('SVG namespace handling', () => {
 
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
-			const tag = track('svg');
+			let &[tag] = track('svg');
 			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
 				<children />
 			</@tag>
 		}
 
 		component Polygon({ points }: PropsWithExtras<{ points: string }>) {
-			let dynTag = track('polygon');
+			let &[dynTag] = track('polygon');
 			<@dynTag {points} />
 		}
 
 		component App() {
-			let Component = track(() => Polygon);
+			let &[Component] = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>

package/tests/client/switch.test.ripple

@@ -3,12 +3,12 @@ import { flushSync, track } from 'ripple';
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
 		component App() {
-			let value = track('b');
+			let &[value] = track('b');
 
-			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
-			<button onClick={() => (@value = 'a')}>{'Change to A'}</button>
+			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
+			<button onClick={() => (value = 'a')}>{'Change to A'}</button>
 
-			switch (@value) {
+			switch (value) {
 				case 'a':
 					<div>{'Case A'}</div>
 					break;
@@ -38,11 +38,11 @@ describe('switch statements', () => {
 
 	it('renders switch with reactive discriminant', () => {
 		component App() {
-			let count = track(1);
+			let &[count] = track(1);
 
-			<button onClick={() => @count++}>{'Increment'}</button>
+			<button onClick={() => count++}>{'Increment'}</button>
 
-			switch (@count) {
+			switch (count) {
 				case 1:
 					<div>{'Count is 1'}</div>
 					break;
@@ -70,13 +70,13 @@ describe('switch statements', () => {
 
 	it('renders switch with default clause only', () => {
 		component App() {
-			let value = track('x');
+			let &[value] = track('x');
 
-			<button onClick={() => (@value = 'y')}>{'Change Value'}</button>
+			<button onClick={() => (value = 'y')}>{'Change Value'}</button>
 
-			switch (@value) {
+			switch (value) {
 				default:
-					<div>{'Default for ' + @value}</div>
+					<div>{'Default for ' + value}</div>
 			}
 		}
 
@@ -91,12 +91,12 @@ describe('switch statements', () => {
 
 	it('renders switch using empty case fall-through', () => {
 		component App() {
-			let value = track('a');
+			let &[value] = track('a');
 
-			<button onClick={() => (@value = 'b')}>{'Change to B'}</button>
-			<button onClick={() => (@value = 'c')}>{'Change to C'}</button>
+			<button onClick={() => (value = 'b')}>{'Change to B'}</button>
+			<button onClick={() => (value = 'c')}>{'Change to C'}</button>
 
-			switch (@value) {
+			switch (value) {
 				case 'a':
 					<div>{'Case A'}</div>
 					break;
@@ -133,29 +133,29 @@ describe('switch statements', () => {
 
 	it('renders switch with template content and reacts to tracked changes', () => {
 		component App() {
-			let status = track('active');
-			let message = track('');
+			let &[status] = track('active');
+			let &[message] = track('');
 
-			<button onClick={() => (@status = 'pending')}>{'Pending'}</button>
-			<button onClick={() => (@status = 'completed')}>{'Completed'}</button>
-			<button onClick={() => (@status = 'error')}>{'Error'}</button>
+			<button onClick={() => (status = 'pending')}>{'Pending'}</button>
+			<button onClick={() => (status = 'completed')}>{'Completed'}</button>
+			<button onClick={() => (status = 'error')}>{'Error'}</button>
 
-			switch (@status) {
+			switch (status) {
 				case 'active':
-					@message = 'Currently active.';
-					<div>{'Status: ' + @message}</div>
+					message = 'Currently active.';
+					<div>{'Status: ' + message}</div>
 					break;
 				case 'pending':
-					@message = 'Waiting for completion.';
-					<div>{'Status: ' + @message}</div>
+					message = 'Waiting for completion.';
+					<div>{'Status: ' + message}</div>
 					break;
 				case 'completed':
-					@message = 'Task finished!';
-					<div class="success">{'Status: ' + @message}</div>
+					message = 'Task finished!';
+					<div class="success">{'Status: ' + message}</div>
 					break;
 				default:
-					@message = 'An error occurred.';
-					<div class="error">{'Status: ' + @message}</div>
+					message = 'An error occurred.';
+					<div class="error">{'Status: ' + message}</div>
 			}
 		}
 
@@ -185,9 +185,9 @@ describe('switch statements', () => {
 		'renders switch with multiple non-empty fall-through cases and reacts to tracked changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let status = track(0);
+				let &[status] = track(0);
 				<div>
-					switch (@status) {
+					switch (status) {
 						case -1:
 						case 0:
 							<p>{' Idle'}</p>
@@ -208,7 +208,7 @@ describe('switch statements', () => {
 				</div>
 				<button
 					onClick={() => {
-						@status = (@status + 1) % 5;
+						status = (status + 1) % 5;
 					}}
 				>
 					{'Next Status'}
@@ -253,15 +253,15 @@ describe('switch statements', () => {
 		'renders a fall-through default in the middle of switch cases and reacts to changes without recreating DOM unnecessarily',
 		() => {
 			component App() {
-				let value = track('x');
+				let &[value] = track('x');
 
-				<button onClick={() => (@value = 'a')}>{'Set A'}</button>
-				<button onClick={() => (@value = 'b')}>{'Set B'}</button>
-				<button onClick={() => (@value = 'c')}>{'Set C'}</button>
-				<button onClick={() => (@value = 'x')}>{'Set X'}</button>
+				<button onClick={() => (value = 'a')}>{'Set A'}</button>
+				<button onClick={() => (value = 'b')}>{'Set B'}</button>
+				<button onClick={() => (value = 'c')}>{'Set C'}</button>
+				<button onClick={() => (value = 'x')}>{'Set X'}</button>
 
 				<div>
-					switch (@value) {
+					switch (value) {
 						case 'a':
 							<div>{' Case A'}</div>
 							break;
@@ -271,7 +271,7 @@ describe('switch statements', () => {
 						// The browser works correctly.
 						// So, we're just using a defined case in the middle to simulate default.
 						case 'x':
-							<div>{' Default Case for ' + @value}</div>
+							<div>{' Default Case for ' + value}</div>
 						case 'b':
 							<div>{' Case B'}</div>
 							break;
@@ -359,19 +359,19 @@ describe('switch statements', () => {
 
 	it('renders switch with block-scoped cases and break inside blocks', () => {
 		component App() {
-			let level = track(1);
+			let &[level] = track(1);
 
 			<button
 				onClick={() => {
-					if (@level === 1) @level = 2;
-					else if (@level === 2) @level = 3;
-					else @level = 1;
+					if (level === 1) level = 2;
+					else if (level === 2) level = 3;
+					else level = 1;
 				}}
 			>
 				{'Toggle'}
 			</button>
 
-			switch (@level) {
+			switch (level) {
 				case 1: {
 					<div class="level">{'Level 1'}</div>
 					break;

package/tests/client/try.test.ripple

@@ -88,10 +88,10 @@ describe('try block', () => {
 			}
 
 			component Child() {
-				let value = track(1);
-				await Promise.resolve(@value + 1);
+				let &[value, valueTracked] = track(1);
+				await Promise.resolve(value + 1);
 
-				<input type="number" {ref bindValue(value)} />
+				<input type="number" {ref bindValue(valueTracked)} />
 			}
 
 			render(App);
@@ -152,10 +152,10 @@ describe('try block', () => {
 			component FilteredList({ query }: { query: any }) {
 				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
 				let list = RippleArray.from(items);
-				let filtered = track(() => list.filter((item: string) => item.includes(@query)));
+				let &[filtered] = track(() => list.filter((item: string) => item.includes(query.value)));
 
 				<ul>
-					for (let item of @filtered) {
+					for (let item of filtered) {
 						<li>{item}</li>
 					}
 				</ul>

package/tests/client/url/url.derived.test.ripple

@@ -4,13 +4,13 @@ describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
 		component URLTest() {
 			const url = RippleURL('https://example.com/users/123?tab=profile');
-			let userId = track(() => url.pathname.split('/').pop());
-			let activeTab = track(() => url.searchParams.get('tab'));
+			let &[userId] = track(() => url.pathname.split('/').pop());
+			let &[activeTab] = track(() => url.searchParams.get('tab'));
 
 			<button onClick={() => (url.pathname = '/users/456')}>{'Change User'}</button>
 			<button onClick={() => url.searchParams.set('tab', 'settings')}>{'Change Tab'}</button>
-			<pre>{`User ID: ${@userId}`}</pre>
-			<pre>{`Active Tab: ${@activeTab}`}</pre>
+			<pre>{`User ID: ${userId}`}</pre>
+			<pre>{`Active Tab: ${activeTab}`}</pre>
 		}
 
 		render(URLTest);
@@ -57,10 +57,10 @@ describe('RippleURL > derived', () => {
 		}
 
 		component ChildB({ url }: { url: RippleURL }) {
-			let count = track(() => url.searchParams.get('count'));
+			let &[count] = track(() => url.searchParams.get('count'));
 
 			<pre>{url.href}</pre>
-			<pre>{@count}</pre>
+			<pre>{count}</pre>
 		}
 
 		render(ParentTest);

package/tests/client/url-search-params/url-search-params.derived.test.ripple

@@ -4,15 +4,15 @@ describe('RippleURLSearchParams > derived', () => {
 	it('handles reactive computed properties based on search params', () => {
 		component URLTest() {
 			const params = RippleURLSearchParams('page=1&limit=10');
-			let page = track(() => parseInt(params.get('page') || '1', 10));
-			let limit = track(() => parseInt(params.get('limit') || '10', 10));
-			let offset = track(() => (@page - 1) * @limit);
+			let &[page] = track(() => parseInt(params.get('page') || '1', 10));
+			let &[limit] = track(() => parseInt(params.get('limit') || '10', 10));
+			let &[offset] = track(() => (page - 1) * limit);
 
 			<button onClick={() => params.set('page', '2')}>{'next page'}</button>
 			<button onClick={() => params.set('page', '1')}>{'first page'}</button>
-			<pre>{`Page: ${@page}`}</pre>
-			<pre>{`Limit: ${@limit}`}</pre>
-			<pre>{`Offset: ${@offset}`}</pre>
+			<pre>{`Page: ${page}`}</pre>
+			<pre>{`Limit: ${limit}`}</pre>
+			<pre>{`Offset: ${offset}`}</pre>
 		}
 
 		render(URLTest);
@@ -62,9 +62,9 @@ describe('RippleURLSearchParams > derived', () => {
 		}
 
 		component ChildB({ params }: { params: RippleURLSearchParams }) {
-			let count = track(() => params.get('count'));
+			let &[count] = track(() => params.get('count'));
 
-			<pre>{@count}</pre>
+			<pre>{count}</pre>
 		}
 
 		render(ParentTest);