ripple 0.3.72 → 0.3.74

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', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Basic);
@@ -114,18 +114,16 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(0);
-				const &[doubled] = track(() => {
-					try {
-						count *= 2;
-					} catch (e) {
-						error = (e as Error).message;
-					}
-				});
-				<p>{doubled}</p>
-			</>;
+		function Basic() @{
+			let &[count] = track(0);
+			const &[doubled] = track(() => {
+				try {
+					count *= 2;
+				} catch (e) {
+					error = (e as Error).message;
+				}
+			});
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -136,20 +134,18 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
-		function Basic() {
-			return <>
-				let &[count] = track(0);
-				const &[doubled] = track(() => {
-					try {
-						untrack(() => {
-							count *= 2;
-						});
-					} catch (e) {
-						error = (e as Error).message;
-					}
-				});
-				<p>{doubled}</p>
-			</>;
+		function Basic() @{
+			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 +156,17 @@ describe('basic client > errors', () => {
 	});
 
 	it('errors on mutating a tracked variable in track() getter', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Basic);
@@ -184,48 +178,48 @@ describe('basic client > errors', () => {
 
 	it('should throw error for await inside client components', () => {
 		const code = `
-			export default async function App() { return <>
+			export default async function App() @{
 				let data = 'initial';
 				if (true) {
 					await new Promise(r => setTimeout(r, 100));
 					data = 'loaded';
 				}
 				<div>{data}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx', { mode: 'client' });
 		}).toThrow(/`await` is not allowed inside components\./);
 	});
 
-	it('should throw error for while loop inside a component', () => {
+	it('should allow while loop setup inside a component', () => {
 		const code = `
-			export default function App() { return <>
+			export default function App() @{
 				let i = 0;
 				while (i < 10) {
 					i++;
 				}
 				<div>{i}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
-		}).toThrow('While loops are not supported in TSRX templates.');
+		}).not.toThrow();
 	});
 
-	it('should throw error for do...while loop inside a component', () => {
+	it('should allow do...while loop setup inside a component', () => {
 		const code = `
-			export default function App() { return <>
+			export default function App() @{
 				let i = 0;
 				do {
 					i++;
 				} while (i < 10);
 				<div>{i}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
-		}).toThrow('Do...while loops are not supported in TSRX templates.');
+		}).not.toThrow();
 	});
 
 	it('should allow JSX fragments in TSRX templates as <> shorthand', () => {
@@ -254,7 +248,7 @@ describe('basic client > errors', () => {
 
 	it('should not throw error for while loop inside a function within a component', () => {
 		const code = `
-			export default function App() { return <>
+			export default function App() @{
 				const compute = () => {
 					let i = 0;
 					while (i < 10) {
@@ -263,7 +257,7 @@ describe('basic client > errors', () => {
 					return i;
 				};
 				<div>{compute()}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
@@ -272,7 +266,7 @@ describe('basic client > errors', () => {
 
 	it('should not throw error for do...while loop inside a function within a component', () => {
 		const code = `
-			export default function App() { return <>
+			export default function App() @{
 				const compute = () => {
 					let i = 0;
 					do {
@@ -281,7 +275,7 @@ describe('basic client > errors', () => {
 					return i;
 				};
 				<div>{compute()}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');
@@ -290,10 +284,10 @@ describe('basic client > errors', () => {
 
 	it('should throw error for variables using the reserved _$_ prefix', () => {
 		const code = `
-			export default function App() { return <>
+			export default function App() @{
 				const _$_test = 'hello';
 				<div>{_$_test}</div>
-			</>; }
+			}
 		`;
 		expect(() => {
 			compile(code, 'test.tsrx');

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

@@ -3,10 +3,10 @@ import { flushSync, track } from 'ripple';
 
 describe('basic client > events', () => {
 	it('renders with different event types', () => {
-		function Basic() {
-			return <>
-				let &[focusCount] = track(0);
-				let &[clickCount] = track(0);
+		function Basic() @{
+			let &[focusCount] = track(0);
+			let &[clickCount] = track(0);
+			<>
 				<button
 					onFocus={() => {
 						focusCount++;
@@ -14,12 +14,10 @@ describe('basic client > events', () => {
 					onClick={() => {
 						clickCount++;
 					}}
-				>
-					{'Test Button'}
-				</button>
+				>{'Test Button'}</button>
 				<div class="focus-count">{focusCount}</div>
 				<div class="click-count">{clickCount}</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -38,10 +36,10 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with capture events', () => {
-		function Basic() {
-			return <>
-				let &[captureClicks] = track(0);
-				let &[bubbleClicks] = track(0);
+		function Basic() @{
+			let &[captureClicks] = track(0);
+			let &[bubbleClicks] = track(0);
+			<>
 				<div
 					onClick={{
 						handleEvent: () => {
@@ -54,13 +52,11 @@ describe('basic client > events', () => {
 						onClick={() => {
 							bubbleClicks++;
 						}}
-					>
-						{'Click me'}
-					</button>
+					>{'Click me'}</button>
 					<div class="capture-count">{captureClicks}</div>
 					<div class="bubble-count">{bubbleClicks}</div>
 				</div>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -77,25 +73,23 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with event listeners in spread props', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Basic);
@@ -125,16 +119,17 @@ describe('basic client > events', () => {
 	});
 
 	it('removes event listeners from spread props when they are replaced by another prop', () => {
-		function Basic() {
-			return <>
-				let &[enabled] = track(true);
-				let &[count] = track(0);
-				<button class="target" {...(enabled ? { onClick: () => count++ } : { title: 'disabled' })}>
-					{'target'}
-				</button>
+		function 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>
-			</>;
+			</>
 		}
 
 		render(Basic);
@@ -156,26 +151,24 @@ describe('basic client > events', () => {
 	});
 
 	it('handles both delegated and non-delegated events in spread props', () => {
-		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>
-			</>;
+		function 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>
 		}
 
 		render(Basic);
@@ -199,33 +192,35 @@ describe('basic client > events', () => {
 	});
 
 	it('renders with complex event handling and state updates', () => {
-		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;
-				};
+		function 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="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);