ripple 0.3.2 → 0.3.4

package/tests/client/lazy-destructuring.test.ripple

@@ -0,0 +1,185 @@
+import { flushSync, track } from 'ripple';
+
+describe('lazy destructuring', () => {
+	it('lazily accesses object properties with const', () => {
+		component Inner(&{ a, b }: { a: number; b: string }) {
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		component Test() {
+			let a = track(1);
+			let b = track('hello');
+
+			<Inner {@a} {@b} />
+			<button
+				onClick={() => {
+					@a = 2;
+					@b = 'world';
+				}}
+			>
+				{'update'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('1-hello');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('pre')!.textContent).toBe('2-world');
+	});
+
+	it('lazily accesses array elements with const', () => {
+		component Inner(&{ first, second }: { first: number; second: number }) {
+			<pre>{`${first}-${second}`}</pre>
+		}
+
+		component Test() {
+			let first = track(10);
+			let second = track(20);
+
+			<Inner {@first} {@second} />
+			<button
+				onClick={() => {
+					@first = 30;
+					@second = 40;
+				}}
+			>
+				{'update'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('10-20');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('pre')!.textContent).toBe('30-40');
+	});
+
+	it('supports default values in lazy object destructuring', () => {
+		component Test() {
+			const obj = { a: 5 };
+			const &{ a, b = 99 } = obj;
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('5-99');
+	});
+
+	it('supports lazy destructuring in component params', () => {
+		component Inner(&{ name, age }: { name: string; age: number }) {
+			<pre>{`${name}-${age}`}</pre>
+		}
+
+		component Test() {
+			<Inner name="Alice" age={30} />
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('Alice-30');
+	});
+
+	it('supports lazy destructuring in component params with reactivity', () => {
+		component Inner(&{ count }: { count: number }) {
+			<pre>{count}</pre>
+		}
+
+		component Test() {
+			let count = track(0);
+
+			<Inner {@count} />
+			<button
+				onClick={() => {
+					@count++;
+				}}
+			>
+				{'increment'}
+			</button>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('0');
+		container.querySelector('button')!.click();
+		flushSync();
+		expect(container.querySelector('pre')!.textContent).toBe('1');
+	});
+
+	it('supports lazy destructuring in function params', () => {
+		component Test() {
+			function getInfo(&{ x, y }: { x: number; y: number }) {
+				return x + y;
+			}
+			const result = getInfo({ x: 3, y: 7 });
+			<pre>{result}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('10');
+	});
+
+	it('supports let lazy destructuring with assignment writeback', () => {
+		component Test() {
+			const obj = { a: 1, b: 2 };
+			let &{ a, b } = obj;
+			a = 10;
+			b = 20;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('10-20');
+	});
+
+	it('supports compound assignment operators on lazy bindings', () => {
+		component Test() {
+			const obj = { a: 5, b: 10 };
+			let &{ a, b } = obj;
+			a += 3;
+			b *= 2;
+			<pre>{`${obj.a}-${obj.b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('8-20');
+	});
+
+	it('supports update expressions on lazy bindings', () => {
+		component Test() {
+			const obj = { count: 0 };
+			let &{ count } = obj;
+			count++;
+			count++;
+			count--;
+			<pre>{obj.count}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('1');
+	});
+
+	it('supports function params with lazy destructuring and default values', () => {
+		component Test() {
+			function calc(&{ x, y = 100 }: { x: number; y?: number }) {
+				return x + y;
+			}
+			const a = calc({ x: 5, y: 10 });
+			const b = calc({ x: 5 });
+			<pre>{`${a}-${b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('15-105');
+	});
+
+	it('supports lazy destructuring with default value writeback', () => {
+		component Test() {
+			const obj: { a: number; b?: number } = { a: 1 };
+			let &{ a, b = 50 } = obj;
+			b = 99;
+			<pre>{`${a}-${obj.b}`}</pre>
+		}
+
+		render(Test);
+		expect(container.querySelector('pre')!.textContent).toBe('1-99');
+	});
+});

package/tests/client/map.test.ripple

@@ -1,11 +1,11 @@
-import { flushSync, RippleMap } from 'ripple';
+import { RippleMap, flushSync, track } from 'ripple';
 
 describe('RippleMap', () => {
 	it('handles set with update and delete operations with a reactive size var', () => {
 		component MapTest() {
-			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
-			let value = #ripple.track(() => map.get('a'));
-			let size = #ripple.track(() => map.size);
+			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+			let value = track(() => map.get('a'));
+			let size = track(() => map.size);
 
 			<button onClick={() => map.set('d', 4)}>{'set'}</button>
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
@@ -42,7 +42,7 @@ describe('RippleMap', () => {
 
 	it('handles clear operation', () => {
 		component MapTest() {
-			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
+			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
 
 			<button onClick={() => map.clear()}>{'clear'}</button>
 			<pre>{map.size}</pre>
@@ -60,8 +60,8 @@ describe('RippleMap', () => {
 
 	it('handles has operation and tracks reactive $has', () => {
 		component MapTest() {
-			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
-			let has = #ripple.track(() => map.has('b'));
+			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+			let has = track(() => map.has('b'));
 
 			<button onClick={() => map.delete('b')}>{'delete'}</button>
 			<pre>{@has}</pre>
@@ -80,10 +80,10 @@ describe('RippleMap', () => {
 
 	it('handles reactivity of keys, values, and entries', () => {
 		component MapTest() {
-			let map = #ripple.map([['x', 10], ['y', 20]]);
-			let keys = #ripple.track(() => Array.from(map.keys()));
-			let values = #ripple.track(() => Array.from(map.values()));
-			let entries = #ripple.track(() => Array.from(map.entries()));
+			let map = RippleMap([['x', 10], ['y', 20]]);
+			let keys = track(() => Array.from(map.keys()));
+			let values = track(() => Array.from(map.values()));
+			let entries = track(() => Array.from(map.entries()));
 
 			<button onClick={() => map.delete('x')}>{'delete'}</button>
 
@@ -110,7 +110,7 @@ describe('RippleMap', () => {
 
 	it('toJSON returns correct object', () => {
 		component MapTest() {
-			let map = #ripple.map([['foo', 1], ['bar', 2]]);
+			let map = RippleMap([['foo', 1], ['bar', 2]]);
 
 			<pre>{JSON.stringify(map)}</pre>
 		}
@@ -120,9 +120,9 @@ describe('RippleMap', () => {
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('[["foo",1],["bar",2]]');
 	});
 
-	it('creates empty RippleMap using #ripple.map() shorthand syntax', () => {
+	it('creates empty RippleMap using RippleMap() shorthand syntax', () => {
 		component MapTest() {
-			let map = #ripple.map();
+			let map = RippleMap();
 
 			<button onClick={() => map.set('a', 1)}>{'add'}</button>
 			<pre>{map.size}</pre>
@@ -139,10 +139,10 @@ describe('RippleMap', () => {
 		expect(container.querySelector('pre').textContent).toBe('1');
 	});
 
-	it('creates RippleMap with initial entries using #ripple.map() shorthand syntax', () => {
+	it('creates RippleMap with initial entries using RippleMap() shorthand syntax', () => {
 		component MapTest() {
-			let map = #ripple.map([['a', 1], ['b', 2], ['c', 3]]);
-			let value = #ripple.track(() => map.get('b'));
+			let map = RippleMap([['a', 1], ['b', 2], ['c', 3]]);
+			let value = track(() => map.get('b'));
 
 			<button onClick={() => map.set('b', 10)}>{'update'}</button>
 			<pre>{map.size}</pre>
@@ -161,10 +161,10 @@ describe('RippleMap', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
 	});
 
-	it('handles all operations with #ripple.map() shorthand syntax', () => {
+	it('handles all operations with RippleMap() shorthand syntax', () => {
 		component MapTest() {
-			let map = #ripple.map([['x', 100], ['y', 200]]);
-			let keys = #ripple.track(() => Array.from(map.keys()));
+			let map = RippleMap([['x', 100], ['y', 200]]);
+			let keys = track(() => Array.from(map.keys()));
 
 			<button onClick={() => map.set('z', 300)}>{'add'}</button>
 			<button onClick={() => map.delete('x')}>{'delete'}</button>

package/tests/client/media-query.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync } from 'ripple';
+import { MediaQuery, flushSync, track } from 'ripple';
 
 type Callback = (event: MediaQueryListEvent) => void;
 
@@ -51,7 +51,7 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			const medium = #ripple.mediaQuery(media);
+			const medium = MediaQuery(media);
 
 			<div>
 				<p>{@medium}</p>
@@ -86,7 +86,7 @@ describe('MediaQuery', () => {
 		const media = '(min-width: 600px)';
 
 		component App() {
-			let show = #ripple.track(true);
+			let show = track(true);
 
 			if (@show) {
 				<Child />
@@ -96,7 +96,7 @@ describe('MediaQuery', () => {
 		}
 
 		component Child() {
-			const medium = #ripple.mediaQuery(media);
+			const medium = MediaQuery(media);
 
 			<div>
 				<p>{@medium}</p>

package/tests/client/object.test.ripple

@@ -1,10 +1,10 @@
-import { flushSync, RippleObject } from 'ripple';
+import { RippleObject, flushSync } from 'ripple';
 import { TRACKED_OBJECT } from '../../src/runtime/internal/client/constants.js';
 
 describe('RippleObject', () => {
 	it('makes new properties reactive', () => {
 		component ObjectTest() {
-			const obj = #ripple{ a: -1 };
+			const obj = new RippleObject({ a: -1 });
 
 			obj.a = 0;
 
@@ -33,7 +33,7 @@ describe('RippleObject', () => {
 
 	it('makes existing object properties reactive', () => {
 		component ObjectTest() {
-			const obj = #ripple{ a: 0 };
+			const obj = new RippleObject({ a: 0 });
 
 			<pre>{obj.a}</pre>
 			<button
@@ -60,7 +60,7 @@ describe('RippleObject', () => {
 
 	it('checks if property exists via the has trap', () => {
 		component ObjectTest() {
-			const obj = #ripple{ a: -1, b: 1 };
+			const obj = new RippleObject({ a: -1, b: 1 });
 
 			obj.a = 0;
 
@@ -167,7 +167,7 @@ describe('RippleObject', () => {
 
 	it('uses the hash syntax for creating RippleObject', () => {
 		component ObjectTest() {
-			const obj = #ripple{ a: 0, b: 1, c: { d: { e: 8 } } };
+			const obj = new RippleObject({ a: 0, b: 1, c: { d: { e: 8 } } });
 
 			<pre>{obj.a}</pre>
 			<pre>{TRACKED_OBJECT in obj}</pre>

package/tests/client/portal.test.ripple

@@ -1,4 +1,4 @@
-import { Portal, flushSync } from 'ripple';
+import { Portal, flushSync, track } from 'ripple';
 
 describe('Portal', () => {
 	afterEach(() => {
@@ -46,7 +46,7 @@ describe('Portal', () => {
 
 	it('cleans up portal content when destroyed via conditional rendering', () => {
 		component TestPortal() {
-			let open = #ripple.track(true);
+			let open = track(true);
 
 			if (@open) {
 				<Portal target={document.body}>
@@ -72,7 +72,7 @@ describe('Portal', () => {
 
 	it('opens and closes portal via conditional rendering', () => {
 		component TestPortal() {
-			let open = #ripple.track(false);
+			let open = track(false);
 
 			if (@open) {
 				<Portal target={document.body}>
@@ -138,7 +138,7 @@ describe('Portal', () => {
 
 	it('handles portal with reactive content', () => {
 		component TestReactivePortal() {
-			let count = #ripple.track(0);
+			let count = track(0);
 
 			<Portal target={document.body}>
 				<div class="test-portal">

package/tests/client/ref.test.ripple

@@ -1,6 +1,6 @@
 import type { PropsWithExtras } from 'ripple';
 import { describe, it, expect } from 'vitest';
-import { flushSync, RippleArray, createRefKey } from 'ripple';
+import { RippleArray, createRefKey, flushSync, track } from 'ripple';
 
 describe('refs', () => {
 	it('capture a <div>', () => {
@@ -50,7 +50,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = #ripple.track('test');
+			let value = track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
@@ -81,7 +81,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		component App() {
-			let value = #ripple.track('test');
+			let value = track('test');
 
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');

package/tests/client/return.test.ripple

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync } from 'ripple';
+import { flushSync, track } from 'ripple';
 import { compile } from 'ripple/compiler';
 
 describe('returns in prohibited scopes', () => {
@@ -64,7 +64,7 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from false to true hides rest', () => {
 		component App() {
-			let condition = #ripple.track(false);
+			let condition = track(false);
 
 			<button
 				onClick={() => {
@@ -93,7 +93,7 @@ describe('early return in client components', () => {
 
 	it('reactive: condition changes from true to false shows rest', () => {
 		component App() {
-			let condition = #ripple.track(true);
+			let condition = track(true);
 
 			<button
 				onClick={() => {
@@ -905,8 +905,8 @@ describe('early return in client components', () => {
 
 	it('reactive: nested return condition changes', () => {
 		component App() {
-			let a = #ripple.track(true);
-			let b = #ripple.track(true);
+			let a = track(true);
+			let b = track(true);
 
 			<button
 				onClick={() => {
@@ -940,7 +940,7 @@ describe('early return in client components', () => {
 
 	it('reactive: return in nested element scope', () => {
 		component App() {
-			let show = #ripple.track(true);
+			let show = track(true);
 
 			<button
 				onClick={() => {
@@ -1214,7 +1214,7 @@ describe('early return in client components', () => {
 
 		it('reactive: nested return - outer condition changes to false shows rest', () => {
 			component App() {
-				let a = #ripple.track(true);
+				let a = track(true);
 				let b = true;
 
 				<button
@@ -1251,7 +1251,7 @@ describe('early return in client components', () => {
 			component App() {
 				let a = true;
 				let b = true;
-				let c = #ripple.track(true);
+				let c = track(true);
 
 				<button
 					onClick={() => {
@@ -2208,10 +2208,10 @@ describe('early return in client components', () => {
 
 		it('nested reactive: toggling conditions updates DOM', () => {
 			component App() {
-				let a = #ripple.track(false);
-				let b = #ripple.track(false);
-				let c = #ripple.track(false);
-				let d = #ripple.track(false);
+				let a = track(false);
+				let b = track(false);
+				let c = track(false);
+				let d = track(false);
 
 				<button
 					class="toggle-c"
@@ -2279,7 +2279,7 @@ describe('early return in client components', () => {
 			() => {
 				component App() {
 					let a = true;
-					let b = #ripple.track(true);
+					let b = track(true);
 
 					<button
 						class="toggle"
@@ -2326,7 +2326,7 @@ describe('early return in client components', () => {
 
 		it('reactive sibling returns cycle through first, second, and fallback branches', () => {
 			component App() {
-				let mode = #ripple.track('first');
+				let mode = track('first');
 
 				<button
 					class="toggle"
@@ -2382,8 +2382,8 @@ describe('early return in client components', () => {
 
 		it('reactive nested returns with tracked outer and inner flags transition correctly', () => {
 			component App() {
-				let a = #ripple.track(true);
-				let b = #ripple.track(true);
+				let a = track(true);
+				let b = track(true);
 
 				<button
 					class="toggle-a"
@@ -2446,7 +2446,7 @@ describe('early return in client components', () => {
 
 		it('reactive else-if return chain transitions between return and non-return states', () => {
 			component App() {
-				let status = #ripple.track(0);
+				let status = track(0);
 
 				<button
 					class="toggle"

package/tests/client/set.test.ripple

@@ -1,4 +1,4 @@
-import { flushSync, RippleSet } from 'ripple';
+import { RippleSet, flushSync, track } from 'ripple';
 
 describe('RippleSet', () => {
 	it('handles add and delete operations', () => {
@@ -60,7 +60,7 @@ describe('RippleSet', () => {
 	it('handles has operation', () => {
 		component SetTest() {
 			let items = new RippleSet([1, 2, 3]);
-			let hasValue = #ripple.track(() => items.has(2));
+			let hasValue = track(() => items.has(2));
 
 			<button onClick={() => items.delete(2)}>{'delete'}</button>
 			<pre>{@hasValue}</pre>
@@ -78,9 +78,9 @@ describe('RippleSet', () => {
 		expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
 	});
 
-	it('creates empty RippleSet using #ripple.set() shorthand syntax', () => {
+	it('creates empty RippleSet using RippleSet() shorthand syntax', () => {
 		component SetTest() {
-			let items = #ripple.set();
+			let items = RippleSet();
 
 			<button onClick={() => items.add(1)}>{'add'}</button>
 			<pre>{items.size}</pre>
@@ -97,10 +97,10 @@ describe('RippleSet', () => {
 		expect(container.querySelector('pre').textContent).toBe('1');
 	});
 
-	it('creates RippleSet with initial values using #ripple.set() shorthand syntax', () => {
+	it('creates RippleSet with initial values using RippleSet() shorthand syntax', () => {
 		component SetTest() {
-			let items = #ripple.set([1, 2, 3, 4]);
-			let hasValue = #ripple.track(() => items.has(3));
+			let items = RippleSet([1, 2, 3, 4]);
+			let hasValue = track(() => items.has(3));
 
 			<button onClick={() => items.delete(3)}>{'delete'}</button>
 			<pre>{items.size}</pre>
@@ -120,10 +120,10 @@ describe('RippleSet', () => {
 		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
 	});
 
-	it('handles all operations with #ripple.set() shorthand syntax', () => {
+	it('handles all operations with RippleSet() shorthand syntax', () => {
 		component SetTest() {
-			let items = #ripple.set([10, 20, 30]);
-			let values = #ripple.track(() => Array.from(items.values()));
+			let items = RippleSet([10, 20, 30]);
+			let values = track(() => Array.from(items.values()));
 
 			<button onClick={() => items.add(40)}>{'add'}</button>
 			<button onClick={() => items.delete(20)}>{'delete'}</button>

package/tests/client/svg.test.ripple

@@ -1,3 +1,4 @@
+import { track } from 'ripple';
 import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
 describe('SVG namespace handling', () => {
@@ -289,7 +290,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let dynTag = #ripple.track('polygon');
+			let dynTag = track('polygon');
 			<SVG>
 				<@dynTag points="0,0 30,0 15,10" />
 			</SVG>
@@ -316,7 +317,7 @@ describe('SVG namespace handling', () => {
 		}
 
 		component App() {
-			let Component = #ripple.track(() => Polygon);
+			let Component = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>
@@ -333,19 +334,19 @@ describe('SVG namespace handling', () => {
 
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		component SVG({ children }: PropsWithChildren<{}>) {
-			const tag = #ripple.track('svg');
+			const tag = track('svg');
 			<@tag width={100} height={50} fill="red" viewBox="0 0 30 10" preserveAspectRatio="none">
 				<children />
 			</@tag>
 		}
 
 		component Polygon({ points }: PropsWithExtras<{ points: string }>) {
-			let dynTag = #ripple.track('polygon');
+			let dynTag = track('polygon');
 			<@dynTag {points} />
 		}
 
 		component App() {
-			let Component = #ripple.track(() => Polygon);
+			let Component = track(() => Polygon);
 			<SVG>
 				<@Component points="0,0 30,0 15,10" />
 			</SVG>