ripple 0.3.24 → 0.3.26

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

@@ -0,0 +1,127 @@
+import { DEV } from 'esm-env';
+import { describe, it, expect, vi } from 'vitest';
+import { flushSync } from 'ripple';
+import * as devalue from 'devalue';
+import { hydrateComponent, container } from '../setup-hydration.js';
+
+import * as ServerComponents from './compiled/server/track-async-serialization.js';
+import * as ClientComponents from './compiled/client/track-async-serialization.js';
+
+const TRACK_ASYNC_PUBLIC_ERROR_MESSAGE = 'An error occurred during async rendering';
+const TRACK_ASYNC_ERROR_MESSAGE = DEV ? 'fetch failed' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
+const TRACK_ASYNC_CHILD_ERROR_MESSAGE = DEV ? 'child error' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
+
+describe('hydration > trackAsync serialization', () => {
+	it('hydrates simple string value from serialized trackAsync', async () => {
+		await hydrateComponent(ServerComponents.AsyncSimpleValue, ClientComponents.AsyncSimpleValue);
+
+		expect(container.querySelector('.result')?.textContent).toBe('hydrated value');
+		expect(container.querySelector('.loading')).toBeNull();
+
+		// Serialization script tags should be removed after hydration
+		expect(container.querySelector('script[id^="__tsrx_ta_"]')).toBeNull();
+	});
+
+	it('hydrates numeric value from serialized trackAsync', async () => {
+		await hydrateComponent(ServerComponents.AsyncNumericValue, ClientComponents.AsyncNumericValue);
+
+		expect(container.querySelector('.count')?.textContent).toBe('42');
+		expect(container.querySelector('.pending')).toBeNull();
+	});
+
+	it('hydrates object value from serialized trackAsync', async () => {
+		await hydrateComponent(ServerComponents.AsyncObjectValue, ClientComponents.AsyncObjectValue);
+
+		expect(container.querySelector('.name')?.textContent).toBe('Alice');
+		expect(container.querySelector('.age')?.textContent).toBe('30');
+		expect(container.querySelector('.loading')).toBeNull();
+	});
+
+	it('hydrates rejected trackAsync and shows catch content', async () => {
+		await hydrateComponent(ServerComponents.AsyncWithCatch, ClientComponents.AsyncWithCatch);
+
+		expect(container.querySelector('.error')?.textContent).toBe(TRACK_ASYNC_ERROR_MESSAGE);
+		expect(container.querySelector('.result')).toBeNull();
+		expect(container.querySelector('.loading')).toBeNull();
+		expect(container.querySelector('script[id^="__tsrx_ta_"]')).toBeNull();
+	});
+
+	it('hydrates child trackAsync error bubbled to parent catch', async () => {
+		await hydrateComponent(ServerComponents.ParentWithCatch, ClientComponents.ParentWithCatch);
+
+		expect(container.querySelector('.parent-error')?.textContent).toBe(
+			TRACK_ASYNC_CHILD_ERROR_MESSAGE,
+		);
+		expect(container.querySelector('.result')).toBeNull();
+		expect(container.querySelector('.pending')).toBeNull();
+		expect(container.querySelector('script[id^="__tsrx_ta_"]')).toBeNull();
+	});
+
+	it('reruns trackAsync when a dependency changes after hydration', async () => {
+		await hydrateComponent(
+			ServerComponents.AsyncWithReactiveDependency,
+			ClientComponents.AsyncWithReactiveDependency,
+		);
+
+		// Hydrated value from SSR should match `count-0`
+		expect(container.querySelector('.result')?.textContent).toBe('count-0');
+		expect(container.querySelector('.loading')).toBeNull();
+
+		/** @type {any} */ (container.querySelector('.increment'))?.click();
+		flushSync();
+		// Wait for the trackAsync promise to resolve
+		await Promise.resolve();
+		await Promise.resolve();
+		flushSync();
+
+		expect(container.querySelector('.result')?.textContent).toBe('count-1');
+	});
+
+	it('reruns trackAsync via #server RPC call when a dependency changes', async () => {
+		const originalFetch = globalThis.fetch;
+		const fetchMock = vi.fn(async (_url, init) => {
+			const args = devalue.parse(init.body);
+			const result = `server-${args[0]}`;
+			return new Response(devalue.stringify({ value: result }), {
+				status: 200,
+				headers: { 'Content-Type': 'text/plain' },
+			});
+		});
+		globalThis.fetch = /** @type {any} */ (fetchMock);
+
+		try {
+			await hydrateComponent(
+				ServerComponents.AsyncWithServerCall,
+				ClientComponents.AsyncWithServerCall,
+			);
+
+			// Hydrated value comes from the SSR-serialized trackAsync output
+			expect(container.querySelector('.result')?.textContent).toBe('server-0');
+			expect(container.querySelector('.loading')).toBeNull();
+			expect(fetchMock).not.toHaveBeenCalled();
+
+			/** @type {any} */ (container.querySelector('.increment'))?.click();
+			flushSync();
+			// Wait for the RPC fetch + devalue parse chain to resolve
+			await vi.waitFor(() => {
+				expect(container.querySelector('.result')?.textContent).toBe('server-1');
+			});
+
+			expect(fetchMock).toHaveBeenCalledTimes(1);
+			expect(fetchMock.mock.calls[0][0]).toMatch(/\/_\$_ripple_rpc_\$_\//);
+		} finally {
+			globalThis.fetch = originalFetch;
+		}
+	});
+
+	it('hydrates multiple trackAsync values independently', async () => {
+		await hydrateComponent(
+			ServerComponents.AsyncMultipleValues,
+			ClientComponents.AsyncMultipleValues,
+		);
+
+		expect(container.querySelector('.first')?.textContent).toBe('alpha');
+		expect(container.querySelector('.second')?.textContent).toBe('beta');
+		expect(container.querySelector('.loading')).toBeNull();
+	});
+});

package/tests/server/track-async-serialization.test.tsrx

@@ -0,0 +1,185 @@
+import { DEV } from 'esm-env';
+import { trackAsync } from 'ripple';
+
+const TRACK_ASYNC_PUBLIC_ERROR_MESSAGE = 'An error occurred during async rendering';
+
+describe('trackAsync serialization (server)', () => {
+	it('serializes resolved trackAsync data as a script tag in SSR output', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(() => Promise.resolve('hello world'));
+				<p class="result">{data}</p>
+			} pending {
+				<p class="loading">{'loading...'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('hello world');
+		// Should contain a serialization script tag
+		expect(body).toContain('__tsrx_ta_');
+		expect(body).toContain('type="application/json"');
+	});
+
+	it('serializes numeric trackAsync data correctly', async () => {
+		component App() {
+			try {
+				let &[count] = trackAsync(() => Promise.resolve(42));
+				<span class="count">{count}</span>
+			} pending {
+				<span>{'...'}</span>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('42');
+		expect(body).toContain('__tsrx_ta_');
+	});
+
+	it('serializes object trackAsync data correctly', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+				<p>{data.name}</p>
+			} pending {
+				<p>{'...'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('Alice');
+		expect(body).toContain('__tsrx_ta_');
+	});
+
+	it('serializes array trackAsync data correctly', async () => {
+		component App() {
+			try {
+				let &[items] = trackAsync(() => Promise.resolve(['a', 'b', 'c']));
+				<ul>
+					for (let item of items) {
+						<li>{item}</li>
+					}
+				</ul>
+			} pending {
+				<p>{'...'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('<li>a</li>');
+		expect(body).toContain('__tsrx_ta_');
+	});
+
+	it('serializes rejected trackAsync as error envelope', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
+				<p class="result">{data}</p>
+			} pending {
+				<p class="loading">{'loading...'}</p>
+			} catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		const public_message = DEV ? 'fetch failed' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
+		expect(body).toContain(`<p class="error">${public_message}</p>`);
+		expect(body).toContain('__tsrx_ta_');
+		expect(body).toContain('"ok":false');
+		expect(body).toContain(`"message":"${public_message}"`);
+	});
+
+	it('serializes error when child component error bubbles to parent catch', async () => {
+		component Child() {
+			try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
+				<p class="result">{data}</p>
+			} pending {
+				<p class="pending">{'loading...'}</p>
+			}
+		}
+
+		component Parent() {
+			try {
+				<Child />
+			} catch (e) {
+				<p class="parent-error">{(e as Error).message}</p>
+			}
+		}
+
+		const { body } = await render(Parent);
+		const public_message = DEV ? 'child error' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
+		expect(body).toContain(`<p class="parent-error">${public_message}</p>`);
+		expect(body).toContain('__tsrx_ta_');
+		expect(body).toContain('"ok":false');
+		expect(body).toContain(`"message":"${public_message}"`);
+	});
+
+	it('serializes sync trackAsync throw using original cause message', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(() => {
+					throw new Error('sync failure');
+				});
+				<p class="result">{data}</p>
+			} pending {
+				<p class="loading">{'loading...'}</p>
+			} catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		const public_message = DEV ? 'sync failure' : TRACK_ASYNC_PUBLIC_ERROR_MESSAGE;
+		expect(body).toContain(`<p class="error">${public_message}</p>`);
+		expect(body).toContain('__tsrx_ta_');
+		expect(body).toContain('"ok":false');
+		expect(body).toContain(`"message":"${public_message}"`);
+		expect(body).not.toContain('Error thrown during trackAsync execution');
+	});
+
+	it('escapes serialized error payload to keep script tag safe', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(
+					() => Promise.reject(new Error('</script><div data-injected="1">boom</div>')),
+				);
+				<p class="result">{data}</p>
+			} pending {
+				<p class="loading">{'loading...'}</p>
+			} catch (e) {
+				<p class="error">{(e as Error).message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('__tsrx_ta_');
+		if (DEV) {
+			expect(body).toContain('\\u003c/script\\u003e');
+			expect(body).not.toContain(
+				'type="application/json">{"ok":false,"error":{"message":"</script>',
+			);
+		}
+	});
+
+	it('generates unique hashes for multiple trackAsync calls', async () => {
+		component App() {
+			try {
+				let &[a] = trackAsync(() => Promise.resolve('first'));
+				let &[b] = trackAsync(() => Promise.resolve('second'));
+				<p>{a}</p>
+				<p>{b}</p>
+			} pending {
+				<p>{'...'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		// Find all script tag IDs
+		const matches = [...body.matchAll(/id="(__tsrx_ta_[a-f0-9]+)"/g)];
+		expect(matches.length).toBe(2);
+		// Hashes should be different
+		expect(matches[0][1]).not.toBe(matches[1][1]);
+	});
+});