ripple 0.3.6 → 0.3.8

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

@@ -27,16 +27,16 @@ describe('basic client > rendering & text', () => {
 
 	it('renders dynamic text', () => {
 		component Basic() {
-			let text = track('Hello World');
+			let &[text] = track('Hello World');
 
 			<button
 				onClick={() => {
-					@text = 'Hello Ripple';
+					text = 'Hello Ripple';
 				}}
 			>
 				{'Change Text'}
 			</button>
-			<div>{@text}</div>
+			<div>{text}</div>
 		}
 
 		render(Basic);
@@ -104,24 +104,24 @@ describe('basic client > rendering & text', () => {
 
 	it('renders with mixed static and dynamic content', () => {
 		component Basic() {
-			let name = track('World');
-			let count = track(0);
+			let &[name] = track('World');
+			let &[count] = track(0);
 			const staticMessage = 'Welcome to Ripple!';
 
 			<div class="mixed-content">
 				<h1>{staticMessage}</h1>
-				<p class="greeting">{'Hello, ' + @name + '!'}</p>
-				<p class="notifications">{'You have ' + @count + ' notifications'}</p>
+				<p class="greeting">{'Hello, ' + name + '!'}</p>
+				<p class="notifications">{'You have ' + count + ' notifications'}</p>
 				<button
 					onClick={() => {
-						@count++;
+						count++;
 					}}
 				>
 					{'Add Notification'}
 				</button>
 				<button
 					onClick={() => {
-						@name = @name === 'World' ? 'User' : 'World';
+						name = name === 'World' ? 'User' : 'World';
 					}}
 				>
 					{'Toggle Name'}
@@ -151,11 +151,11 @@ describe('basic client > rendering & text', () => {
 
 	it('basic operations', () => {
 		component App() {
-			let count = track(0);
-			<div>{@count++}</div>
-			<div>{++@count}</div>
+			let &[count] = track(0);
+			<div>{count++}</div>
+			<div>{++count}</div>
 			<div>{5}</div>
-			<div>{@count}</div>
+			<div>{count}</div>
 		}
 
 		render(App);
@@ -164,27 +164,27 @@ describe('basic client > rendering & text', () => {
 
 	it('renders with conditional rendering using if statements', () => {
 		component Basic() {
-			let showContent = track(false);
-			let userRole = track('guest');
+			let &[showContent] = track(false);
+			let &[userRole] = track('guest');
 
 			<button
 				onClick={() => {
-					@showContent = !@showContent;
+					showContent = !showContent;
 				}}
 			>
 				{'Toggle Content'}
 			</button>
 			<button
 				onClick={() => {
-					@userRole = @userRole === 'guest' ? 'admin' : 'guest';
+					userRole = userRole === 'guest' ? 'admin' : 'guest';
 				}}
 			>
 				{'Toggle Role'}
 			</button>
 
 			<div class="content">
-				if (@showContent) {
-					if (@userRole === 'admin') {
+				if (showContent) {
+					if (userRole === 'admin') {
 						<div class="admin-content">{'Admin content'}</div>
 					} else {
 						<div class="user-content">{'User content'}</div>

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

@@ -6,14 +6,14 @@ describe('basic client > utilities', () => {
 		const promise = new Promise<void>((res) => (resolve = res));
 
 		component Basic() {
-			let value = track(0);
+			let &[value] = track(0);
 			effect(() => {
 				untrack(() => {
-					@value++;
+					value++;
 					tick().then(() => resolve());
 				});
 			});
-			<p>{@value}</p>
+			<p>{value}</p>
 		}
 		render(Basic);
 

package/tests/client/boundaries.test.ripple

@@ -4,25 +4,25 @@ describe('passing reactivity between boundaries tests', () => {
 	it('can pass reactivity between functions with simple arrays and destructuring', () => {
 		let log: string[] = [];
 
-		function createDouble([count]: [Tracked<number>]) {
-			const double = track(() => @count * 2);
+		function createDouble(&[count]: Tracked<number>) {
+			const double = track(() => count * 2);
 
 			effect(() => {
-				log.push('Count:' + @count);
+				log.push('Count:' + count);
 			});
 
-			return [double];
+			return double;
 		}
 
 		component App() {
-			let count = track(0);
+			let &[count, countTracked] = track(0);
 
-			const [double] = createDouble([count]);
+			const &[double] = createDouble(countTracked);
 
-			<div>{'Double: ' + @double}</div>
+			<div>{'Double: ' + double}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -54,10 +54,10 @@ describe('passing reactivity between boundaries tests', () => {
 		let log: string[] = [];
 
 		function createDouble({ count }: { count: Tracked<number> }) {
-			const double = track(() => @count * 2);
+			const double = track(() => count.value * 2);
 
 			effect(() => {
-				log.push('Count:' + @count);
+				log.push('Count:' + count.value);
 			});
 
 			return { double };
@@ -68,10 +68,10 @@ describe('passing reactivity between boundaries tests', () => {
 
 			const { double } = createDouble({ count });
 
-			<div>{'Double: ' + @double}</div>
+			<div>{'Double: ' + double.value}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count.value++;
 				}}
 			>
 				{'Increment'}

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

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(count);"`;
+exports[`compiler > assignments > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(lazy);"`;
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.untrack(() => {
-			state.preIncrement = _$_.update_pre(count);
-			state.postIncrement = _$_.update(count);
-			state.preDecrement = _$_.update_pre(count, -1);
-			state.postDecrement = _$_.update(count, -1);
+			state.preIncrement = _$_.update_pre(lazy);
+			state.postIncrement = _$_.update(lazy);
+			state.preDecrement = _$_.update_pre(lazy, -1);
+			state.postDecrement = _$_.update(lazy, -1);
 		});"
 `;

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,20 +324,49 @@ 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() {
+	let &[value, ...rest] = track(0);
+	const x = value;
+}
+`;
+		const track_result = compile_to_volar_mappings(track_source, 'test.ripple').code;
+		expect(track_result).toContain('let [value, ...rest] = track(0);');
+		expect(track_result).toContain('const x = value;');
+		expect(track_result).not.toContain('let lazy = track(0)');
+		expect(track_result).not.toContain('.slice(');
+		expect(track_result).not.toContain('_$_.get(');
+		expect(track_result).not.toContain('lazy0');
 	});
 
 	it('preserves generic type args in interface extends for Volar mappings', () => {
@@ -364,13 +393,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'}
@@ -467,10 +496,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();
@@ -121,4 +121,70 @@ import { get, track } from 'ripple';
 			expect(() => compile(code, 'test.ripple')).not.toThrow();
 		},
 	);
+
+	it('should allow indexed [0] access on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(count[0]);
+            }
+        `;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should allow indexed [1] access on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                let raw = count[1];
+            }
+        `;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should allow [0] write on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                count[0] = 5;
+            }
+        `;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should allow .value read access on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(count.value);
+            }
+        `;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should allow .value assignment on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                count.value = 5;
+            }
+        `;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
+	});
+
+	it('should allow .length read access on a tracked object', () => {
+		const code = `
+import { track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(count.length);
+            }
+        `;
+		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

@@ -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() {
@@ -108,7 +108,7 @@ 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}>
+			<button {...rest.value}>
 				<@children />
 			</button>
 			<style>
@@ -123,9 +123,9 @@ describe('composite > props', () => {
 
 		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>
+			const onClick = () => (pressed.value = !pressed.value);
+			<Button {...rest.value} class={pressed.value ? 'on' : 'off'} {onClick}>{'button 1'}</Button>
+			<Button class={pressed.value ? 'on' : 'off'} {onClick}>{'button 2'}</Button>
 		}
 
 		component App() {