ripple 0.2.115 → 0.2.118

package/tests/client/composite.test.ripple

@@ -1,692 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, track, TrackedArray, TrackedMap, effect } from 'ripple';
-
-describe('composite components', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
-	it('renders composite components', () => {
-		component Button({ count }) {
-			<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('renders composite components with object state', () => {
-		component Button({ obj }) {
-			<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 }) {
-			<button class='count2' onClick={() => {
-				obj.@count++;
-			}}>{obj.@count}</button>
-		}
-
-		component OtherComponent({ obj }) {
-			<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) {
-			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}) {
-			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('correct handles passing through component props and children', () => {
-		component Button({ A, B, children }) {
-			<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('correctly handles default prop values', () => {
-		component Child({ foo = 456 }) {
-			<div>{foo}</div>
-		}
-
-		component App(props) {
-			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(props) {
-			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) {
-			<div>{props.@foo}</div>
-		}
-
-		component App(props) {
-			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(props) {
-			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('handlers generic', () => {
-		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);
-	});
-
-	it('handles spreading of props', () => {
-		let logs = [];
-
-		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 }) {
-			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']);
-	});
-
-	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);
-	});
-
-	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 compositie 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 compositie 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('render simple text as children', () => {
-		component App() {
-			let name = 'Click Me';
-
-			<Child
-				class="my-button"
-			>{name}</Child>;
-		}
-
-		component Child({children, ...rest}) {
-			<button {...rest}><children /></button>
-		}
-
-		render(App);
-		expect(container).toMatchSnapshot();
-	});
-
-	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');
-	});
-
-	it('mutating a tracked value prop should work as intended', () => {
-		const logs = [];
-
-		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]);
-	})
-});