ripple 0.3.7 → 0.3.9

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

@@ -4,22 +4,22 @@ import { compile } from 'ripple/compiler';
 describe('basic client > errors', () => {
 	it('renders with error handling simulation', () => {
 		component Basic() {
-			let hasError = track(false);
-			let errorMessage = track('');
+			let &[hasError] = track(false);
+			let &[errorMessage] = track('');
 
 			const triggerError = () => {
 				try {
 					throw new Error('Test error');
 				} catch (e) {
-					@hasError = true;
-					@errorMessage = (e as Error).message;
+					hasError = true;
+					errorMessage = (e as Error).message;
 				}
 			};
 
 			<div>
 				<button onClick={triggerError}>{'Trigger Error'}</button>
-				if (@hasError) {
-					<div class="error">{'Error caught: ' + @errorMessage}</div>
+				if (hasError) {
+					<div class="error">{'Error caught: ' + errorMessage}</div>
 				} else {
 					<div class="success">{'No error'}</div>
 				}
@@ -89,19 +89,47 @@ describe('basic client > errors', () => {
 		);
 	});
 
+	it('should throw error for calling children as a function', () => {
+		const code = `
+			export component Layout({ children }) {
+				{children()}
+			}
+		`;
+
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow(
+			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
+
+	it('should throw error for calling props.children as a function', () => {
+		const code = `
+			export component Layout(props) {
+				{props.children()}
+			}
+		`;
+
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow(
+			'`children` cannot be called like a regular function. Use element syntax instead, e.g. `<children />` or `<props.children />`.',
+		);
+	});
+
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const doubled = track(() => {
+			const &[doubled] = track(() => {
 				try {
-					@count *= 2;
+					count *= 2;
 				} catch (e) {
 					error = (e as Error).message;
 				}
 			});
 
-			<p>{@doubled}</p>
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -113,19 +141,19 @@ describe('basic client > errors', () => {
 
 	it('errors on mutating tracked value inside untrack() in computed track() evaluation', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const doubled = track(() => {
+			const &[doubled] = track(() => {
 				try {
 					untrack(() => {
-						@count *= 2;
+						count *= 2;
 					});
 				} catch (e) {
 					error = (e as Error).message;
 				}
 			});
 
-			<p>{@doubled}</p>
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -137,18 +165,18 @@ describe('basic client > errors', () => {
 
 	it('errors on mutating a tracked variable in track() getter', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const doubled = track(0, (value) => {
+			const &[doubled] = track(0, (value) => {
 				try {
-					@count += 1;
+					count += 1;
 				} catch (e) {
 					error = (e as Error).message;
 				}
 				return value;
 			});
 
-			<p>{@doubled}</p>
+			<p>{doubled}</p>
 		}
 
 		render(Basic);

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

@@ -4,21 +4,21 @@ 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);
+			let &[focusCount] = track(0);
+			let &[clickCount] = track(0);
 
 			<button
 				onFocus={() => {
-					@focusCount++;
+					focusCount++;
 				}}
 				onClick={() => {
-					@clickCount++;
+					clickCount++;
 				}}
 			>
 				{'Test Button'}
 			</button>
-			<div class="focus-count">{@focusCount}</div>
-			<div class="click-count">{@clickCount}</div>
+			<div class="focus-count">{focusCount}</div>
+			<div class="click-count">{clickCount}</div>
 		}
 
 		render(Basic);
@@ -38,26 +38,26 @@ describe('basic client > events', () => {
 
 	it('renders with capture events', () => {
 		component Basic() {
-			let captureClicks = track(0);
-			let bubbleClicks = track(0);
+			let &[captureClicks] = track(0);
+			let &[bubbleClicks] = track(0);
 
 			<div
 				onClick={{
 					handleEvent: () => {
-						@captureClicks++;
+						captureClicks++;
 					},
 					capture: true,
 				}}
 			>
 				<button
 					onClick={() => {
-						@bubbleClicks++;
+						bubbleClicks++;
 					}}
 				>
 					{'Click me'}
 				</button>
-				<div class="capture-count">{@captureClicks}</div>
-				<div class="bubble-count">{@bubbleClicks}</div>
+				<div class="capture-count">{captureClicks}</div>
+				<div class="bubble-count">{bubbleClicks}</div>
 			</div>
 		}
 
@@ -76,23 +76,23 @@ describe('basic client > events', () => {
 
 	it('renders with event listeners in spread props', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			const minus = {
 				onClick() {
-					@count--;
+					count--;
 				},
 			};
 
 			const plus = {
 				onClick() {
-					@count++;
+					count++;
 				},
 			};
 
 			<div>
 				<button {...minus} class="minus">{'-'}</button>
-				<span class="count">{@count}</span>
+				<span class="count">{count}</span>
 				<button {...plus} class="plus">{'+'}</button>
 			</div>
 		}
@@ -125,24 +125,24 @@ 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);
+			let &[clickCount] = track(0);
+			let &[focusCount] = track(0);
 
 			const mixedHandler = {
 				onClick() {
 					// Delegated event
-					@clickCount++;
+					clickCount++;
 				},
 				onFocus() {
 					// Non-delegated event
-					@focusCount++;
+					focusCount++;
 				},
 			};
 
 			<div>
 				<button {...mixedHandler} class="mixed-button">{'Test'}</button>
-				<span class="click-count">{@clickCount}</span>
-				<span class="focus-count">{@focusCount}</span>
+				<span class="click-count">{clickCount}</span>
+				<span class="focus-count">{focusCount}</span>
 			</div>
 		}
 
@@ -168,31 +168,31 @@ 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);
+			let &[counter] = track(0);
+			let &[history] = track<string[]>([]);
+			let &[isEven] = track(true);
 
 			const handleIncrement = () => {
-				@counter++;
-				@history = [...@history, `Inc to ${@counter}`];
-				@isEven = @counter % 2 === 0;
+				counter++;
+				history = [...history, `Inc to ${counter}`];
+				isEven = counter % 2 === 0;
 			};
 
 			const handleDecrement = () => {
-				@counter--;
-				@history = [...@history, `Dec to ${@counter}`];
-				@isEven = @counter % 2 === 0;
+				counter--;
+				history = [...history, `Dec to ${counter}`];
+				isEven = counter % 2 === 0;
 			};
 
 			const handleReset = () => {
-				@counter = 0;
-				@history = [...@history, 'Reset'];
-				@isEven = true;
+				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>
+			<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>

package/tests/client/basic/basic.get-set.test.ripple

@@ -16,10 +16,10 @@ describe('basic client > get/set functions', () => {
 
 	it('gets tracked value after mutation', () => {
 		component Test() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			<p>{get(count)}</p>
-			<button onClick={() => @count++}>{'increment'}</button>
+			<button onClick={() => count++}>{'increment'}</button>
 		}
 
 		render(Test);
@@ -36,14 +36,14 @@ describe('basic client > get/set functions', () => {
 
 	it('gets tracked value after multiple mutations', () => {
 		component Test() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			<p>{get(count)}</p>
 			<button
 				onClick={() => {
-					@count++;
-					@count++;
-					@count++;
+					count++;
+					count++;
+					count++;
 				}}
 			>
 				{'increment'}