ripple 0.2.53 → 0.2.54

package/tests/array.test.ripple

@@ -1,8 +1,8 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, untrack, RippleArray, track } from 'ripple';
-import { ARRAY_SET_INDEX_AT, MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
+import { mount, flushSync, effect, untrack, TrackedArray, track } from 'ripple';
+import { MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
 
-describe('RippleArray', () => {
+describe('TrackedArray', () => {
 	let container;
 
 	function render(component) {
@@ -23,7 +23,7 @@ describe('RippleArray', () => {
 
 	it('handles direct assignment and length tracking', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 
 			<button onClick={() => items[items.length] = items.length + 1}>{'increment'}</button>
 
@@ -32,7 +32,7 @@ describe('RippleArray', () => {
 
 		component Child({ items }) {
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.$length}</pre>
+			<pre>{items.length}</pre>
 		}
 
 			render(ArrayTest);
@@ -54,13 +54,13 @@ describe('RippleArray', () => {
 
 	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 items = new TrackedArray(1, 2, 3);
+			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>{items.length}</pre>
 			<pre>{@lastItem}</pre>
 		}
 
@@ -93,13 +93,13 @@ describe('RippleArray', () => {
 
 	it('handles shift and unshift operations with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(2, 3, 4);
+			let items = new TrackedArray(2, 3, 4);
 			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>{items.length}</pre>
 			<pre>{@firstItem}</pre>
 		}
 
@@ -132,12 +132,12 @@ describe('RippleArray', () => {
 
 	it('handles splice operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 			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>{items.length}</pre>
 			<pre>{@middleItem}</pre>
 		}
 
@@ -161,7 +161,7 @@ describe('RippleArray', () => {
 
 	it('handles fill operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 			let secondItem = track(() => items[1]);
 
 			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
@@ -187,7 +187,7 @@ describe('RippleArray', () => {
 
 	it('handles reverse operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 			let firstItem = track(() => items[0]);
 			let lastItem = track(() => items[4]);
 
@@ -217,7 +217,7 @@ describe('RippleArray', () => {
 
 	it('handles sort operation with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(5, 3, 1, 4, 2);
+			let items = new TrackedArray(5, 3, 1, 4, 2);
 			let secondItem = track(() => items[1]);
 
 			<button onClick={() => items.sort()}>{'sort ascending'}</button>
@@ -252,7 +252,7 @@ describe('RippleArray', () => {
 
 	it('handles array methods that return values (map, filter, etc.)', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(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));
@@ -287,7 +287,7 @@ describe('RippleArray', () => {
 
 	it('handles array modification through forEach()', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 
 			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>{'double all'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -309,7 +309,7 @@ describe('RippleArray', () => {
 
 	it('handles entries method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray('a', 'b', 'c');
+			let items = new TrackedArray('a', 'b', 'c');
 			let entries = track(() => Array.from(items.entries()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
@@ -335,7 +335,7 @@ describe('RippleArray', () => {
 
 	it('handles concat method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 			let concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
 
 			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
@@ -361,7 +361,7 @@ describe('RippleArray', () => {
 
 	it('handles array modification through iterator', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 
 			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>{'double all'}</button>
 
@@ -388,13 +388,13 @@ describe('RippleArray', () => {
 		expect(container.querySelectorAll('pre')[2].textContent).toBe('6');
 	});
 
-	it('handles $length property for reactivity', () => {
+	it('handles length property for reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
-			let length = track(() => items.$length);
+			let items = new TrackedArray(1, 2, 3);
+			let length = track(() => items.length);
 
-			<button onClick={() => items.$length = 5}>{'expand'}</button>
-			<button onClick={() => items.$length = 2}>{'shrink'}</button>
+			<button onClick={() => items.length = 5}>{'expand'}</button>
+			<button onClick={() => items.length = 2}>{'shrink'}</button>
 			<pre>{JSON.stringify(items)}</pre>
 			<pre>{@length}</pre>
 		}
@@ -425,8 +425,8 @@ describe('RippleArray', () => {
 
 	it('handles static methods - from and of', () => {
 		component ArrayTest() {
-			let itemsFrom = RippleArray.from([1, 2, 3], x => x * 2);
-			let itemsOf = RippleArray.of(4, 5, 6);
+			let itemsFrom = TrackedArray.from([1, 2, 3], x => x * 2);
+			let itemsOf = TrackedArray.of(4, 5, 6);
 
 			<button onClick={() => itemsFrom.push(8)}>{'add to from'}</button>
 			<button onClick={() => itemsOf.push(7)}>{'add to of'}</button>
@@ -458,7 +458,7 @@ describe('RippleArray', () => {
 
 	it('handles toJSON method', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 
 			<button onClick={() => items.push(4)}>{'add'}</button>
 			<pre>{JSON.stringify(items)}</pre>
@@ -480,7 +480,7 @@ describe('RippleArray', () => {
 
 	it('handles array index access with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(10, 20, 30);
+			let items = new TrackedArray(10, 20, 30);
 			let firstItem = track(() => items[0]);
 			let secondItem = track(() => items[1]);
 
@@ -513,7 +513,7 @@ describe('RippleArray', () => {
 
 	it('handles array slice method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 			let sliced = track(() => items.slice(1, 4));
 
 			<button onClick={() => items[2] = 30}>{'change middle'}</button>
@@ -539,7 +539,7 @@ describe('RippleArray', () => {
 
 	it('handles find and findIndex methods with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(5, 10, 15, 20, 25);
+			let items = new TrackedArray(5, 10, 15, 20, 25);
 			let found = track(() => items.find(x => x > 12));
 			let foundIndex = track(() => items.findIndex(x => x > 12));
 
@@ -567,11 +567,11 @@ describe('RippleArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
 	});
 
-	// Additional tests for RippleArray methods
+	// Additional tests for TrackedArray methods
 
 	it('handles findLast and findLastIndex methods with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(5, 15, 10, 20, 15);
+			let items = new TrackedArray(5, 15, 10, 20, 15);
 			let foundLast = track(() => items.findLast(x => x === 15));
 			let foundLastIndex = track(() => items.findLastIndex(x => x === 15));
 
@@ -601,7 +601,7 @@ describe('RippleArray', () => {
 
 	it('handles every method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(2, 4, 6, 8);
+			let items = new TrackedArray(2, 4, 6, 8);
 			let allEven = track(() => items.every(x => x % 2 === 0));
 
 			<button onClick={() => items.push(3)}>{'add odd'}</button>
@@ -633,7 +633,7 @@ describe('RippleArray', () => {
 
 	it('handles flat method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray([1, 2], [3, 4], 5);
+			let items = new TrackedArray([1, 2], [3, 4], 5);
 			let flattened = track(() => items.flat());
 
 			<button onClick={() => items[0] = [6, 7, 8]}>{'change nested'}</button>
@@ -659,7 +659,7 @@ describe('RippleArray', () => {
 
 	it('handles flatMap method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 			let flatMapped = track(() => items.flatMap(x => [x, x * 2]));
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
@@ -685,7 +685,7 @@ describe('RippleArray', () => {
 
 	it('handles join method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray('apple', 'banana', 'cherry');
+			let items = new TrackedArray('apple', 'banana', 'cherry');
 			let joined = track(() => items.join(', '));
 
 			<button onClick={() => items.push('date')}>{'add item'}</button>
@@ -711,7 +711,7 @@ describe('RippleArray', () => {
 
 	it('handles keys method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray('a', 'b', 'c');
+			let items = new TrackedArray('a', 'b', 'c');
 			let keys = track(() => Array.from(items.keys()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
@@ -737,7 +737,7 @@ describe('RippleArray', () => {
 
 	it('handles lastIndexOf method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 2, 1);
+			let items = new TrackedArray(1, 2, 3, 2, 1);
 			let lastIndex = track(() => items.lastIndexOf(2));
 
 			<button onClick={() => {
@@ -765,7 +765,7 @@ describe('RippleArray', () => {
 
 	it('handles reduceRight method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray('a', 'b', 'c');
+			let items = new TrackedArray('a', 'b', 'c');
 			let reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
@@ -791,7 +791,7 @@ describe('RippleArray', () => {
 
 	it('handles some method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 3, 5, 7);
+			let items = new TrackedArray(1, 3, 5, 7);
 			let hasEven = track(() => items.some(x => x % 2 === 0));
 
 			<button onClick={() => items.push(2)}>{'add even'}</button>
@@ -823,7 +823,7 @@ describe('RippleArray', () => {
 
 	it('handles toLocaleString method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1000, 2000, 3000);
+			let items = new TrackedArray(1000, 2000, 3000);
 			let localized = track(() => items.toLocaleString('en-US'));
 
 			<button onClick={() => {items[2] = 4000}}>{'add item'}</button>
@@ -853,7 +853,7 @@ describe('RippleArray', () => {
 		}
 
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4);
+			let items = new TrackedArray(1, 2, 3, 4);
 			let reversed = track(() => items.toReversed());
 
 			<button onClick={() => items.push(5)}>{'add item'}</button>
@@ -883,7 +883,7 @@ describe('RippleArray', () => {
 		}
 
 		component ArrayTest() {
-			let items = new RippleArray(3, 1, 4, 2);
+			let items = new TrackedArray(3, 1, 4, 2);
 			let sorted = track(() => items.toSorted());
 
 			<button onClick={() => items.push(0)}>{'add item'}</button>
@@ -913,7 +913,7 @@ describe('RippleArray', () => {
 		}
 
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
 
 			<button onClick={() => items[2] = 30}>{'change item'}</button>
@@ -939,7 +939,7 @@ describe('RippleArray', () => {
 
 	it('handles toString method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 			let string = track(() => items.toString());
 
 			<button onClick={() => items.push(4)}>{'add item'}</button>
@@ -965,7 +965,7 @@ describe('RippleArray', () => {
 
 	it('handles Symbol.iterator with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
+			let items = new TrackedArray(1, 2, 3);
 			let sum = track(0);
 
 			effect(() => {
@@ -999,7 +999,7 @@ describe('RippleArray', () => {
 
 	it('handles values method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray('a', 'b', 'c');
+			let items = new TrackedArray('a', 'b', 'c');
 			let values = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.push('d')}>{'add item'}</button>
@@ -1029,7 +1029,7 @@ describe('RippleArray', () => {
 		}
 
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4);
+			let items = new TrackedArray(1, 2, 3, 4);
 			let withReplaced = track(() => items.with(2, 30));
 
 			<button onClick={() => items[2] = 50}>{'change original'}</button>
@@ -1055,7 +1055,7 @@ describe('RippleArray', () => {
 
 	it('handles at method with reactivity', () => {
 		component ArrayTest() {
-			let items = new RippleArray(10, 20, 30, 40, 50);
+			let items = new TrackedArray(10, 20, 30, 40, 50);
 			let atIndex2 = track(() => items.at(2));
 			let atNegative1 = track(() => items.at(-1));
 			let atNegative2 = track(() => items.at(-2));
@@ -1098,102 +1098,14 @@ describe('RippleArray', () => {
 		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
 	});
 
-	it('handles ARRAY_SET_INDEX_AT method with reactivity', () => {
+	it('handles setting length property and resizing the array', () => {
 		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
-			let thirdItem = track(() => items[2]);
+			let items = new TrackedArray(1, 2, 3, 4, 5);
 
-			<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>
+			<button onClick={() => items.length = 3}>{'truncate'}</button>
+			<button onClick={() => items.length = 7}>{'expand'}</button>
 			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.$length}</pre>
-			<pre>{@thirdItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const setIndex2Button = container.querySelectorAll('button')[0];
-		const setLastButton = container.querySelectorAll('button')[1];
-		const extendButton = container.querySelectorAll('button')[2];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-
-		// Test setting index 2
-		setIndex2Button.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('30');
-
-		// Test setting with negative index
-		setLastButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,50]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-
-		// Test extending array
-		extendButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,50,null,60]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('7');
-	});
-
-	it('handles ARRAY_SET_INDEX_AT error cases', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
-			let error = track(null);
-
-			<button onClick={() => {
-				try {
-					items[ARRAY_SET_INDEX_AT](1.5, 10);
-				} catch (e) {
-					@error = e.message;
-				}
-			}}>{'try non-integer'}</button>
-			<button onClick={() => {
-				try {
-					@error = null;
-					items[ARRAY_SET_INDEX_AT](-5, 10);
-				} catch (e) {
-					@error = e.message;
-				}
-			}}>{'try out of bounds negative'}</button>
-			<pre>{@error}</pre>
-		}
-
-		render(ArrayTest);
-
-		const nonIntegerButton = container.querySelectorAll('button')[0];
-		const outOfBoundsButton = container.querySelectorAll('button')[1];
-
-		// Test non-integer index
-		nonIntegerButton.click();
-		flushSync();
-
-		expect(container.querySelector('pre').textContent).toBe('Provided index must be a valid integer');
-
-		// Test out of bounds negative index
-		outOfBoundsButton.click();
-		flushSync();
-
-		expect(container.querySelector('pre').textContent).toBe('Provided negative index out of bounds');
-	});
-
-	it('handles setting $length property and resizing the array', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3, 4, 5);
-
-			<button onClick={() => items.$length = 3}>{'truncate'}</button>
-			<button onClick={() => items.$length = 7}>{'expand'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.$length}</pre>
+			<pre>{items.length}</pre>
 		}
 
 		render(ArrayTest);
@@ -1220,31 +1132,7 @@ describe('RippleArray', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('7');
 	});
 
-	it('throws error when trying to set length property directly', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
-			let error = track(null);
-
-			<button onClick={() => {
-				try {
-					items.length = 5;
-				} catch (e) {
-					@error = e.message;
-				}
-			}}>{'try set length'}</button>
-			<pre>{@error}</pre>
-		}
-
-		render(ArrayTest);
-
-		const button = container.querySelector('button');
-		button.click();
-		flushSync();
-
-		expect(container.querySelector('pre').textContent).toBe('Cannot set length on RippleArray, use $length instead');
-	});
-
-	('fromAsync' in Array.prototype ? describe : describe.skip)('RippleArray fromAsync', async () => {
+	('fromAsync' in Array.prototype ? describe : describe.skip)('TrackedArray fromAsync', async () => {
 		it('handles static fromAsync method with reactivity', async () => {
 			component Parent() {
 				try {
@@ -1255,7 +1143,7 @@ describe('RippleArray', () => {
 			}
 
 			component ArrayTest() {
-				let items = await RippleArray.fromAsync([1, 2, 3]);
+				let items = await TrackedArray.fromAsync([1, 2, 3]);
 
 				<button onClick={() => {
 					if (items) items.push(4);
@@ -1290,7 +1178,7 @@ describe('RippleArray', () => {
 			}
 
 			component ArrayTest() {
-				let items = await RippleArray.fromAsync(
+				let items = await TrackedArray.fromAsync(
 					[1, 2, 3],
 					x => x * 2
 				);
@@ -1331,7 +1219,7 @@ describe('RippleArray', () => {
 				let error = null;
 
 				// try {
-				// 	items = await RippleArray.fromAsync(Promise.reject(new Error('Async error')));
+				// 	items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
 				// } catch (e) {
 				// }
 			}
@@ -1341,7 +1229,7 @@ describe('RippleArray', () => {
 				let error = null;
 
 				try {
-					// items = await RippleArray.fromAsync(Promise.reject(new Error('Async error')));
+					// items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
 				} catch (e) {
 					error = e.message;
 				}
@@ -1360,10 +1248,10 @@ describe('RippleArray', () => {
 		});
 	});
 
-	describe('RippleArray copyWithin', () => {
+	describe('TrackedArray copyWithin', () => {
 		it('handles copyWithin operation with reactivity', () => {
 			component ArrayTest() {
-				let items = new RippleArray(1, 2, 3, 4, 5);
+				let items = new TrackedArray(1, 2, 3, 4, 5);
 				let firstItem = track(() => items[0]);
 				let thirdItem = track(() => items[2]);
 				let fourthItem = track(() => items[3]);
@@ -1408,7 +1296,7 @@ describe('RippleArray', () => {
 
 		it('handles copyWithin with negative indexes and reactivity', () => {
 			component ArrayTest() {
-				let items = new RippleArray(1, 2, 3, 4, 5);
+				let items = new TrackedArray(1, 2, 3, 4, 5);
 				let secondItem = track(() => items[1]);
 				let thirdItem = track(() => items[2]);
 
@@ -1439,8 +1327,8 @@ describe('RippleArray', () => {
 
 		it('handles copyWithin with overlapping ranges', () => {
 			component ArrayTest() {
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let entries = track(() => items.entries());
+				let items = new TrackedArray(1, 2, 3, 4, 5);
+				let entries = track(() => Array.from(items.entries()));
 
 				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
 				<pre>{JSON.stringify(items)}</pre>
@@ -1479,12 +1367,12 @@ describe('RippleArray', () => {
 		});
 	});
 
-	describe('Creates RippleArray with a single element', () => {
+	describe('Creates TrackedArray with a single element', () => {
 		it('specifies int', () => {
 			component ArrayTest() {
-				let items = new RippleArray(3);
+				let items = new TrackedArray(3);
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.$length}</pre>
+				<pre>{items.length}</pre>
 			}
 
 			render(ArrayTest);
@@ -1498,7 +1386,7 @@ describe('RippleArray', () => {
 				let error = null;
 
 				try {
-					new RippleArray(MAX_ARRAY_LENGTH + 1);
+					new TrackedArray(MAX_ARRAY_LENGTH + 1);
 				} catch (e) {
 					error = e.message;
 				}
@@ -1513,9 +1401,9 @@ describe('RippleArray', () => {
 
 		it('specifies int using static from method', () => {
 			component ArrayTest() {
-				let items = RippleArray.from([4]);
+				let items = TrackedArray.from([4]);
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.$length}</pre>
+				<pre>{items.length}</pre>
 			}
 
 			render(ArrayTest);
@@ -1526,9 +1414,9 @@ describe('RippleArray', () => {
 
 		it('specifies int using static of method', () => {
 			component ArrayTest() {
-				let items = RippleArray.of(5);
+				let items = TrackedArray.of(5);
 				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.$length}</pre>
+				<pre>{items.length}</pre>
 			}
 
 			render(ArrayTest);
@@ -1547,10 +1435,10 @@ describe('RippleArray', () => {
 			}
 
 			component ArrayTest() {
-				const items = await RippleArray.fromAsync([6]);
+				const items = await TrackedArray.fromAsync([6]);
 
 				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-				<pre>{items ? items.$length : ''}</pre>
+				<pre>{items ? items.length : ''}</pre>
 			}
 
 			render(Parent);