ripple 0.2.49 → 0.2.50

package/tests/array.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, untrack, RippleArray } from 'ripple';
+import { mount, flushSync, effect, untrack, RippleArray, track } from 'ripple';
 import { ARRAY_SET_INDEX_AT, MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
 
 describe('RippleArray', () => {
@@ -55,13 +55,13 @@ describe('RippleArray', () => {
 	it('handles push and pop operations with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $lastItem = 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);
@@ -94,13 +94,13 @@ describe('RippleArray', () => {
 	it('handles shift and unshift operations with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(2, 3, 4);
-			let $firstItem = 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);
@@ -133,12 +133,12 @@ describe('RippleArray', () => {
 	it('handles splice operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $middleItem = 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);
@@ -162,11 +162,11 @@ describe('RippleArray', () => {
 	it('handles fill operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $secondItem = 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);
@@ -188,13 +188,13 @@ describe('RippleArray', () => {
 	it('handles reverse operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $firstItem = items[0];
-			let $lastItem = 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);
@@ -218,12 +218,12 @@ describe('RippleArray', () => {
 	it('handles sort operation with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 3, 1, 4, 2);
-			let $secondItem = 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);
@@ -253,16 +253,16 @@ describe('RippleArray', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $doubled = items.map(x => x * 2);
-			let $filtered = items.filter(x => (x % 2) === 0);
-			let $reduced = items.reduce((acc, val) => acc + val, 0);
-			let $includes = 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);
@@ -310,11 +310,11 @@ describe('RippleArray', () => {
 	it('handles entries method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let $entries = 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);
@@ -336,11 +336,11 @@ describe('RippleArray', () => {
 	it('handles concat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $concatenated = 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);
@@ -391,12 +391,12 @@ describe('RippleArray', () => {
 	it('handles $length property for reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $length = 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);
@@ -481,12 +481,12 @@ describe('RippleArray', () => {
 	it('handles array index access with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30);
-			let $firstItem = items[0];
-			let $secondItem = 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>
 		}
@@ -540,15 +540,15 @@ describe('RippleArray', () => {
 	it('handles find and findIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 10, 15, 20, 25);
-			let $found = items.find(x => x > 12);
-			let $foundIndex = items.findIndex(x => x > 12);
+			let found = track(() => items.find(x => x > 12));
+			let foundIndex = track(() => items.findIndex(x => x > 12));
 
 			<button onClick={() => {
 				items[1] = 13;
 				items[0] = 6;
 			}}>{'update values'}</button>
-			<pre>{$found}</pre>
-			<pre>{$foundIndex}</pre>
+			<pre>{@found}</pre>
+			<pre>{@foundIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -572,15 +572,15 @@ describe('RippleArray', () => {
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(5, 15, 10, 20, 15);
-			let $foundLast = items.findLast(x => x === 15);
-			let $foundLastIndex = items.findLastIndex(x => x === 15);
+			let foundLast = track(() => items.findLast(x => x === 15));
+			let foundLastIndex = track(() => items.findLastIndex(x => x === 15));
 
 			<button onClick={() => {
 				items[1] = 25;
 				items[4] = 15;
 			}}>{'update values'}</button>
-			<pre>{$foundLast}</pre>
-			<pre>{$foundLastIndex}</pre>
+			<pre>{@foundLast}</pre>
+			<pre>{@foundLastIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -602,14 +602,14 @@ describe('RippleArray', () => {
 	it('handles every method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(2, 4, 6, 8);
-			let $allEven = items.every(x => x % 2 === 0);
+			let allEven = track(() => items.every(x => x % 2 === 0));
 
 			<button onClick={() => items.push(3)}>{'add odd'}</button>
 			<button onClick={() => {
 				items.pop();
 				items.push(10);
 			}}>{'ensure all even'}</button>
-			<pre>{$allEven.toString()}</pre>
+			<pre>{@allEven.toString()}</pre>
 		}
 
 		render(ArrayTest);
@@ -634,11 +634,11 @@ describe('RippleArray', () => {
 	it('handles flat method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray([1, 2], [3, 4], 5);
-			let $flattened = 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);
@@ -660,11 +660,11 @@ describe('RippleArray', () => {
 	it('handles flatMap method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $flatMapped = 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);
@@ -686,11 +686,11 @@ describe('RippleArray', () => {
 	it('handles join method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('apple', 'banana', 'cherry');
-			let $joined = 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);
@@ -712,11 +712,11 @@ describe('RippleArray', () => {
 	it('handles keys method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let $keys = 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);
@@ -738,13 +738,13 @@ describe('RippleArray', () => {
 	it('handles lastIndexOf method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 2, 1);
-			let $lastIndex = items.lastIndexOf(2);
+			let lastIndex = track(() => items.lastIndexOf(2));
 
 			<button onClick={() => {
 				items.push(2);
 			}}>{'add duplicate'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{$lastIndex}</pre>
+			<pre>{@lastIndex}</pre>
 		}
 
 		render(ArrayTest);
@@ -766,11 +766,11 @@ describe('RippleArray', () => {
 	it('handles reduceRight method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let $reduced = 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);
@@ -792,14 +792,14 @@ describe('RippleArray', () => {
 	it('handles some method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 3, 5, 7);
-			let $hasEven = items.some(x => x % 2 === 0);
+			let hasEven = track(() => items.some(x => x % 2 === 0));
 
 			<button onClick={() => items.push(2)}>{'add even'}</button>
 			<button onClick={() => {
 				items.pop();
 				items.push(9);
 			}}>{'ensure all odd'}</button>
-			<pre>{$hasEven.toString()}</pre>
+			<pre>{@hasEven.toString()}</pre>
 		}
 
 		render(ArrayTest);
@@ -824,11 +824,11 @@ describe('RippleArray', () => {
 	it('handles toLocaleString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1000, 2000, 3000);
-			let $localized = items.toLocaleString('en-US');
+			let localized = track(() => items.toLocaleString('en-US'));
 
 			<button onClick={() => {items[2] = 4000}}>{'add item'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{$localized}</pre>
+			<pre>{@localized}</pre>
 		}
 
 		render(ArrayTest);
@@ -854,11 +854,11 @@ describe('RippleArray', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let $reversed = 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);
@@ -884,11 +884,11 @@ describe('RippleArray', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(3, 1, 4, 2);
-			let $sorted = 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);
@@ -914,11 +914,11 @@ describe('RippleArray', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $spliced = 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);
@@ -940,11 +940,11 @@ describe('RippleArray', () => {
 	it('handles toString method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $string = 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);
@@ -966,20 +966,20 @@ describe('RippleArray', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $sum = 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);
@@ -1000,11 +1000,11 @@ describe('RippleArray', () => {
 	it('handles values method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray('a', 'b', 'c');
-			let $values = 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);
@@ -1030,11 +1030,11 @@ describe('RippleArray', () => {
 
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4);
-			let $withReplaced = 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);
@@ -1056,16 +1056,16 @@ describe('RippleArray', () => {
 	it('handles at method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(10, 20, 30, 40, 50);
-			let $atIndex2 = items.at(2);
-			let $atNegative1 = items.at(-1);
-			let $atNegative2 = 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);
@@ -1101,14 +1101,14 @@ describe('RippleArray', () => {
 	it('handles ARRAY_SET_INDEX_AT method with reactivity', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3, 4, 5);
-			let $thirdItem = items[2];
+			let thirdItem = track(() => items[2]);
 
 			<button onClick={() => items[ARRAY_SET_INDEX_AT](2, 30)}>{'set index 2'}</button>
 			<button onClick={() => items[ARRAY_SET_INDEX_AT](-1, 50)}>{'set last with negative'}</button>
 			<button onClick={() => items[ARRAY_SET_INDEX_AT](6, 60)}>{'extend array'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{items.$length}</pre>
-			<pre>{$thirdItem}</pre>
+			<pre>{@thirdItem}</pre>
 		}
 
 		render(ArrayTest);
@@ -1148,24 +1148,24 @@ describe('RippleArray', () => {
 	it('handles ARRAY_SET_INDEX_AT error cases', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $error = null;
+			let error = track(null);
 
 			<button onClick={() => {
 				try {
 					items[ARRAY_SET_INDEX_AT](1.5, 10);
 				} catch (e) {
-					$error = e.message;
+					@error = e.message;
 				}
 			}}>{'try non-integer'}</button>
 			<button onClick={() => {
 				try {
-					$error = null;
+					@error = null;
 					items[ARRAY_SET_INDEX_AT](-5, 10);
 				} catch (e) {
-					$error = e.message;
+					@error = e.message;
 				}
 			}}>{'try out of bounds negative'}</button>
-			<pre>{$error}</pre>
+			<pre>{@error}</pre>
 		}
 
 		render(ArrayTest);
@@ -1223,16 +1223,16 @@ describe('RippleArray', () => {
 	it('throws error when trying to set length property directly', () => {
 		component ArrayTest() {
 			let items = new RippleArray(1, 2, 3);
-			let $error = null;
+			let error = track(null);
 
 			<button onClick={() => {
 				try {
 					items.length = 5;
 				} catch (e) {
-					$error = e.message;
+					@error = e.message;
 				}
 			}}>{'try set length'}</button>
-			<pre>{$error}</pre>
+			<pre>{@error}</pre>
 		}
 
 		render(ArrayTest);
@@ -1353,16 +1353,16 @@ describe('RippleArray', () => {
 		it('handles copyWithin operation with reactivity', () => {
 			component ArrayTest() {
 				let items = new RippleArray(1, 2, 3, 4, 5);
-				let $firstItem = items[0];
-				let $thirdItem = items[2];
-				let $fourthItem = items[3];
+				let firstItem = track(() => items[0]);
+				let thirdItem = track(() => items[2]);
+				let fourthItem = track(() => items[3]);
 
 				<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
 				<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{$firstItem}</pre>
-				<pre>{$thirdItem}</pre>
-				<pre>{$fourthItem}</pre>
+				<pre>{@firstItem}</pre>
+				<pre>{@thirdItem}</pre>
+				<pre>{@fourthItem}</pre>
 			}
 
 			render(ArrayTest);
@@ -1398,13 +1398,13 @@ describe('RippleArray', () => {
 		it('handles copyWithin with negative indexes and reactivity', () => {
 			component ArrayTest() {
 				let items = new RippleArray(1, 2, 3, 4, 5);
-				let $secondItem = items[1];
-				let $thirdItem = items[2];
+				let secondItem = track(() => items[1]);
+				let thirdItem = track(() => items[2]);
 
 				<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{$secondItem}</pre>
-				<pre>{$thirdItem}</pre>
+				<pre>{@secondItem}</pre>
+				<pre>{@thirdItem}</pre>
 			}
 
 			render(ArrayTest);
@@ -1429,12 +1429,12 @@ describe('RippleArray', () => {
 		it('handles copyWithin with overlapping ranges', () => {
 			component ArrayTest() {
 				let items = new RippleArray(1, 2, 3, 4, 5);
-				let $entries = items.entries();
+				let entries = track(() => items.entries());
 
 				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 
-				for (const [i, value] of $entries) {
+				for (const [i, value] of @entries) {
 					<pre>{`items[${i}]: ${value}`}</pre>
 				}
 			}