ripple 0.3.12 → 0.3.13

package/tests/hydration/compiled/server/try.js

@@ -1,140 +1,151 @@
 // @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
-export async function AsyncListInTryPending(__output) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<!--[-->');
+import { trackAsync } from 'ripple/server';
 
-		var __pending_pos = __output.body.length;
+export function AsyncListInTryPending() {
+	_$_.push_component();
 
-		__output.push('<p');
-		__output.push(' class="loading"');
-		__output.push('>');
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
 
-		{
-			__output.push('loading...');
-		}
+			_$_.regular_block(() => {
+				{
+					const comp = AsyncList;
+					const args = [{}];
 
-		__output.push('</p>');
+					comp(...args);
+				}
+			});
 
-		await _$_.async(async () => {
-			__output.body = __output.body.slice(0, __pending_pos);
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
 
-			{
-				const comp = AsyncList;
-				const args = [__output, {}];
+			_$_.regular_block(() => {
+				_$_.output_push('<p');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
 
-				await comp(...args);
-			}
-		});
+				{
+					_$_.output_push('loading...');
+				}
 
-		__output.push('<!--]-->');
-		_$_.pop_component();
-	});
-}
+				_$_.output_push('</p>');
+			});
 
-AsyncListInTryPending.async = true;
+			_$_.output_push('<!--]-->');
+		}
+	);
 
