ripple 0.3.6 → 0.3.8

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

@@ -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'}
@@ -231,8 +231,8 @@ describe('composite > reactivity', () => {
 		'keeps reactivity for spread props via intermediate components and usage of trackSplit()',
 		() => {
 			component App() {
-				const count = track(0);
-				<CounterWrapper {@count} up={() => @count++} down={() => @count--} />
+				let &[count] = track(0);
+				<CounterWrapper {count} up={() => count++} down={() => count--} />
 			}
 
 			component CounterWrapper(props: Props) {
@@ -242,10 +242,10 @@ describe('composite > reactivity', () => {
 			}
 
 			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>
+				let [count, up, down, rest] = trackSplit(props, ['count', 'up', 'down']);
+				<button onClick={() => up.value()}>{'UP'}</button>
+				<button onClick={() => down.value()}>{'DOWN'}</button>
+				<span {...rest.value}>{`Counter: ${count.value}`}</span>
 			}
 
 			render(App);
@@ -270,8 +270,8 @@ describe('composite > reactivity', () => {
 
 	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 }) {
@@ -302,9 +302,9 @@ describe('composite > reactivity', () => {
 			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>
+			let [count, up, rest] = trackSplit(props, ['count', 'up']);
+			<div {...rest.value}>{`Counter: ${count.value} Double: ${props.double.value}`}</div>
+			<button onClick={() => up.value()}>{'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'}

package/tests/client/date.test.ripple

@@ -4,10 +4,10 @@ describe('RippleDate', () => {
 	it('handles getTime() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1);
-			let time = track(() => date.getTime());
+			let &[time] = track(() => date.getTime());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-			<pre>{@time}</pre>
+			<pre>{time}</pre>
 		}
 
 		render(DateTest);
@@ -26,10 +26,10 @@ describe('RippleDate', () => {
 	it('handles getFullYear() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 5, 15);
-			let year = track(() => date.getFullYear());
+			let &[year] = track(() => date.getFullYear());
 
 			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
-			<pre>{@year}</pre>
+			<pre>{year}</pre>
 		}
 
 		render(DateTest);
@@ -47,10 +47,10 @@ describe('RippleDate', () => {
 	it('handles getMonth() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 15);
-			let month = track(() => date.getMonth());
+			let &[month] = track(() => date.getMonth());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-			<pre>{@month}</pre>
+			<pre>{month}</pre>
 		}
 
 		render(DateTest);
@@ -68,10 +68,10 @@ describe('RippleDate', () => {
 	it('handles getDate() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1);
-			let day = track(() => date.getDate());
+			let &[day] = track(() => date.getDate());
 
 			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
-			<pre>{@day}</pre>
+			<pre>{day}</pre>
 		}
 
 		render(DateTest);
@@ -89,10 +89,10 @@ describe('RippleDate', () => {
 	it('handles getDay() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1);
-			let dayOfWeek = track(() => date.getDay());
+			let &[dayOfWeek] = track(() => date.getDay());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-			<pre>{@dayOfWeek}</pre>
+			<pre>{dayOfWeek}</pre>
 		}
 
 		render(DateTest);
@@ -110,10 +110,10 @@ describe('RippleDate', () => {
 	it('handles getHours() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1, 10, 30, 0);
-			let hours = track(() => date.getHours());
+			let &[hours] = track(() => date.getHours());
 
 			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
-			<pre>{@hours}</pre>
+			<pre>{hours}</pre>
 		}
 
 		render(DateTest);
@@ -131,10 +131,10 @@ describe('RippleDate', () => {
 	it('handles getMinutes() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1, 10, 15, 0);
-			let minutes = track(() => date.getMinutes());
+			let &[minutes] = track(() => date.getMinutes());
 
 			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
-			<pre>{@minutes}</pre>
+			<pre>{minutes}</pre>
 		}
 
 		render(DateTest);
@@ -152,10 +152,10 @@ describe('RippleDate', () => {
 	it('handles getSeconds() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1, 10, 15, 30);
-			let seconds = track(() => date.getSeconds());
+			let &[seconds] = track(() => date.getSeconds());
 
 			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
-			<pre>{@seconds}</pre>
+			<pre>{seconds}</pre>
 		}
 
 		render(DateTest);
@@ -173,10 +173,10 @@ describe('RippleDate', () => {
 	it('handles toISOString() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1, 12, 0, 0);
-			let isoString = track(() => date.toISOString());
+			let &[isoString] = track(() => date.toISOString());
 
 			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-			<pre>{@isoString}</pre>
+			<pre>{isoString}</pre>
 		}
 
 		render(DateTest);
@@ -199,10 +199,10 @@ describe('RippleDate', () => {
 	it('handles toDateString() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1);
-			let dateString = track(() => date.toDateString());
+			let &[dateString] = track(() => date.toDateString());
 
 			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-			<pre>{@dateString}</pre>
+			<pre>{dateString}</pre>
 		}
 
 		render(DateTest);
@@ -223,10 +223,10 @@ describe('RippleDate', () => {
 	it('handles valueOf() with reactive updates', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1);
-			let valueOf = track(() => date.valueOf());
+			let &[valueOf] = track(() => date.valueOf());
 
 			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-			<pre>{@valueOf}</pre>
+			<pre>{valueOf}</pre>
 		}
 
 		render(DateTest);
@@ -245,29 +245,29 @@ describe('RippleDate', () => {
 	it('handles multiple get methods reacting to same setTime change', () => {
 		component DateTest() {
 			let date = RippleDate(2025, 0, 1, 10, 30, 15);
-			let year = track(() => date.getFullYear());
-			let month = track(() => date.getMonth());
-			let day = track(() => date.getDate());
-			let hours = track(() => date.getHours());
+			let &[year] = track(() => date.getFullYear());
+			let &[month] = track(() => date.getMonth());
+			let &[day] = track(() => date.getDate());
+			let &[hours] = track(() => date.getHours());
 
 			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>
 				{'Change All'}
 			</button>
 			<div>
 				{'Year: '}
-				{@year}
+				{year}
 			</div>
 			<div>
 				{'Month: '}
-				{@month}
+				{month}
 			</div>
 			<div>
 				{'Day: '}
-				{@day}
+				{day}
 			</div>
 			<div>
 				{'Hours: '}
-				{@hours}
+				{hours}
 			</div>
 		}
 
@@ -297,26 +297,26 @@ describe('RippleDate', () => {
 			let dateFromNumbers = RippleDate(2025, 0, 1);
 			let dateFromTimestamp = RippleDate(1735689600000);
 
-			let nowYear = track(() => dateNow.getFullYear());
-			let stringYear = track(() => dateFromString.getFullYear());
-			let numbersYear = track(() => dateFromNumbers.getFullYear());
-			let timestampYear = track(() => dateFromTimestamp.getFullYear());
+			let &[nowYear] = track(() => dateNow.getFullYear());
+			let &[stringYear] = track(() => dateFromString.getFullYear());
+			let &[numbersYear] = track(() => dateFromNumbers.getFullYear());
+			let &[timestampYear] = track(() => dateFromTimestamp.getFullYear());
 
 			<div>
 				{'Now: '}
-				{@nowYear}
+				{nowYear}
 			</div>
 			<div>
 				{'String: '}
-				{@stringYear}
+				{stringYear}
 			</div>
 			<div>
 				{'Numbers: '}
-				{@numbersYear}
+				{numbersYear}
 			</div>
 			<div>
 				{'Timestamp: '}
-				{@timestampYear}
+				{timestampYear}
 			</div>
 		}
 
@@ -342,17 +342,17 @@ describe('RippleDate', () => {
 	it('handles get methods with arguments non-memoized', () => {
 		component DateTest() {
 			let date = RippleDate();
-			let localeDateString = track(() => date.toLocaleDateString('en-US'));
-			let localeTimeString = track(() => date.toLocaleTimeString('en-US'));
+			let &[localeDateString] = track(() => date.toLocaleDateString('en-US'));
+			let &[localeTimeString] = track(() => date.toLocaleTimeString('en-US'));
 
 			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
 			<div>
 				{'Date: '}
-				{@localeDateString}
+				{localeDateString}
 			</div>
 			<div>
 				{'Time: '}
-				{@localeTimeString}
+				{localeTimeString}
 			</div>
 		}