ripple 0.3.72 → 0.3.74

package/tests/hydration/components/return.tsrx

@@ -1,19 +1,17 @@
-export function GuardReturnRenders() {
+export function GuardReturnRenders() @{
 	const ready = true;
 	if (!ready) {
 		return null;
 	}
-
-	return <><div class="ready">{'ready'}</div></>;
+	<div class="ready">{'ready'}</div>
 }
 
-export function GuardReturnNull() {
+export function GuardReturnNull() @{
 	const ready = false;
 	if (!ready) {
 		return null;
 	}
-
-	return <><div class="ready">{'ready'}</div></>;
+	<div class="ready">{'ready'}</div>
 }
 
 export function StringReturn() {

package/tests/hydration/components/switch.tsrx

@@ -1,24 +1,23 @@
 import { track } from 'ripple';
 
-export function SwitchStatic() {
-	return <>
-		const status: string = 'success';
-		switch (status) {
-			case 'success':
-				<div class="status-success">{'Success'}</div>
-				break;
-			case 'error':
-				<div class="status-error">{'Error'}</div>
-				break;
-			default:
-				<div class="status-unknown">{'Unknown'}</div>
+export function SwitchStatic() @{
+	const status: string = 'success';
+	@switch (status) {
+		@case 'success': {
+			<div class="status-success">{'Success'}</div>
 		}
-	</>;
+		@case 'error': {
+			<div class="status-error">{'Error'}</div>
+		}
+		@default: {
+			<div class="status-unknown">{'Unknown'}</div>
+		}
+	}
 }
 
-export function SwitchReactive() {
-	return <>
-		let &[status] = track<'a' | 'b' | 'c'>('a');
+export function SwitchReactive() @{
+	let &[status] = track<'a' | 'b' | 'c'>('a');
+	<>
 		<button
 			class="toggle"
 			onClick={() => {
@@ -26,39 +25,38 @@ export function SwitchReactive() {
 				else if (status === 'b') status = 'c';
 				else status = 'a';
 			}}
-		>
-			{'Toggle'}
-		</button>
-		switch (status) {
-			case 'a':
-				<div class="case-a">{'Case A'}</div>
-				break;
-			case 'b':
-				<div class="case-b">{'Case B'}</div>
-				break;
-			default:
+		>{'Toggle'}</button>
+		@switch (status) {
+			@case 'a': {
+				<div class="case-a">Case A</div>
+			}
+			@case 'b': {
+				<div class="case-b">Case B</div>
+			}
+			@default: {
 				<div class="case-c">{'Case C'}</div>
+			}
 		}
-	</>;
+	</>
 }
 
-export function SwitchFallthrough() {
-	return <>
-		const val: number = 1;
-		switch (val) {
-			case 1:
-			case 2:
-				<div class="case-1-2">{'1 or 2'}</div>
-				break;
-			default:
-				<div class="case-other">{'Other'}</div>
+export function SwitchFallthrough() @{
+	const val: number = 1;
+	@switch (val) {
+		@case 1: {
+		}
+		@case 2: {
+			<div class="case-1-2">{'1 or 2'}</div>
+		}
+		@default: {
+			<div class="case-other">{'Other'}</div>
 		}
-	</>;
+	}
 }
 
-export function SwitchNumericLevels() {
-	return <>
-		let &[level] = track<1 | 2 | 3>(1);
+export function SwitchNumericLevels() @{
+	let &[level] = track<1 | 2 | 3>(1);
+	<>
 		<button
 			class="level-toggle"
 			onClick={() => {
@@ -66,26 +64,24 @@ export function SwitchNumericLevels() {
 				else if (level === 2) level = 3;
 				else level = 1;
 			}}
-		>
-			{'Toggle Level'}
-		</button>
-		switch (level) {
-			case 1:
+		>{'Toggle Level'}</button>
+		@switch (level) {
+			@case 1: {
 				<div class="level-1">{'Level 1'}</div>
-				break;
-			case 2:
+			}
+			@case 2: {
 				<div class="level-2">{'Level 2'}</div>
-				break;
-			case 3:
+			}
+			@case 3: {
 				<div class="level-3">{'Level 3'}</div>
-				break;
+			}
 		}
-	</>;
+	</>
 }
 
-export function SwitchBlockScoped() {
-	return <>
-		let &[level] = track<1 | 2 | 3>(1);
+export function SwitchBlockScoped() @{
+	let &[level] = track<1 | 2 | 3>(1);
+	<>
 		<button
 			class="block-toggle"
 			onClick={() => {
@@ -93,26 +89,24 @@ export function SwitchBlockScoped() {
 				else if (level === 2) level = 3;
 				else level = 1;
 			}}
-		>
-			{'Toggle'}
-		</button>
-		switch (level) {
-			case 1:
+		>{'Toggle'}</button>
+		@switch (level) {
+			@case 1: {
 				<div class="block-1">{'Block 1'}</div>
-				break;
-			case 2:
+			}
+			@case 2: {
 				<div class="block-2">{'Block 2'}</div>
-				break;
-			case 3:
+			}
+			@case 3: {
 				<div class="block-3">{'Block 3'}</div>
-				break;
+			}
 		}
-	</>;
+	</>
 }
 
-export function SwitchNoBreak() {
-	return <>
-		let &[level] = track<1 | 2 | 3>(1);
+export function SwitchNoBreak() @{
+	let &[level] = track<1 | 2 | 3>(1);
+	<>
 		<button
 			class="nobreak-toggle"
 			onClick={() => {
@@ -120,16 +114,17 @@ export function SwitchNoBreak() {
 				else if (level === 2) level = 3;
 				else level = 1;
 			}}
-		>
-			{'Toggle'}
-		</button>
-		switch (level) {
-			case 1:
+		>{'Toggle'}</button>
+		@switch (level) {
+			@case 1: {
 				<div class="nobreak-1">{'NoBreak 1'}</div>
-			case 2:
+			}
+			@case 2: {
 				<div class="nobreak-2">{'NoBreak 2'}</div>
-			case 3:
+			}
+			@case 3: {
 				<div class="nobreak-3">{'NoBreak 3'}</div>
+			}
 		}
-	</>;
+	</>
 }

package/tests/hydration/components/track-async-serialization.tsrx

@@ -8,127 +8,117 @@ module server {
 
 import { formatValue } from server;
 
-export function AsyncWithServerCall() {
-	return <>
-		let &[count] = track(0);
+function ServerCallResult({ count }: { count: { value: number } }) @{
+	let &[data] = trackAsync(() => formatValue(count.value));
+	<p class="result">{data}</p>
+}
+
+export function AsyncWithServerCall() @{
+	let &[count, count_ref] = track(0);
+	<>
 		<button
 			class="increment"
 			onClick={() => {
 				count++;
 			}}
-		>
-			{'increment'}
-		</button>
-		try {
-			let &[data] = trackAsync(() => formatValue(count));
-			<p class="result">{data}</p>
-		} pending {
+		>{'increment'}</button>
+		@try {
+			<ServerCallResult count={count_ref} />
+		} @pending {
 			<p class="loading">{'loading...'}</p>
 		}
-	</>;
+	</>
 }
 
-export function AsyncSimpleValue() {
-	return <>
-		try {
-			let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
-			<p class="result">{data}</p>
-		} pending {
-			<p class="loading">{'loading...'}</p>
-		}
-	</>;
+export function AsyncSimpleValue() @{
+	@try {
+		let &[data] = trackAsync(() => Promise.resolve('hydrated value'));
+		<p class="result">{data}</p>
+	} @pending {
+		<p class="loading">{'loading...'}</p>
+	}
 }
 
-export function AsyncNumericValue() {
-	return <>
-		try {
-			let &[count] = trackAsync(() => Promise.resolve(42));
-			<span class="count">{count}</span>
-		} pending {
-			<span class="pending">{'...'}</span>
-		}
-	</>;
+export function AsyncNumericValue() @{
+	@try {
+		let &[count] = trackAsync(() => Promise.resolve(42));
+		<span class="count">{count}</span>
+	} @pending {
+		<span class="pending">{'...'}</span>
+	}
 }
 
-export function AsyncObjectValue() {
-	return <>
-		try {
-			let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
-			<div class="user">
-				<span class="name">{user.name}</span>
-				<span class="age">{user.age}</span>
-			</div>
-		} pending {
-			<div class="loading">{'loading user...'}</div>
-		}
-	</>;
+export function AsyncObjectValue() @{
+	@try {
+		let &[user] = trackAsync(() => Promise.resolve({ name: 'Alice', age: 30 }));
+		<div class="user">
+			<span class="name">{user.name}</span>
+			<span class="age">{user.age}</span>
+		</div>
+	} @pending {
+		<div class="loading">{'loading user...'}</div>
+	}
 }
 
-export function AsyncMultipleValues() {
-	return <>
-		try {
-			let &[first] = trackAsync(() => Promise.resolve('alpha'));
-			let &[second] = trackAsync(() => Promise.resolve('beta'));
-			<div class="multi">
-				<span class="first">{first}</span>
-				<span class="second">{second}</span>
-			</div>
-		} pending {
-			<div class="loading">{'loading...'}</div>
-		}
-	</>;
+export function AsyncMultipleValues() @{
+	@try {
+		let &[first] = trackAsync(() => Promise.resolve('alpha'));
+		let &[second] = trackAsync(() => Promise.resolve('beta'));
+		<div class="multi">
+			<span class="first">{first}</span>
+			<span class="second">{second}</span>
+		</div>
+	} @pending {
+		<div class="loading">{'loading...'}</div>
+	}
 }
 
-export function AsyncWithCatch() {
-	return <>
-		try {
-			let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
-			<p class="result">{data}</p>
-		} pending {
-			<p class="loading">{'loading...'}</p>
-		} catch (e) {
-			<p class="error">{(e as Error).message}</p>
-		}
-	</>;
+export function AsyncWithCatch() @{
+	@try {
+		let &[data] = trackAsync(() => Promise.reject(new Error('fetch failed')));
+		<p class="result">{data}</p>
+	} @pending {
+		<p class="loading">{'loading...'}</p>
+	} @catch (e) {
+		<p class="error">{(e as Error).message}</p>
+	}
 }
 
-export function ChildWithError() {
-	return <>
-		try {
-			let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
-			<p class="result">{data}</p>
-		} pending {
-			<p class="pending">{'loading...'}</p>
-		}
-	</>;
+export function ChildWithError() @{
+	@try {
+		let &[data] = trackAsync(() => Promise.reject(new Error('child error')));
+		<p class="result">{data}</p>
+	} @pending {
+		<p class="pending">{'loading...'}</p>
+	}
 }
 
-export function ParentWithCatch() {
-	return <>
-		try {
-			<ChildWithError />
-		} catch (e) {
-			<p class="parent-error">{(e as Error).message}</p>
-		}
-	</>;
+export function ParentWithCatch() @{
+	@try {
+		<ChildWithError />
+	} @catch (e) {
+		<p class="parent-error">{(e as Error).message}</p>
+	}
+}
+
+function ReactiveDependencyResult({ count }: { count: { value: number } }) @{
+	let &[data] = trackAsync(() => Promise.resolve(`count-${count.value}`));
+	<p class="result">{data}</p>
 }
 
-export function AsyncWithReactiveDependency() {
-	return <>
-		let &[count] = track(0);
+export function AsyncWithReactiveDependency() @{
+	let &[count, count_ref] = track(0);
+	<>
 		<button
 			class="increment"
 			onClick={() => {
 				count++;
 			}}
-		>
-			{'increment'}
-		</button>
-		try {
-			let &[data] = trackAsync(() => Promise.resolve(`count-${count}`));
-			<p class="result">{data}</p>
-		} pending {
+		>{'increment'}</button>
+		@try {
+			<ReactiveDependencyResult count={count_ref} />
+		} @pending {
 			<p class="loading">{'loading...'}</p>
 		}
-	</>;
+	</>
 }

package/tests/hydration/components/try.tsrx

@@ -1,74 +1,60 @@
 import { trackAsync } from 'ripple';
 
-export function RootPending() {
-	return <><p class="root-pending">{'root loading...'}</p></>;
+export function RootPending() @{
+	<p class="root-pending">{'root loading...'}</p>
 }
 
-export function RootCatch({ error, reset }: { error: Error; reset: () => void }) {
-	return <>
-		<section class="root-catch">
-			<p class="root-error">{error.message}</p>
-			<button class="root-reset" onClick={reset}>{'retry'}</button>
-		</section>
-	</>;
+export function RootCatch({ error, reset }: { error: Error; reset: () => void }) @{
+	<section class="root-catch">
+		<p class="root-error">{error.message}</p>
+		<button class="root-reset" onClick={reset}>{'retry'}</button>
+	</section>
 }
 
-export function RootThrows() {
-	return <>
-		throw new Error('root exploded');
-		<p>{'should not render'}</p>
-	</>;
+export function RootThrows() @{
+	throw new Error('root exploded');
+	<p>{'should not render'}</p>
 }
 
-export function RootAsyncDirect() {
-	return <>
-		let &[value] = trackAsync(() => Promise.resolve('root async value'));
-		<p class="root-async-value">{value}</p>
-	</>;
+export function RootAsyncDirect() @{
+	let &[value] = trackAsync(() => Promise.resolve('root async value'));
+	<p class="root-async-value">{value}</p>
 }
 
-export function RootAsyncRejects() {
-	return <>
-		let &[value] = trackAsync(() => Promise.reject(new Error('root async failed')));
-		<p class="root-async-value">{value}</p>
-	</>;
+export function RootAsyncRejects() @{
+	let &[value] = trackAsync(() => Promise.reject(new Error('root async failed')));
+	<p class="root-async-value">{value}</p>
 }
 
-export function AsyncListInTryPending() {
-	return <>
-		try {
-			<AsyncList />
-		} pending {
-			<p class="loading">{'loading...'}</p>
-		}
-	</>;
+export function AsyncListInTryPending() @{
+	@try {
+		<AsyncList />
+	} @pending {
+		<p class="loading">{'loading...'}</p>
+	}
 }
 
-function AsyncList() {
-	return <>
-		let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
-		<ul class="items">
-			for (let item of items) {
-				<li>{item}</li>
-			}
-		</ul>
-	</>;
+function AsyncList() @{
+	let &[items] = trackAsync(() => Promise.resolve(['alpha', 'beta', 'gamma']));
+	<ul class="items">
+		@for (let item of items) {
+			<li>{item}</li>
+		}
+	</ul>
 }
 
-export function AsyncTryWithLeadingSibling() {
-	return <>
+export function AsyncTryWithLeadingSibling() @{
+	<>
 		<div class="before">{'before'}</div>
-		try {
+		@try {
 			<AsyncContent />
-		} pending {
+		} @pending {
 			<div class="loading">{'loading async content'}</div>
 		}
-	</>;
+	</>
 }
 
-function AsyncContent() {
-	return <>
-		let &[value] = trackAsync(() => Promise.resolve('ready'));
-		<div class="resolved">{value}</div>
-	</>;
+function AsyncContent() @{
+	let &[value] = trackAsync(() => Promise.resolve('ready'));
+	<div class="resolved">{value}</div>
 }

package/tests/hydration/switch.test.js

@@ -35,9 +35,9 @@ describe('hydration > switch blocks', () => {
 		expect(container.querySelector('.case-a')?.textContent).toBe('Case A');
 	});
 
-	it('hydrates switch block with fallthrough', async () => {
+	it('hydrates switch block with an isolated empty case', async () => {
 		await hydrateComponent(ServerComponents.SwitchFallthrough, ClientComponents.SwitchFallthrough);
-		expect(container.querySelector('.case-1-2')?.textContent).toBe('1 or 2');
+		expect(container.querySelector('.case-1-2')).toBeNull();
 	});
 
 	it('hydrates reactive switch block with numeric cases', async () => {
@@ -65,11 +65,11 @@ describe('hydration > switch blocks', () => {
 		expect(container.querySelector('.level-1')?.textContent).toBe('Level 1');
 	});
 
-	it('hydrates switch block with block-scoped cases and break', async () => {
+	it('hydrates switch block with isolated block-scoped cases', async () => {
 		await hydrateComponent(ServerComponents.SwitchBlockScoped, ClientComponents.SwitchBlockScoped);
 		const button = container.querySelector('.block-toggle');
 
-		// Each case should render exclusively with break
+		// Each case renders exclusively without requiring a break statement.
 		expect(container.querySelector('.block-1')?.textContent).toBe('Block 1');
 		expect(container.querySelector('.block-2')).toBeNull();
 		expect(container.querySelector('.block-3')).toBeNull();
@@ -86,19 +86,19 @@ describe('hydration > switch blocks', () => {
 		expect(container.querySelector('.block-3')?.textContent).toBe('Block 3');
 	});
 
-	it('hydrates switch block without break statements (fallthrough)', async () => {
+	it('hydrates switch block without fallthrough', async () => {
 		await hydrateComponent(ServerComponents.SwitchNoBreak, ClientComponents.SwitchNoBreak);
 		const button = container.querySelector('.nobreak-toggle');
 
 		expect(container.querySelector('.nobreak-1')?.textContent).toBe('NoBreak 1');
-		expect(container.querySelector('.nobreak-2')?.textContent).toBe('NoBreak 2');
-		expect(container.querySelector('.nobreak-3')?.textContent).toBe('NoBreak 3');
+		expect(container.querySelector('.nobreak-2')).toBeNull();
+		expect(container.querySelector('.nobreak-3')).toBeNull();
 
 		button?.click();
 		flushSync();
 		expect(container.querySelector('.nobreak-1')).toBeNull();
 		expect(container.querySelector('.nobreak-2')?.textContent).toBe('NoBreak 2');
-		expect(container.querySelector('.nobreak-3')?.textContent).toBe('NoBreak 3');
+		expect(container.querySelector('.nobreak-3')).toBeNull();
 
 		button?.click();
 		flushSync();

package/tests/server/await.test.tsrx

@@ -6,7 +6,7 @@ describe('await in control flow', () => {
 	});
 
 	// it('should handle await inside if statement', async () => {
-	// 	function App() { return <>
+	// 	function App() @{
 	// 		let condition = true;
 	// 		let &[data] = track('loading');
 
@@ -25,7 +25,7 @@ describe('await in control flow', () => {
 	// });
 
 	// it('should handle await inside for...of loop', async () => {
-	// 	function App() { return <>
+	// 	function App() @{
 	// 		const items = [1, 2, 3];
 	// 		let result = '';
 
@@ -42,7 +42,7 @@ describe('await in control flow', () => {
 	// });
 
 	// it('should handle await inside switch statement', async () => {
-	// 	function App() { return <>
+	// 	function App() @{
 	// 		let value = 'b';
 
 	// 		switch (value) {