ripple 0.3.7 → 0.3.9

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>
 		}
 

package/tests/client/dynamic-elements.test.ripple

@@ -1,5 +1,5 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey, flushSync, track, trackSplit } from 'ripple';
+import { createRefKey, flushSync, track } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
@@ -21,7 +21,7 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let obj = { tag: track('div') };
 
-			<obj.@tag>{'Hello World'}</obj.@tag>
+			<obj.tag.value>{'Hello World'}</obj.tag.value>
 		}
 		render(App);
 
@@ -33,8 +33,9 @@ describe('dynamic DOM elements', () => {
 	it('renders static dynamic element from a tracked object with a tracked property', () => {
 		component App() {
 			let obj = track({ tag: track('div') });
+			let tag = obj.value.tag;
 
-			<@obj.@tag>{'Hello World'}</@obj.@tag>
+			<@tag>{'Hello World'}</@tag>
 		}
 		render(App);
 
@@ -48,8 +49,9 @@ describe('dynamic DOM elements', () => {
 		() => {
 			component App() {
 				let obj = track({ tag: track('div') });
+				let tag = obj.value['tag'];
 
-				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
+				<@tag>{'Hello World'}</@tag>
 			}
 			render(App);
 
@@ -61,11 +63,11 @@ describe('dynamic DOM elements', () => {
 
 	it('renders reactive dynamic element', () => {
 		component App() {
-			let tag = track('div');
+			let &[tag] = track('div');
 
 			<button
 				onClick={() => {
-					@tag = 'span';
+					tag = 'span';
 				}}
 			>
 				{'Change Tag'}
@@ -107,9 +109,9 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with attributes', () => {
 		component App() {
 			let tag = track('div');
-			let className = track('test-class');
+			let &[className] = track('test-class');
 
-			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
 		render(App);
 
@@ -143,11 +145,9 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with class object', () => {
 		component App() {
 			let tag = track('div');
-			let active = track(true);
+			let &[active] = track(true);
 
-			<@tag class={{ active: @active, 'dynamic-element': true }}>
-				{'Element with class object'}
-			</@tag>
+			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
 		}
 		render(App);
 
@@ -258,22 +258,22 @@ describe('dynamic DOM elements', () => {
 	it('has reactive attributes on dynamic elements', () => {
 		component App() {
 			let tag = track('div');
-			let count = track(0);
+			let &[count] = track(0);
 
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
 			</button>
 			<@tag
-				id={@count % 2 ? 'even' : 'odd'}
-				class={@count % 2 ? 'even-class' : 'odd-class'}
-				data-count={@count}
+				id={count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even-class' : 'odd-class'}
+				data-count={count}
 			>
 				{'Count: '}
-				{@count}
+				{count}
 			</@tag>
 		}
 
@@ -337,17 +337,17 @@ describe('dynamic DOM elements', () => {
 	it('applies scoped CSS to dynamic elements with reactive classes', () => {
 		component App() {
 			let tag = track('button');
-			let count = track(0);
+			let &[count] = track(0);
 
 			<@tag
-				class={@count % 2 ? 'even' : 'odd'}
-				id={@count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even' : 'odd'}
+				id={count % 2 ? 'even' : 'odd'}
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Count: '}
-				{@count}
+				{count}
 			</@tag>
 
 			<style>
@@ -405,14 +405,13 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles spread attributes with class and CSS scoping ', () => {
-		component DynamicButton(props: PropsWithExtras<{
+		component DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
 			onClick: EventListener;
 		}>) {
 			const tag = track('button');
-			const [rest] = trackSplit(props, []);
-			<@tag {...@rest}>{@rest.class}</@tag>
+			<@tag {...rest}>{rest.class}</@tag>
 
 			<style>
 				.even {
@@ -425,12 +424,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = track(0);
+			let &[count] = track(0);
 			<DynamicButton
-				class={@count % 2 ? 'even' : 'odd'}
-				id={@count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even' : 'odd'}
+				id={count % 2 ? 'even' : 'odd'}
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			/>
 		}
@@ -603,12 +602,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
 			<Button
-				data-active={String(@active)}
+				data-active={String(active)}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
@@ -646,25 +645,25 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
-			let buttonProps = track(
+			let &[buttonProps] = track(
 				() => ({
-					'data-active': @active,
+					'data-active': active,
 				}),
 			);
 
 			<Button
-				{...@buttonProps}
+				{...buttonProps}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
 				}}
 			>
 				{'content: '}
-				{@active}
+				{active}
 			</Button>
 		}
 
@@ -693,12 +692,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
 			<Button
-				data-active={String(@active)}
+				data-active={String(active)}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
@@ -730,13 +729,13 @@ describe('dynamic DOM elements', () => {
 
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
 		component App() {
-			let b = track(true);
+			let &[b] = track(true);
 			<div>
-				if (@b) {
+				if (b) {
 					{'Inside if'}
 				}
 			</div>
-			<button onClick={() => (@b = !@b)}>{'Toggle b'}</button>
+			<button onClick={() => (b = !b)}>{'Toggle b'}</button>
 		}
 
 		render(App);