ripple 0.3.72 → 0.3.76

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

@@ -2,19 +2,19 @@ import { RippleArray, flushSync, track } from 'ripple';
 
 describe('RippleArray > mutations', () => {
 	it('handles direct assignment and length tracking', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3);
+			<>
 				<button onClick={() => (items[items.length] = items.length + 1)}>{'increment'}</button>
 				<Child {items} />
-			</>;
+			</>
 		}
 
-		function Child({ items }: { items: RippleArray<number> }) {
-			return <>
+		function Child({ items }: { items: RippleArray<number> }) @{
+			<>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{items.length}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -35,16 +35,16 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles push and pop operations with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				let &[lastItem] = track(() => items[items.length - 1]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -75,16 +75,16 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles shift and unshift operations with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(2, 3, 4);
-				let &[firstItem] = track(() => items[0]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -115,15 +115,15 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles splice operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items: RippleArray<number | string> = new RippleArray(1, 2, 3, 4, 5);
-				let &[middleItem] = track(() => items[2]);
+		function ArrayTest() @{
+			let items: RippleArray<number | string> = new RippleArray(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);
@@ -145,14 +145,14 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles fill operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[secondItem] = track(() => items[1]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -172,16 +172,16 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles reverse operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
-				let &[firstItem] = track(() => items[0]);
-				let &[lastItem] = track(() => items[4]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -203,15 +203,15 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles sort operation with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(5, 3, 1, 4, 2);
-				let &[secondItem] = track(() => items[1]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -239,14 +239,14 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles array modification through forEach()', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
-					{'double all'}
-				</button>
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3);
+			<>
+				<button
+					onClick={() => items.forEach((item, i) => (items[i] = item * 2))}
+				>{'double all'}</button>
 				<pre>{JSON.stringify(items)}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -264,16 +264,16 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles array modification through iterator', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				<button onClick={() => items.forEach((item, i) => (items[i] = item * 2))}>
-					{'double all'}
-				</button>
-				for (const item of items) {
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -295,17 +295,17 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles array index access with reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(10, 20, 30);
-				let &[firstItem] = track(() => items[0]);
-				let &[secondItem] = track(() => items[1]);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -329,15 +329,15 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles length property for reactivity', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3);
-				let &[length] = track(() => items.length);
+		function ArrayTest() @{
+			let items = new RippleArray(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);
@@ -365,14 +365,14 @@ describe('RippleArray > mutations', () => {
 	});
 
 	it('handles setting length property and resizing the array', () => {
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4, 5);
+		function 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>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);

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

@@ -3,15 +3,15 @@ import { MAX_ARRAY_LENGTH } from '../../../src/runtime/internal/client/constants
 
 describe('RippleArray > static', () => {
 	it('handles static methods - from and of', () => {
-		function ArrayTest() {
-			return <>
-				let itemsFrom = RippleArray.from([1, 2, 3], (x: number) => x * 2);
-				let itemsOf = RippleArray.of(4, 5, 6);
+		function ArrayTest() @{
+			let itemsFrom = RippleArray.from([1, 2, 3], (x: number) => x * 2);
+			let itemsOf = RippleArray.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);
@@ -38,28 +38,24 @@ describe('RippleArray > static', () => {
 
 	('fromAsync' in Array.prototype ? describe : describe.skip)('RippleArray fromAsync', async () => {
 		it('handles static fromAsync method with reactivity', async () => {
-			function Parent() {
-				return <>
-					try {
-						<ArrayTest />
-					} pending {
-						<div>{'Loading placeholder...'}</div>
-					}
-				</>;
+			function Parent() @{
+				@try {
+					<ArrayTest />
+				} @pending {
+					<div>{'Loading placeholder...'}</div>
+				}
 			}
 
-			function ArrayTest() {
-				return <>
-					let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3]));
+			function ArrayTest() @{
+				let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3]));
+				<>
 					<button
 						onClick={() => {
 							items.push(4);
 						}}
-					>
-						{'add item'}
-					</button>
+					>{'add item'}</button>
 					<pre>{JSON.stringify(items)}</pre>
-				</>;
+				</>
 			}
 
 			render(Parent);
@@ -79,28 +75,24 @@ describe('RippleArray > static', () => {
 		});
 
 		it('handles static fromAsync method with mapping function', async () => {
-			function Parent() {
-				return <>
-					try {
-						<ArrayTest />
-					} pending {
-						<div>{'Loading placeholder...'}</div>
-					}
-				</>;
+			function Parent() @{
+				@try {
+					<ArrayTest />
+				} @pending {
+					<div>{'Loading placeholder...'}</div>
+				}
 			}
 
-			function ArrayTest() {
-				return <>
-					let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3], (x: number) => x * 2));
+			function ArrayTest() @{
+				let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3], (x: number) => x * 2));
+				<>
 					<button
 						onClick={() => {
 							items.push(8);
 						}}
-					>
-						{'add item'}
-					</button>
+					>{'add item'}</button>
 					<pre>{JSON.stringify(items)}</pre>
-				</>;
+				</>
 			}
 
 			render(Parent);
@@ -122,36 +114,36 @@ describe('RippleArray > static', () => {
 		('fromAsync' in Array.prototype ? it : it.skip)(
 			'handles error in fromAsync method',
 			async () => {
-				function Parent() {
-					return <>
-						try {
-							<ArrayTest />
-						} pending {
-							<div>{'Loading placeholder...'}</div>
-						}
-					</>;
+				function Parent() @{
+					@try {
+						<ArrayTest />
+					} @pending {
+						<div>{'Loading placeholder...'}</div>
+					}
 				}
 
-				function ArrayTest() {
-					return <>
-						async function* throwingIterable() {
-							throw new Error('Async error');
-						}
-						try {
-							let &[items] = trackAsync(() => RippleArray.fromAsync(throwingIterable()));
-
-							<ul>
-								for (const item of items) {
-									<li>{item}</li>
-								}
-							</ul>
-						} pending {
-							<div>{'Loading...'}</div>
-						} catch (e) {
-							<pre>{'Error: ' + (e as Error).message}</pre>
+				function ArrayTest() @{
+					async function* throwingIterable() {
+						throw new Error('Async error');
+					}
+					@try {
+						let &[items] = trackAsync(() => RippleArray.fromAsync(throwingIterable()));
+
+						<ul>
+							@for (const item of items) {
+								<li>{item}</li>
+							}
+						</ul>
+					} @pending {
+						<div>{'Loading...'}</div>
+					} @catch (e) {
+						<>
+							<pre>
+								{'Error: ' + (e as Error).message}
+							</pre>
 							<pre>{'No items'}</pre>
-						}
-					</>;
+						</>
+					}
 				}
 
 				render(Parent);
@@ -167,12 +159,12 @@ describe('RippleArray > static', () => {
 
 	describe('Creates RippleArray with a single element', () => {
 		it('specifies int', () => {
-			function ArrayTest() {
-				return <>
-					let items = new RippleArray(3);
+			function ArrayTest() @{
+				let items = new RippleArray(3);
+				<>
 					<pre>{JSON.stringify(items)}</pre>
 					<pre>{items.length}</pre>
-				</>;
+				</>
 			}
 
 			render(ArrayTest);
@@ -182,16 +174,16 @@ describe('RippleArray > static', () => {
 		});
 
 		it('errors on exceeding max array size', () => {
-			function ArrayTest() {
-				return <>
-					let error = null;
+			function ArrayTest() @{
+				const error = (() => {
 					try {
 						new RippleArray(MAX_ARRAY_LENGTH + 1);
+						return null;
 					} catch (e) {
-						error = (e as Error).message;
+						return (e as Error).message;
 					}
-					<pre>{error}</pre>
-				</>;
+				})();
+				<pre>{error}</pre>
 			}
 
 			render(ArrayTest);
@@ -200,12 +192,12 @@ describe('RippleArray > static', () => {
 		});
 
 		it('specifies int using static from method', () => {
-			function ArrayTest() {
-				return <>
-					let items = RippleArray.from([4]);
+			function ArrayTest() @{
+				let items = RippleArray.from([4]);
+				<>
 					<pre>{JSON.stringify(items)}</pre>
 					<pre>{items.length}</pre>
-				</>;
+				</>
 			}
 
 			render(ArrayTest);
@@ -215,12 +207,12 @@ describe('RippleArray > static', () => {
 		});
 
 		it('specifies int using static of method', () => {
-			function ArrayTest() {
-				return <>
-					let items = RippleArray.of(5);
+			function ArrayTest() @{
+				let items = RippleArray.of(5);
+				<>
 					<pre>{JSON.stringify(items)}</pre>
 					<pre>{items.length}</pre>
-				</>;
+				</>
 			}
 
 			render(ArrayTest);
@@ -232,22 +224,20 @@ describe('RippleArray > static', () => {
 		('fromAsync' in Array.prototype ? it : it.skip)(
 			'specifies int using static fromAsync method',
 			async () => {
-				function Parent() {
-					return <>
-						try {
-							<ArrayTest />
-						} pending {
-							<div>{'Loading placeholder...'}</div>
-						}
-					</>;
+				function Parent() @{
+					@try {
+						<ArrayTest />
+					} @pending {
+						<div>{'Loading placeholder...'}</div>
+					}
 				}
 
-				function ArrayTest() {
-					return <>
-						let &[items] = trackAsync(() => RippleArray.fromAsync([6]));
+				function ArrayTest() @{
+					let &[items] = trackAsync(() => RippleArray.fromAsync([6]));
+					<>
 						<pre>{JSON.stringify(items)}</pre>
 						<pre>{items.length}</pre>
-					</>;
+					</>
 				}
 
 				render(Parent);

package/tests/client/array/array.to-methods.test.tsrx

@@ -6,14 +6,14 @@ describe('RippleArray > to* methods', () => {
 			context.skip();
 		}
 
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(1, 2, 3, 4);
-				let &[reversed] = track(() => items.toReversed());
+		function ArrayTest() @{
+			let items = new RippleArray(1, 2, 3, 4);
+			let &[reversed] = track(() => items.toReversed());
+			<>
 				<button onClick={() => items.push(5)}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{JSON.stringify(reversed)}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -37,14 +37,14 @@ describe('RippleArray > to* methods', () => {
 			context.skip();
 		}
 
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray(3, 1, 4, 2);
-				let &[sorted] = track(() => items.toSorted());
+		function ArrayTest() @{
+			let items = new RippleArray(3, 1, 4, 2);
+			let &[sorted] = track(() => items.toSorted());
+			<>
 				<button onClick={() => items.push(0)}>{'add item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{JSON.stringify(sorted)}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);
@@ -68,14 +68,14 @@ describe('RippleArray > to* methods', () => {
 			context.skip();
 		}
 
-		function ArrayTest() {
-			return <>
-				let items = new RippleArray<string | number>(1, 2, 3, 4, 5);
-				let &[spliced] = track(() => items.toSpliced(1, 2, 'a', 'b'));
+		function ArrayTest() @{
+			let items = new RippleArray<string | number>(1, 2, 3, 4, 5);
+			let &[spliced] = track(() => items.toSpliced(1, 2, 'a', 'b'));
+			<>
 				<button onClick={() => (items[2] = 30)}>{'change item'}</button>
 				<pre>{JSON.stringify(items)}</pre>
 				<pre>{JSON.stringify(spliced)}</pre>
-			</>;
+			</>
 		}
 
 		render(ArrayTest);