ripple 0.3.7 → 0.3.9

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

@@ -4,16 +4,16 @@ describe('RippleArray > derived', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let doubled = track(() => items.map((x) => x * 2));
-			let filtered = track(() => items.filter((x) => x % 2 === 0));
-			let reduced = track(() => items.reduce((acc, val) => acc + val, 0));
-			let includes = track(() => items.includes(3));
+			let &[doubled] = track(() => items.map((x) => x * 2));
+			let &[filtered] = track(() => items.filter((x) => x % 2 === 0));
+			let &[reduced] = track(() => items.reduce((acc, val) => acc + val, 0));
+			let &[includes] = track(() => items.includes(3));
 
 			<button onClick={() => items.push(6)}>{'add item'}</button>
-			<pre>{JSON.stringify(@doubled)}</pre>
-			<pre>{JSON.stringify(@filtered)}</pre>
-			<pre>{@reduced}</pre>
-			<pre>{@includes.toString()}</pre>
+			<pre>{JSON.stringify(doubled)}</pre>
+			<pre>{JSON.stringify(filtered)}</pre>
+			<pre>{reduced}</pre>
+			<pre>{includes.toString()}</pre>
 		}
 
 		render(ArrayTest);
@@ -39,11 +39,11 @@ describe('RippleArray > derived', () => {
 	it('handles concat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
+			let &[concatenated] = track(() => items.concat([4, 5], 6, [7, 8]));
 
 			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@concatenated)}</pre>
+			<pre>{JSON.stringify(concatenated)}</pre>
 		}
 
 		render(ArrayTest);
