ripple 0.3.68 → 0.3.69

package/tests/server/for.test.tsrx

@@ -1,11 +1,12 @@
 describe('for statements in SSR', () => {
 	it('renders a simple static array', async () => {
-		component App() {
-			const items = ['Item 1', 'Item 2', 'Item 3'];
-
-			for (const item of items) {
-				<div class={item}>{item}</div>
-			}
+		function App() {
+			return <>
+				const items = ['Item 1', 'Item 2', 'Item 3'];
+				for (const item of items) {
+					<div class={item}>{item}</div>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -15,26 +16,27 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders nested for...of loops', async () => {
-		component 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) {
-						<li>{item}</li>
-					}
-				</ul>
-			}
+		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) {
+					<h1>{group.name}</h1>
+					<ul>
+						for (const item of group.items) {
+							<li>{item}</li>
+						}
+					</ul>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -44,12 +46,13 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with index', async () => {
-		component App() {
-			const items = ['Item 1', 'Item 2', 'Item 3'];
-
-			for (const item of items; index i) {
-				<div class={`${item} ${i}`}>{`${item} ${i}`}</div>
-			}
+		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>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -59,16 +62,17 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with key', async () => {
-		component 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>
-			}
+		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>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -78,16 +82,17 @@ describe('for statements in SSR', () => {
 	});
 
 	it('renders an array with index and key', async () => {
-		component 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>
-			}
+		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>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -97,13 +102,14 @@ describe('for statements in SSR', () => {
 	});
 
 	it('allows continue to skip a for...of iteration', async () => {
-		component App() {
-			const items = ['Item 1', '', 'Item 3'];
-
-			for (const item of items) {
-				if (!item) continue;
-				<div>{item}</div>
-			}
+		function App() {
+			return <>
+				const items = ['Item 1', '', 'Item 3'];
+				for (const item of items) {
+					if (!item) continue;
+					<div>{item}</div>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -111,22 +117,23 @@ describe('for statements in SSR', () => {
 	});
 
 	it('allows ordinary function control flow inside for...of loops', async () => {
-		component 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;
+		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';
 						}
-						if (!value) return 'missing';
+						return value;
 					}
-					return value;
-				}
 
-				<div>{label(item)}</div>
-			}
+					<div>{label(item)}</div>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -136,30 +143,30 @@ describe('for statements in SSR', () => {
 	it('throws for return statements inside for...of loops', () => {
 		expect(
 			() => compile(
-				`component App(items) {
+				`function App(items) { return <>
 					for (const item of items) {
 						if (!item) return
 						<div>{item}</div>
 					}
-				}`,
+				</>; }`,
 				'App.tsrx',
 				{ mode: 'server' },
 			),
-		).toThrow('Return statements are not allowed inside component for...of loops');
+		).toThrow('Return statements are not allowed inside TSRX templates.');
 	});
 
 	it('throws for break statements targeting for...of loops', () => {
 		expect(
 			() => compile(
-				`component App(items) {
+				`function App(items) { return <>
 					for (const item of items) {
 						if (!item) break
 						<div>{item}</div>
 					}
-				}`,
+				</>; }`,
 				'App.tsrx',
 				{ mode: 'server' },
 			),
-		).toThrow('Break statements are not allowed inside component for...of loops');
+		).toThrow('Break statements are not allowed inside TSRX template for...of loops');
 	});
 });

package/tests/server/head.test.tsrx

@@ -2,12 +2,13 @@ import { track } from 'ripple';
 
 describe('head elements', () => {
 	it('renders static title element', async () => {
-		component App() {
-			<head>
-				<title>{'Static Test Title'}</title>
-			</head>
-
-			<div>{'Content'}</div>
+		function App() {
+			return <>
+				<head>
+					<title>{'Static Test Title'}</title>
+				</head>
+				<div>{'Content'}</div>
+			</>;
 		}
 
 		const { head, body } = await render(App);
@@ -18,15 +19,16 @@ describe('head elements', () => {
 	});
 
 	it('renders reactive title element', async () => {
-		component App() {
-			let &[title] = track('Initial Title');
-
-			<head>
-				<title>{title}</title>
-			</head>
-			<div>
-				<span>{title}</span>
-			</div>
+		function App() {
+			return <>
+				let &[title] = track('Initial Title');
+				<head>
+					<title>{title}</title>
+				</head>
+				<div>
+					<span>{title}</span>
+				</div>
+			</>;
 		}
 
 		const { head, body } = await render(App);
@@ -37,12 +39,13 @@ describe('head elements', () => {
 	});
 
 	it('renders title with template literal', async () => {
-		component App() {
-			let &[name] = track('World');
-
-			<head>
-				<title>{`Hello ${name}!`}</title>
-			</head>
+		function App() {
+			return <>
+				let &[name] = track('World');
+				<head>
+					<title>{`Hello ${name}!`}</title>
+				</head>
+			</>;
 		}
 
 		const { head, body } = await render(App);
@@ -52,16 +55,17 @@ describe('head elements', () => {
 	});
 
 	it('renders title with computed value', async () => {
-		component App() {
-			let &[count] = track(0);
-			let prefix = 'Count: ';
-
-			<head>
-				<title>{prefix + count}</title>
-			</head>
-			<div>
-				<span>{count}</span>
-			</div>
+		function App() {
+			return <>
+				let &[count] = track(0);
+				let prefix = 'Count: ';
+				<head>
+					<title>{prefix + count}</title>
+				</head>
+				<div>
+					<span>{count}</span>
+				</div>
+			</>;
 		}
 
 		const { head, body } = await render(App);
@@ -71,11 +75,13 @@ describe('head elements', () => {
 	});
 
 	it('renders empty title', async () => {
-		component App() {
-			<head>
-				<title>{''}</title>
-			</head>
-			<div>{'Empty title test'}</div>
+		function App() {
+			return <>
+				<head>
+					<title>{''}</title>
+				</head>
+				<div>{'Empty title test'}</div>
+			</>;
 		}
 
 		const { head, body } = await render(App);
@@ -85,13 +91,14 @@ describe('head elements', () => {
 	});
 
 	it('renders title with conditional content', async () => {
-		component App() {
-			let &[showPrefix] = track(true);
-			let &[title] = track('Main Page');
-
-			<head>
-				<title>{showPrefix ? 'App - ' + title : title}</title>
-			</head>
+		function App() {
+			return <>
+				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,11 @@ describe('HTML nesting validation', () => {
 	describe('compiler dev mode output', () => {
 		it('emits push_element and pop_element calls in dev mode', () => {
 			const lines = [];
-			lines.push('component App() {');
+			lines.push('function App() { return <>');
 			lines.push('  <div>');
 			lines.push('    <span>{"Hello"}</span>');
 			lines.push('  </div>');
-			lines.push('}');
+			lines.push('</>; }');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
@@ -195,11 +195,11 @@ describe('HTML nesting validation', () => {
 
 		it('does not emit push_element or pop_element in non-dev mode', () => {
 			const lines = [];
-			lines.push('component App() {');
+			lines.push('function App() { return <>');
 			lines.push('  <div>');
 			lines.push('    <span>{"Hello"}</span>');
 			lines.push('  </div>');
-			lines.push('}');
+			lines.push('</>; }');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: false });
@@ -210,9 +210,9 @@ describe('HTML nesting validation', () => {
 
 		it('emits push_element with correct tag name', () => {
 			const lines = [];
-			lines.push('component App() {');
+			lines.push('function App() { return <>');
 			lines.push('  <button>{"Click"}</button>');
-			lines.push('}');
+			lines.push('</>; }');
 			const source = lines.join('\n');
 
 			const result = compile(source, 'test.tsrx', { mode: 'server', dev: true });
@@ -222,9 +222,9 @@ describe('HTML nesting validation', () => {
 
 		it('does not emit push_element for client mode', () => {
 			const lines = [];
-			lines.push('component App() {');
+			lines.push('function App() { return <>');
 			lines.push('  <div>{"Hello"}</div>');
-			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,11 +1,12 @@
 describe('if statements in SSR', () => {
 	it('renders if block when condition is true', async () => {
-		component App() {
-			let condition = true;
-
-			if (condition) {
-				<div>{'If block'}</div>
-			}
+		function App() {
+			return <>
+				let condition = true;
+				if (condition) {
+					<div>{'If block'}</div>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -13,14 +14,15 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders else block when condition is false', async () => {
-		component App() {
-			let condition = false;
-
-			if (condition) {
-				<div>{'If block'}</div>
-			} else {
-				<div>{'Else block'}</div>
-			}
+		function App() {
+			return <>
+				let condition = false;
+				if (condition) {
+					<div>{'If block'}</div>
+				} else {
+					<div>{'Else block'}</div>
+				}
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -28,12 +30,13 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders bare double-quoted text in if-else branches', async () => {
-		component App() {
-			let condition = false;
-
-			if (condition) {
-				"Hello Ripple"
-			} else "Hello React"
+		function App() {
+			return <>
+				let condition = false;
+				if (condition) {
+					"Hello Ripple"
+				} else "Hello React"
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -41,16 +44,17 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders else if block when condition is true', async () => {
-		component App() {
-			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() {
+			return <>
+				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);
@@ -58,16 +62,17 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders final else block in an if-else if-else chain', async () => {
-		component App() {
-			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() {
+			return <>
+				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);
@@ -75,19 +80,20 @@ describe('if statements in SSR', () => {
 	});
 
 	it('renders nested if-else blocks correctly', async () => {
-		component App() {
-			let outer = true;
-			let inner = false;
-
-			if (outer) {
-				if (inner) {
-					<div>{'Outer true, Inner true'}</div>
+		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 true, Inner false'}</div>
+					<div>{'Outer false'}</div>
 				}
-			} else {
-				<div>{'Outer false'}</div>
-			}
+			</>;
 		}
 
 		const { body } = await render(App);