ripple 0.3.7 → 0.3.8

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>
 				}
@@ -91,17 +91,17 @@ describe('basic client > errors', () => {
 
 	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 +113,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 +137,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'}

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

@@ -9,7 +9,7 @@ describe('basic client > reactivity', () => {
 					count: track(0),
 				};
 
-				<span>{obj.@count}</span>
+				<span>{obj.count.value}</span>
 			</div>
 			<div>
 				let b = {
@@ -18,15 +18,15 @@ describe('basic client > reactivity', () => {
 
 				<button
 					onClick={() => {
-						b.@count--;
+						b.count.value--;
 					}}
 				>
 					{'-'}
 				</button>
-				<span class="count">{b.@count}</span>
+				<span class="count">{b.count.value}</span>
 				<button
 					onClick={() => {
-						b.@count++;
+						b.count.value++;
 					}}
 				>
 					{'+'}
@@ -57,7 +57,7 @@ describe('basic client > reactivity', () => {
 					count: track(0),
 				};
 
-				<span>{obj.@[count]}</span>
+				<span>{obj[count].value}</span>
 			</div>
 			<div>
 				let b = {
@@ -66,15 +66,15 @@ describe('basic client > reactivity', () => {
 
 				<button
 					onClick={() => {
-						b.@[count]--;
+						b[count].value--;
 					}}
 				>
 					{'-'}
 				</button>
-				<span class="count">{b.@[count]}</span>
+				<span class="count">{b[count].value}</span>
 				<button
 					onClick={() => {
-						b.@[count]++;
+						b[count].value++;
 					}}
 				>
 					{'+'}
@@ -98,14 +98,14 @@ describe('basic client > reactivity', () => {
 
 	it('renders with computed reactive state', () => {
 		component Basic() {
-			let count = track(5);
+			let &[count] = track(5);
 
-			<div class="count">{@count}</div>
-			<div class="doubled">{@count * 2}</div>
-			<div class="is-even">{@count % 2 === 0 ? 'Even' : 'Odd'}</div>
+			<div class="count">{count}</div>
+			<div class="doubled">{count * 2}</div>
+			<div class="is-even">{count % 2 === 0 ? 'Even' : 'Odd'}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -139,43 +139,43 @@ describe('basic client > reactivity', () => {
 			let second = track(0);
 			const arr = [first, second];
 
-			const total = track(() => arr.reduce((a, b) => a + @b, 0));
+			const total = track(() => arr.reduce((a, b) => a + b.value, 0));
 
 			<button
 				onClick={() => {
-					@first++;
+					first.value++;
 				}}
 			>
-				{'first:' + @first}
+				{'first:' + first.value}
 			</button>
 			<button
 				onClick={() => {
-					@second++;
+					second.value++;
 				}}
 			>
-				{'second: ' + @second}
+				{'second: ' + second.value}
 			</button>
 
 			effect(() => {
 				let _arr: number[] = [];
 
 				arr.forEach((item) => {
-					_arr.push(@item);
+					_arr.push(item.value);
 				});
 
 				logs.push(_arr.join(', '));
 			});
 
 			effect(() => {
-				if (arr.map((a) => @a).includes(1)) {
+				if (arr.map((a) => a.value).includes(1)) {
 					logs.push('arr includes 1');
 				}
 			});
 
-			<div>{'Sum: ' + @total}</div>
-			<div>{'Comma Separated: ' + arr.map((a) => @a).join(', ')}</div>
-			<div>{'Number to string: ' + arr.map((a) => String(@a))}</div>
-			<div>{'Even numbers: ' + arr.map((a) => @a).filter((a) => a % 2 === 0)}</div>
+			<div>{'Sum: ' + total.value}</div>
+			<div>{'Comma Separated: ' + arr.map((a) => a.value).join(', ')}</div>
+			<div>{'Number to string: ' + arr.map((a) => String(a.value))}</div>
+			<div>{'Even numbers: ' + arr.map((a) => a.value).filter((a) => a % 2 === 0)}</div>
 		}
 
 		render(App);
@@ -211,12 +211,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where both mutate value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v * 2);
+			let &[count] = track(0, (v) => v + 1, (v) => v * 2);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -237,12 +237,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where set only mutates value', () => {
 		component App() {
-			let count = track(1, (v) => v, (v) => v * 2);
+			let &[count] = track(1, (v) => v, (v) => v * 2);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -263,12 +263,12 @@ describe('basic client > reactivity', () => {
 
 	it('uses track get and set where get only mutates value', () => {
 		component App() {
-			let count = track(0, (v) => v + 1, (v) => v);
+			let &[count] = track(0, (v) => v + 1, (v) => v);
 
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -291,14 +291,14 @@ describe('basic client > reactivity', () => {
 		let logs: number[] = [];
 
 		component App() {
-			let count = track(0, (v) => v, (next, prev) => {
+			let &[count] = track(0, (v) => v, (next, prev) => {
 				logs.push(prev, next);
 				return next;
 			});
 
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
@@ -316,14 +316,14 @@ describe('basic client > reactivity', () => {
 
 	it('doesn\'t error on mutating a tracked variable in track() setter', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const doubled = track(0, undefined, (value) => {
-				@count += value;
+			const &[doubled] = track(0, undefined, (value) => {
+				count += value;
 				return value;
 			});
 
-			<p>{@doubled}</p>
+			<p>{doubled}</p>
 		}
 
 		render(Basic);
@@ -335,10 +335,10 @@ describe('basic client > reactivity', () => {
 		let state: { count?: number } = {};
 
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			effect(() => {
-				state.count = @count;
+				state.count = count;
 			});
 		}
 
@@ -359,16 +359,16 @@ describe('basic client > reactivity', () => {
 		} = {};
 
 		component Basic() {
-			let count = track(5);
+			let &[count] = track(5);
 
 			effect(() => {
 				untrack(() => {
-					state.initialValue = @count;
-					state.preIncrement = ++@count;
-					state.postIncrement = @count++;
-					state.preDecrement = --@count;
-					state.postDecrement = @count--;
-					state.finalValue = @count;
+					state.initialValue = count;
+					state.preIncrement = ++count;
+					state.postIncrement = count++;
+					state.preDecrement = --count;
+					state.postDecrement = count--;
+					state.finalValue = count;
 				});
 			});
 		}
@@ -387,15 +387,15 @@ describe('basic client > reactivity', () => {
 	describe('track/trackSplit APIs', () => {
 		it('errors on invalid value as null for track with trackSplit', () => {
 			component App() {
-				let message = track('');
+				let &[message] = track('');
 
 				try {
 					const [a, b, rest] = trackSplit(null, ['a', 'b']);
 				} catch (e) {
-					@message = (e as Error).message;
+					message = (e as Error).message;
 				}
 
-				<pre>{@message}</pre>
+				<pre>{message}</pre>
 			}
 
 			render(App);
@@ -406,15 +406,15 @@ describe('basic client > reactivity', () => {
 
 		it('errors on invalid value as array for track with trackSplit', () => {
 			component App() {
-				let message = track('');
+				let &[message] = track('');
 
 				try {
 					const [a, b, rest] = trackSplit([1, 2, 3], ['a', 'b']);
 				} catch (e) {
-					@message = (e as Error).message;
+					message = (e as Error).message;
 				}
 
-				<pre>{@message}</pre>
+				<pre>{message}</pre>
 			}
 
 			render(App);
@@ -426,15 +426,15 @@ describe('basic client > reactivity', () => {
 		it('errors on invalid value as tracked for track with trackSplit', () => {
 			component App() {
 				const t = track({ a: 1, b: 2, c: 3 });
-				let message = track('');
+				let &[message] = track('');
 
 				try {
 					const [a, b, rest] = trackSplit(t, ['a', 'b']);
 				} catch (e) {
-					@message = (e as Error).message;
+					message = (e as Error).message;
 				}
 
-				<pre>{@message}</pre>
+				<pre>{message}</pre>
 			}
 
 			render(App);
@@ -447,9 +447,9 @@ describe('basic client > reactivity', () => {
 			component App() {
 				const [a, b, rest] = trackSplit({ a: 1, c: 1 }, ['a', 'b']);
 
-				<pre>{@a}</pre>
-				<pre>{String(@b)}</pre>
-				<pre>{@rest.c}</pre>
+				<pre>{a.value}</pre>
+				<pre>{String(b.value)}</pre>
+				<pre>{rest.value.c}</pre>
 			}
 
 			render(App);
@@ -481,8 +481,8 @@ describe('basic client > reactivity', () => {
 			let logs: string[] = [];
 
 			component App() {
-				let count = track(0);
-				let name = track('Click Me');
+				let &[count] = track(0);
+				let &[name] = track('Click Me');
 
 				function buttonRef(el: HTMLButtonElement) {
 					logs.push('ref called');
@@ -493,14 +493,14 @@ describe('basic client > reactivity', () => {
 
 				<Child
 					class="my-button"
-					onClick={() => @name === 'Click Me' ? @name = 'Clicked' : @name = 'Click Me'}
+					onClick={() => name === 'Click Me' ? name = 'Clicked' : name = 'Click Me'}
 					{count}
 					{ref buttonRef}
 				>
-					{@name}
+					{name}
 				</Child>
 
-				<button onClick={() => @count++}>{'Increment Count'}</button>
+				<button onClick={() => count++}>{'Increment Count'}</button>
 			}
 
 			component Child(props: PropsWithChildren<{
@@ -510,12 +510,12 @@ describe('basic client > reactivity', () => {
 			}>) {
 				const [children, count, rest] = trackSplit(props, ['children', 'count']);
 
-				if (@count < 2) {
-					<button {...@rest}>
+				if (count.value < 2) {
+					<button {...rest.value}>
 						<@children />
 					</button>
 				}
-				<pre>{@count}</pre>
+				<pre>{count.value}</pre>
 			}
 
 			render(App);