ripple 0.3.67 → 0.3.69

package/tests/client/basic/basic.errors.test.tsrx

@@ -3,27 +3,27 @@ import { compile } from '@tsrx/ripple';
 
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {
-		component Basic() {
-			let &[hasError] = track(false);
-			let &[errorMessage] = track('');
-
-			const triggerError = () => {
-				try {
-					throw new Error('Test error');
-				} catch (e) {
-					hasError = true;
-					errorMessage = (e as Error).message;
-				}
-			};
-
-			<div>
-				<button onClick={triggerError}>{'Trigger Error'}</button>
-				if (hasError) {
-					<div class="error">{'Error caught: ' + errorMessage}</div>
-				} else {
-					<div class="success">{'No error'}</div>
-				}
-			</div>
+		function Basic() {
+			return <>
+				let &[hasError] = track(false);
+				let &[errorMessage] = track('');
+				const triggerError = () => {
+					try {
+						throw new Error('Test error');
+					} catch (e) {
+						hasError = true;
+						errorMessage = (e as Error).message;
+					}
+				};
+				<div>
+					<button onClick={triggerError}>{'Trigger Error'}</button>
+					if (hasError) {
+						<div class="error">{'Error caught: ' + errorMessage}</div>
+					} else {
+						<div class="success">{'No error'}</div>
+					}
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -43,29 +43,29 @@ describe('basic client > errors', () => {
 	});
 
 	it('should throw error for unclosed tag', () => {
-		const malformedCode = `export default component Example() {
+		const malformedCode = `export default function Example() { return <>
 	<div></span>
-}`;
+</>; }`;
 		expect(() => {
 			compile(malformedCode, 'test.tsrx');
 		}).toThrow('Expected closing tag to match opening tag');
 	});
 
 	it('should throw error for completely unclosed tag', () => {
-		const malformedCode = `export default component Example() {
+		const malformedCode = `export default function Example() { return <>
 	<div>content
-}`;
+</>; }`;
 
 		expect(() => {
 			compile(malformedCode, 'test.tsrx');
-		}).toThrow('Unclosed tag');
+		}).toThrow('Expected closing tag to match opening tag');
 	});
 
 	it('should throw error for interpolating children as text', () => {
 		const code = `
-			export component Layout({ children }) {
+			export function Layout({ children }) { return <>
 				<div>{children}</div>
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -75,9 +75,9 @@ describe('basic client > errors', () => {
 
 	it('should throw error for interpolating props.children as text', () => {
 		const code = `
-			export component Layout(props) {
+			export function Layout(props) { return <>
 				<div>{props.children}</div>
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -87,9 +87,9 @@ describe('basic client > errors', () => {
 
 	it('should throw error for calling children as a function', () => {
 		const code = `
-			export component Layout({ children }) {
+			export function Layout({ children }) { return <>
 				{children()}
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -101,9 +101,9 @@ describe('basic client > errors', () => {
 
 	it('should throw error for calling props.children as a function', () => {
 		const code = `
-			export component Layout(props) {
+			export function Layout(props) { return <>
 				{props.children()}
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -114,18 +114,18 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
-		component Basic() {
-			let &[count] = track(0);
-
-			const &[doubled] = track(() => {
-				try {
-					count *= 2;
-				} catch (e) {
-					error = (e as Error).message;
-				}
-			});
-
-			<p>{doubled}</p>
+		function Basic() {
+			return <>
+				let &[count] = track(0);
+				const &[doubled] = track(() => {
+					try {
+						count *= 2;
+					} catch (e) {
+						error = (e as Error).message;
+					}
+				});
+				<p>{doubled}</p>
+			</>;
 		}
 
 		render(Basic);
@@ -136,20 +136,20 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
-		component Basic() {
-			let &[count] = track(0);
-
-			const &[doubled] = track(() => {
-				try {
-					untrack(() => {
-						count *= 2;
-					});
-				} catch (e) {
-					error = (e as Error).message;
-				}
-			});
-
-			<p>{doubled}</p>
+		function Basic() {
+			return <>
+				let &[count] = track(0);
+				const &[doubled] = track(() => {
+					try {
+						untrack(() => {
+							count *= 2;
+						});
+					} catch (e) {
+						error = (e as Error).message;
+					}
+				});
+				<p>{doubled}</p>
+			</>;
 		}
 
 		render(Basic);
@@ -160,19 +160,19 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating a tracked variable in track() getter', () => {
-		component Basic() {
-			let &[count] = track(0);
-
-			const &[doubled] = track(0, (value) => {
-				try {
-					count += 1;
-				} catch (e) {
-					error = (e as Error).message;
-				}
-				return value;
-			});
-
-			<p>{doubled}</p>
+		function Basic() {
+			return <>
+				let &[count] = track(0);
+				const &[doubled] = track(0, (value) => {
+					try {
+						count += 1;
+					} catch (e) {
+						error = (e as Error).message;
+					}
+					return value;
+				});
+				<p>{doubled}</p>
+			</>;
 		}
 
 		render(Basic);
@@ -184,14 +184,14 @@ describe('basic client > errors', () => {
 
 	it('should throw error for await inside client components', () => {
 		const code = `
-			export default component App() {
+			export default async function App() { return <>
 				let data = 'initial';
 				if (true) {
 					await new Promise(r => setTimeout(r, 100));
 					data = 'loaded';
 				}
 				<div>{data}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx', { mode: 'client' });
@@ -200,39 +200,39 @@ describe('basic client > errors', () => {
 
 	it('should throw error for while loop inside a component', () => {
 		const code = `
-			export default component App() {
+			export default function App() { return <>
 				let i = 0;
 				while (i < 10) {
 					i++;
 				}
 				<div>{i}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
-		}).toThrow('While loops are not supported in components.');
+		}).toThrow('While loops are not supported in TSRX templates.');
 	});
 
 	it('should throw error for do...while loop inside a component', () => {
 		const code = `
-			export default component App() {
+			export default function App() { return <>
 				let i = 0;
 				do {
 					i++;
 				} while (i < 10);
 				<div>{i}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
-		}).toThrow('Do...while loops are not supported in components.');
+		}).toThrow('Do...while loops are not supported in TSRX templates.');
 	});
 
 	it('should allow JSX fragments in TSRX templates as <tsx> shorthand', () => {
 		const code = `
-			export default component SafeProfile() {
+			export default function SafeProfile() { return <>
 				<b><>{111}</></b>
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -242,9 +242,9 @@ describe('basic client > errors', () => {
 
 	it('should allow JSX fragments inside tsx blocks', () => {
 		const code = `
-			export default component SafeProfile() {
+			export default function SafeProfile() { return <>
 				<tsx><>{111}</></tsx>
-			}
+			</>; }
 		`;
 
 		expect(() => {
@@ -254,7 +254,7 @@ describe('basic client > errors', () => {
 
 	it('should not throw error for while loop inside a function within a component', () => {
 		const code = `
-			export default component App() {
+			export default function App() { return <>
 				const compute = () => {
 					let i = 0;
 					while (i < 10) {
@@ -263,7 +263,7 @@ describe('basic client > errors', () => {
 					return i;
 				};
 				<div>{compute()}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
@@ -272,7 +272,7 @@ describe('basic client > errors', () => {
 
 	it('should not throw error for do...while loop inside a function within a component', () => {
 		const code = `
-			export default component App() {
+			export default function App() { return <>
 				const compute = () => {
 					let i = 0;
 					do {
@@ -281,7 +281,7 @@ describe('basic client > errors', () => {
 					return i;
 				};
 				<div>{compute()}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
@@ -290,10 +290,10 @@ describe('basic client > errors', () => {
 
 	it('should throw error for variables using the reserved _$_ prefix', () => {
 		const code = `
-			export default component App() {
+			export default function App() { return <>
 				const _$_test = 'hello';
 				<div>{_$_test}</div>
-			}
+			</>; }
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');

package/tests/client/basic/basic.events.test.tsrx

@@ -3,22 +3,23 @@ import { flushSync, track } from 'ripple';
 
 describe('basic client > events', () => {
 	it('renders with different event types', () => {
-		component Basic() {
-			let &[focusCount] = track(0);
-			let &[clickCount] = track(0);
-
-			<button
-				onFocus={() => {
-					focusCount++;
-				}}
-				onClick={() => {
-					clickCount++;
-				}}
-			>
-				{'Test Button'}
-			</button>
-			<div class="focus-count">{focusCount}</div>
-			<div class="click-count">{clickCount}</div>
+		function Basic() {
+			return <>
+				let &[focusCount] = track(0);
+				let &[clickCount] = track(0);
+				<button
+					onFocus={() => {
+						focusCount++;
+					}}
+					onClick={() => {
+						clickCount++;
+					}}
+				>
+					{'Test Button'}
+				</button>
+				<div class="focus-count">{focusCount}</div>
+				<div class="click-count">{clickCount}</div>
+			</>;
 		}
 
 		render(Basic);
@@ -37,28 +38,29 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with capture events', () => {
-		component Basic() {
-			let &[captureClicks] = track(0);
-			let &[bubbleClicks] = track(0);
-
-			<div
-				onClick={{
-					handleEvent: () => {
-						captureClicks++;
-					},
-					capture: true,
-				}}
-			>
-				<button
-					onClick={() => {
-						bubbleClicks++;
+		function Basic() {
+			return <>
+				let &[captureClicks] = track(0);
+				let &[bubbleClicks] = track(0);
+				<div
+					onClick={{
+						handleEvent: () => {
+							captureClicks++;
+						},
+						capture: true,
 					}}
 				>
-					{'Click me'}
-				</button>
-				<div class="capture-count">{captureClicks}</div>
-				<div class="bubble-count">{bubbleClicks}</div>
-			</div>
+					<button
+						onClick={() => {
+							bubbleClicks++;
+						}}
+					>
+						{'Click me'}
+					</button>
+					<div class="capture-count">{captureClicks}</div>
+					<div class="bubble-count">{bubbleClicks}</div>
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -75,26 +77,25 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with event listeners in spread props', () => {
-		component Basic() {
-			let &[count] = track(0);
-
-			const minus = {
-				onClick() {
-					count--;
-				},
-			};
-
-			const plus = {
-				onClick() {
-					count++;
-				},
-			};
-
-			<div>
-				<button {...minus} class="minus">{'-'}</button>
-				<span class="count">{count}</span>
-				<button {...plus} class="plus">{'+'}</button>
-			</div>
+		function Basic() {
+			return <>
+				let &[count] = track(0);
+				const minus = {
+					onClick() {
+						count--;
+					},
+				};
+				const plus = {
+					onClick() {
+						count++;
+					},
+				};
+				<div>
+					<button {...minus} class="minus">{'-'}</button>
+					<span class="count">{count}</span>
+					<button {...plus} class="plus">{'+'}</button>
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -124,15 +125,16 @@ describe('basic client > events', () => {
 	});
 
 	it('removes event listeners from spread props when they are replaced by another prop', () => {
-		component Basic() {
-			let &[enabled] = track(true);
-			let &[count] = track(0);
-
-			<button class="target" {...(enabled ? { onClick: () => count++ } : { title: 'disabled' })}>
-				{'target'}
-			</button>
-			<button class="toggle" onClick={() => (enabled = false)}>{'toggle'}</button>
-			<span class="count">{count}</span>
+		function Basic() {
+			return <>
+				let &[enabled] = track(true);
+				let &[count] = track(0);
+				<button class="target" {...(enabled ? { onClick: () => count++ } : { title: 'disabled' })}>
+					{'target'}
+				</button>
+				<button class="toggle" onClick={() => (enabled = false)}>{'toggle'}</button>
+				<span class="count">{count}</span>
+			</>;
 		}
 
 		render(Basic);
@@ -154,26 +156,26 @@ describe('basic client > events', () => {
 	});
 
 	it('handles both delegated and non-delegated events in spread props', () => {
-		component Basic() {
-			let &[clickCount] = track(0);
-			let &[focusCount] = track(0);
-
-			const mixedHandler = {
-				onClick() {
-					// Delegated event
-					clickCount++;
-				},
-				onFocus() {
-					// Non-delegated event
-					focusCount++;
-				},
-			};
-
-			<div>
-				<button {...mixedHandler} class="mixed-button">{'Test'}</button>
-				<span class="click-count">{clickCount}</span>
-				<span class="focus-count">{focusCount}</span>
-			</div>
+		function Basic() {
+			return <>
+				let &[clickCount] = track(0);
+				let &[focusCount] = track(0);
+				const mixedHandler = {
+					onClick() {
+						// Delegated event
+						clickCount++;
+					},
+					onFocus() {
+						// Non-delegated event
+						focusCount++;
+					},
+				};
+				<div>
+					<button {...mixedHandler} class="mixed-button">{'Test'}</button>
+					<span class="click-count">{clickCount}</span>
+					<span class="focus-count">{focusCount}</span>
+				</div>
+			</>;
 		}
 
 		render(Basic);
@@ -197,36 +199,33 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with complex event handling and state updates', () => {
-		component Basic() {
-			let &[counter] = track(0);
-			let &[history] = track<string[]>([]);
-			let &[isEven] = track(true);
-
-			const handleIncrement = () => {
-				counter++;
-				history = [...history, `Inc to ${counter}`];
-				isEven = counter % 2 === 0;
-			};
-
-			const handleDecrement = () => {
-				counter--;
-				history = [...history, `Dec to ${counter}`];
-				isEven = counter % 2 === 0;
-			};
-
-			const handleReset = () => {
-				counter = 0;
-				history = [...history, 'Reset'];
-				isEven = true;
-			};
-
-			<div class="counter">{counter}</div>
-			<div class="parity">{isEven ? 'Even' : 'Odd'}</div>
-			<div class="history-count">{history.length}</div>
-
-			<button class="inc-btn" onClick={handleIncrement}>{'+'}</button>
-			<button class="dec-btn" onClick={handleDecrement}>{'-'}</button>
-			<button class="reset-btn" onClick={handleReset}>{'Reset'}</button>
+		function Basic() {
+			return <>
+				let &[counter] = track(0);
+				let &[history] = track<string[]>([]);
+				let &[isEven] = track(true);
+				const handleIncrement = () => {
+					counter++;
+					history = [...history, `Inc to ${counter}`];
+					isEven = counter % 2 === 0;
+				};
+				const handleDecrement = () => {
+					counter--;
+					history = [...history, `Dec to ${counter}`];
+					isEven = counter % 2 === 0;
+				};
+				const handleReset = () => {
+					counter = 0;
+					history = [...history, 'Reset'];
+					isEven = true;
+				};
+				<div class="counter">{counter}</div>
+				<div class="parity">{isEven ? 'Even' : 'Odd'}</div>
+				<div class="history-count">{history.length}</div>
+				<button class="inc-btn" onClick={handleIncrement}>{'+'}</button>
+				<button class="dec-btn" onClick={handleDecrement}>{'-'}</button>
+				<button class="reset-btn" onClick={handleReset}>{'Reset'}</button>
+			</>;
 		}
 
 		render(Basic);