@@ -65,11 +65,11 @@ describe('RippleArray > derived', () => {
 	it('handles array slice method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let sliced = track(() => items.slice(1, 4));
+			let &[sliced] = track(() => items.slice(1, 4));
 
 			<button onClick={() => (items[2] = 30)}>{'change middle'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@sliced)}</pre>
+			<pre>{JSON.stringify(sliced)}</pre>
 		}
 
 		render(ArrayTest);
@@ -91,8 +91,8 @@ describe('RippleArray > derived', () => {
 	it('handles find and findIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 10, 15, 20, 25);
-			let found = track(() => items.find((x) => x > 12));
-			let foundIndex = track(() => items.findIndex((x) => x > 12));
+			let &[found] = track(() => items.find((x) => x > 12));
+			let &[foundIndex] = track(() => items.findIndex((x) => x > 12));
 
 			<button
 				onClick={() => {
@@ -102,8 +102,8 @@ describe('RippleArray > derived', () => {
 			>
 				{'update values'}
 			</button>
-			<pre>{@found}</pre>
-			<pre>{@foundIndex}</pre>
+			<pre>{found}</pre>
+			<pre>{foundIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -125,8 +125,8 @@ describe('RippleArray > derived', () => {
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 15, 10, 20, 15);
-			let foundLast = track(() => items.findLast((x) => x === 15));
-			let foundLastIndex = track(() => items.findLastIndex((x) => x === 15));
+			let &[foundLast] = track(() => items.findLast((x) => x === 15));
+			let &[foundLastIndex] = track(() => items.findLastIndex((x) => x === 15));
 
 			<button
 				onClick={() => {
@@ -136,8 +136,8 @@ describe('RippleArray > derived', () => {
 			>
 				{'update values'}
 			</button>
-			<pre>{@foundLast}</pre>
-			<pre>{@foundLastIndex}</pre>
+			<pre>{foundLast}</pre>
+			<pre>{foundLastIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -159,7 +159,7 @@ describe('RippleArray > derived', () => {
 	it('handles every method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(2, 4, 6, 8);
-			let allEven = track(() => items.every((x) => x % 2 === 0));
+			let &[allEven] = track(() => items.every((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(3)}>{'add odd'}</button>
 			<button
@@ -170,7 +170,7 @@ describe('RippleArray > derived', () => {
 			>
 				{'ensure all even'}
 			</button>
-			<pre>{@allEven.toString()}</pre>
+			<pre>{allEven.toString()}</pre>
 		}
 
 		render(ArrayTest);
@@ -195,11 +195,11 @@ describe('RippleArray > derived', () => {
 	it('handles flat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray<number | number[]>([1, 2], [3, 4], 5);
-			let flattened = track(() => items.flat());
+			let &[flattened] = track(() => items.flat());
 
 			<button onClick={() => (items[0] = [6, 7, 8])}>{'change nested'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@flattened)}</pre>
+			<pre>{JSON.stringify(flattened)}</pre>
 		}
 
 		render(ArrayTest);
@@ -221,11 +221,11 @@ describe('RippleArray > derived', () => {
 	it('handles flatMap method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let flatMapped = track(() => items.flatMap((x) => [x, x * 2]));
+			let &[flatMapped] = track(() => items.flatMap((x) => [x, x * 2]));
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@flatMapped)}</pre>
+			<pre>{JSON.stringify(flatMapped)}</pre>
 		}
 
 		render(ArrayTest);
@@ -247,11 +247,11 @@ describe('RippleArray > derived', () => {
 	it('handles join method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('apple', 'banana', 'cherry');
-			let joined = track(() => items.join(', '));
+			let &[joined] = track(() => items.join(', '));
 
 			<button onClick={() => items.push('date')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@joined}</pre>
+			<pre>{joined}</pre>
 		}
 
 		render(ArrayTest);
@@ -275,7 +275,7 @@ describe('RippleArray > derived', () => {
 	it('handles lastIndexOf method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 2, 1);
-			let lastIndex = track(() => items.lastIndexOf(2));
+			let &[lastIndex] = track(() => items.lastIndexOf(2));
 
 			<button
 				onClick={() => {
@@ -285,7 +285,7 @@ describe('RippleArray > derived', () => {
 				{'add duplicate'}
 			</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@lastIndex}</pre>
+			<pre>{lastIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -307,11 +307,11 @@ describe('RippleArray > derived', () => {
 	it('handles reduceRight method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
+			let &[reduced] = track(() => items.reduceRight((acc, val) => acc + val, ''));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@reduced}</pre>
+			<pre>{reduced}</pre>
 		}
 
 		render(ArrayTest);
@@ -333,7 +333,7 @@ describe('RippleArray > derived', () => {
 	it('handles some method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 3, 5, 7);
-			let hasEven = track(() => items.some((x) => x % 2 === 0));
+			let &[hasEven] = track(() => items.some((x) => x % 2 === 0));
 
 			<button onClick={() => items.push(2)}>{'add even'}</button>
 			<button
@@ -344,7 +344,7 @@ describe('RippleArray > derived', () => {
 			>
 				{'ensure all odd'}
 			</button>
-			<pre>{@hasEven.toString()}</pre>
+			<pre>{hasEven.toString()}</pre>
 		}
 
 		render(ArrayTest);
@@ -369,7 +369,7 @@ describe('RippleArray > derived', () => {
 	it('handles toLocaleString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1000, 2000, 3000);
-			let localized = track(() => items.toLocaleString('en-US'));
+			let &[localized] = track(() => items.toLocaleString('en-US'));
 
 			<button
 				onClick={() => {
@@ -379,7 +379,7 @@ describe('RippleArray > derived', () => {
 				{'add item'}
 			</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@localized}</pre>
+			<pre>{localized}</pre>
 		}
 
 		render(ArrayTest);
@@ -401,11 +401,11 @@ describe('RippleArray > derived', () => {
 	it('handles toString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let string = track(() => items.toString());
+			let &[string] = track(() => items.toString());
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@string}</pre>
+			<pre>{string}</pre>
 		}
 
 		render(ArrayTest);
@@ -431,11 +431,11 @@ describe('RippleArray > derived', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let withReplaced = track(() => items.with(2, 30));
+			let &[withReplaced] = track(() => items.with(2, 30));
 
 			<button onClick={() => (items[2] = 50)}>{'change original'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@withReplaced)}</pre>
+			<pre>{JSON.stringify(withReplaced)}</pre>
 		}
 
 		render(ArrayTest);
@@ -479,16 +479,16 @@ describe('RippleArray > derived', () => {
 	it('handles at method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30, 40, 50);
-			let atIndex2 = track(() => items.at(2));
-			let atNegative1 = track(() => items.at(-1));
-			let atNegative2 = track(() => items.at(-2));
+			let &[atIndex2] = track(() => items.at(2));
+			let &[atNegative1] = track(() => items.at(-1));
+			let &[atNegative2] = track(() => items.at(-2));
 
 			<button onClick={() => (items[2] = 300)}>{'change index 2'}</button>
 			<button onClick={() => (items[items.length - 1] = 500)}>{'change last'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@atIndex2}</pre>
-			<pre>{@atNegative1}</pre>
-			<pre>{@atNegative2}</pre>
+			<pre>{atIndex2}</pre>
+			<pre>{atNegative1}</pre>
+			<pre>{atNegative2}</pre>
 		}
 
 		render(ArrayTest);

package/tests/client/array/array.iteration.test.ripple

@@ -4,11 +4,11 @@ describe('RippleArray > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let entries = track(() => Array.from(items.entries()));
+			let &[entries] = track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@entries)}</pre>
+			<pre>{JSON.stringify(entries)}</pre>
 		}
 
 		render(ArrayTest);
@@ -32,11 +32,11 @@ describe('RippleArray > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let keys = track(() => Array.from(items.keys()));
+			let &[keys] = track(() => Array.from(items.keys()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@keys)}</pre>
+			<pre>{JSON.stringify(keys)}</pre>
 		}
 
 		render(ArrayTest);
@@ -58,11 +58,11 @@ describe('RippleArray > iteration', () => {
 	it('handles values method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let values = track(() => Array.from(items.values()));
+			let &[values] = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@values)}</pre>
+			<pre>{JSON.stringify(values)}</pre>
 		}
 
 		render(ArrayTest);
@@ -84,20 +84,20 @@ describe('RippleArray > iteration', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let sum = track(0);
+			let &[sum] = track(0);
 
 			effect(() => {
-				@sum = 0;
+				sum = 0;
 				for (const item of items) {
 					untrack(() => {
-						@sum += item;
+						sum += item;
 					});
 				}
 			});
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@sum}</pre>
+			<pre>{sum}</pre>
 		}
 
 		render(ArrayTest);

package/tests/client/array/array.mutations.test.ripple

@@ -35,13 +35,13 @@ describe('RippleArray > mutations', () => {
 	it('handles push and pop operations with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let lastItem = track(() => items[items.length - 1]);
+			let &[lastItem] = track(() => items[items.length - 1]);
 
 			<button onClick={() => items.push(4)}>{'push'}</button>
 			<button onClick={() => items.pop()}>{'pop'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
-			<pre>{@lastItem}</pre>
+			<pre>{lastItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -74,13 +74,13 @@ describe('RippleArray > mutations', () => {
 	it('handles shift and unshift operations with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(2, 3, 4);
-			let firstItem = track(() => items[0]);
+			let &[firstItem] = track(() => items[0]);
 
 			<button onClick={() => items.unshift(1)}>{'unshift'}</button>
 			<button onClick={() => items.shift()}>{'shift'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
-			<pre>{@firstItem}</pre>
+			<pre>{firstItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -113,12 +113,12 @@ describe('RippleArray > mutations', () => {
 	it('handles splice operation with reactivity', () => {
 		component ArrayTest() {
 			let items: RippleArray<number | string> = new RippleArray(1, 2, 3, 4, 5);
-			let middleItem = track(() => items[2]);
+			let &[middleItem] = track(() => items[2]);
 
 			<button onClick={() => items.splice(1, 2, 'a', 'b')}>{'splice'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.length}</pre>
-			<pre>{@middleItem}</pre>
+			<pre>{middleItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -142,11 +142,11 @@ describe('RippleArray > mutations', () => {
 	it('handles fill operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let secondItem = track(() => items[1]);
+			let &[secondItem] = track(() => items[1]);
 
 			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@secondItem}</pre>
+			<pre>{secondItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -168,13 +168,13 @@ describe('RippleArray > mutations', () => {
 	it('handles reverse operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let firstItem = track(() => items[0]);
-			let lastItem = track(() => items[4]);
+			let &[firstItem] = track(() => items[0]);
+			let &[lastItem] = track(() => items[4]);
 
 			<button onClick={() => items.reverse()}>{'reverse'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@firstItem}</pre>
-			<pre>{@lastItem}</pre>
+			<pre>{firstItem}</pre>
+			<pre>{lastItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -198,12 +198,12 @@ describe('RippleArray > mutations', () => {
 	it('handles sort operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 3, 1, 4, 2);
-			let secondItem = track(() => items[1]);
+			let &[secondItem] = track(() => items[1]);
 
 			<button onClick={() => items.sort()}>{'sort ascending'}</button>
 			<button onClick={() => items.sort((a, b) => b - a)}>{'sort descending'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@secondItem}</pre>
+			<pre>{secondItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -288,12 +288,12 @@ describe('RippleArray > mutations', () => {
 	it('handles array index access with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30);
-			let firstItem = track(() => items[0]);
-			let secondItem = track(() => items[1]);
+			let &[firstItem] = track(() => items[0]);
+			let &[secondItem] = track(() => items[1]);
 
 			<button onClick={() => (items[0] = 100)}>{'change first'}</button>
-			<pre>{@firstItem}</pre>
-			<pre>{@secondItem}</pre>
+			<pre>{firstItem}</pre>
+			<pre>{secondItem}</pre>
 			<pre>{items[0]}</pre>
 			<pre>{items[1]}</pre>
 		}
@@ -321,12 +321,12 @@ describe('RippleArray > mutations', () => {
 	it('handles length property for reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let length = track(() => items.length);
+			let &[length] = track(() => items.length);
 
 			<button onClick={() => (items.length = 5)}>{'expand'}</button>
 			<button onClick={() => (items.length = 2)}>{'shrink'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@length}</pre>
+			<pre>{length}</pre>
 		}
 
 		render(ArrayTest);

package/tests/client/array/array.to-methods.test.ripple

@@ -8,11 +8,11 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let reversed = track(() => items.toReversed());
+			let &[reversed] = track(() => items.toReversed());
 
 			<button onClick={() => items.push(5)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@reversed)}</pre>
+			<pre>{JSON.stringify(reversed)}</pre>
 		}
 
 		render(ArrayTest);
@@ -38,11 +38,11 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(3, 1, 4, 2);
-			let sorted = track(() => items.toSorted());
+			let &[sorted] = track(() => items.toSorted());
 
 			<button onClick={() => items.push(0)}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@sorted)}</pre>
+			<pre>{JSON.stringify(sorted)}</pre>
 		}
 
 		render(ArrayTest);
@@ -68,11 +68,11 @@ describe('RippleArray > to* methods', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray<string | number>(1, 2, 3, 4, 5);
-			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
+			let &[spliced] = track(() => items.toSpliced(1, 2, 'a', 'b'));
 
 			<button onClick={() => (items[2] = 30)}>{'change item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@spliced)}</pre>
+			<pre>{JSON.stringify(spliced)}</pre>
 		}
 
 		render(ArrayTest);

package/tests/client/async-suspend.test.ripple

@@ -4,9 +4,9 @@ describe('async suspense', () => {
 	it('hides child content during re-suspension when tracked dependency changes', async () => {
 		let resolve_fn: (() => void) | null = null;
 
-		component Child({ count }: { count: any }) {
+		component Child({ countTracked }: { countTracked: any }) {
 			await track(() => {
-				@count;
+				countTracked.value;
 				return new Promise<void>((resolve) => {
 					resolve_fn = resolve;
 				});
@@ -16,15 +16,15 @@ describe('async suspense', () => {
 		}
 
 		component App() {
-			let count = track(0);
+			let &[count, countTracked] = track(0);
 
 			try {
-				<Child {count} />
+				<Child {countTracked} />
 			} pending {
 				<div class="pending">{'pending...'}</div>
 			}
 
-			<button onClick={() => @count++}>{'Increment'}</button>
+			<button onClick={() => count++}>{'Increment'}</button>
 		}
 
 		render(App);