ripple 0.3.11 → 0.3.13

package/types/index.d.ts

@@ -141,18 +141,21 @@ declare global {
 
 export function createRefKey(): symbol;
 
+export const UNINITIALIZED: unique symbol;
+export const DERIVED_UPDATED: unique symbol;
+export const SUSPENSE_PENDING: unique symbol;
+export const SUSPENSE_REJECTED: unique symbol;
+
 // Base Tracked interface - all tracked values have a '#v' property containing the actual value
 interface TrackedBase<V> {
 	'#v': V;
 	value: V;
 }
-
 // Augment Tracked to be callable when V is a Component
 // This allows <@Something /> to work in JSX when Something is Tracked<Component>
 interface TrackedCallable<V> {
 	(props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
 }
-
 // Supports indexed access: track(0)[0] → value, track(0)[1] → Tracked<V>
 // And destructuring `const [one, two] = track(0);`
 export type Tracked<V> = [V, Tracked<V>] & TrackedBase<V> & TrackedCallable<V>;
@@ -188,6 +191,14 @@ export function track<V>(
 // Overload for non-function values
 export function track<V>(value?: V, get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
+export function trackAsync<V>(
+	value: () => PromiseLike<V> | { promise: PromiseLike<V>; abortController: AbortController },
+): Tracked<V>;
+
+export function trackPending<V>(value: Tracked<V> | (() => any)): boolean;
+
+export function peek<V>(tracked: Tracked<V>): V;
+
 export interface AddEventOptions extends ExtendedEventOptions {
 	customName?: string;
 }
@@ -531,24 +542,3 @@ export function bindFiles<V extends FileList>(
 	tracked: Tracked<V | null | undefined> | GetFunction<V | null | undefined>,
 	setter?: SetFunction<V>,
 ): (node: HTMLInputElement) => void;
-
-type ServerBlock = {};
-
-export interface RippleNamespace {
-	array: RippleArrayCallable;
-	object: RippleObjectCallable;
-	context: ContextCallable;
-	date: RippleDateCallable;
-	effect: typeof effect;
-	map: RippleMapCallable;
-	mediaQuery: MediaQueryCallable;
-	set: RippleSetCallable;
-	url: RippleURLCallable;
-	urlSearchParams: RippleURLSearchParamsCallable;
-	untrack: typeof untrack;
-	track: typeof track;
-	style: Record<string, string>;
-	server: ServerBlock;
-}
-
-export declare const ripple_namespace: RippleNamespace;

package/types/server.d.ts

@@ -1,5 +1,4 @@
-import type { Props } from '#public';
-import type { Readable } from 'node:stream';
+import type { Component } from '#public';
 
 // Re-export runtime types for server-compiled components
 export {
@@ -17,28 +16,56 @@ export {
 	RippleURLSearchParams,
 } from './index.js';
 
-export interface SSRRenderOutput {
+export interface RenderResult {
 	head: string;
 	body: string;
 	css: Set<string>;
+	topLevelError?: Error | null;
+}
+
+export interface RenderStreamResult {
+	stream: StreamSink;
+	topLevelError?: Error | null;
+}
+
+export interface StreamSink {
 	push(chunk: string): void;
-	register_css(hash: string): void;
+	close(): void;
+	error(reason: unknown): void;
 }
 
-export interface SSRComponent {
-	(output: SSRRenderOutput, props?: Props): void | Promise<void>;
-	async?: boolean;
+export type WebStream = ReadableStream<Uint8Array>;
+
+export interface Stream {
+	controller: ReadableStreamDefaultController<Uint8Array>;
+	textEncoder: TextEncoder;
+	stream: WebStream;
+	sink: StreamSink;
 }
 
-export interface SSRRenderResult {
-	head: string;
-	body: string;
-	css: Set<string>;
+export interface BaseRenderOptions {
+	stream?: StreamSink;
+	// defaults to true
+	// set to false to add more content
+	closeStream?: boolean;
+}
+
+export interface StreamingRenderOptions extends BaseRenderOptions {
+	stream: StreamSink;
 }
 
-export type SSRRender = (component: SSRComponent) => Promise<SSRRenderResult>;
-export type render = (component: SSRComponent) => Promise<SSRRenderResult>;
-export type renderToStream = (component: SSRComponent) => Readable;
+export interface RenderOptions extends BaseRenderOptions {
+	stream?: undefined;
+}
+
+export declare function create_ssr_stream(): Stream;
+
+export declare function render(
+	component: Component,
+	options?: RenderOptions,
+): Promise<RenderResult>;
 
-export const render: render;
-export const renderToStream: renderToStream;
+export declare function render(
+	component: Component,
+	options: StreamingRenderOptions,
+): Promise<RenderStreamResult>;

package/tests/client/_etc.test.ripple

@@ -1,5 +0,0 @@
-// This file is for tests that don't fit anywhere else
-
-describe('etc', () => {
-	it.skip('this is here so the empty test suite does not fail');
-});

package/tests/client/async-suspend.test.ripple

@@ -1,94 +0,0 @@
-import { flushSync, track } from 'ripple';
-
-describe('async suspense', () => {
-	it('hides child content during re-suspension when tracked dependency changes', async () => {
-		let resolve_fn: (() => void) | null = null;
-
-		component Child({ countTracked }: { countTracked: any }) {
-			await track(() => {
-				countTracked.value;
-				return new Promise<void>((resolve) => {
-					resolve_fn = resolve;
-				});
-			});
-
-			<div class="child-content">{'child content'}</div>
-		}
-
-		component App() {
-			let &[count, countTracked] = track(0);
-
-			try {
-				<Child {countTracked} />
-			} pending {
-				<div class="pending">{'pending...'}</div>
-			}
-
-			<button onClick={() => count++}>{'Increment'}</button>
-		}
-
-		render(App);
-
-		// Initial state: should show pending
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-		expect(container.innerHTML).toContain('pending...');
-		expect(container.innerHTML).not.toContain('child content');
-
-		// Resolve the first promise
-		(resolve_fn as () => void)?.();
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		// After resolution: should show child content, not pending
-		expect(container.innerHTML).toContain('child content');
-		expect(container.innerHTML).not.toContain('pending...');
-
-		// Now trigger re-suspension by changing count
-		const button = container.querySelector('button');
-		button?.click();
-		flushSync();
-
-		// Wait for microtask to process
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		// BUG: During re-suspension, we should only see pending, not child content
-		// The child content should be hidden when the new promise is pending
-		expect(container.innerHTML).toContain('pending...');
-		expect(container.innerHTML).not.toContain('child content');
-	});
-
-	it('shows pending UI immediately when child suspends', async () => {
-		component Child() {
-			await new Promise((resolve) => setTimeout(resolve, 50));
-			<div class="child">{'loaded'}</div>
-		}
-
-		component App() {
-			try {
-				<Child />
-			} pending {
-				<div class="pending">{'loading...'}</div>
-			}
-		}
-
-		render(App);
-
-		// Wait for microtask
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		// Should show pending, not child content
-		expect(container.innerHTML).toContain('loading...');
-		expect(container.innerHTML).not.toContain('loaded');
-
-		// Wait for child to resolve
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		flushSync();
-
-		// Should show child content, not pending
-		expect(container.innerHTML).toContain('loaded');
-		expect(container.innerHTML).not.toContain('loading...');
-	});
-});

package/tests/client/try.test.ripple

@@ -1,196 +0,0 @@
-import { RippleArray, bindValue, flushSync, track } from 'ripple';
-
-describe('try block with catch and pending', () => {
-	it('catch block works when component throws before await with pending block', async () => {
-		component App() {
-			try {
-				<ThrowingChild />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
-		}
-
-		component ThrowingChild() {
-			throw new Error('sync error');
-			let data = await Promise.resolve('hello');
-			<p>{data}</p>
-		}
-
-		render(App);
-
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		expect(container.innerHTML).toContain('caught error');
-		expect(container.innerHTML).not.toContain('loading...');
-	});
-
-	it('catch block works when component throws after await with pending block', async () => {
-		component App() {
-			try {
-				<ThrowingAfterAwait />
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught error'}</p>
-			}
-		}
-
-		component ThrowingAfterAwait() {
-			let data = await Promise.resolve('hello');
-			throw new Error('error after await');
-			<p>{data}</p>
-		}
-
-		render(App);
-
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		expect(container.innerHTML).toContain('caught error');
-		expect(container.innerHTML).not.toContain('loading...');
-	});
-
-	it('catch block works with try/catch/pending when async body rejects', async () => {
-		component App() {
-			try {
-				let data = await Promise.reject(new Error('rejected'));
-				<p>{data}</p>
-			} pending {
-				<p>{'loading...'}</p>
-			} catch (err) {
-				<p>{'caught rejection'}</p>
-			}
-		}
-
-		render(App);
-
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		expect(container.innerHTML).toContain('caught rejection');
-		expect(container.innerHTML).not.toContain('loading...');
-	});
-});
-
-describe('try block', () => {
-	it(
-		'does not compile ref binds as async callbacks inside try/pending async branches',
-		async () => {
-			component App() {
-				try {
-					<Child />
-				} pending {
-					<p>{'loading...'}</p>
-				}
-			}
-
-			component Child() {
-				let &[value, valueTracked] = track(1);
-				await Promise.resolve(value + 1);
-
-				<input type="number" {ref bindValue(valueTracked)} />
-			}
-
-			render(App);
-
-			await new Promise((resolve) => setTimeout(resolve, 0));
-			flushSync();
-
-			const input = container.querySelector('input') as HTMLInputElement | null;
-			expect(input?.value).toBe('1');
-			expect(container.innerHTML).not.toContain('loading...');
-		},
-	);
-
-	it('does not crash when async component is used inside try/pending', async () => {
-		component App() {
-			try {
-				<AsyncChild />
-			} pending {
-				<p>{'loading...'}</p>
-			}
-		}
-
-		component AsyncChild() {
-			let data = await Promise.resolve(['a', 'b', 'c']);
-
-			<ul>
-				for (let item of data) {
-					<li>{item}</li>
-				}
-			</ul>
-		}
-
-		render(App);
-
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		const items = container.querySelectorAll('li');
-		expect(items.length).toBe(3);
-		expect(items[0].textContent).toBe('a');
-		expect(items[1].textContent).toBe('b');
-		expect(items[2].textContent).toBe('c');
-	});
-
-	it(
-		'does not crash when async component with tracked state is used inside try/pending',
-		async () => {
-			component App() {
-				let query = track('');
-
-				try {
-					<FilteredList {query} />
-				} pending {
-					<p>{'loading...'}</p>
-				}
-			}
-
-			component FilteredList({ query }: { query: any }) {
-				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
-				let list = RippleArray.from(items);
-				let &[filtered] = track(() => list.filter((item: string) => item.includes(query.value)));
-
-				<ul>
-					for (let item of filtered) {
-						<li>{item}</li>
-					}
-				</ul>
-			}
-
-			render(App);
-
-			await new Promise((resolve) => setTimeout(resolve, 0));
-			flushSync();
-
-			const listItems = container.querySelectorAll('li');
-			expect(listItems.length).toBe(3);
-		},
-	);
-
-	it('if test condition does not become async within try/pending', async () => {
-		component App() {
-			try {
-				let items = await Promise.resolve(['apple', 'banana', 'cherry']);
-
-				if (items.includes('not-in-list')) {
-					<p>{'not-in-list is in the list!'}</p>
-				} else {
-					<p>{'not-in-list is not in the list.'}</p>
-				}
-			} pending {
-				<p>{'loading...'}</p>
-			}
-		}
-
-		render(App);
-
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		flushSync();
-
-		expect(container.innerHTML).toContain('not-in-list is not in the list.');
-	});
-});

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

@@ -1,68 +0,0 @@
-import { renderToStream } from 'ripple/server';
-
-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.ripple

@@ -1,82 +0,0 @@
-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 = await 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 = await 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 = await 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 = await 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...');
-	});
-});