ripple 0.3.67 → 0.3.69

package/tests/client/date.test.tsrx

@@ -2,12 +2,13 @@ import { RippleDate, flushSync, track } from 'ripple';
 
 describe('RippleDate', () => {
 	it('handles getTime() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1);
-			let &[time] = track(() => date.getTime());
-
-			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-			<pre>{time}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1);
+				let &[time] = track(() => date.getTime());
+				<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+				<pre>{time}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -24,12 +25,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getFullYear() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 5, 15);
-			let &[year] = track(() => date.getFullYear());
-
-			<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
-			<pre>{year}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 5, 15);
+				let &[year] = track(() => date.getFullYear());
+				<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
+				<pre>{year}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -45,12 +47,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getMonth() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 15);
-			let &[month] = track(() => date.getMonth());
-
-			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-			<pre>{month}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 15);
+				let &[month] = track(() => date.getMonth());
+				<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+				<pre>{month}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -66,12 +69,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getDate() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1);
-			let &[day] = track(() => date.getDate());
-
-			<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
-			<pre>{day}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1);
+				let &[day] = track(() => date.getDate());
+				<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
+				<pre>{day}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -87,12 +91,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getDay() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1);
-			let &[dayOfWeek] = track(() => date.getDay());
-
-			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-			<pre>{dayOfWeek}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1);
+				let &[dayOfWeek] = track(() => date.getDay());
+				<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+				<pre>{dayOfWeek}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -108,12 +113,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getHours() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1, 10, 30, 0);
-			let &[hours] = track(() => date.getHours());
-
-			<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
-			<pre>{hours}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1, 10, 30, 0);
+				let &[hours] = track(() => date.getHours());
+				<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
+				<pre>{hours}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -129,12 +135,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getMinutes() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1, 10, 15, 0);
-			let &[minutes] = track(() => date.getMinutes());
-
-			<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
-			<pre>{minutes}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1, 10, 15, 0);
+				let &[minutes] = track(() => date.getMinutes());
+				<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
+				<pre>{minutes}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -150,12 +157,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles getSeconds() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1, 10, 15, 30);
-			let &[seconds] = track(() => date.getSeconds());
-
-			<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
-			<pre>{seconds}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1, 10, 15, 30);
+				let &[seconds] = track(() => date.getSeconds());
+				<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
+				<pre>{seconds}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -171,12 +179,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles toISOString() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1, 12, 0, 0);
-			let &[isoString] = track(() => date.toISOString());
-
-			<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-			<pre>{isoString}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1, 12, 0, 0);
+				let &[isoString] = track(() => date.toISOString());
+				<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
+				<pre>{isoString}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -197,12 +206,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles toDateString() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1);
-			let &[dateString] = track(() => date.toDateString());
-
-			<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-			<pre>{dateString}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1);
+				let &[dateString] = track(() => date.toDateString());
+				<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
+				<pre>{dateString}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -221,12 +231,13 @@ describe('RippleDate', () => {
 	});
 
 	it('handles valueOf() with reactive updates', () => {
-		component DateTest() {
-			let date = RippleDate(2025, 0, 1);
-			let &[valueOf] = track(() => date.valueOf());
-
-			<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-			<pre>{valueOf}</pre>
+		function DateTest() {
+			return <>
+				let date = RippleDate(2025, 0, 1);
+				let &[valueOf] = track(() => date.valueOf());
+				<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
+				<pre>{valueOf}</pre>
+			</>;
 		}
 
 		render(DateTest);
@@ -243,32 +254,33 @@ 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());
-
-			<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>
-				{'Change All'}
-			</button>
-			<div>
-				{'Year: '}
-				{year}
-			</div>
-			<div>
-				{'Month: '}
-				{month}
-			</div>
-			<div>
-				{'Day: '}
-				{day}
-			</div>
-			<div>
-				{'Hours: '}
-				{hours}
-			</div>
+		function DateTest() {
+			return <>
+				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());
+				<button onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}>
+					{'Change All'}
+				</button>
+				<div>
+					{'Year: '}
+					{year}
+				</div>
+				<div>
+					{'Month: '}
+					{month}
+				</div>
+				<div>
+					{'Day: '}
+					{day}
+				</div>
+				<div>
+					{'Hours: '}
+					{hours}
+				</div>
+			</>;
 		}
 
 		render(DateTest);
@@ -291,33 +303,33 @@ describe('RippleDate', () => {
 	});
 
 	it('handles constructor with different parameter combinations', () => {
-		component DateTest() {
-			let dateNow = RippleDate();
-			let dateFromString = RippleDate('2025-01-01');
-			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());
-
-			<div>
-				{'Now: '}
-				{nowYear}
-			</div>
-			<div>
-				{'String: '}
-				{stringYear}
-			</div>
-			<div>
-				{'Numbers: '}
-				{numbersYear}
-			</div>
-			<div>
-				{'Timestamp: '}
-				{timestampYear}
-			</div>
+		function DateTest() {
+			return <>
+				let dateNow = RippleDate();
+				let dateFromString = RippleDate('2025-01-01');
+				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());
+				<div>
+					{'Now: '}
+					{nowYear}
+				</div>
+				<div>
+					{'String: '}
+					{stringYear}
+				</div>
+				<div>
+					{'Numbers: '}
+					{numbersYear}
+				</div>
+				<div>
+					{'Timestamp: '}
+					{timestampYear}
+				</div>
+			</>;
 		}
 
 		render(DateTest);
@@ -340,20 +352,21 @@ 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'));
-
-			<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
-			<div>
-				{'Date: '}
-				{localeDateString}
-			</div>
-			<div>
-				{'Time: '}
-				{localeTimeString}
-			</div>
+		function DateTest() {
+			return <>
+				let date = RippleDate();
+				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}
+				</div>
+				<div>
+					{'Time: '}
+					{localeTimeString}
+				</div>
+			</>;
 		}
 
 		render(DateTest);