ripple 0.3.11 → 0.3.13

package/tests/server/streaming-ssr.test.rsrx

@@ -0,0 +1,115 @@
+import { create_ssr_stream } from 'ripple/server';
+
+describe('create_ssr_stream', () => {
+	it('renders SSR HTML into the injected sink and exposes a web stream', async () => {
+		component App() {
+			<div>{'Hello, streaming SSR!'}</div>
+		}
+
+		const { stream, sink } = create_ssr_stream();
+
+		expect(stream).toBeInstanceOf(ReadableStream);
+		await render(App, { stream: sink });
+
+		const html = await new Response(stream).text();
+		expect(html).toBeHtml('<div>Hello, streaming SSR!</div>');
+	});
+
+	it('closes the public stream when streaming finishes successfully', async () => {
+		component App() {
+			<p>{'stream closed'}</p>
+		}
+
+		const { stream, sink } = create_ssr_stream();
+		const reader = stream.getReader();
+		const decoder = new TextDecoder();
+		let html = '';
+
+		await render(App, { stream: sink });
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) {
+				break;
+			}
+			html += decoder.decode(value, { stream: true });
+		}
+
+		html += decoder.decode();
+		expect(html).toBeHtml('<p>stream closed</p>');
+
+		const terminal_read = await reader.read();
+		expect(terminal_read.done).toBe(true);
+	});
+});
+
+// import { renderToStream } from 'ripple/server';
+
+// describe('render to stream', () => {
+// test('renderToStream renders a simple component', async ({ expect }) => {
+// 	component Basic() {
+// 		<div>{'Hello, streaming SSR!'}</div>
+// 	}
+
+// 	const stream = renderToStream(Basic);
+
+// 	let result = '';
+// 	await new Promise((resolve) => {
+// 		stream.on('data', (chunk) => {
+// 			result += chunk.toString();
+// 		});
+// 		stream.on('end', resolve);
+// 	});
+
+// 	expect(result).toBe('<div>Hello, streaming SSR!</div>');
+// });
+
+// test('renderToStream handles async components', async ({ expect }) => {
+// 	component AsyncComponent() {
+// 		await new Promise((resolve) => setTimeout(resolve, 10));
+// 		<p>{'Async content loaded.'}</p>
+// 	}
+
+// 	const stream = renderToStream(AsyncComponent);
+
+// 	let result = '';
+// 	await new Promise((resolve) => {
+// 		stream.on('data', (chunk) => {
+// 			result += chunk.toString();
+// 		});
+// 		stream.on('end', resolve);
+// 	});
+
+// 	expect(result).toBe('<p>Async content loaded.</p>');
+// });
+
+// test('renderToStream handles await blocks with pending state', async ({ expect }) => {
+// 	component AwaitComponent() {
+// 		let data = 'initial';
+// 		await new Promise((resolve) => setTimeout(() => {
+// 			data = 'resolved';
+// 			resolve('');
+// 		}, 20));
+// 		try {
+// 			<div>
+// 				{'Data: '}
+// 				{data}
+// 			</div>
+// 		} pending {
+// 			<div>{'Loading...'}</div>
+// 		}
+// 	}
+
+// 	const stream = renderToStream(AwaitComponent);
+
+// 	let result = '';
+// 	await new Promise((resolve) => {
+// 		stream.on('data', (chunk) => {
+// 			result += chunk.toString();
+// 		});
+// 		stream.on('end', resolve);
+// 	});
+
+// 	expect(result).toBe('<!--[--><div>Loading...</div><div>Data: resolved</div><!--]-->');
+// });
+// });

package/tests/server/try.test.rsrx

