ripple 0.3.6 → 0.3.8

package/tests/client/dynamic-elements.test.ripple

@@ -21,7 +21,7 @@ describe('dynamic DOM elements', () => {
 		component App() {
 			let obj = { tag: track('div') };
 
-			<obj.@tag>{'Hello World'}</obj.@tag>
+			<obj.tag.value>{'Hello World'}</obj.tag.value>
 		}
 		render(App);
 
@@ -33,8 +33,9 @@ describe('dynamic DOM elements', () => {
 	it('renders static dynamic element from a tracked object with a tracked property', () => {
 		component App() {
 			let obj = track({ tag: track('div') });
+			let tag = obj.value.tag;
 
-			<@obj.@tag>{'Hello World'}</@obj.@tag>
+			<@tag>{'Hello World'}</@tag>
 		}
 		render(App);
 
@@ -48,8 +49,9 @@ describe('dynamic DOM elements', () => {
 		() => {
 			component App() {
 				let obj = track({ tag: track('div') });
+				let tag = obj.value['tag'];
 
-				<@obj.@['tag']>{'Hello World'}</@obj.@['tag']>
+				<@tag>{'Hello World'}</@tag>
 			}
 			render(App);
 
@@ -61,11 +63,11 @@ describe('dynamic DOM elements', () => {
 
 	it('renders reactive dynamic element', () => {
 		component App() {
-			let tag = track('div');
+			let &[tag] = track('div');
 
 			<button
 				onClick={() => {
-					@tag = 'span';
+					tag = 'span';
 				}}
 			>
 				{'Change Tag'}
@@ -107,9 +109,9 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with attributes', () => {
 		component App() {
 			let tag = track('div');
-			let className = track('test-class');
+			let &[className] = track('test-class');
 
-			<@tag class={@className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
 		render(App);
 
@@ -143,11 +145,9 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with class object', () => {
 		component App() {
 			let tag = track('div');
-			let active = track(true);
+			let &[active] = track(true);
 
-			<@tag class={{ active: @active, 'dynamic-element': true }}>
-				{'Element with class object'}
-			</@tag>
+			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
 		}
 		render(App);
 
@@ -258,22 +258,22 @@ describe('dynamic DOM elements', () => {
 	it('has reactive attributes on dynamic elements', () => {
 		component App() {
 			let tag = track('div');
-			let count = track(0);
+			let &[count] = track(0);
 
 			<button
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Increment'}
 			</button>
 			<@tag
-				id={@count % 2 ? 'even' : 'odd'}
-				class={@count % 2 ? 'even-class' : 'odd-class'}
-				data-count={@count}
+				id={count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even-class' : 'odd-class'}
+				data-count={count}
 			>
 				{'Count: '}
-				{@count}
+				{count}
 			</@tag>
 		}
 
@@ -337,17 +337,17 @@ describe('dynamic DOM elements', () => {
 	it('applies scoped CSS to dynamic elements with reactive classes', () => {
 		component App() {
 			let tag = track('button');
-			let count = track(0);
+			let &[count] = track(0);
 
 			<@tag
-				class={@count % 2 ? 'even' : 'odd'}
-				id={@count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even' : 'odd'}
+				id={count % 2 ? 'even' : 'odd'}
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			>
 				{'Count: '}
-				{@count}
+				{count}
 			</@tag>
 
 			<style>
@@ -412,7 +412,7 @@ describe('dynamic DOM elements', () => {
 		}>) {
 			const tag = track('button');
 			const [rest] = trackSplit(props, []);
-			<@tag {...@rest}>{@rest.class}</@tag>
+			<@tag {...rest.value}>{rest.value.class}</@tag>
 
 			<style>
 				.even {
@@ -425,12 +425,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			const count = track(0);
+			let &[count] = track(0);
 			<DynamicButton
-				class={@count % 2 ? 'even' : 'odd'}
-				id={@count % 2 ? 'even' : 'odd'}
+				class={count % 2 ? 'even' : 'odd'}
+				id={count % 2 ? 'even' : 'odd'}
 				onClick={() => {
-					@count++;
+					count++;
 				}}
 			/>
 		}
@@ -603,12 +603,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
 			<Button
-				data-active={String(@active)}
+				data-active={String(active)}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
@@ -646,25 +646,25 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
-			let buttonProps = track(
+			let &[buttonProps] = track(
 				() => ({
-					'data-active': @active,
+					'data-active': active,
 				}),
 			);
 
 			<Button
-				{...@buttonProps}
+				{...buttonProps}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
 				}}
 			>
 				{'content: '}
-				{@active}
+				{active}
 			</Button>
 		}
 
@@ -693,12 +693,12 @@ describe('dynamic DOM elements', () => {
 		}
 
 		component App() {
-			let active = track(false);
+			let &[active] = track(false);
 
 			<Button
-				data-active={String(@active)}
+				data-active={String(active)}
 				onClick={() => {
-					@active = !@active;
+					active = !active;
 				}}
 				{ref (el: HTMLElement) => {
 					capturedElement = el;
@@ -730,13 +730,13 @@ describe('dynamic DOM elements', () => {
 
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
 		component App() {
-			let b = track(true);
+			let &[b] = track(true);
 			<div>
-				if (@b) {
+				if (b) {
 					{'Inside if'}
 				}
 			</div>
-			<button onClick={() => (@b = !@b)}>{'Toggle b'}</button>
+			<button onClick={() => (b = !b)}>{'Toggle b'}</button>
 		}
 
 		render(App);

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>
 		}