ripple 0.3.71 → 0.3.74

package/tests/client/composite/composite.generics.test.tsrx

@@ -2,189 +2,187 @@ import { RippleArray, RippleMap } from 'ripple';
 
 describe('composite > generics', () => {
 	it('handles advanced generic ambiguity and edge cases', () => {
-		function App() {
-			return <>
-				const maybe = {
-					factory: function <T>() {
+		function App() @{
+			const maybe = {
+				factory: function <T>() {
+					return {
+						make: function <U>() {
+							return 1;
+						},
+					};
+				},
+			};
+			const g = maybe?.factory<number>()?.make<boolean>();
+			// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
+			let x = 10, y = 20;
+			const h =
+				x < y ? 'lt' : 'ge';
+			// 9. Chained comparisons with intervening generics
+			class Box<T> {
+				value: T;
+
+				constructor(value: T) {
+					this.value = value;
+				}
+
+				open<U>() {
+					return new Box<number>(1);
+				}
+			}
+			const limit = 100;
+			const i =
+				new Box<number>(2).value < limit ? 'ok' : 'no';
+			// 11. Generic function call vs Element: Identifier followed by generic args
+			function identity<T>(value: T): T {
+				return value;
+			}
+			const j = identity<number>(42);
+			// 12. Member + generic call immediately followed by another call
+			class Factory {
+				create<T>() {
+					return (value: T) => value;
+				}
+			}
+			const factory = new Factory();
+			const k = factory.create<number>()(123);
+			// 13. Multiple generic segments in chain
+			function foo<T>() {
+				return {
+					bar: function <U>() {
 						return {
-							make: function <U>() {
-								return 1;
+							baz: function <V>() {
+								return true;
 							},
 						};
 					},
 				};
-				const g = maybe?.factory<number>()?.make<boolean>();
-				// 8. Comparison operator (ensure '<' here NOT misparsed as generics)
-				let x = 10, y = 20;
-				const h =
-					x < y ? 'lt' : 'ge';
-				// 9. Chained comparisons with intervening generics
-				class Box<T> {
-					value: T;
-
-					constructor(value: T) {
-						this.value = value;
-					}
+			}
+			const l = foo<number>().bar<string>().baz<boolean>();
+			// 14. Generic with constraint + default
+			type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
+			const m: Extractor = (v) => v.id;
+			// 15. Generic in angle after "new" + trailing call
+			class Wrapper<T> {
+				value: T;
 
-					open<U>() {
-						return new Box<number>(1);
-					}
+				constructor() {
+					this.value = null as unknown as T;
 				}
-				const limit = 100;
-				const i =
-					new Box<number>(2).value < limit ? 'ok' : 'no';
-				// 10. JSX / Element should still work
-				<div class="still-works">
-					<span>{'Test'}</span>
-				</div>
-				// 11. Generic function call vs Element: Identifier followed by generic args
-				function identity<T>(value: T): T {
-					return value;
-				}
-				const j = identity<number>(42);
-				// 12. Member + generic call immediately followed by another call
-				class Factory {
-					create<T>() {
-						return (value: T) => value;
-					}
-				}
-				const factory = new Factory();
-				const k = factory.create<number>()(123);
-				// 13. Multiple generic segments in chain
-				function foo<T>() {
-					return {
-						bar: function <U>() {
-							return {
-								baz: function <V>() {
-									return true;
-								},
-							};
-						},
-					};
-				}
-				const l = foo<number>().bar<string>().baz<boolean>();
-				// 14. Generic with constraint + default
-				type Extractor<T extends { id: number } = { id: number }> = (v: T) => number;
-				const m: Extractor = (v) => v.id;
-				// 15. Generic in angle after "new" + trailing call
-				class Wrapper<T> {
-					value: T;
-
-					constructor() {
-						this.value = null as unknown as T;
-					}
 
-					unwrap<U>() {
-						return null as unknown as U;
-					}
-				}
-				const n = new Wrapper<number>().unwrap<string>();
-				// 16. Angle brackets inside type assertion vs generic call
-				function getUnknown(): unknown {
-					return new Map<string, number>([['a', 1]]);
-				}
-				getUnknown.factory = function <T>() {
-					return {
-						make: function <U>() {
-							return 2;
-						},
-					};
+				unwrap<U>() {
+					return null as unknown as U;
+				}
+			}
+			const n = new Wrapper<number>().unwrap<string>();
+			// 16. Angle brackets inside type assertion vs generic call
+			function getUnknown(): unknown {
+				return new Map<string, number>([['a', 1]]);
+			}
+			getUnknown.factory = function <T>() {
+				return {
+					make: function <U>() {
+						return 2;
+					},
 				};
-				const raw = getUnknown();
-				const o = (raw as Map<string, number>).get('a');
-				// 17. Generic with comma + trailing less-than comparison on next token
-				class Pair<T1, T2> {
-					first: T1;
+			};
+			const raw = getUnknown();
+			const o = (raw as Map<string, number>).get('a');
+			// 17. Generic with comma + trailing less-than comparison on next token
+			class Pair<T1, T2> {
+				first: T1;
 
-					second: T2;
+				second: T2;
 
-					constructor() {
-						this.first = null as unknown as T1;
-						this.second = null as unknown as T2;
-					}
-				}
-				const p = new Pair<number, string>();
-				const q =
-					1 < 2 ? p : null;
-				// 18. Nested generics with line breaks resembling JSX indentation
-				interface Node<T> {
-					value: T;
-				}
-				interface Edge<W> {
-					weight: W;
-				}
-				class Graph<N, E> {
-					nodes: N[];
+				constructor() {
+					this.first = null as unknown as T1;
+					this.second = null as unknown as T2;
+				}
+			}
+			const p = new Pair<number, string>();
+			const q =
+				1 < 2 ? p : null;
+			// 18. Nested generics with line breaks resembling JSX indentation
+			interface Node<T> {
+				value: T;
+			}
+			interface Edge<W> {
+				weight: W;
+			}
+			class Graph<N, E> {
+				nodes: N[];
 
-					edges: E[];
+				edges: E[];
 
-					constructor() {
-						this.nodes = [];
-						this.edges = [];
-					}
-				}
-				const r = new Graph<Node<string>, Edge<number>>();
-				// 19. Ternary containing generics in both branches
-				let flag = true;
-				const s = flag ? new Box<number>(1) : new Box<string>('string');
-				// 20. Generic inside template expression
-				const t = `length=${new RippleArray<number>().length}`;
-				// 21. Optional chaining + generic + property access
-				const registry = new RippleMap<string, number>();
-				const u = registry.get('id')?.toString();
-				// 22. Generic call used as callee for another call
-				function make<T>() {
-					return (value: T) => value;
-				}
-				const v = make<number>()(10);
-				// 23. Generic followed by tagged template (ensure not confused with JSX)
-				function tagFn<T>(strings: TemplateStringsArray, ...values) {
-					return values[0];
-				}
-				const tagResult = tagFn`value`;
-				// 24. Sequence mixing: (a < b) + generic call in same statement
-				function compute<T>(x: T, y: T): T {
-					return y;
-				}
-				const w = x < y && compute<number>(x, y);
-				// Additional component focusing on edge crankers
+				constructor() {
+					this.nodes = [];
+					this.edges = [];
+				}
+			}
+			const r = new Graph<Node<string>, Edge<number>>();
+			// 19. Ternary containing generics in both branches
+			let flag = true;
+			const s = flag ? new Box<number>(1) : new Box<string>('string');
+			// 20. Generic inside template expression
+			const t = `length=${new RippleArray<number>().length}`;
+			// 21. Optional chaining + generic + property access
+			const registry = new RippleMap<string, number>();
+			const u = registry.get('id')?.toString();
+			// 22. Generic call used as callee for another call
+			function make<T>() {
+				return (value: T) => value;
+			}
+			const v = make<number>()(10);
+			// 23. Generic followed by tagged template (ensure not confused with JSX)
+			function tagFn<T>(strings: TemplateStringsArray, ...values) {
+				return values[0];
+			}
+			const tagResult = tagFn`value`;
+			// 24. Sequence mixing: (a < b) + generic call in same statement
+			function compute<T>(x: T, y: T): T {
+				return y;
+			}
+			const w = x < y && compute<number>(x, y);
+			// Additional component focusing on edge crankers
 
-				// 28. Generic after parenthesized new expression
-				const aa = (new Box<number>(2)).open<string>();
-				// 29. Generic chain right after closing paren of IIFE
-				class Builder<Kind> {
-					finalize<Result>() {
-						return {
-							result: null as unknown as Result,
-						};
-					}
-				}
-				const builder = new Builder<Number>();
-				const result = (function () {
-					return builder;
-				}() as Builder<Number>).finalize<boolean>();
-				// 30. Angle bracket start of conditional expression line
-				function adjust<T>(value: T): T {
-					return value;
+			// 28. Generic after parenthesized new expression
+			const aa = (new Box<number>(2)).open<string>();
+			// 29. Generic chain right after closing paren of IIFE
+			class Builder<Kind> {
+				finalize<Result>() {
+					return {
+						result: null as unknown as Result,
+					};
 				}
-				const val =
-					new Wrapper<number>().value < 100 ? adjust<number>(10) : adjust<number>(20);
-				// 32. Generic with comments inside angle list
-				class Mapper<Key, Value> {
-					map: Map<Key, Value>;
+			}
+			const builder = new Builder<Number>();
+			const result = (function () {
+				return builder;
+			}() as Builder<Number>).finalize<boolean>();
+			// 30. Angle bracket start of conditional expression line
+			function adjust<T>(value: T): T {
+				return value;
+			}
+			const val =
+				new Wrapper<number>().value < 100 ? adjust<number>(10) : adjust<number>(20);
+			// 32. Generic with comments inside angle list
+			class Mapper<Key, Value> {
+				map: Map<Key, Value>;
 
-					constructor() {
-						this.map = new Map<Key, Value>();
-					}
-				}
-				const gg = new Mapper<
-					// key type
-					string /* value type */,
-					number
-				>();
-				// 33. Map of generic instance as key
-				const mm = new Map<RippleArray<number>, RippleArray<string>>();
-			</>;
+				constructor() {
+					this.map = new Map<Key, Value>();
+				}
+			}
+			const gg = new Mapper<
+				// key type
+				string /* value type */,
+				number
+			>();
+			// 33. Map of generic instance as key
+			const mm = new Map<RippleArray<number>, RippleArray<string>>();
+			// 10. JSX / Element should still work
+			<div class="still-works">
+				<span>{'Test'}</span>
+			</div>
 		}
 
 		render(App);

package/tests/client/composite/composite.props.test.tsrx

@@ -3,16 +3,16 @@ import { effect, flushSync, track } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
-		function Child({ foo = 456 }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo = 456 }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let &[foo] = track(123);
+		function App() @{
+			let &[foo] = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -22,16 +22,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles default prop values #2', () => {
-		function Child({ foo = 456 }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo = 456 }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let foo = 123;
+		function App() @{
+			let foo = 123;
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -41,16 +41,18 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props', () => {
-		function Child(props: { foo?: Tracked<number> }) {
-			return <><div>{props.foo?.value}</div></>;
+		function Child(props: { foo?: Tracked<number> }) @{
+			<div>
+				{props.foo?.value}
+			</div>
 		}
 
-		function App() {
-			return <>
-				let foo = track(123);
+		function App() @{
+			let foo = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -60,16 +62,16 @@ describe('composite > props', () => {
 	});
 
 	it('correctly handles no props #2', () => {
-		function Child({ foo }: { foo?: number }) {
-			return <><div>{foo}</div></>;
+		function Child({ foo }: { foo?: number }) @{
+			<div>{foo}</div>
 		}
 
-		function App() {
-			return <>
-				let &[foo] = track(123);
+		function App() @{
+			let &[foo] = track(123);
+			<>
 				<Child />
 				<Child {foo} />
-			</>;
+			</>
 		}
 
 		render(App);
@@ -81,22 +83,18 @@ describe('composite > props', () => {
 	it('mutating a tracked value prop should work as intended', () => {
 		const logs: number[] = [];
 
-		function Counter({ count }: { count: Tracked<number> }) {
-			return <>
-				effect(() => {
-					logs.push(count.value);
-				});
-				<button onClick={() => (count.value = count.value + 1)}>{'+'}</button>
-			</>;
+		function Counter({ count }: { count: Tracked<number> }) @{
+			effect(() => {
+				logs.push(count.value);
+			});
+			<button onClick={() => (count.value = count.value + 1)}>{'+'}</button>
 		}
 
-		function App() {
-			return <>
-				const count = track(0);
-				<div>
-					<Counter {count} />
-				</div>
-			</>;
+		function App() @{
+			const count = track(0);
+			<div>
+				<Counter {count} />
+			</div>
 		}
 
 		render(App);
@@ -112,8 +110,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
-		function Button(&{ children, ...rest }: Props) {
-			return <>
+		function Button(&{ children, ...rest }: Props) @{
+			<>
 				<button {...rest}>{children}</button>
 				<style>
 					.on {
@@ -123,22 +121,20 @@ describe('composite > props', () => {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) {
-			return <>
-				const onClick = () => (pressed.value = !pressed.value);
+		function Toggle(&{ pressed, ...rest }: { pressed: Tracked<boolean> }) @{
+			const onClick = () => (pressed.value = !pressed.value);
+			<>
 				<Button {...rest} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
 				<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				const pressed = track(true);
-				<Toggle {pressed} />
-			</>;
+		function App() @{
+			const pressed = track(true);
+			<Toggle {pressed} />
 		}
 
 		render(App);
@@ -166,30 +162,26 @@ describe('composite > props', () => {
 			price: number;
 		}
 
-		function Product({ id, name, organizationName, description, imageUrl, price }: ProductInfo) {
-			return <>
-				<article class="no-padding">
-					<img class="responsive small" src={imageUrl} alt={name} />
-					<span>{id}</span>
-					<h5>{name}</h5>
-					<h3>{organizationName}</h3>
-					<p>{description}</p>
-					<price class="price">{price}</price>
-				</article>
-			</>;
-		}
-
-		function App() {
-			return <>
-				<Product
-					id="1"
-					name="Product 1"
-					organizationName="Org 1"
-					description="Description 1"
-					imageUrl="https://picsum.photos/300/200"
-					price={15}
-				/>
-			</>;
+		function Product({ id, name, organizationName, description, imageUrl, price }: ProductInfo) @{
+			<article class="no-padding">
+				<img class="responsive small" src={imageUrl} alt={name} />
+				<span>{id}</span>
+				<h5>{name}</h5>
+				<h3>{organizationName}</h3>
+				<p>{description}</p>
+				<price class="price">{price}</price>
+			</article>
+		}
+
+		function App() @{
+			<Product
+				id="1"
+				name="Product 1"
+				organizationName="Org 1"
+				description="Description 1"
+				imageUrl="https://picsum.photos/300/200"
+				price={15}
+			/>
 		}
 
 		render(App);