ripple 0.3.7 → 0.3.9

package/tests/client/compiler/compiler.assignments.test.ripple

@@ -16,8 +16,8 @@ describe('compiler > assignments', () => {
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push(@tracked_items[0]);
-			logs.push(@tracked_items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -25,8 +25,8 @@ describe('compiler > assignments', () => {
 
 			items[0] = 123;
 			items[i] = 123;
-			@tracked_items[0] = 123;
-			@tracked_items[i] = 123;
+			tracked_items.value[0] = 123;
+			tracked_items.value[i] = 123;
 			items2[0] = 123;
 			items2[i] = 123;
 			items3[0] = 123;
@@ -34,8 +34,8 @@ describe('compiler > assignments', () => {
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push(@tracked_items[0]);
-			logs.push(@tracked_items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -43,8 +43,8 @@ describe('compiler > assignments', () => {
 
 			items[0]++;
 			items[i]++;
-			@tracked_items[0]++;
-			@tracked_items[i]++;
+			tracked_items.value[0]++;
+			tracked_items.value[i]++;
 			items2[0]++;
 			items2[i]++;
 			items3[0]++;
@@ -52,8 +52,8 @@ describe('compiler > assignments', () => {
 
 			logs.push(items[0]);
 			logs.push(items[i]);
-			logs.push(@tracked_items[0]);
-			logs.push(@tracked_items[i]);
+			logs.push(tracked_items.value[0]);
+			logs.push(tracked_items.value[i]);
 			logs.push(items2[0]);
 			logs.push(items2[i]);
 			logs.push(items3[0]);
@@ -61,8 +61,8 @@ describe('compiler > assignments', () => {
 
 			logs.push(--items[0]);
 			logs.push(--items[i]);
-			logs.push(--@tracked_items[0]);
-			logs.push(--@tracked_items[i]);
+			logs.push(--tracked_items.value[0]);
+			logs.push(--tracked_items.value[i]);
 			logs.push(--items2[0]);
 			logs.push(--items2[i]);
 			logs.push(--items3[0]);
@@ -110,10 +110,10 @@ describe('compiler > assignments', () => {
 	it('compiles tracked values in effect with assignment expression', () => {
 		const source = `import { track, effect } from 'ripple';
 component App() {
-	let count = track(0);
+	let &[count] = track(0);
 
 	effect(() => {
-		state.count = @count;
+		state.count = count;
 	});
 }`;
 		const result = compile(source, 'test.ripple');
@@ -124,14 +124,14 @@ component App() {
 	it('compiles tracked values in effect with update expressions', () => {
 		const source = `import { track, effect, untrack } from 'ripple';
 component App() {
-	let count = track(5);
+	let &[count] = track(5);
 
 	effect(() => {
 		untrack(() => {
-			state.preIncrement = ++@count;
-			state.postIncrement = @count++;
-			state.preDecrement = --@count;
-			state.postDecrement = @count--;
+			state.preIncrement = ++count;
+			state.postIncrement = count++;
+			state.preDecrement = --count;
+			state.postDecrement = count--;
 		});
 	});
 }`;

package/tests/client/compiler/compiler.basic.test.ripple

@@ -324,35 +324,23 @@ describe('compiler > basics', () => {
 		const source = `
 import { RippleArray, RippleMap, RippleObject, RippleSet, createRefKey, effect, track, untrack } from 'ripple';
 component App() {
-	let value = track('test');
-	function inputRef(node) {}
-
-	const props = {
-		id: 'example',
-		@value,
-		[createRefKey()]: inputRef,
-	};
+    let value = track('test');
+    function inputRef(node) {}
+
+    const props = {
+            id: 'example',
+            value: value.value,
+            [createRefKey()]: inputRef,
+    };
 }
 `;
 
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(result).toMatch(/value:\s*value\??\.\['#v'\]/);
+		expect(result).toMatch(/value:\s*value\.value/);
 	});
 
 	it('keeps lazy destructuring as plain destructuring in to_ts output', () => {
-		const track_split_source = `
-import { trackSplit } from 'ripple';
-component App() {
-	const source = { a: 1, b: 2, c: 3 };
-	let &[a, b, rest] = trackSplit(source, ['a', 'b']);
-	const sum = @a + @b + @rest.c;
-}
-`;
-		const track_split_result = compile_to_volar_mappings(track_split_source, 'test.ripple').code;
-		expect(track_split_result).toContain('let [a, b, rest] = trackSplit(source, [\'a\', \'b\']);');
-		expect(track_split_result).not.toContain('let lazy = trackSplit');
-
 		const track_source = `
 import { track } from 'ripple';
 component App() {
@@ -369,6 +357,37 @@ component App() {
 		expect(track_result).not.toContain('lazy0');
 	});
 
+	it('uses tracked fast path for nested lazy params typed as Tracked', () => {
+		const source = `
+import type { Tracked } from 'ripple';
+function use_nested({ value: &[count, tracked] }: { value: Tracked<number> }) {
+	count++;
+	return tracked;
+}
+`;
+		const { js } = compile(source, 'tracked-nested-lazy.ripple', { mode: 'client' });
+
+		// Nested lazy array should still use tracked tuple fast path from outer annotation.
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[0]');
+		expect(js.code).not.toContain('[1]');
+	});
+
+	it('uses tracked fast path for nested lazy params at tuple rest positions', () => {
+		const source = `
+import type { Tracked } from 'ripple';
+function use_tuple_rest({ value: [head, &[count, tracked]] }: { value: [number, ...Tracked<number>[]] }) {
+	count++;
+	return tracked;
+}
+`;
+		const { js } = compile(source, 'tracked-nested-lazy-tuple-rest.ripple', { mode: 'client' });
+
+		// Tuple rest element access should resolve to Tracked<number>, not Tracked<number>[].
+		expect(js.code).toContain('_$_.update(');
+		expect(js.code).not.toContain('[1]');
+	});
+
 	it('preserves generic type args in interface extends for Volar mappings', () => {
 		const source = `
 interface PolymorphicProps<T extends keyof HTMLElementTagNameMap> {
@@ -393,13 +412,13 @@ export component App(props: Props) {
 		const source = `
 import { track } from 'ripple';
 export component App() {
-	let level = track(1);
+	let &[level] = track(1);
 
 	<button
 		onClick={() => {
-			if (@level === 1) @level = 2;
-			else if (@level === 2) @level = 3;
-			else @level = 1;
+			if (level === 1) level = 2;
+			else if (level === 2) level = 3;
+			else level = 1;
 		}}
 	>
 		{'Toggle'}
@@ -496,10 +515,10 @@ export component App() {
 import { track, effect, untrack } from 'ripple';
 
 component App() {
-	let count = track(0);
+	let &[count] = track(0);
 
 	effect(() => {
-		const snapshot = untrack(() => @count);
+		const snapshot = untrack(() => count);
 		console.log(snapshot);
 	});
 }

package/tests/client/compiler/compiler.tracked-access.test.ripple

@@ -70,8 +70,8 @@ import { track } from 'ripple';
 		const code = `
 import { track } from 'ripple';
             export default component App() {
-                let count = track(0);
-                console.log(@count);
+                let &[count] = track(0);
+                console.log(count);
             }
         `;
 		expect(() => compile(code, 'test.ripple')).not.toThrow();

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

@@ -18,7 +18,7 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('Basic Component');
 	});
 
-	it('supports rendering composite components using <object.@component> syntax', () => {
+	it('supports rendering composite components from object properties', () => {
 		component App() {
 			component basic() {
 				<div>{'Basic Component'}</div>
@@ -30,7 +30,8 @@ describe('composite > dynamic components', () => {
 				tracked_basic,
 			};
 
-			<obj.@tracked_basic />
+			const comp = obj.tracked_basic;
+			<@comp />
 		}
 
 		render(App);
@@ -39,7 +40,7 @@ describe('composite > dynamic components', () => {
 		expect(container.textContent).toBe('Basic Component');
 	});
 
-	it('supports rendering composite components using <@object.@component> syntax', () => {
+	it('supports rendering composite components from tracked object properties', () => {
 		component App() {
 			component basic() {
 				<div>{'Basic Component'}</div>
@@ -51,9 +52,10 @@ describe('composite > dynamic components', () => {
 				tracked_basic,
 			};
 
-			const ripple_object = track(obj);
+			let &[inner] = track(obj);
 
-			<@ripple_object.@tracked_basic />
+			const comp = inner.tracked_basic;
+			<@comp />
 		}
 
 		render(App);
@@ -72,15 +74,13 @@ describe('composite > dynamic components', () => {
 		}
 
 		component App() {
-			let thing = track(() => Child1);
+			let &[thing] = track(() => Child1);
 
 			<div id="container">
 				<@thing />
 			</div>
 
-			<button onClick={() => (@thing = @thing === Child1 ? Child2 : Child1)}>
-				{'Change Child'}
-			</button>
+			<button onClick={() => (thing = thing === Child1 ? Child2 : Child1)}>{'Change Child'}</button>
 		}
 
 		render(App);

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

@@ -1,5 +1,5 @@
 import type { Tracked, Props } from 'ripple';
-import { effect, flushSync, track, trackSplit } from 'ripple';
+import { effect, flushSync, track } from 'ripple';
 
 describe('composite > props', () => {
 	it('correctly handles default prop values', () => {
@@ -8,10 +8,10 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let &[foo] = track(123);
 
 			<Child />
-			<Child {@foo} />
+			<Child {foo} />
 		}
 
 		render(App);
@@ -40,7 +40,7 @@ describe('composite > props', () => {
 
 	it('correctly handles no props', () => {
 		component Child(props: { foo?: Tracked<number> }) {
-			<div>{props.@foo}</div>
+			<div>{props.foo?.value}</div>
 		}
 
 		component App() {
@@ -62,10 +62,10 @@ describe('composite > props', () => {
 		}
 
 		component App() {
-			let foo = track(123);
+			let &[foo] = track(123);
 
 			<Child />
-			<Child {@foo} />
+			<Child {foo} />
 		}
 
 		render(App);
@@ -79,10 +79,10 @@ describe('composite > props', () => {
 
 		component Counter({ count }: { count: Tracked<number> }) {
 			effect(() => {
-				logs.push(@count);
+				logs.push(count.value);
 			});
 
-			<button onClick={() => (@count = @count + 1)}>{'+'}</button>
+			<button onClick={() => (count.value = count.value + 1)}>{'+'}</button>
 		}
 
 		component App() {
@@ -106,9 +106,8 @@ describe('composite > props', () => {
 	});
 
 	it('correctly retains prop accessors and reactivity when using rest props', () => {
-		component Button(props: Props) {
-			const [children, rest] = trackSplit(props, ['children']);
-			<button {...@rest}>
+		component Button(&{ children, ...rest }: Props) {
+			<button {...rest}>
 				<@children />
 			</button>
 			<style>
@@ -121,11 +120,10 @@ describe('composite > props', () => {
 			</style>
 		}
 
-		component Toggle(props: { pressed: Tracked<boolean> }) {
-			const [pressed, rest] = trackSplit(props, ['pressed']);
-			const onClick = () => (@pressed = !@pressed);
-			<Button {...@rest} class={@pressed ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
-			<Button class={@pressed ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
+		component 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>
 		}
 
 		component App() {

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

@@ -1,5 +1,5 @@
 import type { Props, Tracked } from 'ripple';
-import { RippleObject, effect, flushSync, track, trackSplit } from 'ripple';
+import { RippleObject, effect, flushSync, track } from 'ripple';
 
 describe('composite > reactivity', () => {
 	it('renders composite components with object state', () => {
@@ -7,10 +7,10 @@ describe('composite > reactivity', () => {
 			<button
 				class="count2"
 				onClick={() => {
-					obj.@count++;
+					obj.count.value++;
 				}}
 			>
-				{obj.@count}
+				{obj.count.value}
 			</button>
 		}
 
@@ -20,7 +20,7 @@ describe('composite > reactivity', () => {
 					count: track(0),
 				};
 
-				<span class="count">{obj.@count}</span>
+				<span class="count">{obj.count.value}</span>
 				<Button {obj} />
 			</div>
 		}
@@ -41,15 +41,15 @@ describe('composite > reactivity', () => {
 			<button
 				class="count2"
 				onClick={() => {
-					obj.@count++;
+					obj.count.value++;
 				}}
 			>
-				{obj.@count}
+				{obj.count.value}
 			</button>
 		}
 
 		component OtherComponent({ obj }: { obj: { count: Tracked<number> } }) {
-			<div class="count3">{obj.@count}</div>
+			<div class="count3">{obj.count.value}</div>
 		}
 
 		component App() {
@@ -58,7 +58,7 @@ describe('composite > reactivity', () => {
 					count: track(0),
 				};
 
-				<span class="count">{obj.@count}</span>
+				<span class="count">{obj.count.value}</span>
 				<span>{' '}</span>
 				if (obj) {
 					<Button {obj} />
@@ -84,28 +84,28 @@ describe('composite > reactivity', () => {
 
 	it('parents and children have isolated state', () => {
 		component Button(props: { count: number }) {
-			let count = track(() => props.count);
+			let &[count] = track(() => props.count);
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
-				{'child: ' + @count}
+				{'child: ' + count}
 			</button>
 		}
 
 		component App() {
 			<div>
-				let count = track(0);
+				let &[count] = track(0);
 
 				<button
 					onClick={() => {
-						@count++;
+						count++;
 					}}
 				>
-					{'parent: ' + @count}
+					{'parent: ' + count}
 				</button>
-				<Button {@count} />
+				<Button {count} />
 			</div>
 		}
 
@@ -131,28 +131,28 @@ describe('composite > reactivity', () => {
 
 	it('parents and children have isolated connected state (destructured props)', () => {
 		component Button(&{ count }: { count: number }) {
-			let local_count = track(() => count);
+			let &[local_count] = track(() => count);
 			<button
 				onClick={() => {
-					@local_count++;
+					local_count++;
 				}}
 			>
-				{'child: ' + @local_count}
+				{'child: ' + local_count}
 			</button>
 		}
 
 		component App() {
 			<div>
-				let count = track(0);
+				let &[count] = track(0);
 
 				<button
 					onClick={() => {
-						@count++;
+						count++;
 					}}
 				>
-					{'parent: ' + @count}
+					{'parent: ' + count}
 				</button>
-				<Button {@count} />
+				<Button {count} />
 			</div>
 		}
 
@@ -180,25 +180,25 @@ describe('composite > reactivity', () => {
 		let logs: string[] = [];
 
 		component App() {
-			const a = track(1);
-			const b = track(2);
-			const c = track(3);
+			let &[a] = track(1);
+			let &[b] = track(2);
+			let &[c] = track(3);
 
-			const obj = track(
+			let &[obj] = track(
 				() => ({
-					@a,
-					@b,
-					@c,
+					a,
+					b,
+					c,
 				}),
 			);
 
-			<Child {...@obj} />
+			<Child {...obj} />
 
 			<button
 				onClick={() => {
-					@a++;
-					@b++;
-					@c++;
+					a++;
+					b++;
+					c++;
 				}}
 			>
 				{'Increment all'}
@@ -227,51 +227,47 @@ describe('composite > reactivity', () => {
 		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
 	});
 
-	it(
-		'keeps reactivity for spread props via intermediate components and usage of trackSplit()',
-		() => {
-			component App() {
-				const count = track(0);
-				<CounterWrapper {@count} up={() => @count++} down={() => @count--} />
-			}
+	it('keeps reactivity for spread props via intermediate components and lazy destructuring', () => {
+		component App() {
+			let &[count] = track(0);
+			<CounterWrapper {count} up={() => count++} down={() => count--} />
+		}
 
-			component CounterWrapper(props: Props) {
-				<div>
-					<Counter {...props} />
-				</div>
-			}
+		component CounterWrapper(props: Props) {
+			<div>
+				<Counter {...props} />
+			</div>
+		}
 
-			component Counter(props: Props) {
-				const [count, up, down, rest] = trackSplit(props, ['count', 'up', 'down']);
-				<button onClick={() => @up()}>{'UP'}</button>
-				<button onClick={() => @down()}>{'DOWN'}</button>
-				<span {...@rest}>{`Counter: ${@count}`}</span>
-			}
+		component Counter(&{ count, up, down, ...rest }: Props) {
+			<button onClick={() => up()}>{'UP'}</button>
+			<button onClick={() => down()}>{'DOWN'}</button>
+			<span {...rest}>{`Counter: ${count}`}</span>
+		}
 
-			render(App);
+		render(App);
 
-			const buttonIncrement = container.querySelectorAll('button')[0];
-			const buttonDecrement = container.querySelectorAll('button')[1];
-			const span = container.querySelector('span');
+		const buttonIncrement = container.querySelectorAll('button')[0];
+		const buttonDecrement = container.querySelectorAll('button')[1];
+		const span = container.querySelector('span');
 
-			expect(span.textContent).toBe('Counter: 0');
+		expect(span.textContent).toBe('Counter: 0');
 
-			buttonIncrement.click();
-			flushSync();
+		buttonIncrement.click();
+		flushSync();
 
-			expect(span.textContent).toBe('Counter: 1');
+		expect(span.textContent).toBe('Counter: 1');
 
-			buttonDecrement.click();
-			flushSync();
+		buttonDecrement.click();
+		flushSync();
 
-			expect(span.textContent).toBe('Counter: 0');
-		},
-	);
+		expect(span.textContent).toBe('Counter: 0');
+	});
 
 	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
 		component App() {
-			const count = track(0);
-			<CounterWrapper {@count} up={() => @count++} />
+			let &[count] = track(0);
+			<CounterWrapper {count} up={() => count++} />
 		}
 
 		component CounterWrapper(props: { count: number; up: () => void }) {
@@ -295,16 +291,19 @@ describe('composite > reactivity', () => {
 			</div>
 		}
 
-		component Counter(props: {
+		component Counter(&{
+			count,
+			up,
+			...rest
+		}: {
 			count: number;
 			up: () => void;
 			double: Tracked<number>;
 			another?: number;
 			extra: number;
 		}) {
-			const [count, up, rest] = trackSplit(props, ['count', 'up']);
-			<div {...@rest}>{`Counter: ${@count} Double: ${props.@double}`}</div>
-			<button onClick={() => @up()}>{'UP'}</button>
+			<div {...rest}>{`Counter: ${count} Double: ${rest.double.value}`}</div>
+			<button onClick={() => up()}>{'UP'}</button>
 		}
 
 		render(App);

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

@@ -7,10 +7,10 @@ describe('composite > render', () => {
 		}
 
 		component App() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			<button onClick={() => @count++}>{'Increment'}</button>
-			<Button {@count} />
+			<button onClick={() => count++}>{'Increment'}</button>
+			<Button {count} />
 		}
 
 		render(App);

package/tests/client/computed-properties.test.ripple

@@ -7,11 +7,11 @@ describe('computed tracked properties', () => {
 				[0]: track(0),
 			};
 
-			<div>{obj.@[0]}</div>
+			<div>{obj[0].value}</div>
 
 			<button
 				onClick={() => {
-					obj.@[0] += 1;
+					obj[0].value += 1;
 				}}
 			>
 				{'Increment'}
@@ -34,11 +34,11 @@ describe('computed tracked properties', () => {
 				[0]: track(0),
 			};
 
-			<div>{obj.@[0]}</div>
+			<div>{obj[0].value}</div>
 
 			<button
 				onClick={() => {
-					obj.@[0]++;
+					obj[0].value++;
 				}}
 			>
 				{'Increment'}