ripple 0.3.7 → 0.3.9

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, Tracked } from 'ripple';
-import { effect, flushSync, track, trackSplit, untrack } from 'ripple';
+import { effect, flushSync, track, untrack } from 'ripple';
 
 describe('basic client > reactivity', () => {
 	it('renders multiple reactive lexical blocks', () => {
@@ -9,7 +9,7 @@ describe('basic client > reactivity', () => {
 					count: track(0),
 				};
 
-				<span>{obj.@count}</span>
+				<span>{obj.count.value}</span>
 			</div>
 			<div>
 				let b = {
@@ -18,15 +18,15 @@ describe('basic client > reactivity', () => {
 
 				<button
 					onClick={() => {
-						b.@count--;
+						b.count.value--;
 					}}
 				>
 					{'-'}
 				</button>
-				<span class="count">{b.@count}</span>
+				<span class="count">{b.count.value}</span>
 				<button
 					onClick={() => {
-						b.@count++;
+						b.count.value++;
 					}}
 				>
 					{'+'}
@@ -57,7 +57,7 @@ describe('basic client > reactivity', () => {
 					count: track(0),
 				};
 
-				<span>{obj.@[count]}</span>
+				<span>{obj[count].value}</span>
 			</div>
 			<div>
 				let b = {
@@ -66,15 +66,15 @@ describe('basic client > reactivity', () => {
 
 				<button
 					onClick={() => {
-						b.@[count]--;
+						b[count].value--;
 					}}
 				>
 					{'-'}
 				</button>
-				<span class="count">{b.@[count]}</span>
+				<span class="count">{b[count].value}</span>
 				<button
 					onClick={() => {
-						b.@[count]++;
+						b[count].value++;
 					}}
 				>
 					{'+'}
@@ -98,14 +98,14 @@ describe('basic client > reactivity', () => {
 
 	it('renders with computed reactive state', () => {
 		component Basic() {
-			let count = track(5);
+			let &[count] = track(5);
 
-			<div class="count">{@count}</div>
-			<div class="doubled">{@count * 2}</div>
-			<div class="is-even">{@count % 2 === 0 ? 'Even' : 'Odd'}</div>
+			<div class="count">{count}</div>
+			<div class="doubled">{count * 2}</div>
+			<div class="is-even">{count % 2 === 0 ? 'Even' : 'Odd'}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -139,43 +139,43 @@ describe('basic client > reactivity', () => {
 			let second = track(0);
 			const arr = [first, second];
 
-			const total = track(() => arr.reduce((a, b) => a + @b, 0));
+			const total = track(() => arr.reduce((a, b) => a + b.value, 0));
 
 			<button
 				onClick={() => {
-					@first++;
+					first.value++;
 				}}
 			>
-				{'first:' + @first}
+				{'first:' + first.value}
 			</button>
 			<button
 				onClick={() => {
-					@second++;
+					second.value++;
 				}}
 			>
-				{'second: ' + @second}
+				{'second: ' + second.value}
 			</button>
 
 			effect(() => {
 				let _arr: number[] = [];
 
 				arr.forEach((item) => {
-					_arr.push(@item);
+					_arr.push(item.value);
 				});
 
 				logs.push(_arr.join(', '));
 			});
 
 			effect(() => {
-				if (arr.map((a) => @a).includes(1)) {
+				if (arr.map((a) => a.value).includes(1)) {
 					logs.push('arr includes 1');
 				}
 			});
 
-			<div>{'Sum: ' + @total}</div>
-			<div>{'Comma Separated: ' + arr.map((a) => @a).join(', ')}</div>
-			<div>{'Number to string: ' + arr.map((a) => String(@a))}</div>
-			<div>{'Even numbers: ' + arr.map((a) => @a).filter((a) => a % 2 === 0)}</div>
+			<div>{'Sum: ' + total.value}</div>
+			<div>{'Comma Separated: ' + arr.map((a) => a.value).join(', ')}</div>
+			<div>{'Number to string: ' + arr.map((a) => String(a.value))}</div>
+			<div>{'Even numbers: ' + arr.map((a) => a.value).filter((a) => a % 2 === 0)}</div>
 		}
 
 		render(App);
@@ -211,12 +211,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where both mutate value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v * 2);
+			let &[count] = track(0, (v) => v + 1, (v) => v * 2);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -237,12 +237,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		component App() {
-			let count = track(1, (v) => v, (v) => v * 2);
+			let &[count] = track(1, (v) => v, (v) => v * 2);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -263,12 +263,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v);
+			let &[count] = track(0, (v) => v + 1, (v) => v);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -291,14 +291,14 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		component App() {
-			let count = track(0, (v) => v, (next, prev) => {
+			let &[count] = track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
 
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -316,14 +316,14 @@ describe('basic client > reactivity', () => {
 
 	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const doubled = track(0, undefined, (value) => {
-				@count += value;
+			const &[doubled] = track(0, undefined, (value) => {
+				count += value;
 				return value;
 			});
 
-			<p>{@doubled}</p>
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -335,10 +335,10 @@ describe('basic client > reactivity', () => {
 		let state: { count?: number } = {};
 
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			effect(() => {
-				state.count = @count;
+				state.count = count;
 			});
 		}
 
@@ -359,16 +359,16 @@ describe('basic client > reactivity', () => {
 		} = {};
 
 		component Basic() {
-			let count = track(5);
+			let &[count] = track(5);
 
 			effect(() => {
 				untrack(() => {
-					state.initialValue = @count;
-					state.preIncrement = ++@count;
-					state.postIncrement = @count++;
-					state.preDecrement = --@count;
-					state.postDecrement = @count--;
-					state.finalValue = @count;
+					state.initialValue = count;
+					state.preIncrement = ++count;
+					state.postIncrement = count++;
+					state.preDecrement = --count;
+					state.postDecrement = count--;
+					state.finalValue = count;
 				});
 			});
 		}
@@ -384,162 +384,17 @@ describe('basic client > reactivity', () => {
 		expect(state.finalValue).toBe(5);
 	});
 
-	describe('track/trackSplit APIs', () => {
-		it('errors on invalid value as null for track with trackSplit', () => {
-			component App() {
-				let message = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(null, ['a', 'b']);
-				} catch (e) {
-					@message = (e as Error).message;
-				}
-
-				<pre>{@message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as array for track with trackSplit', () => {
-			component App() {
-				let message = track('');
-
-				try {
-					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
-				} catch (e) {
-					@message = (e as Error).message;
-				}
-
-				<pre>{@message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('errors on invalid value as tracked for track with trackSplit', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				let message = track('');
-
-				try {
-					const [a, b, rest] = trackSplit(t, ['a', 'b']);
-				} catch (e) {
-					@message = (e as Error).message;
-				}
-
-				<pre>{@message}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('Invalid value: expected a non-tracked object');
-		});
-
-		it('returns undefined for non-existent props in track with trackSplit', () => {
-			component App() {
-				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
-
-				<pre>{@a}</pre>
-				<pre>{String(@b)}</pre>
-				<pre>{@rest.c}</pre>
-			}
-
-			render(App);
-
-			const preA = container.querySelectorAll('pre')[0];
-			const preB = container.querySelectorAll('pre')[1];
-			const preC = container.querySelectorAll('pre')[2];
-
-			expect(preA.textContent).toBe('1');
-			expect(preB.textContent).toBe('undefined');
-			expect(preC.textContent).toBe('1');
-		});
-
-		it('returns the same tracked object if plain track is called with a tracked object', () => {
-			component App() {
-				const t = track({ a: 1, b: 2, c: 3 });
-				const doublet = track(t);
-
-				<pre>{t === doublet}</pre>
-			}
-
-			render(App);
-
-			const pre = container.querySelectorAll('pre')[0];
-			expect(pre.textContent).toBe('true');
-		});
-
-		it('can retain reactivity for destructure rest via track trackSplit', () => {
-			let logs: string[] = [];
-
-			component App() {
-				let count = track(0);
-				let name = track('Click Me');
-
-				function buttonRef(el: HTMLButtonElement) {
-					logs.push('ref called');
-					return () => {
-						logs.push('cleanup ref');
-					};
-				}
-
-				<Child
-					class="my-button"
-					onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
-					{count}
-					{ref buttonRef}
-				>
-					{@name}
-				</Child>
-
-				<button onClick={() => @count++}>{'Increment Count'}</button>
-			}
-
-			component Child(props: PropsWithChildren<{
-				count: Tracked<number>;
-				class: string;
-				onClick: () => void;
-			}>) {
-				const [children, count, rest] = trackSplit(props, ['children', 'count']);
-
-				if (@count < 2) {
-					<button {...@rest}>
-						<@children />
-					</button>
-				}
-				<pre>{@count}</pre>
-			}
-
-			render(App);
-			flushSync();
-
-			const buttonClickMe = container.querySelectorAll('button')[0];
-			const buttonIncrement = container.querySelectorAll('button')[1];
-			const countPre = container.querySelector('pre');
-
-			expect(buttonClickMe.textContent).toBe('Click Me');
-			expect(countPre.textContent).toBe('0');
-			expect(logs).toEqual(['ref called']);
-
-			buttonClickMe.click();
-			buttonIncrement.click();
-			flushSync();
+	it('returns the same tracked object if plain track is called with a tracked object', () => {
+		component App() {
+			const t = track({ a: 1, b: 2, c: 3 });
+			const doublet = track(t);
 
-			expect(buttonClickMe.textContent).toBe('Clicked');
-			expect(countPre.textContent).toBe('1');
+			<pre>{t === doublet}</pre>
+		}
 
-			buttonIncrement.click();
-			flushSync();
+		render(App);
 
-			expect(logs).toEqual(['ref called', 'cleanup ref']);
-		});
+		const pre = container.querySelectorAll('pre')[0];
+		expect(pre.textContent).toBe('true');
 	});
 });

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);
 		});"
 `;