ripple 0.2.115 → 0.2.118

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

@@ -0,0 +1,495 @@
+import { flushSync, track, TrackedArray } from 'ripple';
+
+describe('TrackedArray > derived', () => {
+	it('handles array methods that return values (map, filter, etc.)', () => {
+		component ArrayTest() {
+			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));
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8,10]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,4]');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('15');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('true');
+
+		// Test reactivity with these methods
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8,10,12]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,4,6]');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('21');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('true');
+	});
+
+	it('handles concat method with reactivity', () => {
+		component ArrayTest() {
+			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>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@concatenated)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4,5,6,7,8]');
+
+		// Test adding to original array
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,3.5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,3.5,4,5,6,7,8]');
+	});
+
+	it('handles array slice method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4, 5);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,3,4]');
+
+		// Test reactivity with slice
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,30,4]');
+	});
+
+	it('handles find and findIndex methods with reactivity', () => {
+		component ArrayTest() {
+			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));
+
+			<button onClick={() => {
+				items[1] = 13;
+				items[0] = 6;
+			}}>{'update values'}</button>
+			<pre>{@found}</pre>
+			<pre>{@foundIndex}</pre>
+		}
+
+		render(ArrayTest);
+
+		const updateButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+		// Test reactivity with find methods
+		updateButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('13');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+
+	it('handles findLast and findLastIndex methods with reactivity', () => {
+		component ArrayTest() {
+			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));
+
+			<button onClick={() => {
+				items[1] = 25;
+				items[4] = 15;
+			}}>{'update values'}</button>
+			<pre>{@foundLast}</pre>
+			<pre>{@foundLastIndex}</pre>
+		}
+
+		render(ArrayTest);
+
+		const updateButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+		// Test reactivity with findLast methods
+		updateButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+	});
+
+	it('handles every method with reactivity', () => {
+		component ArrayTest() {
+			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>
+			<button onClick={() => {
+				items.pop();
+				items.push(10);
+			}}>{'ensure all even'}</button>
+			<pre>{@allEven.toString()}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addOddButton = container.querySelectorAll('button')[0];
+		const makeEvenButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('true');
+
+		// Test adding an odd number
+		addOddButton.click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('false');
+
+		// Test fixing the array to all even
+		makeEvenButton.click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('true');
+	});
+
+	it('handles flat method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray([1, 2], [3, 4], 5);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[[1,2],[3,4],5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4,5]');
+
+		// Test changing a nested array
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[[6,7,8],[3,4],5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[6,7,8,3,4,5]');
+	});
+
+	it('handles flatMap method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,2,4,3,6]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,2,4,3,6,4,8]');
+	});
+
+	it('handles join method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray('apple', 'banana', 'cherry');
+			let joined = track(() => items.join(', '));
+
+			<button onClick={() => items.push('date')}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@joined}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["apple","banana","cherry"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('apple, banana, cherry');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["apple","banana","cherry","date"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('apple, banana, cherry, date');
+	});
+
+	it('handles lastIndexOf method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 2, 1);
+			let lastIndex = track(() => items.lastIndexOf(2));
+
+			<button onClick={() => {
+				items.push(2);
+			}}>{'add duplicate'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@lastIndex}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,2,1]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+		// Test adding a duplicate
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,2,1,2]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+	});
+
+	it('handles reduceRight method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray('a', 'b', 'c');
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('cba');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('dcba');
+	});
+
+	it('handles some method with reactivity', () => {
+		component ArrayTest() {
+			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>
+			<button onClick={() => {
+				items.pop();
+				items.push(9);
+			}}>{'ensure all odd'}</button>
+			<pre>{@hasEven.toString()}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addEvenButton = container.querySelectorAll('button')[0];
+		const makeOddButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('false');
+
+		// Test adding an even number
+		addEvenButton.click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('true');
+
+		// Test fixing the array to all odd
+		makeOddButton.click();
+		flushSync();
+		expect(container.querySelector('pre').textContent).toBe('false');
+	});
+
+	it('handles toLocaleString method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1000, 2000, 3000);
+			let localized = track(() => items.toLocaleString('en-US'));
+
+			<button onClick={() => {items[2] = 4000}}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@localized}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1000,2000,3000]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,000,2,000,3,000');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1000,2000,4000]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,000,2,000,4,000');
+	});
+
+	it('handles toString method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+			let string = track(() => items.toString());
+
+			<button onClick={() => items.push(4)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@string}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,2,3');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,2,3,4');
+	});
+
+	it('handles with method with reactivity', (context) => {
+		if (!('with' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,30,4]');
+
+		// Test changing the original array
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,50,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,30,4]');
+	});
+
+	it('handles toJSON method', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+
+			<button onClick={() => items.push(4)}>{'add'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state - toJSON is implicitly called by JSON.stringify
+		expect(container.querySelector('pre').textContent).toBe('[1,2,3]');
+
+		// Test reactivity with JSON serialization
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('[1,2,3,4]');
+	});
+
+	it('handles at method with reactivity', () => {
+		component ArrayTest() {
+			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));
+
+			<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>
+		}
+
+		render(ArrayTest);
+
+		const changeIndex2Button = container.querySelectorAll('button')[0];
+		const changeLastButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30,40,50]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('30');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('50');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
+
+		// Test changing index 2
+		changeIndex2Button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,300,40,50]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('300');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('50');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
+
+		// Test changing last item
+		changeLastButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,300,40,500]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('300');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('500');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
+	});
+});

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

@@ -0,0 +1,115 @@
+import { flushSync, track, effect, untrack, TrackedArray } from 'ripple';
+
+describe('TrackedArray > iteration', () => {
+	it('handles entries method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray('a', 'b', 'c');
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[[0,"a"],[1,"b"],[2,"c"]]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[[0,"a"],[1,"b"],[2,"c"],[3,"d"]]');
+	});
+
+	it('handles keys method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray('a', 'b', 'c');
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3]');
+	});
+
+	it('handles values method with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray('a', 'b', 'c');
+			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>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["a","b","c"]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('["a","b","c","d"]');
+	});
+
+	it('handles Symbol.iterator with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+			let sum = track(0);
+
+			effect(() => {
+				@sum = 0;
+				for (const item of items) {
+					untrack(() => {
+						@sum += item;
+					});
+				}
+			});
+
+			<button onClick={() => items.push(4)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@sum}</pre>
+		}
+
+		render(ArrayTest);
+		flushSync();
+
+		const addButton = container.querySelectorAll('button')[0];
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('6');
+
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
+	});
+});