ripple 0.3.128 → 0.4.0

package/tests/hydration/components/switch.tsrx

@@ -16,17 +16,17 @@ export function SwitchStatic() @{
 }
 
 export function SwitchReactive() @{
-	let &[status] = track<'a' | 'b' | 'c'>('a');
+	const status = track<'a' | 'b' | 'c'>('a');
 	<>
 		<button
 			class="toggle"
 			onClick={() => {
-				if (status === 'a') status = 'b';
-				else if (status === 'b') status = 'c';
-				else status = 'a';
+				if (status.value === 'a') status.value = 'b';
+				else if (status.value === 'b') status.value = 'c';
+				else status.value = 'a';
 			}}
 		>{'Toggle'}</button>
-		@switch (status) {
+		@switch (status.value) {
 			@case 'a': {
 				<div class="case-a">Case A</div>
 			}
@@ -55,17 +55,17 @@ export function SwitchFallthrough() @{
 }
 
 export function SwitchNumericLevels() @{
-	let &[level] = track<1 | 2 | 3>(1);
+	const level = track<1 | 2 | 3>(1);
 	<>
 		<button
 			class="level-toggle"
 			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 Level'}</button>
-		@switch (level) {
+		@switch (level.value) {
 			@case 1: {
 				<div class="level-1">{'Level 1'}</div>
 			}
@@ -80,17 +80,17 @@ export function SwitchNumericLevels() @{
 }
 
 export function SwitchBlockScoped() @{
-	let &[level] = track<1 | 2 | 3>(1);
+	const level = track<1 | 2 | 3>(1);
 	<>
 		<button
 			class="block-toggle"
 			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="block-1">{'Block 1'}</div>
 			}
@@ -105,17 +105,17 @@ export function SwitchBlockScoped() @{
 }
 
 export function SwitchNoBreak() @{
-	let &[level] = track<1 | 2 | 3>(1);
+	const level = track<1 | 2 | 3>(1);
 	<>
 		<button
 			class="nobreak-toggle"
 			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="nobreak-1">{'NoBreak 1'}</div>
 			}

package/tests/hydration/components/text-types.ts

@@ -0,0 +1,4 @@
+export interface TextRow {
+	label: string;
+	count: number | bigint;
+}

package/tests/hydration/components/track-async-serialization.tsrx

@@ -1,29 +1,66 @@
 import { track, trackAsync } from 'ripple';
+import { Money } from '../fixtures/money.js';
+
+export const transport = {
+	Money: {
+		encode: (value: unknown) => value instanceof Money && [value.amount, value.currency],
+		decode: ([amount, currency]: [number, string]) => new Money(amount, currency),
+	},
+};
 
 module server {
+	import { Money } from '../fixtures/money.js';
+
 	export async function formatValue(n: number): Promise<string> {
 		return `server-${n}`;
 	}
+
+	export async function doubleMoney(value: Money): Promise<Money> {
+		if (!(value instanceof Money)) throw new Error('RPC argument was not revived');
+		return new Money(value.amount * 2, value.currency);
+	}
 }
 
-import { formatValue } from server;
+import { doubleMoney, formatValue } from server;
+
+function MoneyResult({ count }: { count: { value: number } }) @{
+	const money = trackAsync(() => doubleMoney(new Money(count.value, 'USD')));
+	<p class="result">{money.value.format()}</p>
+}
+
+export function AsyncCustomType() @{
+	const count = track(6);
+	<>
+		<button
+			class="increment"
+			onClick={() => {
+				count.value++;
+			}}
+		>{'increment'}</button>
+		@try {
+			<MoneyResult {count} />
+		} @pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>
+}
 
 function ServerCallResult({ count }: { count: { value: number } }) @{
-	let &[data] = trackAsync(() => formatValue(count.value));
-	<p class="result">{data}</p>
+	const data = trackAsync(() => formatValue(count.value));
+	<p class="result">{data.value}</p>
 }
 
 export function AsyncWithServerCall() @{
-	let &[count, count_ref] = track(0);
+	const count = track(0);
 	<>
 		<button
 			class="increment"
 			onClick={() => {
-				count++;
+				count.value++;
 			}}
 		>{'increment'}</button>
 		@try {
-			<ServerCallResult count={count_ref} />
+			<ServerCallResult {count} />
 		} @pending {
 			<p class="loading">{'loading...'}</p>
 		}
@@ -32,8 +69,8 @@ export function AsyncWithServerCall() @{
 
 export function AsyncSimpleValue() @{
 	@try {
-		let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
-		<p class="result">{data}</p>
+		const data = trackAsync(() => Promise.resolve('hydrated value'));
+		<p class="result">{data.value}</p>
 	} @pending {
 		<p class="loading">{'loading...'}</p>
 	}
@@ -41,8 +78,8 @@ export function AsyncSimpleValue() @{
 
 export function AsyncNumericValue() @{
 	@try {
-		let &[count] = trackAsync(() => Promise.resolve(42));
-		<span class="count">{count}</span>
+		const count = trackAsync(() => Promise.resolve(42));
+		<span class="count">{count.value}</span>
 	} @pending {
 		<span class="pending">{'...'}</span>
 	}
@@ -50,10 +87,10 @@ export function AsyncNumericValue() @{
 
 export function AsyncObjectValue() @{
 	@try {
-		let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+		const user = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
 		<div class="user">
-			<span class="name">{user.name}</span>
-			<span class="age">{user.age}</span>
+			<span class="name">{user.value.name}</span>
+			<span class="age">{user.value.age}</span>
 		</div>
 	} @pending {
 		<div class="loading">{'loading user...'}</div>
@@ -62,11 +99,11 @@ export function AsyncObjectValue() @{
 
 export function AsyncMultipleValues() @{
 	@try {
-		let &[first] = trackAsync(() => Promise.resolve('alpha'));
-		let &[second] = trackAsync(() => Promise.resolve('beta'));
+		const first = trackAsync(() => Promise.resolve('alpha'));
+		const second = trackAsync(() => Promise.resolve('beta'));
 		<div class="multi">
-			<span class="first">{first}</span>
-			<span class="second">{second}</span>
+			<span class="first">{first.value}</span>
+			<span class="second">{second.value}</span>
 		</div>
 	} @pending {
 		<div class="loading">{'loading...'}</div>
@@ -75,8 +112,8 @@ export function AsyncMultipleValues() @{
 
 export function AsyncWithCatch() @{
 	@try {
-		let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
-		<p class="result">{data}</p>
+		const data = trackAsync(() => Promise.reject(new Error('fetch failed')));
+		<p class="result">{data.value}</p>
 	} @pending {
 		<p class="loading">{'loading...'}</p>
 	} @catch (e) {
@@ -86,8 +123,8 @@ export function AsyncWithCatch() @{
 
 export function ChildWithError() @{
 	@try {
-		let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
-		<p class="result">{data}</p>
+		const data = trackAsync(() => Promise.reject(new Error('child error')));
+		<p class="result">{data.value}</p>
 	} @pending {
 		<p class="pending">{'loading...'}</p>
 	}
@@ -102,21 +139,38 @@ export function ParentWithCatch() @{
 }
 
 function ReactiveDependencyResult({ count }: { count: { value: number } }) @{
-	let &[data] = trackAsync(() => Promise.resolve(`count-${count.value}`));
-	<p class="result">{data}</p>
+	const data = trackAsync(() => Promise.resolve(`count-${count.value}`));
+	<p class="result">{data.value}</p>
 }
 
 export function AsyncWithReactiveDependency() @{
-	let &[count, count_ref] = track(0);
+	const count = track(0);
+	<>
+		<button
+			class="increment"
+			onClick={() => {
+				count.value++;
+			}}
+		>{'increment'}</button>
+		@try {
+			<ReactiveDependencyResult {count} />
+		} @pending {
+			<p class="loading">{'loading...'}</p>
+		}
+	</>
+}
+
+export function AsyncWithReadOnlyDependency() @{
+	const count = track(0);
 	<>
 		<button
 			class="increment"
 			onClick={() => {
-				count++;
+				count.value++;
 			}}
 		>{'increment'}</button>
 		@try {
-			<ReactiveDependencyResult count={count_ref} />
+			<ReactiveDependencyResult count={count.readOnly()} />
 		} @pending {
 			<p class="loading">{'loading...'}</p>
 		}

package/tests/hydration/components/try.tsrx

@@ -17,13 +17,13 @@ export function RootThrows() @{
 }
 
 export function RootAsyncDirect() @{
-	let &[value] = trackAsync(() => Promise.resolve('root async value'));
-	<p class="root-async-value">{value}</p>
+	const value = trackAsync(() => Promise.resolve('root async value'));
+	<p class="root-async-value">{value.value}</p>
 }
 
 export function RootAsyncRejects() @{
-	let &[value] = trackAsync(() => Promise.reject(new Error('root async failed')));
-	<p class="root-async-value">{value}</p>
+	const value = trackAsync(() => Promise.reject(new Error('root async failed')));
+	<p class="root-async-value">{value.value}</p>
 }
 
 export function AsyncListInTryPending() @{
@@ -35,9 +35,9 @@ export function AsyncListInTryPending() @{
 }
 
 function AsyncList() @{
-	let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
+	const items = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
 	<ul class="items">
-		@for (let item of items) {
+		@for (let item of items.value) {
 			<li>{item}</li>
 		}
 	</ul>
@@ -55,6 +55,6 @@ export function AsyncTryWithLeadingSibling() @{
 }
 
 function AsyncContent() @{
-	let &[value] = trackAsync(() => Promise.resolve('ready'));
-	<div class="resolved">{value}</div>
+	const value = trackAsync(() => Promise.resolve('ready'));
+	<div class="resolved">{value.value}</div>
 }

package/tests/hydration/components/typed-text.tsrx

@@ -0,0 +1,22 @@
+import { track } from 'ripple';
+import type { TextRow } from './text-types';
+
+export function TypedText() @{
+	const row = track<TextRow>({ label: '<first>', count: 2 });
+	<>
+		<div class="typed-run">
+			{'value: '}
+			{row.value.label}
+			{row.value.count}
+			<span>tail</span>
+		</div>
+		<p class="typed-number">
+			{(0, row.value.count)}
+		</p>
+		<button
+			onClick={() => {
+				row.value = { label: '&next', count: 3n };
+			}}
+		>update</button>
+	</>
+}

package/tests/hydration/fixtures/money.js

@@ -0,0 +1,10 @@
+export class Money {
+	/** @param {number} amount @param {string} currency */
+	constructor(amount, currency) {
+		this.amount = amount;
+		this.currency = currency;
+	}
+	format() {
+		return `${this.amount} ${this.currency}`;
+	}
+}

package/tests/hydration/for.test.js

@@ -477,4 +477,40 @@ describe('hydration > for blocks', () => {
 		expect(listItems[2]?.textContent).toBe('B');
 		expect(listItems[3]?.textContent).toBe('A');
 	});
+
+	it('hydrates keyed for loop and appends and rotates before a trailing sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.KeyedForLoopAppendAndRotate,
+			ClientComponents.KeyedForLoopAppendAndRotate,
+		);
+
+		const host = container.querySelector('.host');
+		expect(host?.textContent).toBe('123p');
+
+		container.querySelector('.push')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('1234p');
+
+		container.querySelector('.rotate')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('2341p');
+	});
+
+	it('hydrates a root keyed for loop component and appends and rotates before a trailing sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.RootKeyedForLoopAppendAndRotate,
+			ClientComponents.RootKeyedForLoopAppendAndRotate,
+		);
+
+		const host = container.querySelector('.host');
+		expect(host?.textContent).toBe('123p');
+
+		container.querySelector('.push')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('1234p');
+
+		container.querySelector('.rotate')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('2341p');
+	});
 });

package/tests/hydration/fragment-cursor.test.js

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'ripple';
+import { render } from 'ripple/server';
+import { hydrateComponent, container, stripHydrationMarkers } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/fragment-cursor.js';
+import * as ClientComponents from './compiled/client/fragment-cursor.js';
+
+// Component roots, mostly fragments, whose last node the hydration cursor
+// must end on. Each is hydrated on its own and as `Wrap<Name>`: a child
+// followed by siblings that hydrate wrongly if the cursor is off by a node.
+const shapes = [
+	'TrailingNavigatedElements',
+	'TrailingStaticNavigatedElements',
+	'NavigatedThenStatic',
+	'LeadingNavigatedThenStatic',
+	'TrailingNestedNavigated',
+	'NestedNavigatedThenStatic',
+	'TrackedTextThenStatic',
+	'StaticThenTrackedText',
+	'StaticNestedThenStatic',
+	'AllStatic',
+	'TrailingDynamicChild',
+	'DynamicChildThenStatic',
+	'IfThenStatic',
+	'StaticThenIf',
+	'CompThenStatic',
+	'StaticThenComp',
+	'SiblingComps',
+	'UntrackedTextThenStatic',
+	'NestedFragmentThenStatic',
+	'TrailingNestedFragment',
+	'ForThenStatic',
+	'SwitchThenStatic',
+	'TryThenStatic',
+	'StyleThenStatic',
+	'CollectionThenStatic',
+	'InlineElementThenStatic',
+	'IfOnly',
+	'IfThenOne',
+	'SingleRootWithIf',
+	'IfTwoThenStatic',
+	'StaticCallThenStatic',
+	'StaticThenStyleThenStatic',
+];
+
+// Single-root shapes whose children end on a slot the cursor must step past.
+const rootShapes = ['ExprThenSiblingInDiv', 'IfTwoInDiv', 'ForTwoNodeItems'];
+
+/**
+ * Server renders and hydrates a component, asserting the hydrated DOM matches
+ * the server markup (no duplicated or dropped nodes).
+ * @param {string} name
+ */
+async function hydrateShape(name) {
+	const { body } = await render(ServerComponents[name]);
+	await hydrateComponent(ServerComponents[name], ClientComponents[name]);
+	expect(container.innerHTML).toBeHtml(stripHydrationMarkers(body));
+}
+
+/**
+ * Clicks the shape's own `.inc` button (when it has one) and checks the
+ * hydrated `.count` text updates in place.
+ */
+function clickInner() {
+	const inc = container.querySelector('.inc');
+	const count = container.querySelector('.count');
+	if (inc && count) {
+		expect(count.textContent).toBe('0');
+		inc.click();
+		flushSync();
+		expect(count.textContent).toBe('1');
+	}
+}
+
+describe('hydration > fragment cursor', () => {
+	describe('fragment as the root', () => {
+		for (const name of shapes) {
+			it(`hydrates ${name}`, async () => {
+				await hydrateShape(name);
+				clickInner();
+			});
+		}
+	});
+
+	describe('slot followed by siblings inside an element', () => {
+		for (const name of rootShapes) {
+			it(`hydrates ${name}`, async () => {
+				await hydrateShape(name);
+				clickInner();
+			});
+		}
+	});
+
+	describe('fragment as a child with trailing siblings', () => {
+		for (const name of shapes) {
+			it(`hydrates ${name} followed by siblings`, async () => {
+				await hydrateShape(`Wrap${name}`);
+
+				const after = container.querySelector('.after');
+				expect(after?.textContent).toBe('0');
+
+				container.querySelector('.outer-inc')?.click();
+				flushSync();
+				expect(after?.textContent).toBe('1');
+
+				clickInner();
+			});
+		}
+	});
+});

package/tests/hydration/if-children.test.js

@@ -269,4 +269,28 @@ describe('hydration > if blocks with children', () => {
 		expect(container.querySelector('.section-heading')?.textContent).toBe('Section Heading');
 		expect(container.querySelector('.section-content a')?.textContent).toBe('a link');
 	});
+
+	it('re-renders control-flow roots of all-component children at their own position', async () => {
+		await hydrateComponent(
+			ServerComponents.ComponentChildrenWithControlFlowRoots,
+			ClientComponents.ComponentChildrenWithControlFlowRoots,
+		);
+
+		const host = container.querySelector('.host');
+		expect(host?.textContent).toBe('on123end');
+
+		// The root `@if` child swaps its branch in place, before the siblings.
+		container.querySelector('.toggle')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('off123end');
+
+		// The root `@for` child moves an item to its own end, not the host's.
+		container.querySelector('.rotate')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('off231end');
+
+		container.querySelector('.toggle')?.click();
+		flushSync();
+		expect(host?.textContent).toBe('on231end');
+	});
 });

package/tests/hydration/streaming.test.js

@@ -269,6 +269,25 @@ describe('hydration > streamed boundaries (chunk after hydration)', () => {
 		expect(container.innerHTML).not.toContain('<!--[?');
 	});
 
+	it('hydrates a streamed root slot under a boundary even with rootBoundary: false', async () => {
+		const { chunks, done } = startStream(ServerComponents.StreamRootDirect, {
+			pending: ServerComponents.RootPending,
+		});
+		mountShell(chunks[0]);
+
+		// The shell starts with a slot marker: only a boundary can adopt the
+		// fallback and activate the chunk, so the opt-out does not apply here.
+		hydrate(ClientComponents.StreamRootDirect, { target: container, rootBoundary: false });
+
+		ServerComponents.controls.rootDirect.resolve('root data');
+		await done;
+		receiveChunk(chunks[1]);
+		flushSync();
+
+		expect(container.querySelector('.root-async')?.textContent).toBe('root data');
+		expect(container.innerHTML).not.toContain('<!--[?');
+	});
+
 	it('hydrates a root chunk that arrived before hydration through the normal path', async () => {
 		const { chunks, done } = startStream(ServerComponents.StreamRootDirect, {
 			pending: ServerComponents.RootPending,

package/tests/hydration/track-async-serialization.test.js

@@ -1,6 +1,7 @@
 import { DEV } from 'esm-env';
-import { describe, it, expect, vi } from 'vitest';
-import { flushSync } from 'ripple';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { flushSync, hydrate, setTransport } from 'ripple';
+import { executeServerFunction, render, setTransport as setServerTransport } from 'ripple/server';
 import * as devalue from 'devalue';
 import { hydrateComponent, container } from '../setup-hydration.js';
 
@@ -12,6 +13,73 @@ const TRACK_ASYNC_ERROR_MESSAGE = DEV ? 'fetch failed' : TRACK_ASYNC_PUBLIC_ERRO
 const TRACK_ASYNC_CHILD_ERROR_MESSAGE = DEV ? 'child error' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
 
 describe('hydration > trackAsync serialization', () => {
+	afterEach(() => {
+		setTransport();
+		setServerTransport();
+		vi.unstubAllGlobals();
+	});
+
+	it('also accepts string devalue payloads with a registered transport', async () => {
+		setServerTransport(ServerComponents.transport);
+		setTransport(ClientComponents.transport);
+		const { body } = await render(ServerComponents.AsyncCustomType);
+		container.innerHTML = body;
+		for (const script of container.querySelectorAll('script[id^="__ripple_ta_"]')) {
+			const envelope = JSON.parse(script.textContent);
+			envelope.payload = JSON.stringify(envelope.payload);
+			script.textContent = JSON.stringify(envelope);
+		}
+		const unmount = hydrate(ClientComponents.AsyncCustomType, { target: container });
+		try {
+			expect(container.querySelector('.result')?.textContent).toBe('12 USD');
+			expect(container.querySelector('script[id^="__ripple_ta_"]')).toBeNull();
+		} finally {
+			unmount();
+		}
+	});
+
+	it('revives a custom class during hydration and sends it through RPC in both directions', async () => {
+		const serverDecode = vi.fn(ServerComponents.transport.Money.decode);
+		const clientDecode = vi.fn(ClientComponents.transport.Money.decode);
+		setServerTransport({ Money: { ...ServerComponents.transport.Money, decode: serverDecode } });
+		setTransport({ Money: { ...ClientComponents.transport.Money, decode: clientDecode } });
+		const fetchMock = vi.fn(async (_url, init) => {
+			const body = await executeServerFunction(
+				ServerComponents._$_server_$_.doubleMoney,
+				init.body,
+			);
+			return new Response(body, { status: 200 });
+		});
+		vi.stubGlobal('fetch', fetchMock);
+
+		const { unmount } = await hydrateComponent(
+			ServerComponents.AsyncCustomType,
+			ClientComponents.AsyncCustomType,
+		);
+		try {
+			// Calling the instance method requires the client decoder, and hydration
+			// must adopt the server result without refetching it.
+			expect(container.querySelector('.result')?.textContent).toBe('12 USD');
+			expect(container.querySelector('.loading')).toBeNull();
+			expect(container.querySelector('script[id^="__ripple_ta_"]')).toBeNull();
+			expect(fetchMock).not.toHaveBeenCalled();
+			expect(clientDecode).toHaveBeenCalledTimes(1);
+			expect(serverDecode).not.toHaveBeenCalled();
+
+			container.querySelector('.increment').click();
+			flushSync();
+			await vi.waitFor(() => {
+				expect(container.querySelector('.result')?.textContent).toBe('14 USD');
+			});
+			expect(fetchMock).toHaveBeenCalledTimes(1);
+			expect(fetchMock.mock.calls[0][0]).toMatch(/\/_\$_ripple_rpc_\$_\//);
+			expect(clientDecode).toHaveBeenCalledTimes(2);
+			expect(serverDecode).toHaveBeenCalledTimes(1);
+		} finally {
+			unmount();
+		}
+	});
+
 	it('hydrates simple string value from serialized trackAsync', async () => {
 		await hydrateComponent(ServerComponents.AsyncSimpleValue, ClientComponents.AsyncSimpleValue);
 
@@ -77,6 +145,23 @@ describe('hydration > trackAsync serialization', () => {
 		expect(container.querySelector('.result')?.textContent).toBe('count-1');
 	});
 
+	it('reruns trackAsync when a dependency read through readOnly() changes after hydration', async () => {
+		await hydrateComponent(
+			ServerComponents.AsyncWithReadOnlyDependency,
+			ClientComponents.AsyncWithReadOnlyDependency,
+		);
+
+		expect(container.querySelector('.result')?.textContent).toBe('count-0');
+
+		/** @type {any} */ (container.querySelector('.increment'))?.click();
+		flushSync();
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+
+		expect(container.querySelector('.result')?.textContent).toBe('count-1');
+	});
+
 	it('reruns trackAsync via module server RPC call when a dependency changes', async () => {
 		const originalFetch = globalThis.fetch;
 		const fetchMock = vi.fn(async (_url, init) => {