ripple 0.3.68 → 0.3.69

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

@@ -2,18 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 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));
-
-			<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>
+		function ArrayTest() {
+			return <>
+				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));
+				<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);
@@ -37,13 +38,14 @@ 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]));
-
-			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(concatenated)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -63,13 +65,14 @@ 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));
-
-			<button onClick={() => (items[2] = 30)}>{'change middle'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(sliced)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -89,21 +92,22 @@ 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));
-
-			<button
-				onClick={() => {
-					items[1] = 13;
-					items[0] = 6;
-				}}
-			>
-				{'update values'}
-			</button>
-			<pre>{found}</pre>
-			<pre>{foundIndex}</pre>
+		function ArrayTest() {
+			return <>
+				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));
+				<button
+					onClick={() => {
+						items[1] = 13;
+						items[0] = 6;
+					}}
+				>
+					{'update values'}
+				</button>
+				<pre>{found}</pre>
+				<pre>{foundIndex}</pre>
+			</>;
 		}
 
 		render(ArrayTest);
@@ -123,21 +127,22 @@ 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));
-
-			<button
-				onClick={() => {
-					items[1] = 25;
-					items[4] = 15;
-				}}
-			>
-				{'update values'}
-			</button>
-			<pre>{foundLast}</pre>
-			<pre>{foundLastIndex}</pre>
+		function ArrayTest() {
+			return <>
+				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));
+				<button
+					onClick={() => {
+						items[1] = 25;
+						items[4] = 15;
+					}}
+				>
+					{'update values'}
+				</button>
+				<pre>{foundLast}</pre>
+				<pre>{foundLastIndex}</pre>
+			</>;
 		}
 
 		render(ArrayTest);
@@ -157,20 +162,21 @@ 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));
-
-			<button onClick={() => items.push(3)}>{'add odd'}</button>
-			<button
-				onClick={() => {
-					items.pop();
-					items.push(10);
-				}}
-			>
-				{'ensure all even'}
-			</button>
-			<pre>{allEven.toString()}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -193,13 +199,14 @@ 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());
-
-			<button onClick={() => (items[0] = [6, 7, 8])}>{'change nested'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(flattened)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray<number | number[]>([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);
@@ -219,13 +226,14 @@ 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]));
-
-			<button onClick={() => items.push(4)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(flatMapped)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -245,13 +253,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles join method with reactivity', () => {
-		component ArrayTest() {
-			let items = new RippleArray('apple', 'banana', 'cherry');
-			let &[joined] = track(() => items.join(', '));
-
-			<button onClick={() => items.push('date')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{joined}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray('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);
@@ -273,19 +282,20 @@ 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));
-
-			<button
-				onClick={() => {
-					items.push(2);
-				}}
-			>
-				{'add duplicate'}
-			</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{lastIndex}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -305,13 +315,14 @@ 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, ''));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{reduced}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray('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);
@@ -331,20 +342,21 @@ 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));
-
-			<button onClick={() => items.push(2)}>{'add even'}</button>
-			<button
-				onClick={() => {
-					items.pop();
-					items.push(9);
-				}}
-			>
-				{'ensure all odd'}
-			</button>
-			<pre>{hasEven.toString()}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -367,19 +379,20 @@ 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'));
-
-			<button
-				onClick={() => {
-					items[2] = 4000;
-				}}
-			>
-				{'add item'}
-			</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{localized}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -399,13 +412,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles toString method with reactivity', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
-			let &[string] = track(() => items.toString());
-
-			<button onClick={() => items.push(4)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{string}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -429,13 +443,14 @@ describe('RippleArray > derived', () => {
 			context.skip();
 		}
 
-		component ArrayTest() {
-			let items = new RippleArray(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>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);
@@ -455,11 +470,12 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles toJSON method', () => {
-		component ArrayTest() {
-			let items = new RippleArray(1, 2, 3);
-
-			<button onClick={() => items.push(4)}>{'add'}</button>
-			<pre>{JSON.stringify(items)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(1, 2, 3);
+				<button onClick={() => items.push(4)}>{'add'}</button>
+				<pre>{JSON.stringify(items)}</pre>
+			</>;
 		}
 
 		render(ArrayTest);
@@ -477,18 +493,19 @@ 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));
-
-			<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>
+		function ArrayTest() {
+			return <>
+				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));
+				<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);

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

@@ -2,13 +2,14 @@ import { RippleArray, effect, flushSync, track, untrack } from 'ripple';
 
 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()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(entries)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray('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);
@@ -30,13 +31,14 @@ 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()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(keys)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray('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);
@@ -56,13 +58,14 @@ 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()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(values)}</pre>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray('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);
@@ -82,22 +85,22 @@ describe('RippleArray > iteration', () => {
 	});
 
 	it('handles Symbol.iterator with reactivity', () => {
-		component ArrayTest() {
-			let items = new RippleArray(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>
+		function ArrayTest() {
+			return <>
+				let items = new RippleArray(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);