ripple 0.3.71 → 0.3.74

package/tests/server/return.test.tsrx

@@ -1,76 +1,98 @@
 import { describe, it, expect } from 'vitest';
 import { compile } from '@tsrx/ripple';
 
-const TSRX_RETURN_ERROR = 'Return statements are not allowed inside TSRX templates. Move the return before the TSRX return value, or use conditional rendering instead.';
-
-describe('returns in prohibited SSR scopes', () => {
-	it('throws when return is used inside a TSRX fragment', () => {
+describe('returns in restricted SSR scopes', () => {
+	it('allows returns inside regular functions declared in TSRX templates', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <>
-						if (ready) {
-							return;
+				function App() @{
+						function label() {
+							return 'ready';
 						}
-						<div>{'ready'}</div>
-					</>;
+						<div>{label()}</div>
 				}
 			`,
 				'test.tsrx',
 				{ mode: 'server' },
 			),
-		).toThrow(TSRX_RETURN_ERROR);
+		).not.toThrow();
 	});
 
-	it('throws when return is used inside a TSRX element', () => {
+	it('compiles template directives inside templates', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <section>
-						if (ready) {
-							return null;
-						}
-						<div>{'ready'}</div>
-					</section>;
-				}
-			`,
+					function App() @{
+						<>
+							@if (ready) {
+									<div>yielded</div>
+								}
+								<span>after</span>
+						</>
+					}
+				`,
 				'test.tsrx',
 				{ mode: 'server' },
 			),
-		).toThrow(TSRX_RETURN_ERROR);
+		).not.toThrow();
 	});
+});
 
-	it('allows returns inside regular functions declared in TSRX templates', () => {
+describe('function returns in SSR components', () => {
+	it('renders template directive branches alongside outer siblings', async () => {
+		function App() @{
+			const ready = true;
+			<>
+				@if (ready) {
+					<div class="yielded">yielded</div>
+				}
+				<span class="outer">outer</span>
+			</>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div class="yielded">yielded</div><span class="outer">outer</span>');
+	});
+
+	it('allows plain JavaScript control flow in setup when rendered output follows', () => {
 		expect(
 			() => compile(
 				`
-				function App() {
-					return <>
-						function label() {
-							return 'ready';
-						}
-						<div>{label()}</div>
-					</>;
-				}
-			`,
+					function App() @{
+							const items = [1, 2, 3];
+							for (const item of items) {
+								<div>{item}</div>
+							}
+					}
+				`,
 				'test.tsrx',
 				{ mode: 'server' },
 			),
 		).not.toThrow();
 	});
-});
 
-describe('function returns in SSR components', () => {
+	it('renders TSRX return arguments and skips later siblings', async () => {
+		function App() @{
+			const ready = true;
+			if (ready) {
+				return <div class="returned">returned</div>;
+			}
+			<span class="after">after</span>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<div class="returned">returned</div>');
+	});
+
 	it('allows guard returns before TSRX output', async () => {
-		function App() {
+		function App() @{
 			const ready = true;
 			if (!ready) {
 				return null;
 			}
 
-			return <><div>{'ready'}</div></>;
+			<div>{'ready'}</div>
 		}
 
 		const { body } = await render(App);

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

@@ -2,8 +2,8 @@ import { create_ssr_stream } from 'ripple/server';
 
 describe('create_ssr_stream', () => {
 	it('renders SSR HTML into the injected sink and exposes a web stream', async () => {
-		function App() {
-			return <><div>{'Hello, streaming SSR!'}</div></>;
+		function App() @{
+			<div>{'Hello, streaming SSR!'}</div>
 		}
 
 		const { stream, sink } = create_ssr_stream();
@@ -16,8 +16,8 @@ describe('create_ssr_stream', () => {
 	});
 
 	it('closes the public stream when streaming finishes successfully', async () => {
-		function App() {
-			return <><p>{'stream closed'}</p></>;
+		function App() @{
+			<p>{'stream closed'}</p>
 		}
 
 		const { stream, sink } = create_ssr_stream();

package/tests/server/style-identifier.test.tsrx

@@ -10,18 +10,18 @@ const external_styles = <style>
 describe('style class maps (server)', () => {
 	describe('basic usage with components', () => {
 		it('passes scoped classes to a child component via a style expression', async () => {
-			function Child({ className }: { className: string }) {
-				return <><div class={className}>{'styled child'}</div></>;
+			function Child({ className }: { className: string }) @{
+				<div class={className}>{'styled child'}</div>
 			}
 
-			function Parent() {
+			function Parent() @{
 				const styles = <style>
 					.highlight {
 						color: red;
 					}
 				</style>;
 
-				return <><Child className={styles.highlight} /></>;
+				<Child className={styles.highlight} />
 			}
 
 			const { body } = await render(Parent);
@@ -36,14 +36,14 @@ describe('style class maps (server)', () => {
 		});
 
 		it('passes multiple style expression classes to a child component', async () => {
-			function Child({ primary, secondary }: { primary: string; secondary: string }) {
-				return <>
+			function Child({ primary, secondary }: { primary: string; secondary: string }) @{
+				<>
 					<div class={primary}>{'primary'}</div>
 					<span class={secondary}>{'secondary'}</span>
-				</>;
+				</>
 			}
 
-			function Parent() {
+			function Parent() @{
 				const styles = <style>
 					.primary {
 						color: blue;
@@ -53,7 +53,7 @@ describe('style class maps (server)', () => {
 					}
 				</style>;
 
-				return <><Child primary={styles.primary} secondary={styles.secondary} /></>;
+				<Child primary={styles.primary} secondary={styles.secondary} />
 			}
 
 			const { body } = await render(Parent);
@@ -77,18 +77,18 @@ describe('style class maps (server)', () => {
 
 	describe('parent styling applied to child', () => {
 		it('allows parent to style child elements via a style expression prop', async () => {
-			function Button({ extraClass }: { extraClass?: string }) {
-				return <><button class={extraClass ?? ''}>{'Click me'}</button></>;
+			function Button({ extraClass }: { extraClass?: string }) @{
+				<button class={extraClass ?? ''}>{'Click me'}</button>
 			}
 
-			function App() {
+			function App() @{
 				const styles = <style>
 					.fancy {
 						background: gold;
 					}
 				</style>;
 
-				return <><Button extraClass={styles.fancy} /></>;
+				<Button extraClass={styles.fancy} />
 			}
 
 			const { body } = await render(App);
@@ -102,25 +102,25 @@ describe('style class maps (server)', () => {
 		});
 
 		it('child can combine its own classes with a parent style expression class', async () => {
-			function Card({ className }: { className?: string }) {
-				return <>
+			function Card({ className }: { className?: string }) @{
+				<>
 					<div class={['card-base', className ?? '']}>{'card content'}</div>
 					<style>
 						.card-base {
 							border: 1px solid black;
 						}
 					</style>
-				</>;
+				</>
 			}
 
-			function App() {
+			function App() @{
 				const styles = <style>
 					.themed {
 						background: purple;
 					}
 				</style>;
 
-				return <><Card className={styles.themed} /></>;
+				<Card className={styles.themed} />
 			}
 
 			const { body } = await render(App);
@@ -134,11 +134,11 @@ describe('style class maps (server)', () => {
 		});
 
 		it('passes a standalone class even when it also appears in descendant context', async () => {
-			function Child({ cls }: { cls: string }) {
-				return <><span class={cls}>{'text'}</span></>;
+			function Child({ cls }: { cls: string }) @{
+				<span class={cls}>{'text'}</span>
 			}
 
-			function App() {
+			function App() @{
 				const styles = <style>
 					.dual {
 						color: blue;
@@ -148,11 +148,9 @@ describe('style class maps (server)', () => {
 					}
 				</style>;
 
-				return <>
-					<div class="parent">
-						<Child cls={styles.dual} />
-					</div>
-				</>;
+				<div class="parent">
+					<Child cls={styles.dual} />
+				</div>
 			}
 
 			const { body } = await render(App);
@@ -167,23 +165,21 @@ describe('style class maps (server)', () => {
 	});
 
 	it('passes scoped classes to a dynamic child component via a style expression', async () => {
-		function Child({ cls }: { cls: string }) {
-			return <><span class={cls}>{'text'}</span></>;
+		function Child({ cls }: { cls: string }) @{
+			<span class={cls}>{'text'}</span>
 		}
 
-		function Parent() {
+		function Parent() @{
 			const styles = <style>
 				.text {
 					color: red;
 				}
 			</style>;
 
-			return <>
-				let dynamic = track(() => Child);
-				<div class="wrapper">
-					<@dynamic cls={styles.text} />
-				</div>
-			</>;
+			let dynamic = track(() => Child);
+			<div class="wrapper">
+				<@dynamic cls={styles.text} />
+			</div>
 		}
 
 		const { body } = await render(Parent);
@@ -197,12 +193,12 @@ describe('style class maps (server)', () => {
 	});
 
 	it('passes style expression classes declared outside the component', async () => {
-		function Child({ cls }: { cls: string }) {
-			return <><span class={cls}>{'text'}</span></>;
+		function Child({ cls }: { cls: string }) @{
+			<span class={cls}>{'text'}</span>
 		}
 
-		function Parent() {
-			return <Child cls={external_styles.external} />;
+		function Parent() @{
+			<Child cls={external_styles.external} />
 		}
 
 		const { body, css } = await render(Parent);
@@ -219,8 +215,8 @@ describe('style class maps (server)', () => {
 	});
 
 	it('preserves caller scoped hash through wrapper children', async () => {
-		function Wrapper({ children }) {
-			return <>
+		function Wrapper({ children }) @{
+			<>
 				<div class="green">
 					{'Wrapper'}
 					{children}
@@ -230,26 +226,24 @@ describe('style class maps (server)', () => {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="red">{'Child'}</div>
 				<style>
 					.red {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				<Wrapper>
-					<Child />
-				</Wrapper>
-			</>;
+		function App() @{
+			<Wrapper>
+				<Child />
+			</Wrapper>
 		}
 
 		const { body } = await render(App);
@@ -268,13 +262,13 @@ describe('style class maps (server)', () => {
 	});
 
 	it('applies caller scoped hash to slotted children through dynamic components', async () => {
-		function Wrapper({ children }) {
-			return <><section>{children}</section></>;
+		function Wrapper({ children }) @{
+			<section>{children}</section>
 		}
 
-		function App() {
-			return <>
-				const DynamicWrapper = track(() => Wrapper);
+		function App() @{
+			const DynamicWrapper = track(() => Wrapper);
+			<>
 				<@DynamicWrapper>
 					<div class="green">{'Slotted child'}</div>
 				</@DynamicWrapper>
@@ -283,7 +277,7 @@ describe('style class maps (server)', () => {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -299,19 +293,17 @@ describe('style class maps (server)', () => {
 	describe('server compiler output', () => {
 		it('emits style class maps', () => {
 			const source = `
-function Child({ cls }: { cls: string }) { return <>
+function Child({ cls }: { cls: string }) @{
 	<div class={cls}>{'text'}</div>
-</>; }
-export function App() {
+}
+export function App() @{
 	const styles = <style>
 		.highlight {
 			color: red;
 		}
 	</style>;
 
-	return <>
 		<Child cls={styles.highlight} />
-	</>;
 }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
 
@@ -321,18 +313,18 @@ export function App() {
 		});
 
 		it('includes CSS hash in rendered HTML', async () => {
-			function Child({ cls }: { cls: string }) {
-				return <><div class={cls}>{'hello'}</div></>;
+			function Child({ cls }: { cls: string }) @{
+				<div class={cls}>{'hello'}</div>
 			}
 
-			function App() {
+			function App() @{
 				const styles = <style>
 					.styled {
 						font-weight: bold;
 					}
 				</style>;
 
-				return <><Child cls={styles.styled} /></>;
+				<Child cls={styles.styled} />
 			}
 
 			const { body, css } = await render(App);

package/tests/server/switch.test.tsrx

@@ -1,131 +1,123 @@
 describe('SSR: switch statements', () => {
 	it('renders simple switch with literal cases', async () => {
-		function App() {
-			return <>
-				let value = 'b';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-						break;
-					case 'b':
-						<div>{'Case B'}</div>
-						break;
-					case 'c':
-						<div>{'Case C'}</div>
-						break;
-					default:
-						<div>{'Default Case'}</div>
-				}
-			</>;
+		function App() @{
+			let value = 'b';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+					<div>Case B</div>
+				}
+				@case 'c': {
+					<div>{'Case C'}</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
 		expect(body).toBeHtml('<div>Case B</div>');
 	});
 
-	it('renders a fall-through with an empty switch case', async () => {
-		function App() {
-			return <>
-				let value = 'b';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-						break;
-					case 'b':
-					case 'c':
-						<div>{'Case B or C'}</div>
-						break;
-					default:
-						<div>{'Default Case'}</div>
-				}
-			</>;
+	it('renders an empty switch case without falling through', async () => {
+		function App() @{
+			let value = 'b';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+				}
+				@case 'c': {
+					<div>Case B or C</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Case B or C</div>');
+		expect(body).toBeHtml('');
 	});
 
-	it('renders a fall-through with a case that has elements', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-					case 'b':
-						<div>{'Case B'}</div>
-					case 'c':
-						<div>{'Case C'}</div>
-						break;
-					default:
-						<div>{'Default Case'}</div>
-				}
-			</>;
+	it('renders a case with elements without falling through', async () => {
+		function App() @{
+			let value = 'a';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@case 'b': {
+					<div>Case B</div>
+				}
+				@case 'c': {
+					<div>{'Case C'}</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Case A</div><div>Case B</div><div>Case C</div>');
+		expect(body).toBeHtml('<div>Case A</div>');
 	});
 
-	it('renders a fall-through with a default case in the middle', async () => {
-		function App() {
-			return <>
-				let value = 'x';
-				switch (value) {
-					case 'a':
-						<div>{'Case A'}</div>
-					default:
-						<div>{'Default Case'}</div>
-					case 'b':
-						<div>{'Case B'}</div>
-						break;
-					case 'c':
-						<div>{'Case C'}</div>
-						break;
-				}
-			</>;
+	it('renders a default case', async () => {
+		function App() @{
+			let value = 'x';
+			@switch (value) {
+				@case 'a': {
+					<div>Case A</div>
+				}
+				@default: {
+					<div>{'Default Case'}</div>
+				}
+			}
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div>Default Case</div><div>Case B</div>');
+		expect(body).toBeHtml('<div>Default Case</div>');
 	});
 
-	it('renders bare text nodes in switch fall-through cases without element wrappers', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				<div>
-					<span>{'before'}</span>
-					switch (value) {
-						case 'a':
-							{'Case A'}
-						case 'b':
-							{'Case B'}
+	it('renders bare text nodes in switch cases without falling through', async () => {
+		function App() @{
+			let value = 'a';
+			<div>
+				<span>{'before'}</span>
+				@switch (value) {
+					@case 'a': {
+						<>Case A</>
+					}
+					@case 'b': {
+						<>Case B</>
 					}
-				</div>
-			</>;
+				}
+			</div>
 		}
 
 		const { body } = await render(App);
-		expect(body).toBeHtml('<div><span>before</span>Case ACase B</div>');
+		expect(body).toBeHtml('<div><span>before</span>Case A</div>');
 	});
 
 	it('renders bare text nodes in switch cases without element wrappers', async () => {
-		function App() {
-			return <>
-				let value = 'a';
-				<div>
-					<span>{'before'}</span>
-					switch (value) {
-						case 'a':
-							{'Case A'}
-							break;
-						case 'b':
-							{'Case B'}
-							break;
+		function App() @{
+			let value = 'a';
+			<div>
+				<span>{'before'}</span>
+				@switch (value) {
+					@case 'a': {
+						<>Case A</>
 					}
-				</div>
-			</>;
+					@case 'b': {
+						<>Case B</>
+					}
+				}
+			</div>
 		}
 
 		const { body } = await render(App);