ripple 0.3.12 → 0.3.14

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...');
-	});
-});