ripple 0.3.72 → 0.3.76

package/tests/server/for.test.tsrx

@@ -1,12 +1,10 @@
 describe('for statements in SSR', () => {
 	it('renders a simple static array', async () => {
-		function App() {
-			return <>
-				const items = ['Item 1', 'Item 2', 'Item 3'];
-				for (const item of items) {
-					<div class={item}>{item}</div>
-				}
-			</>;
+		function App() @{
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+			@for (const item of items) {
+				<div class={item}>{item}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -15,28 +13,43 @@ describe('for statements in SSR', () => {
 		);
 	});
 
+	it('allows plain JavaScript control flow in setup when rendered output follows', () => {
+		expect(
+			() => compile(
+				`function App() @{
+					const items = [1, 2, 3];
+					for (const item of items) {
+						<div class="selected">{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).not.toThrow();
+	});
+
 	it('renders nested for...of loops', async () => {
-		function App() {
-			return <>
-				const groups = [
-					{
-						name: 'Group 1',
-						items: ['Item 1.1', 'Item 1.2'],
-					},
-					{
-						name: 'Group 2',
-						items: ['Item 2.1', 'Item 2.2'],
-					},
-				];
-				for (const group of groups) {
+		function App() @{
+			const groups = [
+				{
+					name: 'Group 1',
+					items: ['Item 1.1', 'Item 1.2'],
+				},
+				{
+					name: 'Group 2',
+					items: ['Item 2.1', 'Item 2.2'],
+				},
+			];
+			@for (const group of groups) {
+				<>
 					<h1>{group.name}</h1>
 					<ul>
-						for (const item of group.items) {
+						@for (const item of group.items) {
 							<li>{item}</li>
 						}
 					</ul>
-				}
-			</>;
+				</>
+			}
 		}
 
 		const { body } = await render(App);
@@ -46,13 +59,11 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with index', async () => {
-		function App() {
-			return <>
-				const items = ['Item 1', 'Item 2', 'Item 3'];
-				for (const item of items; index i) {
-					<div class={`${item} ${i}`}>{`${item} ${i}`}</div>
-				}
-			</>;
+		function App() @{
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+			@for (const item of items; index i) {
+				<div class={`${item} ${i}`}>{`${item} ${i}`}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -62,17 +73,15 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with key', async () => {
-		function App() {
-			return <>
-				const items = [
-					{ id: 1, name: 'Item' },
-					{ id: 2, name: 'Item' },
-					{ id: 3, name: 'Item' },
-				];
-				for (const item of items; key item.id) {
-					<div class={`${item.name} ${item.id}`}>{`${item.name} ${item.id}`}</div>
-				}
-			</>;
+		function App() @{
+			const items = [
+				{ id: 1, name: 'Item' },
+				{ id: 2, name: 'Item' },
+				{ id: 3, name: 'Item' },
+			];
+			@for (const item of items; key item.id) {
+				<div class={`${item.name} ${item.id}`}>{`${item.name} ${item.id}`}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -82,17 +91,15 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with index and key', async () => {
-		function App() {
-			return <>
-				const items = [
-					{ id: 1, name: 'Item' },
-					{ id: 2, name: 'Item' },
-					{ id: 3, name: 'Item' },
-				];
-				for (const item of items; index i; key item.id) {
-					<div class={`${item.name} ${item.id} ${i}`}>{`${item.name} ${item.id} ${i}`}</div>
-				}
-			</>;
+		function App() @{
+			const items = [
+				{ id: 1, name: 'Item' },
+				{ id: 2, name: 'Item' },
+				{ id: 3, name: 'Item' },
+			];
+			@for (const item of items; index i; key item.id) {
+				<div class={`${item.name} ${item.id} ${i}`}>{`${item.name} ${item.id} ${i}`}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -101,39 +108,48 @@ describe('for statements in SSR', () => {
 		);
 	});
 
-	it('allows continue to skip a for...of iteration', async () => {
-		function App() {
-			return <>
-				const items = ['Item 1', '', 'Item 3'];
-				for (const item of items) {
-					if (!item) continue;
-					<div>{item}</div>
-				}
-			</>;
+	it('renders filtered items before passing them to @for', async () => {
+		function App() @{
+			const items = ['Item 1', '', 'Item 3'].filter(Boolean);
+			@for (const item of items) {
+				<div>{item}</div>
+			}
 		}
 
 		const { body } = await render(App);
 		expect(body).toBeHtml('<div>Item 1</div><div>Item 3</div>');
 	});
 
+	it('renders an empty fallback', async () => {
+		function App() @{
+			const items = [];
+			@for (const item of items) {
+				<div>{item}</div>
+			} @empty {
+				<p>No items</p>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<p>No items</p>');
+	});
+
 	it('allows ordinary function control flow inside for...of loops', async () => {
-		function App() {
-			return <>
-				const items = ['Item 1', '', 'Item 3'];
-				for (const item of items) {
-					function label(value) {
-						for (let i = 0; i < 1; i++) {
-							while (i < 0) {
-								break;
-							}
-							if (!value) return 'missing';
+		function App() @{
+			const items = ['Item 1', '', 'Item 3'];
+			@for (const item of items) {
+				function label(value) {
+					for (let i = 0; i < 1; i++) {
+						while (i < 0) {
+							break;
 						}
-						return value;
+						if (!value) return 'missing';
 					}
-
-					<div>{label(item)}</div>
+					return value;
 				}
-			</>;
+
+				<div>{label(item)}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -143,30 +159,45 @@ describe('for statements in SSR', () => {
 	it('throws for return statements inside for...of loops', () => {
 		expect(
 			() => compile(
-				`function App(items) { return <>
-					for (const item of items) {
-						if (!item) return
+				`function App(items) @{
+						@for (const item of items) {
+							if (!item) return
 						<div>{item}</div>
 					}
-				</>; }`,
+				}`,
 				'App.tsrx',
 				{ mode: 'server' },
 			),
-		).toThrow('Return statements are not allowed inside TSRX templates.');
+		).toThrow('Return statements are not allowed inside TSRX template for...of loops.');
 	});
 
 	it('throws for break statements targeting for...of loops', () => {
 		expect(
 			() => compile(
-				`function App(items) { return <>
-					for (const item of items) {
-						if (!item) break
+				`function App(items) @{
+						@for (const item of items) {
+							if (!item) break
 						<div>{item}</div>
 					}
-				</>; }`,
+				}`,
 				'App.tsrx',
 				{ mode: 'server' },
 			),
 		).toThrow('Break statements are not allowed inside TSRX template for...of loops');
 	});
+
+	it('throws for continue statements inside for...of loops', () => {
+		expect(
+			() => compile(
+				`function App(items) @{
+						@for (const item of items) {
+							if (!item) continue
+						<div>{item}</div>
+					}
+				}`,
+				'App.tsrx',
+				{ mode: 'server' },
+			),
+		).toThrow('Continue statements are not allowed inside TSRX template for...of loops');
+	});
 });

package/tests/server/head.test.tsrx

@@ -2,13 +2,13 @@ import { track } from 'ripple';
 
 describe('head elements', () => {
 	it('renders static title element', async () => {
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<head>
 					<title>{'Static Test Title'}</title>
 				</head>
 				<div>{'Content'}</div>
-			</>;
+			</>
 		}
 
 		const { head, body } = await render(App);
@@ -19,16 +19,16 @@ describe('head elements', () => {
 	});
 
 	it('renders reactive title element', async () => {
-		function App() {
-			return <>
-				let &[title] = track('Initial Title');
+		function App() @{
+			let &[title] = track('Initial Title');
+			<>
 				<head>
 					<title>{title}</title>
 				</head>
 				<div>
 					<span>{title}</span>
 				</div>
-			</>;
+			</>
 		}
 
 		const { head, body } = await render(App);
@@ -39,13 +39,11 @@ describe('head elements', () => {
 	});
 
 	it('renders title with template literal', async () => {
-		function App() {
-			return <>
-				let &[name] = track('World');
-				<head>
-					<title>{`Hello ${name}!`}</title>
-				</head>
-			</>;
+		function App() @{
+			let &[name] = track('World');
+			<head>
+				<title>{`Hello ${name}!`}</title>
+			</head>
 		}
 
 		const { head, body } = await render(App);
@@ -55,17 +53,19 @@ describe('head elements', () => {
 	});
 
 	it('renders title with computed value', async () => {
-		function App() {
-			return <>
-				let &[count] = track(0);
-				let prefix = 'Count: ';
+		function App() @{
+			let &[count] = track(0);
+			let prefix = 'Count: ';
+			<>
 				<head>
-					<title>{prefix + count}</title>
+					<title>
+						{prefix + count}
+					</title>
 				</head>
 				<div>
 					<span>{count}</span>
 				</div>
-			</>;
+			</>
 		}
 
 		const { head, body } = await render(App);
@@ -75,13 +75,13 @@ describe('head elements', () => {
 	});
 
 	it('renders empty title', async () => {
-		function App() {
-			return <>
+		function App() @{
+			<>
 				<head>
 					<title>{''}</title>
 				</head>
 				<div>{'Empty title test'}</div>
-			</>;
+			</>
 		}
 
 		const { head, body } = await render(App);
@@ -90,15 +90,38 @@ describe('head elements', () => {
 		expect(document.title).toBe('');
 	});
 
+	it('renders external scripts with src attributes from a loop', async () => {
+		const Head = ({ scripts }: { scripts: { src: string }[] }) => @{
+			<head>
+				@for (const script of scripts) {
+					<script src={script.src} />
+				}
+			</head>
+		};
+
+		function App() @{
+			<Head scripts={[{ src: '/a.js' }, { src: '/b.js' }]} />
+		}
+
+		const { head, body } = await render(App);
+		const { document } = parseAsFullHtml(head, body);
+
+		const srcs = Array.from(document.querySelectorAll('head script[src]')).map(
+			(node) => node.getAttribute('src'),
+		).sort();
+
+		expect(srcs).toEqual(['/a.js', '/b.js']);
+	});
+
 	it('renders title with conditional content', async () => {
-		function App() {
-			return <>
-				let &[showPrefix] = track(true);
-				let &[title] = track('Main Page');
-				<head>
-					<title>{showPrefix ? 'App - ' + title : title}</title>
-				</head>
-			</>;
+		function App() @{
+			let &[showPrefix] = track(true);
+			let &[title] = track('Main Page');
+			<head>
+				<title>
+					{showPrefix ? 'App - ' + title : title}
+				</title>
+			</head>
 		}
 
 		const { head, body } = await render(App);

package/tests/server/html-nesting-validation.test.tsrx

@@ -180,11 +180,13 @@ describe('HTML nesting validation', () => {
 	describe('compiler dev mode output', () => {
 		it('emits push_element and pop_element calls in dev mode', () => {
 			const lines = [];
-			lines.push('function App() { return <>');
+			lines.push('function App() @{');
+			lines.push('  <>');
 			lines.push('  <div>');
 			lines.push('    <span>{"Hello"}</span>');
 			lines.push('  </div>');
-			lines.push('</>; }');
+			lines.push('  </>');
+			lines.push('}');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
@@ -195,11 +197,13 @@ describe('HTML nesting validation', () => {
 
 		it('does not emit push_element or pop_element in non-dev mode', () => {
 			const lines = [];
-			lines.push('function App() { return <>');
+			lines.push('function App() @{');
+			lines.push('  <>');
 			lines.push('  <div>');
 			lines.push('    <span>{"Hello"}</span>');
 			lines.push('  </div>');
-			lines.push('</>; }');
+			lines.push('  </>');
+			lines.push('}');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: false });
@@ -210,9 +214,11 @@ describe('HTML nesting validation', () => {
 
 		it('emits push_element with correct tag name', () => {
 			const lines = [];
-			lines.push('function App() { return <>');
+			lines.push('function App() @{');
+			lines.push('  <>');
 			lines.push('  <button>{"Click"}</button>');
-			lines.push('</>; }');
+			lines.push('  </>');
+			lines.push('}');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
@@ -222,9 +228,11 @@ describe('HTML nesting validation', () => {
 
 		it('does not emit push_element for client mode', () => {
 			const lines = [];
-			lines.push('function App() { return <>');
+			lines.push('function App() @{');
+			lines.push('  <>');
 			lines.push('  <div>{"Hello"}</div>');
-			lines.push('</>; }');
+			lines.push('  </>');
+			lines.push('}');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'client', dev: true });

package/tests/server/if.test.tsrx

@@ -1,12 +1,10 @@
 describe('if statements in SSR', () => {
 	it('renders if block when condition is true', async () => {
-		function App() {
-			return <>
-				let condition = true;
-				if (condition) {
-					<div>{'If block'}</div>
-				}
-			</>;
+		function App() @{
+			let condition = true;
+			@if (condition) {
+				<div>{'If block'}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -14,29 +12,27 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders else block when condition is false', async () => {
-		function App() {
-			return <>
-				let condition = false;
-				if (condition) {
-					<div>{'If block'}</div>
-				} else {
-					<div>{'Else block'}</div>
-				}
-			</>;
+		function App() @{
+			let condition = false;
+			@if (condition) {
+				<div>{'If block'}</div>
+			} @else {
+				<div>{'Else block'}</div>
+			}
 		}
 
 		const { body } = await render(App);
 		expect(body).toBeHtml('<div>Else block</div>');
 	});
 
-	it('renders bare double-quoted text in if-else branches', async () => {
-		function App() {
-			return <>
-				let condition = false;
-				if (condition) {
-					"Hello Ripple"
-				} else "Hello React"
-			</>;
+	it('renders bare JSX text in if-else branches', async () => {
+		function App() @{
+			let condition = false;
+			@if (condition) {
+				<>Hello Ripple</>
+			} @else {
+				<>Hello React</>
+			}
 		}
 
 		const { body } = await render(App);
@@ -44,17 +40,15 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders else if block when condition is true', async () => {
-		function App() {
-			return <>
-				let value = 'b';
-				if (value === 'a') {
-					<div>{'Case A'}</div>
-				} else if (value === 'b') {
-					<div>{'Case B'}</div>
-				} else {
-					<div>{'Default Case'}</div>
-				}
-			</>;
+		function App() @{
+			let value = 'b';
+			@if (value === 'a') {
+				<div>Case A</div>
+			} @else if (value === 'b') {
+				<div>Case B</div>
+			} @else {
+				<div>{'Default Case'}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -62,17 +56,15 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders final else block in an if-else if-else chain', async () => {
-		function App() {
-			return <>
-				let value = 'c';
-				if (value === 'a') {
-					<div>{'Case A'}</div>
-				} else if (value === 'b') {
-					<div>{'Case B'}</div>
-				} else {
-					<div>{'Default Case'}</div>
-				}
-			</>;
+		function App() @{
+			let value = 'c';
+			@if (value === 'a') {
+				<div>Case A</div>
+			} @else if (value === 'b') {
+				<div>Case B</div>
+			} @else {
+				<div>{'Default Case'}</div>
+			}
 		}
 
 		const { body } = await render(App);
@@ -80,20 +72,18 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders nested if-else blocks correctly', async () => {
-		function App() {
-			return <>
-				let outer = true;
-				let inner = false;
-				if (outer) {
-					if (inner) {
-						<div>{'Outer true, Inner true'}</div>
-					} else {
-						<div>{'Outer true, Inner false'}</div>
-					}
-				} else {
-					<div>{'Outer false'}</div>
+		function App() @{
+			let outer = true;
+			let inner = false;
+			@if (outer) {
+				@if (inner) {
+					<div>{'Outer true, Inner true'}</div>
+				} @else {
+					<div>{'Outer true, Inner false'}</div>
 				}
-			</>;
+			} @else {
+				<div>{'Outer false'}</div>
+			}
 		}
 
 		const { body } = await render(App);