ripple 0.2.115 → 0.2.118

package/tests/client/{__snapshots__/composite.test.ripple.snap → composite/__snapshots__/composite.render.test.ripple.snap}

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`composite components > correct handles passing through component props and children 1`] = `
+exports[`composite > render > correct handles passing through component props and children 1`] = `
 <div>
   <!---->
   <div>
@@ -22,7 +22,7 @@ exports[`composite components > correct handles passing through component props
 </div>
 `;
 
-exports[`composite components > render simple text as children 1`] = `
+exports[`composite > render > render simple text as children 1`] = `
 <div>
   <!---->
   <button

package/tests/client/composite/composite.dynamic-components.test.ripple

@@ -0,0 +1,100 @@
+import { track, flushSync } from 'ripple';
+
+describe('composite > dynamic components', () => {
+	it('supports rendering compositie components using <@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			<@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
+
+	it('supports rendering composite components using <object.@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			const obj = {
+				tracked_basic,
+			}
+
+			<obj.@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
+
+	it('supports rendering composite components using <@object.@component> syntax', () => {
+		component App() {
+			component basic() {
+				<div>{'Basic Component'}</div>
+			}
+
+			const tracked_basic = track(() => basic);
+
+			const obj = {
+				tracked_basic,
+			}
+
+			const tracked_object = track(obj);
+
+			<@tracked_object.@tracked_basic />
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.textContent).toBe('Basic Component');
+	});
+
+	it('handles dynamic component switching', () => {
+		component Child1() {
+			<div>{"I am child 1"}</div>
+		}
+
+		component Child2() {
+			<div>{"I am child 2"}</div>
+		}
+
+		component App() {
+			let thing = track(() => Child1)
+
+			<div id="container">
+				<@thing />
+			</div>
+
+			<button onClick={() => @thing = @thing === Child1 ? Child2 : Child1}>{"Change Child"}</button>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 2');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('#container').textContent).toBe('I am child 1');
+	});
+});

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

@@ -0,0 +1,211 @@
+import { TrackedArray, TrackedMap } from 'ripple';
+
+describe('composite > generics', () => {
+	it('handles advanced generic ambiguity and edge cases', () => {
+		component App() {
+			// Ambiguous generics vs JSX / less-than parsing scenarios
+
+			// 7. Generic following optional chaining
+			const maybe = {
+				factory<T>() {
+					return {
+						make<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<U>();
+				}
+			}
+			const limit = 100;
+			const i = new Box<number>().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<U>() {
+						return {
+							baz<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<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;
+				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[];
+				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>() : new Box<string>();
+
+			// 20. Generic inside template expression
+			const t = `length=${new TrackedArray<number>().length}`;
+
+			// 21. Optional chaining + generic + property access
+			const registry = new TrackedMap<string, number>();
+			const u = registry.get<number>('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: T[]) {
+				return values[0];
+			}
+			const tagResult = tagFn<number>`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>()).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;
+			}
+			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<TrackedArray<number>, TrackedArray<string>>();
+		}
+
+		render(App);
+	});
+});

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

@@ -0,0 +1,106 @@
+import { track, effect, flushSync } from 'ripple';
+
+describe('composite > props', () => {
+	it('correctly handles default prop values', () => {
+		component Child({ foo = 456 }) {
+			<div>{foo}</div>
+		}
+
+		component App() {
+			let foo = track(123);
+
+			<Child />
+			<Child {@foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('456');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('correctly handles default prop values #2', () => {
+		component Child({ foo = 456 }) {
+			<div>{foo}</div>
+		}
+
+		component App() {
+			let foo = 123;
+
+			<Child />
+			<Child {foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('456');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('correctly handles no props', () => {
+		component Child(props: { foo?: Tracked<number> }) {
+			<div>{props.@foo}</div>
+		}
+
+		component App() {
+			let foo = track(123);
+
+			<Child />
+			<Child {foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('correctly handles no props #2', () => {
+		component Child({ foo }) {
+			<div>{foo}</div>
+		}
+
+		component App() {
+			let foo = track(123);
+
+			<Child />
+			<Child {@foo} />
+		}
+
+		render(App);
+
+		expect(container.querySelectorAll('div')[0].textContent).toBe('');
+		expect(container.querySelectorAll('div')[1].textContent).toBe('123');
+	});
+
+	it('mutating a tracked value prop should work as intended', () => {
+		const logs: number[] = [];
+
+		component Counter({count}) {
+			effect(() => {
+				logs.push(@count);
+			});
+
+			<button onClick={() => @count = @count + 1}>{'+'}</button>
+		}
+
+		component App() {
+			const count = track(0);
+
+			<div>
+				<Counter count={count} />
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(logs).toEqual([0]);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(logs).toEqual([0, 1]);
+	})
+});

package/tests/client/composite/composite.reactivity.test.ripple

@@ -0,0 +1,184 @@
+import { track, flushSync, effect } from 'ripple';
+
+describe('composite > reactivity', () => {
+	it('renders composite components with object state', () => {
+		component Button({ obj }: { obj: { count: Tracked<number> } }) {
+			<button class='count2' onClick={() => {
+				obj.@count++;
+			}}>{obj.@count}</button>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					count: track(0)
+				};
+
+				<span class='count'>{obj.@count}</span>
+				<Button obj={obj} />
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+	});
+
+	it('renders composite components with object state wrapped in an if statement', () => {
+		component Button({ obj }: { obj: { count: Tracked<number> } }) {
+			<button class='count2' onClick={() => {
+				obj.@count++;
+			}}>{obj.@count}</button>
+		}
+
+		component OtherComponent({ obj }: { obj: { count: Tracked<number> } }) {
+			<div class='count3'>{obj.@count}</div>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					count: track(0)
+				};
+
+				<span class='count'>{obj.@count}</span>
+				<span>{' '}</span>
+				if (obj) {
+					<Button obj={obj} />
+				}
+
+				if (obj) {
+					<OtherComponent obj={obj} />
+				}
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+		expect(container.querySelector('.count3').textContent).toBe('1');
+	});
+
+	it('parents and children have isolated state', () => {
+		component Button(props: { count: number }) {
+			let count = track(() => props.count);
+			<button onClick={() => { @count++; } }>{"child: " + @count}</button>
+		}
+
+		component App() {
+			<div>
+				let count = track(0);
+
+				<button onClick={() => { @count++; } }>{"parent: " + @count}</button>
+				<Button {@count} />
+			</div>
+		}
+
+		render(App);
+
+		const buttons = container.querySelectorAll('button');
+
+		expect(buttons[0].textContent).toBe('parent: 0');
+		expect(buttons[1].textContent).toBe('child: 0');
+
+		buttons[0].click();
+		flushSync();
+
+		expect(buttons[0].textContent).toBe('parent: 1');
+		expect(buttons[1].textContent).toBe('child: 1');
+
+		buttons[1].click();
+		flushSync();
+
+		expect(buttons[0].textContent).toBe('parent: 1');
+		expect(buttons[1].textContent).toBe('child: 2');
+	});
+
+	it('parents and children have isolated connected state (destructured props)', () => {
+		component Button({count}: { count: number }) {
+			let local_count = track(() => count);
+			<button onClick={() => { @local_count++; } }>{"child: " + @local_count}</button>
+		}
+
+		component App() {
+			<div>
+				let count = track(0);
+
+				<button onClick={() => { @count++; } }>{"parent: " + @count}</button>
+				<Button {@count} />
+			</div>
+		}
+
+		render(App);
+
+		const buttons = container.querySelectorAll('button');
+
+		expect(buttons[0].textContent).toBe('parent: 0');
+		expect(buttons[1].textContent).toBe('child: 0');
+
+		buttons[0].click();
+		flushSync();
+
+		expect(buttons[0].textContent).toBe('parent: 1');
+		expect(buttons[1].textContent).toBe('child: 1');
+
+		buttons[1].click();
+		flushSync();
+
+		expect(buttons[0].textContent).toBe('parent: 1');
+		expect(buttons[1].textContent).toBe('child: 2');
+	});
+
+	it('handles spreading of props', () => {
+		let logs: string[] = [];
+
+		component App() {
+			const a = track(1);
+			const b = track(2);
+			const c = track(3);
+
+			const obj = track(() => ({
+				@a,
+				@b,
+				@c,
+			}));
+
+			<Child {...@obj} />
+
+			<button onClick={() => { @a++; @b++; @c++; }}>{"Increment all"}</button>
+		}
+
+		component Child({ a, b, c }: { a: number; b: number; c: number }) {
+			effect(() => {
+				logs.push(`Child effect: ${a}, ${b}, ${c}`);
+			});
+
+			<div>{a + ' ' +  b + ' ' + c}</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('1 2 3');
+		expect(logs).toEqual(['Child effect: 1, 2, 3']);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('2 3 4');
+		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
+	});
+});

package/tests/client/composite/composite.render.test.ripple

@@ -0,0 +1,84 @@
+import { track, flushSync, TrackedArray } from 'ripple';
+
+describe('composite > render', () => {
+	it('renders composite components', () => {
+		component Button({ count }: { count: number }) {
+			<div>{count}</div>
+		}
+
+		component App() {
+			let count = track(0);
+
+			<button onClick={() => @count++}>{'Increment'}</button>
+			<Button {@count} />
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('1');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toBe('2');
+	});
+
+	it('correct handles passing through component props and children', () => {
+		component Button({ A, B, children }: { A: () => void; B: () => void; children: () => void }) {
+			<div>
+				<A />
+				<children />
+				<B />
+			</div>
+		}
+
+		component App() {
+			<Button>
+				component A() {
+					<div>{"I am A"}</div>
+				}
+				<div>{"other text"}</div>
+				component B() {
+					<div>{"I am B"}</div>
+				}
+			</Button>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render simple text as children', () => {
+		component App() {
+			let name = 'Click Me';
+
+			<Child
+				class="my-button"
+			>{name}</Child>;
+		}
+
+		component Child({children, ...rest}: {children: string; class: string}) {
+			<button {...rest}><children /></button>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('handles generics', () => {
+		component ArrayTest() {
+			let items = new TrackedArray<number>();
+			items.push.apply(items, [1, 2, 3, 4, 5]);
+
+			<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+		}
+
+		render(ArrayTest);
+	});
+});