ripple 0.3.71 → 0.3.74

package/tests/client/array/array.copy-within.test.tsrx

@@ -2,19 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray copyWithin', () => {
 	it('handles copyWithin operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[firstItem] = track(() => items[0]);
-				let &[thirdItem] = track(() => items[2]);
-				let &[fourthItem] = track(() => items[3]);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -48,16 +48,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with negative indexes and reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[secondItem] = track(() => items[1]);
-				let &[thirdItem] = track(() => items[2]);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4, 5);
+			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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -80,16 +80,16 @@ describe('RippleArray copyWithin', () => {
 	});
 
 	it('handles copyWithin with overlapping ranges', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[entries] = track(() => Array.from(items.entries()));
+		function ArrayTest() @{
+			let items = new RippleArray(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>
-				for (const [i, value] of entries) {
+				@for (const [i, value] of entries) {
 					<pre>{`items[${i}]: ${value}`}</pre>
 				}
-			</>;
+			</>
 		}
 
 		render(ArrayTest);

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

@@ -2,19 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray > derived', () => {
 	it('handles array methods that return values (map, filter, etc.)', () => {
-		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));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -38,14 +38,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles concat method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				let &[concatenated] = track(() => items.concat([4, 5], 6, [7, 8]));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -65,14 +65,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles array slice method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[sliced] = track(() => items.slice(1, 4));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -92,22 +92,20 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles find and findIndex methods with reactivity', () => {
-		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));
+		function 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>
+				>{'update values'}</button>
 				<pre>{found}</pre>
 				<pre>{foundIndex}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -127,22 +125,20 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles findLast and findLastIndex methods with reactivity', () => {
-		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));
+		function 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>
+				>{'update values'}</button>
 				<pre>{foundLast}</pre>
 				<pre>{foundLastIndex}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -162,21 +158,19 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles every method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(2, 4, 6, 8);
-				let &[allEven] = track(() => items.every((x) => x % 2 === 0));
+		function 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>
+				>{'ensure all even'}</button>
 				<pre>{allEven.toString()}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -199,14 +193,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles flat method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray<number | number[]>([1, 2], [3, 4], 5);
-				let &[flattened] = track(() => items.flat());
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -226,14 +220,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles flatMap method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				let &[flatMapped] = track(() => items.flatMap((x) => [x, x * 2]));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -253,14 +247,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles join method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray('apple', 'banana', 'cherry');
-				let &[joined] = track(() => items.join(', '));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -282,20 +276,18 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles lastIndexOf method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 2, 1);
-				let &[lastIndex] = track(() => items.lastIndexOf(2));
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 2, 1);
+			let &[lastIndex] = track(() => items.lastIndexOf(2));
+			<>
 				<button
 					onClick={() => {
 						items.push(2);
 					}}
-				>
-					{'add duplicate'}
-				</button>
+				>{'add duplicate'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{lastIndex}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -315,14 +307,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles reduceRight method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray('a', 'b', 'c');
-				let &[reduced] = track(() => items.reduceRight((acc, val) => acc + val, ''));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -342,21 +334,19 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles some method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 3, 5, 7);
-				let &[hasEven] = track(() => items.some((x) => x % 2 === 0));
+		function 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>
+				>{'ensure all odd'}</button>
 				<pre>{hasEven.toString()}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -379,20 +369,18 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles toLocaleString method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1000, 2000, 3000);
-				let &[localized] = track(() => items.toLocaleString('en-US'));
+		function ArrayTest() @{
+			let items = new RippleArray(1000, 2000, 3000);
+			let &[localized] = track(() => items.toLocaleString('en-US'));
+			<>
 				<button
 					onClick={() => {
 						items[2] = 4000;
 					}}
-				>
-					{'add item'}
-				</button>
+				>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{localized}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -412,14 +400,14 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles toString method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				let &[string] = track(() => items.toString());
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -443,14 +431,14 @@ describe('RippleArray > derived', () => {
 			context.skip();
 		}
 
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4);
-				let &[withReplaced] = track(() => items.with(2, 30));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -470,12 +458,12 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles toJSON method', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3);
+			<>
 				<button onClick={() => items.push(4)}>{'add'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -493,19 +481,19 @@ describe('RippleArray > derived', () => {
 	});
 
 	it('handles at method with reactivity', () => {
-		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));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);

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

@@ -2,14 +2,14 @@ import { RippleArray, effect, flushSync, track, untrack } from 'ripple';
 
 describe('RippleArray > iteration', () => {
 	it('handles entries method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray('a', 'b', 'c');
-				let &[entries] = track(() => Array.from(items.entries()));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -31,14 +31,14 @@ describe('RippleArray > iteration', () => {
 	});
 
 	it('handles keys method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray('a', 'b', 'c');
-				let &[keys] = track(() => Array.from(items.keys()));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -58,14 +58,14 @@ describe('RippleArray > iteration', () => {
 	});
 
 	it('handles values method with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray('a', 'b', 'c');
-				let &[values] = track(() => Array.from(items.values()));
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -85,22 +85,22 @@ describe('RippleArray > iteration', () => {
 	});
 
 	it('handles Symbol.iterator with reactivity', () => {
-		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;
-						});
-					}
-				});
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);