ripple 0.3.7 → 0.3.9

package/tests/client/events.test.ripple

@@ -4,19 +4,19 @@ import { effect, flushSync, on, track } from 'ripple';
 describe('on() event handler', () => {
 	it('should attach multiple handlers via onClick attribute (delegated)', () => {
 		component Basic() {
-			let count1 = track(0);
-			let count2 = track(0);
+			let &[count1] = track(0);
+			let &[count2] = track(0);
 
 			<button
 				onClick={() => {
-					@count1++;
-					@count2++;
+					count1++;
+					count2++;
 				}}
 			>
 				{'Click me'}
 			</button>
-			<div class="count1">{@count1}</div>
-			<div class="count2">{@count2}</div>
+			<div class="count1">{count1}</div>
+			<div class="count2">{count2}</div>
 		}
 
 		render(Basic);
@@ -36,16 +36,16 @@ describe('on() event handler', () => {
 
 	it('should attach and remove a single event handler', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			const setupListener = (node: HTMLButtonElement) => {
 				const remove = on(node, 'click', () => {
-					@count++;
+					count++;
 				});
 				return remove;
 			};
 			<button {ref setupListener}>{'Click me'}</button>
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 		}
 
 		render(Basic);
@@ -67,15 +67,15 @@ describe('on() event handler', () => {
 
 	it('should handle multiple different event types on same element', () => {
 		component Basic() {
-			let clickCount = track(0);
-			let mousedownCount = track(0);
+			let &[clickCount] = track(0);
+			let &[mousedownCount] = track(0);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const remove1 = on(node, 'click', () => {
-					@clickCount++;
+					clickCount++;
 				});
 				const remove2 = on(node, 'mousedown', () => {
-					@mousedownCount++;
+					mousedownCount++;
 				});
 				return () => {
 					remove1();
@@ -83,8 +83,8 @@ describe('on() event handler', () => {
 				};
 			};
 			<button {ref setupListeners}>{'Test'}</button>
-			<div class="click-count">{@clickCount}</div>
-			<div class="mousedown-count">{@mousedownCount}</div>
+			<div class="click-count">{clickCount}</div>
+			<div class="mousedown-count">{mousedownCount}</div>
 		}
 
 		render(Basic);
@@ -116,17 +116,17 @@ describe('on() event handler', () => {
 
 	it('should handle multiple handlers for same event type on same element', () => {
 		component Basic() {
-			let callOrder = track<number[]>([]);
+			let &[callOrder] = track<number[]>([]);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const remove1 = on(node, 'click', () => {
-					@callOrder = [...@callOrder, 1];
+					callOrder = [...callOrder, 1];
 				});
 				const remove2 = on(node, 'click', () => {
-					@callOrder = [...@callOrder, 2];
+					callOrder = [...callOrder, 2];
 				});
 				const remove3 = on(node, 'click', () => {
-					@callOrder = [...@callOrder, 3];
+					callOrder = [...callOrder, 3];
 				});
 				return () => {
 					remove1();
@@ -135,7 +135,7 @@ describe('on() event handler', () => {
 				};
 			};
 			<button {ref setupListeners}>{'Click me'}</button>
-			<div class="order">{@callOrder.join(',')}</div>
+			<div class="order">{callOrder.join(',')}</div>
 		}
 
 		render(Basic);
@@ -158,20 +158,20 @@ describe('on() event handler', () => {
 
 	it('should remove specific handler without affecting others', () => {
 		component Basic() {
-			let handler1Called = track(0);
-			let handler2Called = track(0);
-			let handler3Called = track(0);
+			let &[handler1Called] = track(0);
+			let &[handler2Called] = track(0);
+			let &[handler3Called] = track(0);
 			let removeHandler2: OnEventListenerRemover | undefined;
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const remove1 = on(node, 'click', () => {
-					@handler1Called++;
+					handler1Called++;
 				});
 				removeHandler2 = on(node, 'click', () => {
-					@handler2Called++;
+					handler2Called++;
 				});
 				const remove3 = on(node, 'click', () => {
-					@handler3Called++;
+					handler3Called++;
 				});
 				return () => {
 					remove1();
@@ -190,9 +190,9 @@ describe('on() event handler', () => {
 				>
 					{'Remove handler 2'}
 				</button>
-				<div class="h1">{@handler1Called}</div>
-				<div class="h2">{@handler2Called}</div>
-				<div class="h3">{@handler3Called}</div>
+				<div class="h1">{handler1Called}</div>
+				<div class="h2">{handler2Called}</div>
+				<div class="h3">{handler3Called}</div>
 			</div>
 		}
 
@@ -235,18 +235,18 @@ describe('on() event handler', () => {
 		'should handle change event with multiple handlers (like bindChecked and bindIndeterminate)',
 		() => {
 			component Basic() {
-				let checked = track(false);
-				let indeterminate = track(true);
+				let &[checked] = track(false);
+				let &[indeterminate] = track(true);
 
 				const setupListeners = (node: HTMLInputElement) => {
-					node.indeterminate = @indeterminate;
-					node.checked = @checked;
+					node.indeterminate = indeterminate;
+					node.checked = checked;
 
 					const remove1 = on(node, 'change', () => {
-						@checked = node.checked;
+						checked = node.checked;
 					});
 					const remove2 = on(node, 'change', () => {
-						@indeterminate = node.indeterminate;
+						indeterminate = node.indeterminate;
 					});
 					return () => {
 						remove1();
@@ -255,8 +255,8 @@ describe('on() event handler', () => {
 				};
 				<div>
 					<input type="checkbox" {ref setupListeners} />
-					<div class="checked">{@checked ? 'true' : 'false'}</div>
-					<div class="indeterminate">{@indeterminate ? 'true' : 'false'}</div>
+					<div class="checked">{checked ? 'true' : 'false'}</div>
+					<div class="indeterminate">{indeterminate ? 'true' : 'false'}</div>
 				</div>
 			}
 
@@ -283,17 +283,17 @@ describe('on() event handler', () => {
 
 	it('should support non-delegated events', () => {
 		component Basic() {
-			let focusCount = track(0);
+			let &[focusCount] = track(0);
 
 			const setupListener = (node: HTMLInputElement) => {
 				const remove = on(node, 'focus', () => {
-					@focusCount++;
+					focusCount++;
 				});
 				return remove;
 			};
 
 			<input {ref setupListener} />
-			<div class="focus-count">{@focusCount}</div>
+			<div class="focus-count">{focusCount}</div>
 		}
 
 		render(Basic);
@@ -315,20 +315,20 @@ describe('on() event handler', () => {
 
 	it('should handle removal of all handlers for same event type', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 			let remove1: OnEventListenerRemover | undefined;
 			let remove2: OnEventListenerRemover | undefined;
 			let remove3: OnEventListenerRemover | undefined;
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				remove1 = on(node, 'click', () => {
-					@count++;
+					count++;
 				});
 				remove2 = on(node, 'click', () => {
-					@count += 10;
+					count += 10;
 				});
 				remove3 = on(node, 'click', () => {
-					@count += 100;
+					count += 100;
 				});
 				return () => {
 					remove1?.();
@@ -349,7 +349,7 @@ describe('on() event handler', () => {
 				>
 					{'Remove all'}
 				</button>
-				<div class="count">{@count}</div>
+				<div class="count">{count}</div>
 			</div>
 		}
 
@@ -379,10 +379,10 @@ describe('on() event handler', () => {
 
 	it('should not add duplicate handlers when same handler is attached multiple times', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			const sharedHandler = () => {
-				@count++;
+				count++;
 			};
 
 			const setupListeners = (node: HTMLButtonElement) => {
@@ -399,7 +399,7 @@ describe('on() event handler', () => {
 			};
 
 			<button {ref setupListeners}>{'Click me'}</button>
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 		}
 
 		render(Basic);
@@ -422,10 +422,10 @@ describe('on() event handler', () => {
 
 	it('should allow duplicate handlers when delegated is false (no deduplication)', () => {
 		component Basic() {
-			let count = track(0);
+			let &[count] = track(0);
 
 			const sharedHandler = () => {
-				@count++;
+				count++;
 			};
 
 			const setupListeners = (node: HTMLButtonElement) => {
@@ -442,7 +442,7 @@ describe('on() event handler', () => {
 			};
 
 			<button {ref setupListeners}>{'Click me'}</button>
-			<div class="count">{@count}</div>
+			<div class="count">{count}</div>
 		}
 
 		render(Basic);
@@ -466,14 +466,14 @@ describe('on() event handler', () => {
 
 	it('should fire capture event on parent before bubbling event on child', () => {
 		component Basic() {
-			let callOrder = track<string[]>([]);
+			let &[callOrder] = track<string[]>([]);
 
 			const parentCaptureHandler = () => {
-				@callOrder = [...@callOrder, 'parent-capture'];
+				callOrder = [...callOrder, 'parent-capture'];
 			};
 
 			const childBubbleHandler = () => {
-				@callOrder = [...@callOrder, 'child-bubble'];
+				callOrder = [...callOrder, 'child-bubble'];
 			};
 
 			const setupParent = (node: HTMLDivElement) => {
@@ -487,7 +487,7 @@ describe('on() event handler', () => {
 			<div {ref setupParent} class="parent">
 				<button {ref setupChild} class="child">{'Click me'}</button>
 			</div>
-			<div class="order">{@callOrder.join(',')}</div>
+			<div class="order">{callOrder.join(',')}</div>
 		}
 
 		render(Basic);
@@ -511,16 +511,16 @@ describe('on() event handler', () => {
 
 	it('should fire handler only once when once option is true', () => {
 		component Basic() {
-			let count = track(0);
-			let permanentCount = track(0);
+			let &[count] = track(0);
+			let &[permanentCount] = track(0);
 
 			const setupListeners = (node: HTMLButtonElement) => {
 				const onceHandler = on(node, 'click', () => {
-					@count++;
+					count++;
 				}, { once: true });
 
 				const permanentHandler = on(node, 'click', () => {
-					@permanentCount++;
+					permanentCount++;
 				});
 
 				return () => {
@@ -530,8 +530,8 @@ describe('on() event handler', () => {
 			};
 
 			<button {ref setupListeners}>{'Click me'}</button>
-			<div class="once-count">{@count}</div>
-			<div class="permanent-count">{@permanentCount}</div>
+			<div class="once-count">{count}</div>
+			<div class="permanent-count">{permanentCount}</div>
 		}
 
 		render(Basic);
@@ -565,18 +565,18 @@ describe('on() event handler', () => {
 
 	it('should handle click events on window', () => {
 		component Basic() {
-			let windowClickCount = track(0);
+			let &[windowClickCount] = track(0);
 
 			effect(() => {
 				const removeWindowListener = on(window, 'click', () => {
-					@windowClickCount++;
+					windowClickCount++;
 				});
 				return removeWindowListener;
 			});
 
 			<div>
 				<button class="test-btn">{'Click me'}</button>
-				<div class="window-count">{@windowClickCount}</div>
+				<div class="window-count">{windowClickCount}</div>
 			</div>
 		}
 
@@ -601,18 +601,18 @@ describe('on() event handler', () => {
 
 	it('should handle click events on document', () => {
 		component Basic() {
-			let documentClickCount = track(0);
+			let &[documentClickCount] = track(0);
 
 			effect(() => {
 				const removeDocumentListener = on(document, 'click', () => {
-					@documentClickCount++;
+					documentClickCount++;
 				});
 				return removeDocumentListener;
 			});
 
 			<div>
 				<button class="test-btn">{'Click me'}</button>
-				<div class="document-count">{@documentClickCount}</div>
+				<div class="document-count">{documentClickCount}</div>
 			</div>
 		}
 
@@ -637,18 +637,18 @@ describe('on() event handler', () => {
 
 	it('should handle click events on body', () => {
 		component Basic() {
-			let bodyClickCount = track(0);
+			let &[bodyClickCount] = track(0);
 
 			effect(() => {
 				const removeBodyListener = on(document.body, 'click', () => {
-					@bodyClickCount++;
+					bodyClickCount++;
 				});
 				return removeBodyListener;
 			});
 
 			<div>
 				<button class="test-btn">{'Click me'}</button>
-				<div class="body-count">{@bodyClickCount}</div>
+				<div class="body-count">{bodyClickCount}</div>
 			</div>
 		}
 

package/tests/client/for.test.ripple

@@ -101,19 +101,19 @@ describe('for statements', () => {
 
 	it('correctly handles keyed for...of loops', () => {
 		component App() {
-			let items = track([
+			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) {
+			for (let item of items; index i; key item.id) {
 				<div>{i + ':' + item.text}</div>
 			}
 
 			<button
 				onClick={() => {
-					@items = @items.toReversed();
+					items = items.toReversed();
 				}}
 			>
 				{'Reverse'}
@@ -134,23 +134,23 @@ describe('for statements', () => {
 
 	it('keyed for over derived updates sibling text nodes', () => {
 		component App() {
-			let count = track(0);
+			let &[count] = track(0);
 
-			const items = track(
-				() => Array.from({ length: @count }).map((_, id) => ({ id, label: `Item ${id}` })),
+			let &[items] = track(
+				() => Array.from({ length: count }).map((_, id) => ({ id, label: `Item ${id}` })),
 			);
 
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Add'}
 			</button>
-			for (const item of @items; key item.id) {
+			for (const item of items; key item.id) {
 				<div class="item">{item.label}</div>
 			}
-			<p class="count">{@count}</p>
+			<p class="count">{count}</p>
 		}
 
 		render(App);
@@ -175,17 +175,17 @@ 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}` })));
+			let &[items] = track(Array.from({ length: 40 }, (_, i) => ({ id: i, text: `Item ${i}` })));
 
 			<div>
-				for (let item of @items; index idx; key item.id) {
+				for (let item of items; index idx; key item.id) {
 					<span class="item">{idx + ':' + item.text}</span>
 				}
 			</div>
 
 			<button
 				onClick={() => {
-					@items = @items.toReversed();
+					items = items.toReversed();
 				}}
 			>
 				{'Reverse'}
@@ -208,26 +208,26 @@ describe('for statements', () => {
 
 	it('handles updating with new objects with same key', () => {
 		component App() {
-			let items = track([
+			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) {
+			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!' },
+					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!' },
 					];
 				}}
 			>
@@ -249,17 +249,17 @@ describe('for statements', () => {
 		const objects = Array.from({ length: 50 }, (_, i) => ({ id: i, text: `Obj ${i}` }));
 
 		component App() {
-			let items = track(objects.slice());
+			let &[items] = track(objects.slice());
 
 			<div>
-				for (const item of @items) {
+				for (const item of items) {
 					<span class="item">{item.text}</span>
 				}
 			</div>
 
 			<button
 				onClick={() => {
-					@items = objects.slice(15).reverse();
+					items = objects.slice(15).reverse();
 				}}
 			>
 				{'Trim and reverse'}

package/tests/client/head.test.ripple

@@ -29,20 +29,20 @@ describe('head elements', () => {
 
 	it('renders reactive title element', () => {
 		component App() {
-			let title = track('Initial Title');
+			let &[title] = track('Initial Title');
 
 			<head>
-				<title>{@title}</title>
+				<title>{title}</title>
 			</head>
 			<div>
 				<button
 					onClick={() => {
-						@title = 'Updated Title';
+						title = 'Updated Title';
 					}}
 				>
 					{'Update Title'}
 				</button>
-				<span>{@title}</span>
+				<span>{title}</span>
 			</div>
 		}
 
@@ -61,15 +61,15 @@ describe('head elements', () => {
 
 	it('renders title with template literal', () => {
 		component App() {
-			let name = track('World');
+			let &[name] = track('World');
 
 			<head>
-				<title>{`Hello ${@name}!`}</title>
+				<title>{`Hello ${name}!`}</title>
 			</head>
 			<div>
 				<button
 					onClick={() => {
-						@name = 'Ripple';
+						name = 'Ripple';
 					}}
 				>
 					{'Change Name'}
@@ -90,21 +90,21 @@ describe('head elements', () => {
 
 	it('renders title with computed value', () => {
 		component App() {
-			let count = track(0);
+			let &[count] = track(0);
 			let prefix = 'Count: ';
 
 			<head>
-				<title>{prefix + @count}</title>
+				<title>{prefix + count}</title>
 			</head>
 			<div>
 				<button
 					onClick={() => {
-						@count++;
+						count++;
 					}}
 				>
 					{'Increment'}
 				</button>
-				<span>{@count}</span>
+				<span>{count}</span>
 			</div>
 		}
 
@@ -122,15 +122,15 @@ describe('head elements', () => {
 
 	it('handles multiple title updates', () => {
 		component App() {
-			let step = track(1);
+			let &[step] = track(1);
 
 			<head>
-				<title>{`Step ${@step} of 3`}</title>
+				<title>{`Step ${step} of 3`}</title>
 			</head>
 			<div>
 				<button
 					onClick={() => {
-						@step = @step % 3 + 1;
+						step = step % 3 + 1;
 					}}
 				>
 					{'Next Step'}
@@ -172,23 +172,23 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', () => {
 		component App() {
-			let showPrefix = track(true);
-			let title = track('Main Page');
+			let &[showPrefix] = track(true);
+			let &[title] = track('Main Page');
 
 			<head>
-				<title>{@showPrefix ? 'App - ' + @title : @title}</title>
+				<title>{showPrefix ? 'App - ' + title : title}</title>
 			</head>
 			<div>
 				<button
 					onClick={() => {
-						@showPrefix = !@showPrefix;
+						showPrefix = !showPrefix;
 					}}
 				>
 					{'Toggle Prefix'}
 				</button>
 				<button
 					onClick={() => {
-						@title = @title === 'Main Page' ? 'Settings' : 'Main Page';
+						title = title === 'Main Page' ? 'Settings' : 'Main Page';
 					}}
 				>
 					{'Change Page'}

package/tests/client/html.test.ripple

@@ -14,13 +14,13 @@ describe('html directive', () => {
 
 	it('renders dynamic html', () => {
 		component App() {
-			let str = track('<div>Test</div>');
+			let &[str] = track('<div>Test</div>');
 
-			{html @str}
+			{html str}
 
 			<button
 				onClick={() => {
-					@str = '<div>Updated</div>';
+					str = '<div>Updated</div>';
 				}}
 			>
 				{'Update'}