ripple 0.3.128 → 0.4.0

package/tests/client/prop-kind-switch.test.tsrx

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync, track, type Derived, type Tracked } from 'ripple';
+
+// What happens when a value that reaches a sink (attribute, text, child
+// props) changes kind at runtime: plain value first, tracked or derived later.
+
+describe('prop kind switches at runtime', () => {
+	it('element spread: a plain attribute value replaced by a derived is followed', () => {
+		let swap: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function App() @{
+			const n = track(0);
+			const attrs = track<{ class: string | Derived<string> }>({ class: 'plain' });
+			swap = () => {
+				attrs.value = { class: track(() => 'live-' + n.value) };
+			};
+			bump = () => {
+				n.value++;
+			};
+			<div {...attrs.value}>{'x'}</div>
+		}
+
+		render(App);
+		const div = () => container.querySelector('div');
+		expect(div()?.className).toBe('plain');
+
+		swap();
+		flushSync();
+		expect(div()?.className).toBe('live-0');
+
+		// The spread subscribed to the derived when it unwrapped it.
+		bump();
+		flushSync();
+		expect(div()?.className).toBe('live-1');
+	});
+
+	it('plain attribute and text: a tracked prop is read through .value', () => {
+		let bump: () => void = () => {};
+
+		function Child(props: { cls: Tracked<string>; title: Tracked<string> }) @{
+			<div class={props.cls.value}>{props.title.value}</div>
+		}
+
+		function App() @{
+			const cls = track('a');
+			const title = track('t');
+			bump = () => {
+				cls.value = 'b';
+				title.value = 'u';
+			};
+			<Child {cls} {title} />
+		}
+
+		render(App);
+		const div = container.querySelector('div');
+		expect(div?.className).toBe('a');
+		expect(div?.textContent).toBe('t');
+
+		bump();
+		flushSync();
+		expect(div?.className).toBe('b');
+		expect(div?.textContent).toBe('u');
+	});
+
+	it(
+		'dynamic component: props are re-evaluated when the component changes, not when their inputs do',
+		() => {
+			let switchComponent: () => void = () => {};
+			let bump: () => void = () => {};
+
+			function A(props: { n: number }) @{
+				<span class="a">{props.n}</span>
+			}
+			function B(props: { n: number }) @{
+				<span class="b">{props.n}</span>
+			}
+
+			function App() @{
+				// A function value is a derived: hold the component in a writable one.
+				const Comp = track(() => A, undefined, true);
+				const n = track(0);
+				switchComponent = () => {
+					Comp.value = Comp.value === A ? B : A;
+				};
+				bump = () => {
+					n.value++;
+				};
+				<{Comp.value} n={n.value} />
+			}
+
+			render(App);
+			expect(container.querySelector('span.a')?.textContent).toBe('0');
+
+			// A prop is a value: the existing instance keeps the number it got.
+			bump();
+			flushSync();
+			expect(container.querySelector('span.a')?.textContent).toBe('0');
+
+			// A new instance reads the literal again.
+			switchComponent();
+			flushSync();
+			expect(container.querySelector('span.b')?.textContent).toBe('1');
+		},
+	);
+
+	it('a tracked prop whose value becomes a derived: the child must unwrap both levels', () => {
+		let swap: () => void = () => {};
+		let bump: () => void = () => {};
+
+		function Child(props: { v: Tracked<string | Derived<string>> }) @{
+			<span>
+				{typeof props.v.value === 'string' ? props.v.value : props.v.value.value}
+			</span>
+		}
+
+		function App() @{
+			const n = track(0);
+			const v = track<string | Derived<string>>('plain');
+			swap = () => {
+				v.value = track(() => 'live-' + n.value);
+			};
+			bump = () => {
+				n.value++;
+			};
+			<Child {v} />
+		}
+
+		render(App);
+		const span = () => container.querySelector('span');
+		expect(span()?.textContent).toBe('plain');
+
+		swap();
+		flushSync();
+		expect(span()?.textContent).toBe('live-0');
+
+		bump();
+		flushSync();
+		expect(span()?.textContent).toBe('live-1');
+	});
+});

package/tests/client/ref.test.tsrx

@@ -119,7 +119,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		function App() @{
-			let &[value] = track('test');
+			const value = 'test';
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
 			}
