ripple 0.2.152 → 0.2.153

package/tests/server/for.test.ripple

@@ -12,7 +12,9 @@ describe('for statements in SSR', () => {
 		}
 
 		const { body } = await render(App);
-		expect(body).toBe('<div class="Item 1">Item 1</div><div class="Item 2">Item 2</div><div class="Item 3">Item 3</div>');
+		expect(body).toBe(
+			'<div class="Item 1">Item 1</div><div class="Item 2">Item 2</div><div class="Item 3">Item 3</div>',
+		);
 	});
 
 	it('renders nested for...of loops', async () => {
@@ -20,12 +22,12 @@ describe('for statements in SSR', () => {
 			const groups = [
 				{
 					name: 'Group 1',
-					items: ['Item 1.1', 'Item 1.2']
+					items: ['Item 1.1', 'Item 1.2'],
 				},
 				{
 					name: 'Group 2',
-					items: ['Item 2.1', 'Item 2.2']
-				}
+					items: ['Item 2.1', 'Item 2.2'],
+				},
 			];
 
 			for (const group of groups) {
@@ -39,6 +41,8 @@ describe('for statements in SSR', () => {
 		}
 
 		const { body } = await render(App);
-		expect(body).toBe('<h1>Group 1</h1><ul><li>Item 1.1</li><li>Item 1.2</li></ul><h1>Group 2</h1><ul><li>Item 2.1</li><li>Item 2.2</li></ul>');
+		expect(body).toBe(
+			'<h1>Group 1</h1><ul><li>Item 1.1</li><li>Item 1.2</li></ul><h1>Group 2</h1><ul><li>Item 2.1</li><li>Item 2.2</li></ul>',
+		);
 	});
 });

package/tests/server/if.test.ripple

@@ -83,4 +83,4 @@ describe('if statements in SSR', () => {
 		const { body } = await render(App);
 		expect(body).toBe('<div>Outer true, Inner false</div>');
 	});
-});
+});

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

@@ -0,0 +1,67 @@
+import { test } from 'vitest';
+import { renderToStream } from 'ripple/server';
+import { Readable } from '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);
+	});
+	console.log(result)
+	expect(result).toBe('<div>Loading...</div><div>Data: resolved</div>');
+});

package/types/server.d.ts

@@ -1,4 +1,5 @@
-import type { Props } from '#public'
+import type { Props } from '#public';
+import type { Readable } from 'node:stream';
 
 export interface SSRRenderOutput {
 	head: string;
@@ -21,6 +22,6 @@ export interface SSRRenderResult {
 
 export type SSRRender = (component: SSRComponent) => Promise<SSRRenderResult>;
 
-export declare function render(
-	component: SSRComponent,
-): Promise<SSRRenderResult>;
+export declare function render(component: SSRComponent): Promise<SSRRenderResult>;
+
+export declare function renderToStream(component: SSRComponent): Readable;