@@ -0,0 +1,503 @@
+import { trackAsync } from 'ripple';
+
+describe('try block with catch and pending (server)', () => {
+	it('catch block works when component throws before await with pending block', async () => {
+		component ThrowingChild() {
+			throw new Error('sync error');
+			let &[data] = trackAsync(() => Promise.resolve('hello'));
+			<p>{data}</p>
+		}
+
+		component App() {
+			try {
+				<ThrowingChild />
+			} pending {
+				<p>{'loading...'}</p>
+			} catch (err) {
+				<p>{'caught error'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('caught error');
+		expect(body).not.toContain('loading...');
+	});
+
+	it('catch block works when component throws after await with pending block', async () => {
+		component ThrowingAfterAwait() {
+			let &[data] = trackAsync(() => Promise.resolve('hello'));
+			throw new Error('error after await');
+			<p>{data}</p>
+		}
+
+		component App() {
+			try {
+				<ThrowingAfterAwait />
+			} pending {
+				<p>{'loading...'}</p>
+			} catch (err) {
+				<p>{'caught error'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('caught error');
+		expect(body).not.toContain('loading...');
+	});
+
+	it('catch block works with try/catch/pending when async body rejects', async () => {
+		component App() {
+			try {
+				let &[data] = trackAsync(() => Promise.reject(new Error('rejected')));
+				<p>{data}</p>
+			} pending {
+				<p>{'loading...'}</p>
+			} catch (err) {
+				<p>{'caught rejection'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('caught rejection');
+		expect(body).not.toContain('loading...');
+	});
+
+	it('removes pending content for nested try/pending blocks', async () => {
+		component App() {
+			try {
+				try {
+					let &[data] = trackAsync(() => Promise.resolve('resolved'));
+					<p>{data}</p>
+				} pending {
+					<p>{'inner loading...'}</p>
+				}
+			} pending {
+				<p>{'outer loading...'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('resolved');
+		expect(body).not.toContain('outer loading...');
+		expect(body).not.toContain('inner loading...');
+	});
+});
+
+describe('trackAsync directly in component body (server)', () => {
+	it('resolves trackAsync used directly in a component', async () => {
+		component App() {
+			try {
+				<DataChild />
+			} catch (err) {
+				<p>{'error'}</p>
+			}
+		}
+
+		component DataChild() {
+			let &[data] = trackAsync(() => Promise.resolve('from child'));
+			<p>{data}</p>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('from child');
+		expect(body).not.toContain('error');
+	});
+
+	it('resolves multiple trackAsync values in the same component', async () => {
+		component App() {
+			try {
+				let &[a] = trackAsync(() => Promise.resolve('hello'));
+				let &[b] = trackAsync(() => Promise.resolve('world'));
+				<p>
+					{a}
+					{' '}
+					{b}
+				</p>
+			} catch (err) {
+				<p>{'error'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('hello');
+		expect(body).toContain('world');
+	});
+
+	it('renders catch when trackAsync rejects in a child component without its own try', async () => {
+		component RejectChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('child rejected')));
+			<p>{data}</p>
+		}
+
+		component App() {
+			try {
+				<RejectChild />
+			} catch (err) {
+				<p>{'parent caught it'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('parent caught it');
+	});
+
+	it('chained trackAsync resolves both values', async () => {
+		component App() {
+			try {
+				let &[name] = trackAsync(() => Promise.resolve('ripple'));
+				let &[upper] = trackAsync(() => {
+					const n = name;
+					return Promise.resolve(n.toUpperCase());
+				});
+				<p>{upper}</p>
+			} catch (err) {
+				<p>{'error'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('RIPPLE');
+		expect(body).not.toContain('error');
+	});
+
+	it('chained trackAsync catches when first rejects', async () => {
+		component App() {
+			try {
+				let &[name] = trackAsync(() => Promise.reject<string>(new Error('first failed')));
+				let &[upper] = trackAsync(() => {
+					const n = name;
+					return Promise.resolve(n.toUpperCase());
+				});
+				<p>{upper}</p>
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('first failed');
+	});
+
+	it('chained trackAsync catches when second rejects', async () => {
+		component App() {
+			try {
+				let &[name] = trackAsync(() => Promise.resolve('ripple'));
+				let &[upper] = trackAsync(() => {
+					const n = name;
+					return Promise.reject(new Error('second failed'));
+				});
+				<p>{upper}</p>
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('second failed');
+	});
+});
+
+describe('nested child components with try/catch boundaries (server)', () => {
+	it('inner try/catch catches error from its own child', async () => {
+		component ThrowingChild() {
+			throw new Error('inner error');
+			<p>{'should not render'}</p>
+		}
+
+		component Inner() {
+			try {
+				<ThrowingChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		component App() {
+			try {
+				<Inner />
+			} catch (err) {
+				<p>{'outer caught'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('inner error');
+		expect(body).not.toContain('outer caught');
+	});
+
+	it('inner try/catch catches async rejection from its own child', async () => {
+		component AsyncChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('async inner error')));
+			<p>{data}</p>
+		}
+
+		component Inner() {
+			try {
+				<AsyncChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		component App() {
+			try {
+				<Inner />
+			} catch (err) {
+				<p>{'outer caught'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('async inner error');
+		expect(body).not.toContain('outer caught');
+	});
+
+	it('error propagates to outer catch when inner try has no catch', async () => {
+		component ThrowingChild() {
+			throw new Error('propagated error');
+			<p>{'should not render'}</p>
+		}
+
+		component Inner() {
+			try {
+				<ThrowingChild />
+			} pending {
+				<p>{'loading...'}</p>
+			}
+		}
+
+		component App() {
+			try {
+				<Inner />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('propagated error');
+		expect(body).not.toContain('loading...');
+	});
+
+	it('async rejection propagates to outer catch when inner try has no catch', async () => {
+		component AsyncChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('async propagated')));
+			<p>{data}</p>
+		}
+
+		component Inner() {
+			try {
+				<AsyncChild />
+			} pending {
+				<p>{'loading...'}</p>
+			}
+		}
+
+		component App() {
+			try {
+				<Inner />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('async propagated');
+		expect(body).not.toContain('loading...');
+	});
+
+	it(
+		'multiple nested levels: error propagates through pending-only boundaries to nearest catch',
+		async () => {
+			component ThrowingChild() {
+				throw new Error('deep error');
+				<p>{'should not render'}</p>
+			}
+
+			component Level3() {
+				try {
+					<ThrowingChild />
+				} pending {
+					<p>{'level3 loading'}</p>
+				}
+			}
+
+			component Level2() {
+				try {
+					<Level3 />
+				} pending {
+					<p>{'level2 loading'}</p>
+				}
+			}
+
+			component App() {
+				try {
+					<Level2 />
+				} catch (err: Error) {
+					<p>{err.message}</p>
+				}
+			}
+
+			const { body } = await render(App);
+			expect(body).toContain('deep error');
+		},
+	);
+
+	it('sibling components: one fails, the other does not affect catch', async () => {
+		component GoodChild() {
+			let &[data] = trackAsync(() => Promise.resolve('good'));
+			<p>{data}</p>
+		}
+
+		component BadChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('bad child')));
+			<p>{data}</p>
+		}
+
+		component App() {
+			try {
+				<GoodChild />
+				<BadChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('bad child');
+		expect(body).not.toContain('good');
+	});
+
+	it('independent try/catch boundaries each handle their own errors', async () => {
+		component FailChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('fail')));
+			<p>{data}</p>
+		}
+
+		component SuccessChild() {
+			let &[data] = trackAsync(() => Promise.resolve('success'));
+			<p>{data}</p>
+		}
+
+		component App() {
+			try {
+				<FailChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+			try {
+				<SuccessChild />
+			} catch (err) {
+				<p>{'should not catch'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('fail');
+		expect(body).toContain('success');
+		expect(body).not.toContain('should not catch');
+	});
+
+	it('inner catch handles rejection, outer renders normally', async () => {
+		component AsyncChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('handled inside')));
+			<p>{data}</p>
+		}
+
+		component Inner() {
+			try {
+				<AsyncChild />
+			} catch (err: Error) {
+				<span>{err.message}</span>
+			}
+		}
+
+		component App() {
+			<div>
+				<h1>{'App'}</h1>
+				<Inner />
+			</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('App');
+		expect(body).toContain('handled inside');
+	});
+
+	it('sync error in child after trackAsync routes to catch boundary', async () => {
+		component BrokenChild() {
+			let &[data] = trackAsync(() => Promise.resolve('loaded'));
+			throw new Error('sync after async');
+			<p>{data}</p>
+		}
+
+		component Inner() {
+			try {
+				<BrokenChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		component App() {
+			<Inner />
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('sync after async');
+	});
+
+	it('outer try with pending, inner try with catch: rejection goes to inner catch', async () => {
+		component AsyncChild() {
+			let &[data] = trackAsync(() => Promise.reject(new Error('inner rejection')));
+			<p>{data}</p>
+		}
+
+		component Inner() {
+			try {
+				<AsyncChild />
+			} catch (err: Error) {
+				<p>{err.message}</p>
+			}
+		}
+
+		component App() {
+			try {
+				<Inner />
+			} pending {
+				<p>{'outer loading'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('inner rejection');
+		expect(body).not.toContain('outer loading');
+	});
+
+	it('deeply nested: async resolves through multiple component layers', async () => {
+		component DataFetcher() {
+			let &[data] = trackAsync(() => Promise.resolve('deep data'));
+			<span>{data}</span>
+		}
+
+		component Level2() {
+			<div><DataFetcher /></div>
+		}
+
+		component Level1() {
+			<section><Level2 /></section>
+		}
+
+		component App() {
+			try {
+				<Level1 />
+			} catch (err) {
+				<p>{'error'}</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toContain('deep data');
+		expect(body).not.toContain('error');
+	});
+});

package/tests/utils/compiler-compat-config.test.js

@@ -12,7 +12,7 @@ component App() {
 describe('compiler tsx compat configuration', () => {
 	it('allows tsx compat when no compat config is provided', () => {
 		expect(() =>
-			compile(source, '/src/App.ripple', {
+			compile(source, '/src/App.rsrx', {
 				mode: 'client',
 			}),
 		).not.toThrow();
@@ -20,7 +20,7 @@ describe('compiler tsx compat configuration', () => {
 
 	it('throws when tsx compat kind is not configured', () => {
 		expect(() =>
-			compile(source, '/src/App.ripple', {
+			compile(source, '/src/App.rsrx', {
 				mode: 'client',
 				compat_kinds: [],
 			}),
@@ -29,7 +29,7 @@ describe('compiler tsx compat configuration', () => {
 
 	it('allows tsx compat kinds that are configured', () => {
 		expect(() =>
-			compile(source, '/src/App.ripple', {
+			compile(source, '/src/App.rsrx', {
 				mode: 'client',
 				compat_kinds: ['react'],
 			}),

package/tests/utils/vite-plugin-config.test.js

@@ -32,7 +32,7 @@ describe('vite-plugin-ripple config resolution', () => {
 				routes: [
 					new RenderRoute({
 						path: '/',
-						entry: '/src/App.ripple',
+						entry: '/src/App.rsrx',
 					}),
 				],
 			},

package/tests/utils/vite-plugin-hmr.test.js

@@ -28,7 +28,7 @@ describe('vite-plugin-ripple hotUpdate', () => {
 				},
 			},
 			{
-				file: '/workspace/src/non-component.ripple',
+				file: '/workspace/src/non-component.rsrx',
 				modules: [{ id: 'client:non-component', isSelfAccepting: false }],
 				server: {
 					environments: {
@@ -43,8 +43,8 @@ describe('vite-plugin-ripple hotUpdate', () => {
 			},
 		);
 
-		expect(transform_request).toHaveBeenCalledWith('/src/non-component.ripple');
-		expect(get_ssr_modules).toHaveBeenCalledWith('/workspace/src/non-component.ripple');
+		expect(transform_request).toHaveBeenCalledWith('/src/non-component.rsrx');
+		expect(get_ssr_modules).toHaveBeenCalledWith('/workspace/src/non-component.rsrx');
 		expect(invalidate_ssr_module).toHaveBeenCalledTimes(2);
 		expect(send_hot_update).toHaveBeenCalledWith({ type: 'full-reload' });
 		expect(result).toEqual([]);
@@ -74,7 +74,7 @@ describe('vite-plugin-ripple hotUpdate', () => {
 				},
 			},
 			{
-				file: '/workspace/src/component.ripple',
+				file: '/workspace/src/component.rsrx',
 				modules: [{ id: 'client:component', isSelfAccepting: true }],
 				server: {
 					environments: {
@@ -89,7 +89,7 @@ describe('vite-plugin-ripple hotUpdate', () => {
 			},
 		);
 
-		expect(transform_request).toHaveBeenCalledWith('/src/component.ripple');
+		expect(transform_request).toHaveBeenCalledWith('/src/component.rsrx');
 		expect(get_ssr_modules).not.toHaveBeenCalled();
 		expect(invalidate_ssr_module).not.toHaveBeenCalled();
 		expect(send_hot_update).not.toHaveBeenCalled();

package/tsconfig.json

@@ -26,7 +26,11 @@
     "./*.js",
     "./src/",
     "./tests/**/*.test.ripple",
+    "./tests/**/*.test.rsrx",
+    "./tests/**/*.test.tsrx",
     "./tests/**/*.ripple",
+    "./tests/**/*.rsrx",
+    "./tests/**/*.tsrx",
     "./tests/**/*.d.ts",
     "./tests/**/*.js"
   ],