@@ -219,12 +219,12 @@ describe('refs', () => {
 		let div: HTMLDivElement | null | undefined;
 
 		function App() @{
-			let &[show] = track(true);
+			const show = track(true);
 			<>
-				@if (show) {
+				@if (show.value) {
 					<div ref={div}>{'Hello cleanup'}</div>
 				}
-				<button class="toggle" onClick={() => (show = false)}>{'hide'}</button>
+				<button class="toggle" onClick={() => (show.value = false)}>{'hide'}</button>
 			</>
 		}
 
@@ -262,12 +262,12 @@ describe('refs', () => {
 		}
 
 		function App() @{
-			let &[show] = track(true);
+			const show = track(true);
 			<>
-				@if (show) {
+				@if (show.value) {
 					<Child ref={input} />
 				}
-				<button class="toggle" onClick={() => (show = false)}>{'hide'}</button>
+				<button class="toggle" onClick={() => (show.value = false)}>{'hide'}</button>
 			</>
 		}
 
@@ -352,9 +352,9 @@ describe('refs', () => {
 			}
 
 			function App() @{
-				let &[show] = track(true);
+				const show = track(true);
 				<>
-					@if (show) {
+					@if (show.value) {
 						<Child
 							ref={(node: HTMLInputElement | null) => {
 								input = node;
@@ -364,7 +364,7 @@ describe('refs', () => {
 							}}
 						/>
 					}
-					<button class="toggle" onClick={() => (show = false)}>{'hide'}</button>
+					<button class="toggle" onClick={() => (show.value = false)}>{'hide'}</button>
 				</>
 			}
 
@@ -386,14 +386,14 @@ describe('refs', () => {
 		let previous: HTMLInputElement | undefined;
 
 		function Child(props: PropsWithExtras<{ ref: RefValue<HTMLInputElement> }>) @{
-			let &[as_ref] = track(true);
+			const as_ref = track(true);
 			<>
 				<input
 					type="text"
 					value="keep"
-					{...(as_ref ? { ref: props.ref } : { input_ref: 'regular prop' })}
+					{...(as_ref.value ? { ref: props.ref } : { input_ref: 'regular prop' })}
 				/>
-				<button class="toggle" onClick={() => (as_ref = false)}>{'toggle'}</button>
+				<button class="toggle" onClick={() => (as_ref.value = false)}>{'toggle'}</button>
 			</>
 		}
 
@@ -427,14 +427,14 @@ describe('refs', () => {
 		let previous: HTMLInputElement | undefined;
 
 		function Child(props: PropsWithExtras<{ ref: RefValue<HTMLInputElement> }>) @{
-			let &[as_ref] = track(false);
+			const as_ref = track(false);
 			<>
 				<input
 					type="text"
 					value="keep"
-					{...(as_ref ? { ref: props.ref } : { input_ref: 'regular prop' })}
+					{...(as_ref.value ? { ref: props.ref } : { input_ref: 'regular prop' })}
 				/>
-				<button class="toggle" onClick={() => (as_ref = true)}>{'toggle'}</button>
+				<button class="toggle" onClick={() => (as_ref.value = true)}>{'toggle'}</button>
 			</>
 		}
 
@@ -490,7 +490,7 @@ describe('refs', () => {
 		let logs: string[] = [];
 
 		function App() @{
-			let &[value] = track('test');
+			const value = 'test';
 			function inputRef(node: HTMLInputElement) {
 				logs.push('ref called');
 			}

package/tests/client/return.test.tsrx

@@ -2,6 +2,15 @@ import { describe, it, expect } from 'vitest';
 import { track, flushSync, type Tracked } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
+// Declared at module scope on purpose: a module-level component takes the
+// hoisted `_render` lowering, which an in-suite declaration never exercises.
+function ModuleLevelDashboard({ user }) {
+	if (!user) {
+		return <p class="ml-empty">No user found</p>;
+	}
+	return <p class="ml-user">{user}</p>;
+}
+
 describe('returns in restricted scopes', () => {
 	it('throws error when return is used in module scope', () => {
 		expect(
@@ -216,10 +225,10 @@ describe('function returns in client components', () => {
 		}
 
 		function App() {
-			let &[user, userTracked] = track<string | null>(null);
+			const user = track<string | null>(null);
 			return <>
-				<Dashboard user={userTracked} />
-				<button onClick={() => (user = user === 'Adam' ? null : 'Adam')}>Toggle</button>
+				<Dashboard {user} />
+				<button onClick={() => (user.value = user.value === 'Adam' ? null : 'Adam')}>Toggle</button>
 			</>;
 		}
 
@@ -236,4 +245,18 @@ describe('function returns in client components', () => {
 		flushSync();
 		expect(container.querySelector('.empty')?.textContent).toBe('No user found');
 	});
+
+	it('renders every branch of a module-level component that returns templates', () => {
+		function App() @{
+			<>
+				<ModuleLevelDashboard user={null} />
+				<ModuleLevelDashboard user="Adam" />
+			</>
+		}
+
+		render(App);
+
+		expect(container.querySelector('.ml-empty')?.textContent).toBe('No user found');
+		expect(container.querySelector('.ml-user')?.textContent).toBe('Adam');
+	});
 });

package/tests/client/root-boundary.test.tsrx

@@ -0,0 +1,42 @@
+import { flushSync, mount, trackAsync } from 'ripple';
+
+describe('mount rootBoundary', () => {
+	it('renders under a default root boundary, so trackAsync works outside @try', async () => {
+		function App() @{
+			const data = trackAsync(() => Promise.resolve('loaded'));
+			<div class="value">{data.value}</div>
+		}
+
+		const unmount = mount(App, { target: container });
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		flushSync();
+
+		expect(container.querySelector('.value')?.textContent).toBe('loaded');
+		unmount();
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('renders without any root boundary when rootBoundary is false', () => {
+		function App() @{
+			<div class="plain">{'no boundary'}</div>
+		}
+
+		const unmount = mount(App, { target: container, rootBoundary: false });
+		flushSync();
+
+		expect(container.querySelector('.plain')?.textContent).toBe('no boundary');
+		unmount();
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('requires a user @try for trackAsync when rootBoundary is false', () => {
+		function App() @{
+			const data = trackAsync(() => Promise.resolve('loaded'));
+			<div class="value">{data.value}</div>
+		}
+
+		expect(() => mount(App, { target: container, rootBoundary: false })).toThrow(
+			/Missing parent `try/,
+		);
+	});
+});

package/tests/client/scoped-flush.test.tsrx

@@ -9,10 +9,10 @@ describe('scoped flush', () => {
 		let bump = null;
 
 		function Producer() @{
-			let &[v, vT] = track(0);
-			shared = vT;
+			const v = track(0);
+			shared = v;
 			bump = () => {
-				v += 1;
+				v.value += 1;
 			};
 			<div class="producer">{'producer'}</div>
 		}
@@ -59,10 +59,10 @@ describe('scoped flush', () => {
 		}
 
 		function Branch(props) @{
-			let &[local, localT] = track(0);
+			const local = track(0);
 			if (props.side === 'L') {
 				bumpLeftLocal = () => {
-					local += 1;
+					local.value += 1;
 				};
 			}
 			<div class={'branch-' + props.side}>
@@ -72,10 +72,10 @@ describe('scoped flush', () => {
 		}
 
 		function App() @{
-			let &[root, rootT] = track(0);
-			Ctx.set(rootT);
+			const root = track(0);
+			Ctx.set(root);
 			bumpRoot = () => {
-				root += 1;
+				root.value += 1;
 			};
 			<div>
 				<Branch side="L" />

package/tests/client/set.test.tsrx

@@ -66,10 +66,10 @@ describe('RippleSet', () => {
 	it('handles has operation', () => {
 		function SetTest() @{
 			let items = new RippleSet([1, 2, 3]);
-			let &[hasValue] = track(() => items.has(2));
+			const hasValue = track(() => items.has(2));
 			<>
 				<button onClick={() => items.delete(2)}>{'delete'}</button>
-				<pre>{hasValue}</pre>
+				<pre>{hasValue.value}</pre>
 			</>
 		}
 
@@ -108,11 +108,11 @@ describe('RippleSet', () => {
 	it('creates RippleSet with initial values using RippleSet() shorthand syntax', () => {
 		function SetTest() @{
 			let items = new RippleSet([1, 2, 3, 4]);
-			let &[hasValue] = track(() => items.has(3));
+			const hasValue = track(() => items.has(3));
 			<>
 				<button onClick={() => items.delete(3)}>{'delete'}</button>
 				<pre>{items.size}</pre>
-				<pre>{hasValue}</pre>
+				<pre>{hasValue.value}</pre>
 			</>
 		}
 
@@ -132,12 +132,12 @@ describe('RippleSet', () => {
 	it('handles all operations with RippleSet() shorthand syntax', () => {
 		function SetTest() @{
 			let items = new RippleSet([10, 20, 30]);
-			let &[values] = track(() => Array.from(items.values()));
+			const values = track(() => Array.from(items.values()));
 			<>
 				<button onClick={() => items.add(40)}>{'add'}</button>
 				<button onClick={() => items.delete(20)}>{'delete'}</button>
 				<button onClick={() => items.clear()}>{'clear'}</button>
-				<pre>{JSON.stringify(values)}</pre>
+				<pre>{JSON.stringify(values.value)}</pre>
 				<pre>{items.size}</pre>
 			</>
 		}

package/tests/client/svg.test.tsrx

@@ -294,9 +294,9 @@ describe('SVG namespace handling', () => {
 		}
 
 		function App() @{
-			let &[dynTag] = track('polygon');
+			const dynTag = track('polygon');
 			<SVG>
-				<{dynTag} points="0,0 30,0 15,10" />
+				<{dynTag.value} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -325,9 +325,9 @@ describe('SVG namespace handling', () => {
 		}
 
 		function App() @{
-			let &[Component] = track(() => Polygon);
+			const Component = track(() => Polygon);
 			<SVG>
-				<{Component} points="0,0 30,0 15,10" />
+				<{Component.value} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -342,25 +342,25 @@ describe('SVG namespace handling', () => {
 
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		function SVG({ children }: PropsWithChildren<{}>) @{
-			let &[tag] = track('svg');
-			<{tag}
+			const tag = track('svg');
+			<{tag.value}
 				width={100}
 				height={50}
 				fill="red"
 				viewBox="0 0 30 10"
 				preserveAspectRatio="none"
-			>{children}</{tag}>
+			>{children}</{tag.value}>
 		}
 
 		function Polygon({ points }: PropsWithExtras<{ points: string }>) @{
-			let &[dynTag] = track('polygon');
-			<{dynTag} {points} />
+			const dynTag = track('polygon');
+			<{dynTag.value} {points} />
 		}
 
 		function App() @{
-			let &[Component] = track(() => Polygon);
+			const Component = track(() => Polygon);
 			<SVG>
-				<{Component} points="0,0 30,0 15,10" />
+				<{Component.value} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 

package/tests/client/switch.test.tsrx

@@ -3,11 +3,11 @@ import { flushSync, track } from 'ripple';
 describe('switch statements', () => {
 	it('renders simple switch with literal cases', () => {
 		function App() @{
-			let &[value] = track('b');
+			const value = track('b');
 			<>
-				<button onClick={() => (value = 'c')}>{'Change to C'}</button>
-				<button onClick={() => (value = 'a')}>{'Change to A'}</button>
-				@switch (value) {
+				<button onClick={() => (value.value = 'c')}>{'Change to C'}</button>
+				<button onClick={() => (value.value = 'a')}>{'Change to A'}</button>
+				@switch (value.value) {
 					@case 'a': {
 						<div>Case A</div>
 					}
@@ -39,10 +39,10 @@ describe('switch statements', () => {
 
 	it('renders switch with reactive discriminant', () => {
 		function App() @{
-			let &[count] = track(1);
+			const count = track(1);
 			<>
-				<button onClick={() => count++}>{'Increment'}</button>
-				@switch (count) {
+				<button onClick={() => count.value++}>{'Increment'}</button>
+				@switch (count.value) {
 					@case 1: {
 						<div>{'Count is 1'}</div>
 					}
@@ -72,12 +72,12 @@ describe('switch statements', () => {
 
 	it('renders switch with default clause only', () => {
 		function App() @{
-			let &[value] = track('x');
+			const value = track('x');
 			<>
-				<button onClick={() => (value = 'y')}>{'Change Value'}</button>
-				@switch (value) {
+				<button onClick={() => (value.value = 'y')}>{'Change Value'}</button>
+				@switch (value.value) {
 					@default: {
-						<div>{'Default for ' + value}</div>
+						<div>{'Default for ' + value.value}</div>
 					}
 				}
 			</>
@@ -94,11 +94,11 @@ describe('switch statements', () => {
 
 	it('renders switch with isolated empty cases', () => {
 		function App() @{
-			let &[value] = track('a');
+			const value = track('a');
 			<>
-				<button onClick={() => (value = 'b')}>{'Change to B'}</button>
-				<button onClick={() => (value = 'c')}>{'Change to C'}</button>
-				@switch (value) {
+				<button onClick={() => (value.value = 'b')}>{'Change to B'}</button>
+				<button onClick={() => (value.value = 'c')}>{'Change to C'}</button>
+				@switch (value.value) {
 					@case 'a': {
 						<div>Case A</div>
 					}
@@ -138,28 +138,28 @@ describe('switch statements', () => {
 
 	it('renders switch with template content and reacts to tracked changes', () => {
 		function App() @{
-			let &[status] = track('active');
-			let &[message] = track('');
+			const status = track('active');
+			const message = track('');
 			<>
-				<button onClick={() => (status = 'pending')}>{'Pending'}</button>
-				<button onClick={() => (status = 'completed')}>{'Completed'}</button>
-				<button onClick={() => (status = 'error')}>{'Error'}</button>
-				@switch (status) {
+				<button onClick={() => (status.value = 'pending')}>{'Pending'}</button>
+				<button onClick={() => (status.value = 'completed')}>{'Completed'}</button>
+				<button onClick={() => (status.value = 'error')}>{'Error'}</button>
+				@switch (status.value) {
 					@case 'active': {
-						message = 'Currently active.';
-						<div>{'Status: ' + message}</div>
+						message.value = 'Currently active.';
+						<div>{'Status: ' + message.value}</div>
 					}
 					@case 'pending': {
-						message = 'Waiting for completion.';
-						<div>{'Status: ' + message}</div>
+						message.value = 'Waiting for completion.';
+						<div>{'Status: ' + message.value}</div>
 					}
 					@case 'completed': {
-						message = 'Task finished!';
-						<div class="success">{'Status: ' + message}</div>
+						message.value = 'Task finished!';
+						<div class="success">{'Status: ' + message.value}</div>
 					}
 					@default: {
-						message = 'An error occurred.';
-						<div class="error">{'Status: ' + message}</div>
+						message.value = 'An error occurred.';
+						<div class="error">{'Status: ' + message.value}</div>
 					}
 				}
 			</>
@@ -191,10 +191,10 @@ describe('switch statements', () => {
 		'renders switch with isolated cases and reacts to tracked changes without recreating DOM unnecessarily',
 		() => {
 			function App() @{
-				let &[status] = track(0);
+				const status = track(0);
 				<>
 					<div>
-						@switch (status) {
+						@switch (status.value) {
 							@case -1: {
 							}
 							@case 0: {
@@ -223,7 +223,7 @@ describe('switch statements', () => {
 					</div>
 					<button
 						onClick={() => {
-							status = (status + 1) % 5;
+							status.value = (status.value + 1) % 5;
 						}}
 					>{'Next Status'}</button>
 				</>
@@ -263,19 +263,19 @@ describe('switch statements', () => {
 
 	it('renders a middle switch case without falling through to later cases', () => {
 		function App() @{
-			let &[value] = track('x');
+			const value = track('x');
 			<>
-				<button onClick={() => (value = 'a')}>{'Set A'}</button>
-				<button onClick={() => (value = 'b')}>{'Set B'}</button>
-				<button onClick={() => (value = 'c')}>{'Set C'}</button>
-				<button onClick={() => (value = 'x')}>{'Set X'}</button>
+				<button onClick={() => (value.value = 'a')}>{'Set A'}</button>
+				<button onClick={() => (value.value = 'b')}>{'Set B'}</button>
+				<button onClick={() => (value.value = 'c')}>{'Set C'}</button>
+				<button onClick={() => (value.value = 'x')}>{'Set X'}</button>
 				<div>
-					@switch (value) {
+					@switch (value.value) {
 						@case 'a': {
 							<div>{' Case A'}</div>
 						}
 						@case 'x': {
-							<div>{' Default Case for ' + value}</div>
+							<div>{' Default Case for ' + value.value}</div>
 						}
 						@case 'b': {
 							<div>{' Case B'}</div>
@@ -363,16 +363,16 @@ describe('switch statements', () => {
 
 	it('renders switch with isolated block-scoped cases', () => {
 		function App() @{
-			let &[level] = track(1);
+			const level = track(1);
 			<>
 				<button
 					onClick={() => {
-						if (level === 1) level = 2;
-						else if (level === 2) level = 3;
-						else level = 1;
+						if (level.value === 1) level.value = 2;
+						else if (level.value === 2) level.value = 3;
+						else level.value = 1;
 					}}
 				>{'Toggle'}</button>
-				@switch (level) {
+				@switch (level.value) {
 					@case 1: {
 						<div class="level">{'Level 1'}</div>
 					}

package/tests/client/track-async-hydration.test.tsrx

@@ -7,8 +7,8 @@ describe('trackAsync hydration from serialized data (client)', () => {
 
 		function App() @{
 			@try {
-				let &[data] = trackAsync(() => Promise.resolve('fallback'));
-				<p class="result">{data}</p>
+				const data = trackAsync(() => Promise.resolve('fallback'));
+				<p class="result">{data.value}</p>
 			} @pending {
 				<p class="loading">{'loading...'}</p>
 			}
@@ -31,8 +31,8 @@ describe('trackAsync hydration from serialized data (client)', () => {
 
 		function App() @{
 			@try {
-				let &[value] = trackAsync(() => promise);
-				<span class="value">{value}</span>
+				const value = trackAsync(() => promise);
+				<span class="value">{value.value}</span>
 			} @pending {
 				<span class="pending">{'waiting'}</span>
 			}