ripple 0.2.115 → 0.2.118

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

@@ -0,0 +1,385 @@
+import { flushSync, track, TrackedArray } from 'ripple';
+
+describe('TrackedArray > mutations', () => {
+	it('handles direct assignment and length tracking', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+
+			<button onClick={() => items[items.length] = items.length + 1}>{'increment'}</button>
+
+			<Child items={items} />
+		}
+
+		component Child({ items }: { items: TrackedArray<number> }) {
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{items.length}</pre>
+		}
+
+			render(ArrayTest);
+
+			const button = container.querySelector('button');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+
+			button.click();
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+	});
+
+	it('handles push and pop operations with reactivity', () => {
+		component ArrayTest() {
+			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>{@lastItem}</pre>
+		}
+
+    	render(ArrayTest);
+
+		const pushButton = container.querySelectorAll('button')[0];
+		const popButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+
+		// Test push operation
+		pushButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('4');
+
+		// Test pop operation
+		popButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+  });
+
+	it('handles shift and unshift operations with reactivity', () => {
+		component ArrayTest() {
+			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>{@firstItem}</pre>
+		}
+
+		render(ArrayTest);
+
+		const unshiftButton = container.querySelectorAll('button')[0];
+		const shiftButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('2');
+
+		// Test unshift operation
+		unshiftButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+
+		// Test shift operation
+		shiftButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('2');
+	});
+
+	it('handles splice operation with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray<number | string>(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>{@middleItem}</pre>
+		}
+
+		render(ArrayTest);
+
+		const spliceButton = container.querySelector('button');
+
+		// 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 splice operation
+		spliceButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,"a","b",4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('b');
+	});
+
+	it('handles fill operation with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4, 5);
+			let secondItem = track(() => items[1]);
+
+			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@secondItem}</pre>
+		}
+
+		render(ArrayTest);
+
+		const fillButton = 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');
+
+		// Test fill operation
+		fillButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,0,0,0,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+	});
+
+	it('handles reverse operation with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4, 5);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const reverseButton = 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');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
+
+		// Test reverse operation
+		reverseButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,4,3,2,1]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
+	});
+
+	it('handles sort operation with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(5, 3, 1, 4, 2);
+			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>
+		}
+
+		render(ArrayTest);
+
+		const sortAscButton = container.querySelectorAll('button')[0];
+		const sortDescButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,3,1,4,2]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+		// Test sort ascending
+		sortAscButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+
+		// Test sort descending
+		sortDescButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,4,3,2,1]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+	});
+
+	it('handles array modification through forEach()', () => {
+		component ArrayTest() {
+			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>
+		}
+
+		render(ArrayTest);
+
+		const doubleButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('[1,2,3]');
+
+		// Test iteration with side effects
+		doubleButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
+	});
+
+	it('handles array modification through iterator', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3);
+
+			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>{'double all'}</button>
+
+			for (const item of items) {
+				<pre>{item}</pre>
+			}
+		}
+
+		render(ArrayTest);
+
+		const doubleButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('1');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
+
+		// Test iteration with side effects
+		doubleButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('2');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('6');
+	});
+
+	it('handles array index access with reactivity', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(10, 20, 30);
+			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>{items[0]}</pre>
+			<pre>{items[1]}</pre>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('10');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('20');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('10');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('20');
+
+		// Test changing array element directly
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('100');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('20');
+		expect(container.querySelectorAll('pre')[2].textContent).toBe('100');
+		expect(container.querySelectorAll('pre')[3].textContent).toBe('20');
+	});
+
+	it('handles length property for reactivity', () => {
+		component ArrayTest() {
+			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>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{@length}</pre>
+		}
+
+		render(ArrayTest);
+
+		const expandButton = container.querySelectorAll('button')[0];
+		const shrinkButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+		// Test expand
+		expandButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,null,null]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+
+		// Test shrink
+		shrinkButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
+	});
+
+	it('handles setting length property and resizing the array', () => {
+		component ArrayTest() {
+			let items = new TrackedArray(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>
+		}
+
+		render(ArrayTest);
+
+		const truncateButton = container.querySelectorAll('button')[0];
+		const expandButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
+
+		// Test truncating
+		truncateButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+
+		// Test expanding
+		expandButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,null,null,null,null]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('7');
+	});
+});

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

@@ -0,0 +1,237 @@
+import { flushSync, TrackedArray } from 'ripple';
+import { MAX_ARRAY_LENGTH } from '../../../src/runtime/internal/client/constants.js';
+
+describe('TrackedArray > static', () => {
+	it('handles static methods - from and of', () => {
+		component ArrayTest() {
+			let itemsFrom = TrackedArray.from([1, 2, 3], (x: number) => 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>
+			<pre>{JSON.stringify(itemsFrom)}</pre>
+			<pre>{JSON.stringify(itemsOf)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addFromButton = container.querySelectorAll('button')[0];
+		const addOfButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6]');
+
+		// Test adding to from-created array
+		addFromButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8]');
+
+		// Test adding to of-created array
+		addOfButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6,7]');
+	});
+
+	('fromAsync' in Array.prototype ? describe : describe.skip)('TrackedArray fromAsync', async () => {
+		it('handles static fromAsync method with reactivity', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = await TrackedArray.fromAsync([1, 2, 3]);
+
+				<button onClick={() => {
+					if (items) items.push(4);
+				}}>{'add item'}</button>
+
+				<pre>{JSON.stringify(items)}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			const addButton = container.querySelector('button');
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+
+			// Test adding an item to the async-created array
+			addButton.click();
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
+		});
+
+		it('handles static fromAsync method with mapping function', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = await TrackedArray.fromAsync(
+					[1, 2, 3],
+					(x: number) => x * 2
+				);
+
+				<button onClick={() => {
+					if (items) items.push(8);
+				}}>{'add item'}</button>
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			const addButton = container.querySelector('button');
+
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
+
+			addButton.click();
+			flushSync();
+
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6,8]');
+		});
+
+		// TODO: Fix this test case, needs some async love around try statements being using in a not template way
+		it.skip('handles error in fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = null;
+				let error = null;
+
+				// try {
+				// 	items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
+				// } catch (e) {
+				// }
+			}
+
+			component ArrayTest() {
+				let items = null;
+				let error = null;
+
+				try {
+					// items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
+				} catch (e) {
+					error = (e as Error).message;
+				}
+
+				<pre>{error ? 'Error: ' + error : 'No error'}</pre>
+				<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
+		});
+	});
+
+	describe('Creates TrackedArray with a single element', () => {
+		it('specifies int', () => {
+			component ArrayTest() {
+				let items = new TrackedArray(3);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[null,null,null]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		});
+
+		it('errors on exceeding max array size', () => {
+			component ArrayTest() {
+				let error = null;
+
+				try {
+					new TrackedArray(MAX_ARRAY_LENGTH + 1);
+				} catch (e) {
+					error = (e as Error).message;
+				}
+
+				<pre>{error}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelector('pre').textContent).toBe('Invalid array length');
+		});
+
+		it('specifies int using static from method', () => {
+			component ArrayTest() {
+				let items = TrackedArray.from([4]);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4]');
+			// expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		it('specifies int using static of method', () => {
+			component ArrayTest() {
+				let items = TrackedArray.of(5);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[5]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		('fromAsync' in Array.prototype ? it : it.skip)('specifies int using static fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				const items = await TrackedArray.fromAsync([6]);
+
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+				<pre>{items ? items.length : ''}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[6]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+	});
+});