ripple 0.3.67 → 0.3.69

package/tests/client/for.test.tsrx

@@ -3,12 +3,13 @@ import { compile } from '@tsrx/ripple';
 
 describe('for statements', () => {
 	it('renders a simple static array', () => {
-		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>
+				}
+			</>;
 		}
 
 		render(App);
@@ -17,13 +18,14 @@ describe('for statements', () => {
 	});
 
 	it('allows continue to skip an iteration', () => {
-		component App() {
-			const items = ['Item 1', '', 'Item 3'];
-
-			for (const item of items) {
-				if (!item) continue;
-				<div class="item">{item}</div>
-			}
+		function App() {
+			return <>
+				const items = ['Item 1', '', 'Item 3'];
+				for (const item of items) {
+					if (!item) continue;
+					<div class="item">{item}</div>
+				}
+			</>;
 		}
 
 		render(App);
@@ -37,16 +39,17 @@ describe('for statements', () => {
 	it('allows continue after setup statements to skip an iteration', () => {
 		const skipped = [];
 
-		component App() {
-			const items = ['Item 1', '', 'Item 3'];
-
-			for (const item of items) {
-				if (!item) {
-					skipped.push('skip');
-					continue;
+		function App() {
+			return <>
+				const items = ['Item 1', '', 'Item 3'];
+				for (const item of items) {
+					if (!item) {
+						skipped.push('skip');
+						continue;
+					}
+					<div class="item">{item}</div>
 				}
-				<div class="item">{item}</div>
-			}
+			</>;
 		}
 
 		render(App);
@@ -60,7 +63,7 @@ describe('for statements', () => {
 
 	it('does not emit JavaScript continue in for...of skip callbacks', () => {
 		const { code } = compile(
-			`component App() {
+			`function App() { return <>
 				const items = ['Item 1', '', 'Item 3'];
 				const skipped = [];
 
@@ -71,7 +74,7 @@ describe('for statements', () => {
 					}
 					<div class="item">{item}</div>
 				}
-			}`,
+			</>; }`,
 			'App.tsrx',
 			{ mode: 'client' },
 		);
@@ -82,14 +85,14 @@ describe('for statements', () => {
 	});
 
 	it('renders a simple dynamic array', () => {
-		component App() {
-			const items = new RippleArray('Item 1', 'Item 2', 'Item 3');
-
-			for (const item of items) {
-				<div class={item}>{item}</div>
-			}
-
-			<button onClick={() => items.push(`Item ${items.length + 1}`)}>{'Add Item'}</button>
+		function App() {
+			return <>
+				const items = new RippleArray('Item 1', 'Item 2', 'Item 3');
+				for (const item of items) {
+					<div class={item}>{item}</div>
+				}
+				<button onClick={() => items.push(`Item ${items.length + 1}`)}>{'Add Item'}</button>
+			</>;
 		}
 
 		render(App);
@@ -104,20 +107,20 @@ describe('for statements', () => {
 	});
 
 	it('correctly handles intermediate statements in for block', () => {
-		component App() {
-			const items = new RippleArray(1, 2, 3);
-
-			<div>
-				for (const item of items) {
-					<div>
-						<div>{item}</div>
-						const some_text = item;
-						<div>{some_text}</div>
-					</div>
-				}
-			</div>
-
-			<button onClick={() => items.push(items.length + 1)}>{'Add Item'}</button>
+		function App() {
+			return <>
+				const items = new RippleArray(1, 2, 3);
+				<div>
+					for (const item of items) {
+						<div>
+							<div>{item}</div>
+							const some_text = item;
+							<div>{some_text}</div>
+						</div>
+					}
+				</div>
+				<button onClick={() => items.push(items.length + 1)}>{'Add Item'}</button>
+			</>;
 		}
 
 		render(App);
@@ -133,19 +136,19 @@ describe('for statements', () => {
 	});
 
 	it('correctly handles the index in a for...of loop', () => {
-		component App() {
-			const items = new RippleArray('a', 'b', 'c');
-
-			<div>
-				for (let item of items; index i) {
-					<div>{i + ' : ' + item}</div>
-				}
-			</div>
-
-			<button onClick={() => items.push(String.fromCharCode(97 + items.length))}>
-				{'Add Item'}
-			</button>
-			<button onClick={() => items.reverse()}>{'Reverse'}</button>
+		function App() {
+			return <>
+				const items = new RippleArray('a', 'b', 'c');
+				<div>
+					for (let item of items; index i) {
+						<div>{i + ' : ' + item}</div>
+					}
+				</div>
+				<button onClick={() => items.push(String.fromCharCode(97 + items.length))}>
+					{'Add Item'}
+				</button>
+				<button onClick={() => items.reverse()}>{'Reverse'}</button>
+			</>;
 		}
 
 		render(App);
@@ -166,24 +169,24 @@ describe('for statements', () => {
 	});
 
 	it('correctly handles keyed for...of loops', () => {
-		component App() {
-			let &[items] = track([
-				{ id: 1, text: 'Item 1' },
-				{ id: 2, text: 'Item 2' },
-				{ id: 3, text: 'Item 3' },
-			]);
-
-			for (let item of items; index i; key item.id) {
-				<div>{i + ':' + item.text}</div>
-			}
-
-			<button
-				onClick={() => {
-					items = items.toReversed();
-				}}
-			>
-				{'Reverse'}
-			</button>
+		function App() {
+			return <>
+				let &[items] = track([
+					{ id: 1, text: 'Item 1' },
+					{ id: 2, text: 'Item 2' },
+					{ id: 3, text: 'Item 3' },
+				]);
+				for (let item of items; index i; key item.id) {
+					<div>{i + ':' + item.text}</div>
+				}
+				<button
+					onClick={() => {
+						items = items.toReversed();
+					}}
+				>
+					{'Reverse'}
+				</button>
+			</>;
 		}
 
 		render(App);
@@ -199,24 +202,24 @@ describe('for statements', () => {
 	});
 
 	it('keyed for over derived updates sibling text nodes', () => {
-		component App() {
-			let &[count] = track(0);
-
-			let &[items] = track(
-				() => Array.from({ length: count }).map((_, id) => ({ id, label: `Item ${id}` })),
-			);
-
-			<button
-				onClick={() => {
-					count++;
-				}}
-			>
-				{'Add'}
-			</button>
-			for (const item of items; key item.id) {
-				<div class="item">{item.label}</div>
-			}
-			<p class="count">{count}</p>
+		function App() {
+			return <>
+				let &[count] = track(0);
+				let &[items] = track(
+					() => Array.from({ length: count }).map((_, id) => ({ id, label: `Item ${id}` })),
+				);
+				<button
+					onClick={() => {
+						count++;
+					}}
+				>
+					{'Add'}
+				</button>
+				for (const item of items; key item.id) {
+					<div class="item">{item.label}</div>
+				}
+				<p class="count">{count}</p>
+			</>;
 		}
 
 		render(App);
@@ -240,22 +243,22 @@ describe('for statements', () => {
 	});
 
 	it('keyed for with 32+ items: full reversal updates values via Map path', () => {
-		component App() {
-			let &[items] = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));
-
-			<div>
-				for (let item of items; index idx; key item.id) {
-					<span class="item">{idx + ':' + item.text}</span>
-				}
-			</div>
-
-			<button
-				onClick={() => {
-					items = items.toReversed();
-				}}
-			>
-				{'Reverse'}
-			</button>
+		function App() {
+			return <>
+				let &[items] = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));
+				<div>
+					for (let item of items; index idx; key item.id) {
+						<span class="item">{idx + ':' + item.text}</span>
+					}
+				</div>
+				<button
+					onClick={() => {
+						items = items.toReversed();
+					}}
+				>
+					{'Reverse'}
+				</button>
+			</>;
 		}
 
 		render(App);
@@ -273,32 +276,32 @@ describe('for statements', () => {
 	});
 
 	it('handles updating with new objects with same key', () => {
-		component App() {
-			let &[items] = track([
-				{ id: 1, text: 'Item 1' },
-				{ id: 2, text: 'Item 2' },
-				{ id: 3, text: 'Item 3' },
-			]);
-
-			for (let item of items; index i; key item.id) {
-				<div>{i + ':' + item.text}</div>
-			}
-
-			<button
-				onClick={() => {
-					items[0].id = 3;
-					items[1].id = 2;
-					items[2].id = 1;
-
-					items = [
-						{ ...items[0], text: 'Item 1!' },
-						{ ...items[1], text: 'Item 2!' },
-						{ ...items[2], text: 'Item 3!' },
-					];
-				}}
-			>
-				{'Reverse'}
-			</button>
+		function App() {
+			return <>
+				let &[items] = track([
+					{ id: 1, text: 'Item 1' },
+					{ id: 2, text: 'Item 2' },
+					{ id: 3, text: 'Item 3' },
+				]);
+				for (let item of items; index i; key item.id) {
+					<div>{i + ':' + item.text}</div>
+				}
+				<button
+					onClick={() => {
+						items[0].id = 3;
+						items[1].id = 2;
+						items[2].id = 1;
+
+						items = [
+							{ ...items[0], text: 'Item 1!' },
+							{ ...items[1], text: 'Item 2!' },
+							{ ...items[2], text: 'Item 3!' },
+						];
+					}}
+				>
+					{'Reverse'}
+				</button>
+			</>;
 		}
 
 		render(App);
@@ -314,22 +317,22 @@ describe('for statements', () => {
 	it('ref-based for with 32+ items: remove from start with shared refs via Map path', () => {
 		const objects = Array.from({ length: 50 }, (_, i) => ({ id: i, text: `Obj ${i}` }));
 
-		component App() {
-			let &[items] = track(objects.slice());
-
-			<div>
-				for (const item of items) {
-					<span class="item">{item.text}</span>
-				}
-			</div>
-
-			<button
-				onClick={() => {
-					items = objects.slice(15).reverse();
-				}}
-			>
-				{'Trim and reverse'}
-			</button>
+		function App() {
+			return <>
+				let &[items] = track(objects.slice());
+				<div>
+					for (const item of items) {
+						<span class="item">{item.text}</span>
+					}
+				</div>
+				<button
+					onClick={() => {
+						items = objects.slice(15).reverse();
+					}}
+				>
+					{'Trim and reverse'}
+				</button>
+			</>;
 		}
 
 		render(App);

package/tests/client/head.test.tsrx

@@ -14,11 +14,13 @@ describe('head elements', () => {
 	});
 
 	it('renders static title element', () => {
-		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>
+			</>;
 		}
 
 		render(App);
@@ -28,22 +30,23 @@ describe('head elements', () => {
 	});
 
 	it('renders reactive title element', () => {
-		component App() {
-			let &[title] = track('Initial Title');
-
-			<head>
-				<title>{title}</title>
-			</head>
-			<div>
-				<button
-					onClick={() => {
-						title = 'Updated Title';
-					}}
-				>
-					{'Update Title'}
-				</button>
-				<span>{title}</span>
-			</div>
+		function App() {
+			return <>
+				let &[title] = track('Initial Title');
+				<head>
+					<title>{title}</title>
+				</head>
+				<div>
+					<button
+						onClick={() => {
+							title = 'Updated Title';
+						}}
+					>
+						{'Update Title'}
+					</button>
+					<span>{title}</span>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -60,21 +63,22 @@ describe('head elements', () => {
 	});
 
 	it('renders title with template literal', () => {
-		component App() {
-			let &[name] = track('World');
-
-			<head>
-				<title>{`Hello ${name}!`}</title>
-			</head>
-			<div>
-				<button
-					onClick={() => {
-						name = 'Ripple';
-					}}
-				>
-					{'Change Name'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				let &[name] = track('World');
+				<head>
+					<title>{`Hello ${name}!`}</title>
+				</head>
+				<div>
+					<button
+						onClick={() => {
+							name = 'Ripple';
+						}}
+					>
+						{'Change Name'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -89,23 +93,24 @@ describe('head elements', () => {
 	});
 
 	it('renders title with computed value', () => {
-		component App() {
-			let &[count] = track(0);
-			let prefix = 'Count: ';
-
-			<head>
-				<title>{prefix + count}</title>
-			</head>
-			<div>
-				<button
-					onClick={() => {
-						count++;
-					}}
-				>
-					{'Increment'}
-				</button>
-				<span>{count}</span>
-			</div>
+		function App() {
+			return <>
+				let &[count] = track(0);
+				let prefix = 'Count: ';
+				<head>
+					<title>{prefix + count}</title>
+				</head>
+				<div>
+					<button
+						onClick={() => {
+							count++;
+						}}
+					>
+						{'Increment'}
+					</button>
+					<span>{count}</span>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -121,21 +126,22 @@ describe('head elements', () => {
 	});
 
 	it('handles multiple title updates', () => {
-		component App() {
-			let &[step] = track(1);
-
-			<head>
-				<title>{`Step ${step} of 3`}</title>
-			</head>
-			<div>
-				<button
-					onClick={() => {
-						step = step % 3 + 1;
-					}}
-				>
-					{'Next Step'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				let &[step] = track(1);
+				<head>
+					<title>{`Step ${step} of 3`}</title>
+				</head>
+				<div>
+					<button
+						onClick={() => {
+							step = step % 3 + 1;
+						}}
+					>
+						{'Next Step'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);
@@ -158,11 +164,13 @@ describe('head elements', () => {
 	});
 
 	it('renders empty title', () => {
-		component App() {
-			<head>
-				<title>{''}</title>
-			</head>
-			<div>{'Empty title test'}</div>
+		function App() {
+			return <>
+				<head>
+					<title>{''}</title>
+				</head>
+				<div>{'Empty title test'}</div>
+			</>;
 		}
 
 		render(App);
@@ -171,29 +179,30 @@ describe('head elements', () => {
 	});
 
 	it('renders title with conditional content', () => {
-		component App() {
-			let &[showPrefix] = track(true);
-			let &[title] = track('Main Page');
-
-			<head>
-				<title>{showPrefix ? 'App - ' + title : title}</title>
-			</head>
-			<div>
-				<button
-					onClick={() => {
-						showPrefix = !showPrefix;
-					}}
-				>
-					{'Toggle Prefix'}
-				</button>
-				<button
-					onClick={() => {
-						title = title === 'Main Page' ? 'Settings' : 'Main Page';
-					}}
-				>
-					{'Change Page'}
-				</button>
-			</div>
+		function App() {
+			return <>
+				let &[showPrefix] = track(true);
+				let &[title] = track('Main Page');
+				<head>
+					<title>{showPrefix ? 'App - ' + title : title}</title>
+				</head>
+				<div>
+					<button
+						onClick={() => {
+							showPrefix = !showPrefix;
+						}}
+					>
+						{'Toggle Prefix'}
+					</button>
+					<button
+						onClick={() => {
+							title = title === 'Main Page' ? 'Settings' : 'Main Page';
+						}}
+					>
+						{'Change Page'}
+					</button>
+				</div>
+			</>;
 		}
 
 		render(App);