-async function AsyncList(__output) {
-	return _$_.async(async () => {
-		_$_.push_component();
+	_$_.pop_component();
+}
 
-		let items = await Promise.resolve(['alpha', 'beta', 'gamma']);
+function AsyncList() {
+	_$_.push_component();
 
-		if (_$_.aborted()) return;
+	let lazy = _$_.track_async(() => Promise.resolve(['alpha', 'beta', 'gamma']));
 
-		__output.push('<ul');
-		__output.push(' class="items"');
-		__output.push('>');
+	_$_.regular_block(() => {
+		_$_.output_push('<ul');
+		_$_.output_push(' class="items"');
+		_$_.output_push('>');
 
 		{
-			__output.push('<!--[-->');
+			_$_.output_push('<!--[-->');
 
-			for (let item of items) {
-				__output.push('<li');
-				__output.push('>');
+			for (let item of _$_.get(lazy)) {
+				_$_.output_push('<li');
+				_$_.output_push('>');
 
 				{
-					__output.push(_$_.escape(item));
+					_$_.output_push(_$_.escape(item));
 				}
 
-				__output.push('</li>');
+				_$_.output_push('</li>');
 			}
 
-			__output.push('<!--]-->');
+			_$_.output_push('<!--]-->');
 		}
 
-		__output.push('</ul>');
-		_$_.pop_component();
+		_$_.output_push('</ul>');
 	});
+
+	_$_.pop_component();
 }
 
-AsyncList.async = true;
+export function AsyncTryWithLeadingSibling() {
+	_$_.push_component();
 
-export async function AsyncTryWithLeadingSibling(__output) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<div');
-		__output.push(' class="before"');
-		__output.push('>');
+	_$_.regular_block(() => {
+		_$_.output_push('<div');
+		_$_.output_push(' class="before"');
+		_$_.output_push('>');
 
 		{
-			__output.push('before');
+			_$_.output_push('before');
 		}
 
-		__output.push('</div>');
-		__output.push('<!--[-->');
-
-		var __pending_pos_1 = __output.body.length;
+		_$_.output_push('</div>');
+	});
 
-		__output.push('<div');
-		__output.push(' class="loading"');
-		__output.push('>');
+	_$_.try_block(
+		() => {
+			_$_.output_push('<!--[-->');
 
-		{
-			__output.push('loading async content');
-		}
+			_$_.regular_block(() => {
+				{
+					const comp = AsyncContent;
+					const args = [{}];
 
-		__output.push('</div>');
+					comp(...args);
+				}
+			});
 
-		await _$_.async(async () => {
-			__output.body = __output.body.slice(0, __pending_pos_1);
+			_$_.output_push('<!--]-->');
+		},
+		null,
+		() => {
+			_$_.output_push('<!--[-->');
 
-			{
-				const comp = AsyncContent;
-				const args = [__output, {}];
+			_$_.regular_block(() => {
+				_$_.output_push('<div');
+				_$_.output_push(' class="loading"');
+				_$_.output_push('>');
 
-				await comp(...args);
-			}
-		});
+				{
+					_$_.output_push('loading async content');
+				}
 
-		__output.push('<!--]-->');
-		_$_.pop_component();
-	});
-}
+				_$_.output_push('</div>');
+			});
 
-AsyncTryWithLeadingSibling.async = true;
+			_$_.output_push('<!--]-->');
+		}
+	);
 
-async function AsyncContent(__output) {
-	return _$_.async(async () => {
-		_$_.push_component();
+	_$_.pop_component();
+}
 
-		let value = await Promise.resolve('ready');
+function AsyncContent() {
+	_$_.push_component();
 
-		if (_$_.aborted()) return;
+	let lazy_1 = _$_.track_async(() => Promise.resolve('ready'));
 
-		__output.push('<div');
-		__output.push(' class="resolved"');
-		__output.push('>');
+	_$_.regular_block(() => {
+		_$_.output_push('<div');
+		_$_.output_push(' class="resolved"');
+		_$_.output_push('>');
 
 		{
-			__output.push(_$_.escape(value));
+			_$_.output_push(_$_.escape(_$_.get(lazy_1)));
 		}
 
-		__output.push('</div>');
-		_$_.pop_component();
+		_$_.output_push('</div>');
 	});
-}
 
-AsyncContent.async = true;
+	_$_.pop_component();
+}

package/tests/hydration/components/{mixed-control-flow.ripple → mixed-control-flow.rsrx}

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { track, trackAsync } from 'ripple';
 
 export component MixedControlFlowStatic() {
 	const rows = [
@@ -109,6 +109,6 @@ export component MixedControlFlowAsyncPending() {
 }
 
 component AsyncRow({ label }: { label: string }) {
-	let value = await Promise.resolve(label);
+	let &[value] = trackAsync(() => Promise.resolve(label));
 	<div class="resolved-row">{value}</div>
 }

package/tests/hydration/components/{try.ripple → try.rsrx}

@@ -1,3 +1,5 @@
+import { trackAsync } from 'ripple';
+
 export component AsyncListInTryPending() {
 	try {
 		<AsyncList />
@@ -7,7 +9,7 @@ export component AsyncListInTryPending() {
 }
 
 component AsyncList() {
-	let items = await Promise.resolve(['alpha', 'beta', 'gamma']);
+	let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
 
 	<ul class="items">
 		for (let item of items) {
@@ -26,6 +28,6 @@ export component AsyncTryWithLeadingSibling() {
 }
 
 component AsyncContent() {
-	let value = await Promise.resolve('ready');
+	let &[value] = trackAsync(() => Promise.resolve('ready'));
 	<div class="resolved">{value}</div>
 }

package/tests/hydration/mixed-control-flow.test.js

@@ -54,6 +54,20 @@ describe('hydration > mixed control flow blocks', () => {
 		);
 	});
 
+	it('hydrates async try with resolved server content in mixed control flow', async () => {
+		await hydrateComponent(
+			ServerComponents.MixedControlFlowAsyncPending,
+			ClientComponents.MixedControlFlowAsyncPending,
+		);
+
+		// Server resolves trackAsync fully, so resolved content is in the SSR HTML
+		expect(container.querySelector('.before')?.textContent).toBe('before');
+		expect(container.querySelector('.resolved-row')?.textContent).toBe('row-1');
+		expect(container.querySelector('.pending-row')).toBeNull();
+	});
+});
+
+describe.skip('streaming ssr > mixed control flow async pending', () => {
 	it('hydrates async pending path in mixed control flow without losing leading structure', async () => {
 		await hydrateComponent(
 			ServerComponents.MixedControlFlowAsyncPending,

package/tests/hydration/nested-control-flow.test.js

@@ -99,18 +99,10 @@ describe('hydration > nested control flow (granular)', () => {
 
 	// ── switch + try (no for/if — baseline for try cursor behaviour) ─────────────
 	describe('switch + try', () => {
-		it('shows pending fallback immediately after hydration', async () => {
-			await hydrateComponent(ServerComponents.SwitchTry, ClientComponents.SwitchTry);
-
-			// Server rendered the pending content; client should retain it during hydration
-			expect(container.querySelector('.pending-a')?.textContent).toBe('A pending');
-		});
-
-		it('shows resolved content after async settles', async () => {
+		it('hydrates resolved content from server', async () => {
 			await hydrateComponent(ServerComponents.SwitchTry, ClientComponents.SwitchTry);
 
-			// After the promise resolves the pending fallback should be replaced
-			await Promise.resolve();
+			// Server resolves trackAsync fully, so resolved content is in the SSR HTML
 			expect(container.querySelector('.resolved-a')?.textContent).toBe('A resolved');
 			expect(container.querySelector('.pending-a')).toBeNull();
 		});
@@ -118,18 +110,9 @@ describe('hydration > nested control flow (granular)', () => {
 
 	// ── for + switch + try (no if) ────────────────────────────────────────────────
 	describe('for + switch + try', () => {
-		it('shows pending fallback for each item immediately after hydration', async () => {
-			await hydrateComponent(ServerComponents.ForSwitchTry, ClientComponents.ForSwitchTry);
-
-			// Server rendered pending fallbacks for both items
-			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
-			expect(pending).toEqual(['pending 1', 'pending 2']);
-		});
-
-		it('shows resolved content for each item after async settles', async () => {
+		it('hydrates resolved content for each item from server', async () => {
 			await hydrateComponent(ServerComponents.ForSwitchTry, ClientComponents.ForSwitchTry);
 
-			await Promise.resolve();
 			const items = Array.from(container.querySelectorAll('.item')).map((n) => n.textContent);
 			expect(items).toEqual(['A-1', 'B-2']);
 		});
@@ -137,18 +120,9 @@ describe('hydration > nested control flow (granular)', () => {
 
 	// ── for + if + try (no switch) ────────────────────────────────────────────────
 	describe('for + if + try', () => {
-		it('shows pending fallback for each item immediately after hydration', async () => {
-			await hydrateComponent(ServerComponents.ForIfTry, ClientComponents.ForIfTry);
-
-			// Server rendered pending fallbacks for both items
-			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
-			expect(pending).toEqual(['pending 1', 'pending 2']);
-		});
-
-		it('shows resolved content for each item after async settles', async () => {
+		it('hydrates resolved content for each item from server', async () => {
 			await hydrateComponent(ServerComponents.ForIfTry, ClientComponents.ForIfTry);
 
-			await Promise.resolve();
 			const items = Array.from(container.querySelectorAll('.item')).map((n) => n.textContent);
 			expect(items).toEqual(['item-1', 'item-2']);
 		});
@@ -156,48 +130,76 @@ describe('hydration > nested control flow (granular)', () => {
 
 	// ── for + if + switch + try ───────────────────────────────────────────────────
 	describe('for + if + switch + try', () => {
-		it('shows pending fallback for single-item for+if+switch+try immediately after hydration', async () => {
+		it('hydrates resolved content for single-item for+if+switch+try', async () => {
 			await hydrateComponent(
 				ServerComponents.ForIfSwitchTrySingle,
 				ClientComponents.ForIfSwitchTrySingle,
 			);
 
-			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
-			expect(pending).toEqual(['pending 1']);
+			const items = Array.from(container.querySelectorAll('.item')).map((n) => n.textContent);
+			expect(items).toEqual(['A-1']);
 		});
 
-		it('shows resolved content for single-item for+if+switch+try after async settles', async () => {
+		it('hydrates resolved content for two-item for+if+switch+try (cursor must advance correctly between items)', async () => {
 			await hydrateComponent(
-				ServerComponents.ForIfSwitchTrySingle,
-				ClientComponents.ForIfSwitchTrySingle,
+				ServerComponents.ForIfSwitchTryMulti,
+				ClientComponents.ForIfSwitchTryMulti,
 			);
 
-			await Promise.resolve();
 			const items = Array.from(container.querySelectorAll('.item')).map((n) => n.textContent);
-			expect(items).toEqual(['A-1']);
+			expect(items).toEqual(['A-1', 'B-2']);
+			expect(container.querySelector('.item-1.kind-a')).not.toBeNull();
+			expect(container.querySelector('.item-2.kind-b')).not.toBeNull();
 		});
+	});
+});
 
-		it('shows pending fallback for two-item for+if+switch+try immediately after hydration', async () => {
+describe.skip('streaming ssr > nested control flow with try/pending', () => {
+	describe('switch + try', () => {
+		it('shows pending fallback immediately after hydration', async () => {
+			await hydrateComponent(ServerComponents.SwitchTry, ClientComponents.SwitchTry);
+
+			expect(container.querySelector('.pending-a')?.textContent).toBe('A pending');
+		});
+	});
+
+	describe('for + switch + try', () => {
+		it('shows pending fallback for each item immediately after hydration', async () => {
+			await hydrateComponent(ServerComponents.ForSwitchTry, ClientComponents.ForSwitchTry);
+
+			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
+			expect(pending).toEqual(['pending 1', 'pending 2']);
+		});
+	});
+
+	describe('for + if + try', () => {
+		it('shows pending fallback for each item immediately after hydration', async () => {
+			await hydrateComponent(ServerComponents.ForIfTry, ClientComponents.ForIfTry);
+
+			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
+			expect(pending).toEqual(['pending 1', 'pending 2']);
+		});
+	});
+
+	describe('for + if + switch + try', () => {
+		it('shows pending fallback for single-item for+if+switch+try immediately after hydration', async () => {
 			await hydrateComponent(
-				ServerComponents.ForIfSwitchTryMulti,
-				ClientComponents.ForIfSwitchTryMulti,
+				ServerComponents.ForIfSwitchTrySingle,
+				ClientComponents.ForIfSwitchTrySingle,
 			);
 
 			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
-			expect(pending).toEqual(['pending 1', 'pending 2']);
+			expect(pending).toEqual(['pending 1']);
 		});
 
-		it('shows resolved content for two-item for+if+switch+try after async settles (cursor must advance correctly between items)', async () => {
+		it('shows pending fallback for two-item for+if+switch+try immediately after hydration', async () => {
 			await hydrateComponent(
 				ServerComponents.ForIfSwitchTryMulti,
 				ClientComponents.ForIfSwitchTryMulti,
 			);
 
-			await Promise.resolve();
-			const items = Array.from(container.querySelectorAll('.item')).map((n) => n.textContent);
-			expect(items).toEqual(['A-1', 'B-2']);
-			expect(container.querySelector('.item-1.kind-a')).not.toBeNull();
-			expect(container.querySelector('.item-2.kind-b')).not.toBeNull();
+			const pending = Array.from(container.querySelectorAll('.pending')).map((n) => n.textContent);
+			expect(pending).toEqual(['pending 1', 'pending 2']);
 		});
 	});
 });

package/tests/hydration/try.test.js

@@ -6,6 +6,31 @@ import * as ServerComponents from './compiled/server/try.js';
 import * as ClientComponents from './compiled/client/try.js';
 
 describe('hydration > try blocks (async)', () => {
+	it('hydrates async try with resolved server content', async () => {
+		await hydrateComponent(
+			ServerComponents.AsyncListInTryPending,
+			ClientComponents.AsyncListInTryPending,
+		);
+
+		// Server resolves trackAsync fully, so the resolved list is in the SSR HTML
+		const items = Array.from(container.querySelectorAll('.items li')).map((n) => n.textContent);
+		expect(items).toEqual(['alpha', 'beta', 'gamma']);
+		expect(container.querySelector('.loading')).toBeNull();
+	});
+
+	it('hydrates async try with leading sibling and resolved content', async () => {
+		await hydrateComponent(
+			ServerComponents.AsyncTryWithLeadingSibling,
+			ClientComponents.AsyncTryWithLeadingSibling,
+		);
+
+		expect(container.querySelector('.before')?.textContent).toBe('before');
+		expect(container.querySelector('.resolved')?.textContent).toBe('ready');
+		expect(container.querySelector('.loading')).toBeNull();
+	});
+});
+
+describe.skip('streaming ssr > try blocks (async pending)', () => {
 	it('hydrates async try/pending and retains pending fallback', async () => {
 		await hydrateComponent(
 			ServerComponents.AsyncListInTryPending,

package/tests/server/__snapshots__/compiler.test.ripple.snap

@@ -64,38 +64,6 @@ const ErrorMap = (Map);
 const errorMap = new ErrorMap();"
 `;
 
-exports[`compiler typescript tests > compiles imported component with conditional async in SSR 1`] = `
-"import * as _$_ from 'ripple/internal/server';
-
-import { ChildComponent } from './Child.ripple';
-
-export async function App(__output) {
-	return _$_.async(async () => {
-		_$_.push_component();
-		__output.push('<div');
-		__output.push('>');
-
-		{
-			{
-				const comp = ChildComponent;
-				const args = [__output, { message: "hello" }];
-
-				if (comp?.async) {
-					await comp(...args);
-				} else if (comp) {
-					comp(...args);
-				}
-			}
-		}
-
-		__output.push('</div>');
-		_$_.pop_component();
-	});
-}
-
-App.async = true;"
-`;
-
 exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
 "import * as _$_ from 'ripple/internal/server';
 

package/tests/server/__snapshots__/compiler.test.rsrx.snap

@@ -0,0 +1,95 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler server block tests > compiles server block with with only supported types 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+export const _$_server_$_ = (() => {
+	var _$_server_$_ = {};
+
+	function something() {
+		return 'unexported function';
+	}
+
+	_$_server_$_.fetchUser = async function fetchUser(id) {
+		const response = await fetch(\`/api/user/\${id}\`);
+		const data = await response.json();
+
+		return data;
+	};
+
+	const fetchUserAlias = fetchUser;
+	const AliasForFetchUserAlias = fetchUserAlias;
+
+	{
+		_$_server_$_.AnotherAlias = AliasForFetchUserAlias;
+	}
+
+	{
+		_$_server_$_.func = function test() {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func2 = function () {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.func3 = () => {
+			return 'test';
+		};
+	}
+
+	{
+		_$_server_$_.fetchUserAlias = fetchUserAlias;
+		_$_server_$_.AliasForFetchUserAlias = AliasForFetchUserAlias;
+	}
+
+	return _$_server_$_;
+})();"
+`;
+
+exports[`compiler typescript tests > compiles TSInstantiationExpression 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+function makeBox(value) {
+	return { value };
+}
+
+const makeStringBox = (makeBox);
+const stringBox = makeStringBox('abc');
+const ErrorMap = (Map);
+const errorMap = new ErrorMap();"
+`;
+
+exports[`compiler typescript tests > removes class TypeScript syntax from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class PrintEvent {
+	text;
+
+	constructor(text) {
+		this.text = text;
+	}
+}"
+`;
+
+exports[`compiler typescript tests > removes class extends type arguments from JS output 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+class StringMap extends Map {
+	constructor() {
+		super();
+	}
+}"
+`;
+
+exports[`compiler typescript tests > removes type assertions from function parameters and leaves default values 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+function getString(e = 'test') {
+	return e;
+}"
+`;

package/tests/server/{compiler.test.ripple → compiler.test.rsrx}

@@ -13,23 +13,6 @@ const errorMap = new ErrorMap();`;
 		expect(result.js.code).toMatchSnapshot();
 	});
 
-	it('compiles imported component with conditional async in SSR', () => {
-		const source = `import { ChildComponent } from './Child.ripple';
-
-export component App() {
-	<div>
-		<ChildComponent message="hello" />
-	</div>
-}`;
-
-		const result = compile(source, 'test.ripple', { mode: 'server' });
-
-		// Should use if-statement instead of ternary to avoid parser issues
-		expect(result.js.code).toContain('if (comp?.async)');
-		expect(result.js.code).toContain('await comp(...args)');
-		expect(result.js.code).toMatchSnapshot();
-	});
-
 	it('removes type assertions from function parameters and leaves default values', () => {
 		const source = `
 function getString(e: string = 'test') {

package/tests/server/{html-nesting-validation.test.ripple → html-nesting-validation.test.rsrx}

@@ -1,17 +1,17 @@
 import type { MockInstance } from 'vitest';
-import { push_element, pop_element, reset_element_state } from 'ripple/internal/server';
+import { push_element, pop_element, reset_state } from 'ripple/internal/server';
 
 describe('HTML nesting validation', () => {
 	let consoleErrorSpy: MockInstance<typeof console.error>;
 
 	beforeEach(() => {
-		reset_element_state();
+		reset_state();
 		consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 	});
 
 	afterEach(() => {
 		consoleErrorSpy.mockRestore();
-		reset_element_state();
+		reset_state();
 	});
 
 	describe('push_element and pop_element runtime', () => {