ripple 0.3.128 → 0.4.0

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

@@ -1,4 +1,4 @@
-import type { Props, Tracked } from 'ripple';
+import type { Derived, Props, Tracked } from 'ripple';
 import { RippleObject, effect, flushSync, track } from 'ripple';
 
 describe('composite > reactivity', () => {
@@ -77,28 +77,28 @@ describe('composite > reactivity', () => {
 	});
 
 	it('parents and children have isolated state', () => {
-		function Button(props: { count: number }) @{
-			let &[count] = track(() => props.count);
+		function Button(props: { count: Tracked<number> }) @{
+			const count = track(() => props.count.value, undefined, true);
 			<button
 				onClick={() => {
-					count++;
+					count.value++;
 				}}
 			>
-				{'child: ' + count}
+				{'child: ' + count.value}
 			</button>
 		}
 
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>
-					{'parent: ' + count}
+					{'parent: ' + count.value}
 				</button>
-				<Button {count} />
+				<Button count={count} />
 			</div>
 		}
 
@@ -123,28 +123,28 @@ describe('composite > reactivity', () => {
 	});
 
 	it('parents and children have isolated connected state (destructured props)', () => {
-		function Button(&{ count }: { count: number }) @{
-			let &[local_count] = track(() => count);
+		function Button({ count }: { count: Tracked<number> }) @{
+			const local_count = track(() => count.value, undefined, true);
 			<button
 				onClick={() => {
-					local_count++;
+					local_count.value++;
 				}}
 			>
-				{'child: ' + local_count}
+				{'child: ' + local_count.value}
 			</button>
 		}
 
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<div>
 				<button
 					onClick={() => {
-						count++;
+						count.value++;
 					}}
 				>
-					{'parent: ' + count}
+					{'parent: ' + count.value}
 				</button>
-				<Button {count} />
+				<Button count={count} />
 			</div>
 		}
 
@@ -172,33 +172,27 @@ describe('composite > reactivity', () => {
 		let logs: string[] = [];
 
 		function App() @{
-			let &[a] = track(1);
-			let &[b] = track(2);
-			let &[c] = track(3);
-			let &[obj] = track(
-				() => ({
-					a,
-					b,
-					c,
-				}),
-			);
+			const a = track(1);
+			const b = track(2);
+			const c = track(3);
+			const obj = { a, b, c };
 			<>
 				<Child {...obj} />
 				<button
 					onClick={() => {
-						a++;
-						b++;
-						c++;
+						a.value++;
+						b.value++;
+						c.value++;
 					}}
 				>{'Increment all'}</button>
 			</>
 		}
 
-		function Child(&{ a, b, c }: { a: number; b: number; c: number }) @{
+		function Child({ a, b, c }: { a: Tracked<number>; b: Tracked<number>; c: Tracked<number> }) @{
 			effect(() => {
-				logs.push(`Child effect: ${a}, ${b}, ${c}`);
+				logs.push(`Child effect: ${a.value}, ${b.value}, ${c.value}`);
 			});
-			<div>{a + ' ' + b + ' ' + c}</div>
+			<div>{a.value + ' ' + b.value + ' ' + c.value}</div>
 		}
 
 		render(App);
@@ -215,10 +209,10 @@ describe('composite > reactivity', () => {
 		expect(logs).toEqual(['Child effect: 1, 2, 3', 'Child effect: 2, 3, 4']);
 	});
 
-	it('keeps reactivity for spread props via intermediate components and lazy destructuring', () => {
+	it('keeps reactivity for spread props via intermediate components and destructured props', () => {
 		function App() @{
-			let &[count] = track(0);
-			<CounterWrapper {count} up={() => count++} down={() => count--} />
+			const count = track(0);
+			<CounterWrapper count={count} up={() => count.value++} down={() => count.value--} />
 		}
 
 		function CounterWrapper(props: Props) @{
@@ -227,11 +221,11 @@ describe('composite > reactivity', () => {
 			</div>
 		}
 
-		function Counter(&{ count, up, down, ...rest }: Props) @{
+		function Counter({ count, up, down, ...rest }: Props) @{
 			<>
 				<button onClick={() => up()}>{'UP'}</button>
 				<button onClick={() => down()}>{'DOWN'}</button>
-				<span {...rest}>{`Counter: ${count}`}</span>
+				<span {...rest}>{`Counter: ${count.value}`}</span>
 			</>
 		}
 
@@ -256,46 +250,51 @@ describe('composite > reactivity', () => {
 
 	it('keeps reactivity on elements for element spreads and adds / removes dynamic props', () => {
 		function App() @{
-			let &[count] = track(0);
-			<CounterWrapper {count} up={() => count++} />
+			const count = track(0);
+			<CounterWrapper count={count} up={() => count.value++} />
 		}
 
-		function CounterWrapper(props: { count: number; up: () => void }) @{
+		function CounterWrapper(props: { count: Tracked<number>; up: () => void }) @{
 			const more: {
-				double: Tracked<number>;
+				double: Derived<number>;
 				another?: number;
 				extra: number;
 			} = new RippleObject({
-				double: track(() => props.count * 2),
+				double: track(() => props.count.value * 2),
 				another: 0,
 				extra: 100,
 			});
 			effect(() => {
-				props.count;
-				if (props.count === 1) {
+				const count = props.count.value;
+				if (count === 1) {
 					delete more.another;
-				} else if (props.count === 2) {
+				} else if (count === 2) {
 					more.another = 0;
 				}
 			});
 			<div>
-				<Counter {...props} double={more.double} another={more.another} extra={more.extra} />
+				<Counter
+					{...props}
+					double={more.double}
+					another={track(() => more.another)}
+					extra={more.extra}
+				/>
 			</div>
 		}
 
-		function Counter(&{
+		function Counter({
 			count,
 			up,
 			...rest
 		}: {
-			count: number;
+			count: Tracked<number>;
 			up: () => void;
-			double: Tracked<number>;
-			another?: number;
+			double: Derived<number>;
+			another: Derived<number | undefined>;
 			extra: number;
 		}) @{
 			<>
-				<div {...rest}>{`Counter: ${count} Double: ${rest.double.value}`}</div>
+				<div {...rest}>{`Counter: ${count.value} Double: ${rest.double.value}`}</div>
 				<button onClick={() => up()}>{'UP'}</button>
 			</>
 		}

package/tests/client/composite/composite.render.test.tsrx

@@ -1,16 +1,16 @@
-import { RippleArray, flushSync, track, type Component } from 'ripple';
+import { RippleArray, flushSync, track, type Component, type Tracked } from 'ripple';
 
 describe('composite > render', () => {
 	it('renders composite components', () => {
-		function Button(&{ count }: { count: number }) @{
-			<div>{count}</div>
+		function Button({ count }: { count: Tracked<number> }) @{
+			<div>{count.value}</div>
 		}
 
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			<>
-				<button onClick={() => count++}>{'Increment'}</button>
-				<Button {count} />
+				<button onClick={() => count.value++}>{'Increment'}</button>
+				<Button count={count} />
 			</>
 		}
 
@@ -164,7 +164,7 @@ describe('composite > render', () => {
 	});
 
 	it('should not render <undefined> tag when a passed in component is undefined', () => {
-		function Child(&{
+		function Child({
 			children,
 			NonExistent,
 			...props
@@ -176,8 +176,8 @@ describe('composite > render', () => {
 			<div {...props}>
 				{children}
 
-				<NonExistent />
 				// @ts-expect-error - intentionally testing behavior when a component is undefined
+				<NonExistent />
 			</div>
 		}
 
@@ -193,11 +193,28 @@ describe('composite > render', () => {
 		expect(undefinedTag).toBeNull();
 		expect(div.innerHTML).not.toContain('<undefined');
 	});
+
+	it('renders nothing for a local or imported component value that is undefined', () => {
+		const pick = (): Component | undefined => undefined;
+
+		function App() @{
+			const Local = pick();
+			<div>
+				{'before'}
+				<Local />
+				{'after'}
+			</div>
+		}
+
+		render(App);
+
+		expect(container.querySelector('div').textContent).toBe('beforeafter');
+	});
 });
 
 describe('scoped styles with children', () => {
 	it('generates correct CSS hashes for wrapper and child with empty style in App', () => {
-		function Wrapper(&{ children }: { children?: Component }) @{
+		function Wrapper({ children }: { children?: Component }) @{
 			<>
 				<div class="green">
 					{'Wrapper'}

package/tests/client/css/scoped-styles.test.tsrx

@@ -51,9 +51,9 @@ const bundle = <style apply={[two, accent]} />;
 describe('sibling-scoped style blocks', () => {
 	it('styles the items beside a block and everything below them, never the container', () => {
 		function Status() @{
-			let &[ready] = track(false);
+			const ready = track(false);
 			<>
-				<button onClick={() => (ready = !ready)}>{'toggle'}</button>
+				<button onClick={() => (ready.value = !ready.value)}>{'toggle'}</button>
 				<style>
 					.status {
 						padding: 0.5rem;
@@ -69,7 +69,7 @@ describe('sibling-scoped style blocks', () => {
 						}
 					</style>
 					<h2 id="title" class="title">{'Status'}</h2>
-					@if (ready) {
+					@if (ready.value) {
 						<>
 							<style>
 								.ok {
@@ -325,7 +325,7 @@ export function Status({ ready }: { ready: boolean }) @{
 	);
 
 	it('adds the scope classes of an element that spreads its props, one token per scope', () => {
-		function Button(&{ ...rest }: { id: string; class?: string }) @{
+		function Button({ ...rest }: { id: string; class?: string }) @{
 			<>
 				<style>
 					button {
@@ -356,7 +356,7 @@ export function Status({ ready }: { ready: boolean }) @{
 	});
 
 	it('keeps the scope classes of a static class when a spread brings its own class', () => {
-		function Card(&{ ...rest }: { class?: string }) @{
+		function Card({ ...rest }: { class?: string }) @{
 			<>
 				<style apply={importedTheme}>
 					.box {
@@ -387,15 +387,15 @@ export function Status({ ready }: { ready: boolean }) @{
 
 	it('keeps the scope classes while a dynamic class value changes', () => {
 		function App() @{
-			let &[active] = track(false);
+			const active = track(false);
 			<>
 				<style>
 					.on {
 						color: green;
 					}
 				</style>
-				<button id="toggle" onClick={() => (active = !active)}>{'toggle'}</button>
-				<p id="p" class={active ? 'on' : 'off'}>{'p'}</p>
+				<button id="toggle" onClick={() => (active.value = !active.value)}>{'toggle'}</button>
+				<p id="p" class={active.value ? 'on' : 'off'}>{'p'}</p>
 			</>
 		}
 

package/tests/client/date.test.tsrx

@@ -4,10 +4,10 @@ describe('RippleDate', () => {
 	it('handles getTime() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1);
-			let &[time] = track(() => date.getTime());
+			const time = track(() => date.getTime());
 			<>
 				<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-				<pre>{time}</pre>
+				<pre>{time.value}</pre>
 			</>
 		}
 
@@ -27,10 +27,10 @@ describe('RippleDate', () => {
 	it('handles getFullYear() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 5, 15);
-			let &[year] = track(() => date.getFullYear());
+			const year = track(() => date.getFullYear());
 			<>
 				<button onClick={() => date.setFullYear(2030)}>{'Change Year'}</button>
-				<pre>{year}</pre>
+				<pre>{year.value}</pre>
 			</>
 		}
 
@@ -49,10 +49,10 @@ describe('RippleDate', () => {
 	it('handles getMonth() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 15);
-			let &[month] = track(() => date.getMonth());
+			const month = track(() => date.getMonth());
 			<>
 				<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-				<pre>{month}</pre>
+				<pre>{month.value}</pre>
 			</>
 		}
 
@@ -71,10 +71,10 @@ describe('RippleDate', () => {
 	it('handles getDate() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1);
-			let &[day] = track(() => date.getDate());
+			const day = track(() => date.getDate());
 			<>
 				<button onClick={() => date.setDate(15)}>{'Change Day'}</button>
-				<pre>{day}</pre>
+				<pre>{day.value}</pre>
 			</>
 		}
 
@@ -93,10 +93,10 @@ describe('RippleDate', () => {
 	it('handles getDay() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1);
-			let &[dayOfWeek] = track(() => date.getDay());
+			const dayOfWeek = track(() => date.getDay());
 			<>
 				<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-				<pre>{dayOfWeek}</pre>
+				<pre>{dayOfWeek.value}</pre>
 			</>
 		}
 
@@ -115,10 +115,10 @@ describe('RippleDate', () => {
 	it('handles getHours() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1, 10, 30, 0);
-			let &[hours] = track(() => date.getHours());
+			const hours = track(() => date.getHours());
 			<>
 				<button onClick={() => date.setHours(15)}>{'Change to 3 PM'}</button>
-				<pre>{hours}</pre>
+				<pre>{hours.value}</pre>
 			</>
 		}
 
@@ -137,10 +137,10 @@ describe('RippleDate', () => {
 	it('handles getMinutes() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1, 10, 15, 0);
-			let &[minutes] = track(() => date.getMinutes());
+			const minutes = track(() => date.getMinutes());
 			<>
 				<button onClick={() => date.setMinutes(45)}>{'Change Minutes'}</button>
-				<pre>{minutes}</pre>
+				<pre>{minutes.value}</pre>
 			</>
 		}
 
@@ -159,10 +159,10 @@ describe('RippleDate', () => {
 	it('handles getSeconds() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1, 10, 15, 30);
-			let &[seconds] = track(() => date.getSeconds());
+			const seconds = track(() => date.getSeconds());
 			<>
 				<button onClick={() => date.setSeconds(45)}>{'Change Seconds'}</button>
-				<pre>{seconds}</pre>
+				<pre>{seconds.value}</pre>
 			</>
 		}
 
@@ -181,10 +181,10 @@ describe('RippleDate', () => {
 	it('handles toISOString() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1, 12, 0, 0);
-			let &[isoString] = track(() => date.toISOString());
+			const isoString = track(() => date.toISOString());
 			<>
 				<button onClick={() => date.setFullYear(2026)}>{'Change Year'}</button>
-				<pre>{isoString}</pre>
+				<pre>{isoString.value}</pre>
 			</>
 		}
 
@@ -208,10 +208,10 @@ describe('RippleDate', () => {
 	it('handles toDateString() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1);
-			let &[dateString] = track(() => date.toDateString());
+			const dateString = track(() => date.toDateString());
 			<>
 				<button onClick={() => date.setMonth(11)}>{'Change to December'}</button>
-				<pre>{dateString}</pre>
+				<pre>{dateString.value}</pre>
 			</>
 		}
 
@@ -233,10 +233,10 @@ describe('RippleDate', () => {
 	it('handles valueOf() with reactive updates', () => {
 		function DateTest() @{
 			let date = new RippleDate(2025, 0, 1);
-			let &[valueOf] = track(() => date.valueOf());
+			const valueOf = track(() => date.valueOf());
 			<>
 				<button onClick={() => date.setDate(2)}>{'Next Day'}</button>
-				<pre>{valueOf}</pre>
+				<pre>{valueOf.value}</pre>
 			</>
 		}
 
@@ -256,29 +256,29 @@ describe('RippleDate', () => {
 	it('handles multiple get methods reacting to same setTime change', () => {
 		function DateTest() @{
 			let date = new 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());
+			const year = track(() => date.getFullYear());
+			const month = track(() => date.getMonth());
+			const day = track(() => date.getDate());
+			const hours = track(() => date.getHours());
 			<>
 				<button
 					onClick={() => date.setTime(new Date(2026, 5, 15, 14, 45, 30).getTime())}
 				>{'Change All'}</button>
 				<div>
 					{'Year: '}
-					{year}
+					{year.value}
 				</div>
 				<div>
 					{'Month: '}
-					{month}
+					{month.value}
 				</div>
 				<div>
 					{'Day: '}
-					{day}
+					{day.value}
 				</div>
 				<div>
 					{'Hours: '}
-					{hours}
+					{hours.value}
 				</div>
 			</>
 		}
@@ -308,26 +308,26 @@ describe('RippleDate', () => {
 			let dateFromString = new RippleDate('2025-01-01');
 			let dateFromNumbers = new RippleDate(2025, 0, 1);
 			let dateFromTimestamp = new RippleDate(1735689600000);
-			let &[nowYear] = track(() => dateNow.getFullYear());
-			let &[stringYear] = track(() => dateFromString.getFullYear());
-			let &[numbersYear] = track(() => dateFromNumbers.getFullYear());
-			let &[timestampYear] = track(() => dateFromTimestamp.getFullYear());
+			const nowYear = track(() => dateNow.getFullYear());
+			const stringYear = track(() => dateFromString.getFullYear());
+			const numbersYear = track(() => dateFromNumbers.getFullYear());
+			const timestampYear = track(() => dateFromTimestamp.getFullYear());
 			<>
 				<div>
 					{'Now: '}
-					{nowYear}
+					{nowYear.value}
 				</div>
 				<div>
 					{'String: '}
-					{stringYear}
+					{stringYear.value}
 				</div>
 				<div>
 					{'Numbers: '}
-					{numbersYear}
+					{numbersYear.value}
 				</div>
 				<div>
 					{'Timestamp: '}
-					{timestampYear}
+					{timestampYear.value}
 				</div>
 			</>
 		}
@@ -354,17 +354,17 @@ describe('RippleDate', () => {
 	it('handles get methods with arguments non-memoized', () => {
 		function DateTest() @{
 			let date = new RippleDate();
-			let &[localeDateString] = track(() => date.toLocaleDateString('en-US'));
-			let &[localeTimeString] = track(() => date.toLocaleTimeString('en-US'));
+			const localeDateString = track(() => date.toLocaleDateString('en-US'));
+			const localeTimeString = track(() => date.toLocaleTimeString('en-US'));
 			<>
 				<button onClick={() => date.setFullYear(date.getFullYear() + 1)}>{'Next Year'}</button>
 				<div>
 					{'Date: '}
-					{localeDateString}
+					{localeDateString.value}
 				</div>
 				<div>
 					{'Time: '}
-					{localeTimeString}
+					{localeTimeString.value}
 				</div>
 			</>
 		}