ripple 0.3.7 → 0.3.8

package/tests/hydration/components/events.ripple

@@ -3,36 +3,36 @@ import { track } from 'ripple';
 // Event handling components for hydration testing
 
 export component ClickCounter() {
-	let count = track(0);
+	let &[count] = track(0);
 	<div>
 		<button
 			class="increment"
 			onClick={() => {
-				@count++;
+				count++;
 			}}
 		>
 			{'Increment'}
 		</button>
-		<span class="count">{@count}</span>
+		<span class="count">{count}</span>
 	</div>
 }
 
 export component IncrementDecrement() {
-	let count = track(0);
+	let &[count] = track(0);
 	<div>
 		<button
 			class="decrement"
 			onClick={() => {
-				@count--;
+				count--;
 			}}
 		>
 			{'-'}
 		</button>
-		<span class="count">{@count}</span>
+		<span class="count">{count}</span>
 		<button
 			class="increment"
 			onClick={() => {
-				@count++;
+				count++;
 			}}
 		>
 			{'+'}
@@ -41,51 +41,51 @@ export component IncrementDecrement() {
 }
 
 export component MultipleEvents() {
-	let clicks = track(0);
-	let hovers = track(0);
+	let &[clicks] = track(0);
+	let &[hovers] = track(0);
 	<div>
 		<button
 			class="target"
 			onClick={() => {
-				@clicks++;
+				clicks++;
 			}}
 			onMouseEnter={() => {
-				@hovers++;
+				hovers++;
 			}}
 		>
 			{'Target'}
 		</button>
-		<span class="clicks">{@clicks}</span>
-		<span class="hovers">{@hovers}</span>
+		<span class="clicks">{clicks}</span>
+		<span class="hovers">{hovers}</span>
 	</div>
 }
 
 export component MultiStateUpdate() {
-	let count = track(0);
-	let lastAction = track('none');
+	let &[count] = track(0);
+	let &[lastAction] = track('none');
 
 	const handleClick = () => {
-		@count++;
-		@lastAction = 'increment';
+		count++;
+		lastAction = 'increment';
 	};
 
 	<div>
 		<button class="btn" onClick={handleClick}>{'Click'}</button>
-		<span class="count">{@count}</span>
-		<span class="action">{@lastAction}</span>
+		<span class="count">{count}</span>
+		<span class="action">{lastAction}</span>
 	</div>
 }
 
 export component ToggleButton() {
-	let isOn = track(false);
+	let &[isOn] = track(false);
 	<div>
 		<button
 			class="toggle"
 			onClick={() => {
-				@isOn = !@isOn;
+				isOn = !isOn;
 			}}
 		>
-			{@isOn ? 'ON' : 'OFF'}
+			{isOn ? 'ON' : 'OFF'}
 		</button>
 	</div>
 }
@@ -95,14 +95,14 @@ export component ChildButton(props: { onClick: () => void; label: string }) {
 }
 
 export component ParentWithChildButton() {
-	let count = track(0);
+	let &[count] = track(0);
 	<div>
 		<ChildButton
 			onClick={() => {
-				@count++;
+				count++;
 			}}
 			label="Click me"
 		/>
-		<span class="count">{@count}</span>
+		<span class="count">{count}</span>
 	</div>
 }

package/tests/hydration/components/for.ripple

@@ -34,51 +34,51 @@ export component KeyedForLoop() {
 }
 
 export component ReactiveForLoopAdd() {
-	let items = track(['A', 'B']);
+	let &[items] = track(['A', 'B']);
 	<button
 		class="add"
 		onClick={() => {
-			@items = [...@items, 'C'];
+			items = [...items, 'C'];
 		}}
 	>
 		{'Add'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li>{item}</li>
 		}
 	</ul>
 }
 
 export component ReactiveForLoopRemove() {
-	let items = track(['A', 'B', 'C']);
+	let &[items] = track(['A', 'B', 'C']);
 	<button
 		class="remove"
 		onClick={() => {
-			@items = @items.slice(0, -1);
+			items = items.slice(0, -1);
 		}}
 	>
 		{'Remove'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li>{item}</li>
 		}
 	</ul>
 }
 
 export component ForLoopInteractive() {
-	let counts = track([0, 0, 0]);
+	let &[counts] = track([0, 0, 0]);
 	<div>
-		for (const count of @counts; index i) {
+		for (const count of counts; index i) {
 			<div class={`item-${i}`}>
 				<span class="value">{count}</span>
 				<button
 					class="increment"
 					onClick={() => {
-						const newCounts = [...@counts];
+						const newCounts = [...counts];
 						newCounts[i]++;
-						@counts = newCounts;
+						counts = newCounts;
 					}}
 				>
 					{'+'}
@@ -130,7 +130,7 @@ export component ForLoopComplexObjects() {
 
 // Test reordering items in a keyed for loop
 export component KeyedForLoopReorder() {
-	let items = track([
+	let &[items] = track([
 		{ id: 1, name: 'First' },
 		{ id: 2, name: 'Second' },
 		{ id: 3, name: 'Third' },
@@ -138,13 +138,13 @@ export component KeyedForLoopReorder() {
 	<button
 		class="reorder"
 		onClick={() => {
-			@items = [@items[2], @items[0], @items[1]];
+			items = [items[2], items[0], items[1]];
 		}}
 	>
 		{'Reorder'}
 	</button>
 	<ul>
-		for (const item of @items; key item.id) {
+		for (const item of items; key item.id) {
 			<li class={`item-${item.id}`}>{item.name}</li>
 		}
 	</ul>
@@ -152,20 +152,20 @@ export component KeyedForLoopReorder() {
 
 // Test for loop with item property updates (keyed)
 export component KeyedForLoopUpdate() {
-	let items = track([
+	let &[items] = track([
 		{ id: 1, name: 'Item 1' },
 		{ id: 2, name: 'Item 2' },
 	]);
 	<button
 		class="update"
 		onClick={() => {
-			@items = @items.map((item) => (item.id === 1 ? { ...item, name: 'Updated' } : item));
+			items = items.map((item) => (item.id === 1 ? { ...item, name: 'Updated' } : item));
 		}}
 	>
 		{'Update'}
 	</button>
 	<ul>
-		for (const item of @items; key item.id) {
+		for (const item of items; key item.id) {
 			<li class={`item-${item.id}`}>{item.name}</li>
 		}
 	</ul>
@@ -173,18 +173,18 @@ export component KeyedForLoopUpdate() {
 
 // Test for loop with combined add/remove/reorder
 export component ForLoopMixedOperations() {
-	let items = track(['A', 'B', 'C', 'D']);
+	let &[items] = track(['A', 'B', 'C', 'D']);
 	<button
 		class="shuffle"
 		onClick={() => {
 			// Remove B, add E, reorder to D, C, A, E
-			@items = ['D', 'C', 'A', 'E'];
+			items = ['D', 'C', 'A', 'E'];
 		}}
 	>
 		{'Shuffle'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>
@@ -192,12 +192,12 @@ export component ForLoopMixedOperations() {
 
 // Test for loop inside if block (combined control flow)
 export component ForLoopInsideIf() {
-	let showList = track(true);
-	let items = track(['X', 'Y', 'Z']);
+	let &[showList] = track(true);
+	let &[items] = track(['X', 'Y', 'Z']);
 	<button
 		class="toggle"
 		onClick={() => {
-			@showList = !@showList;
+			showList = !showList;
 		}}
 	>
 		{'Toggle List'}
@@ -205,14 +205,14 @@ export component ForLoopInsideIf() {
 	<button
 		class="add"
 		onClick={() => {
-			@items = [...@items, 'W'];
+			items = [...items, 'W'];
 		}}
 	>
 		{'Add Item'}
 	</button>
-	if (@showList) {
+	if (showList) {
 		<ul class="list">
-			for (const item of @items) {
+			for (const item of items) {
 				<li>{item}</li>
 			}
 		</ul>
@@ -221,17 +221,17 @@ export component ForLoopInsideIf() {
 
 // Test for loop that transitions from empty to populated
 export component ForLoopEmptyToPopulated() {
-	let items = track<string[]>([]);
+	let &[items] = track<string[]>([]);
 	<button
 		class="populate"
 		onClick={() => {
-			@items = ['One', 'Two', 'Three'];
+			items = ['One', 'Two', 'Three'];
 		}}
 	>
 		{'Populate'}
 	</button>
 	<ul class="list">
-		for (const item of @items) {
+		for (const item of items) {
 			<li>{item}</li>
 		}
 	</ul>
@@ -239,17 +239,17 @@ export component ForLoopEmptyToPopulated() {
 
 // Test for loop that transitions from populated to empty
 export component ForLoopPopulatedToEmpty() {
-	let items = track(['One', 'Two', 'Three']);
+	let &[items] = track(['One', 'Two', 'Three']);
 	<button
 		class="clear"
 		onClick={() => {
-			@items = [];
+			items = [];
 		}}
 	>
 		{'Clear'}
 	</button>
 	<ul class="list">
-		for (const item of @items) {
+		for (const item of items) {
 			<li>{item}</li>
 		}
 	</ul>
@@ -257,14 +257,14 @@ export component ForLoopPopulatedToEmpty() {
 
 // Test nested for loops with reactivity
 export component NestedForLoopReactive() {
-	let grid = track([
+	let &[grid] = track([
 		[1, 2],
 		[3, 4],
 	]);
 	<button
 		class="add-row"
 		onClick={() => {
-			@grid = [...@grid, [5, 6]];
+			grid = [...grid, [5, 6]];
 		}}
 	>
 		{'Add Row'}
@@ -272,15 +272,15 @@ export component NestedForLoopReactive() {
 	<button
 		class="update-cell"
 		onClick={() => {
-			const newGrid = @grid.map((row) => [...row]);
+			const newGrid = grid.map((row) => [...row]);
 			newGrid[0][0] = 99;
-			@grid = newGrid;
+			grid = newGrid;
 		}}
 	>
 		{'Update Cell'}
 	</button>
 	<div class="grid">
-		for (const row of @grid; index rowIndex) {
+		for (const row of grid; index rowIndex) {
 			<div class={`row-${rowIndex}`}>
 				for (const cell of row; index colIndex) {
 					<span class={`cell-${rowIndex}-${colIndex}`}>{cell}</span>
@@ -330,17 +330,17 @@ export component ForLoopDeeplyNested() {
 
 // Test for loop with index that gets updated
 export component ForLoopIndexUpdate() {
-	let items = track(['First', 'Second', 'Third']);
+	let &[items] = track(['First', 'Second', 'Third']);
 	<button
 		class="prepend"
 		onClick={() => {
-			@items = ['Zeroth', ...@items];
+			items = ['Zeroth', ...items];
 		}}
 	>
 		{'Prepend'}
 	</button>
 	<ul>
-		for (const item of @items; index i) {
+		for (const item of items; index i) {
 			<li class={`item-${i}`}>{`[${i}] ${item}`}</li>
 		}
 	</ul>
@@ -348,7 +348,7 @@ export component ForLoopIndexUpdate() {
 
 // Test keyed for loop with index
 export component KeyedForLoopWithIndex() {
-	let items = track([
+	let &[items] = track([
 		{ id: 'a', value: 'Alpha' },
 		{ id: 'b', value: 'Beta' },
 		{ id: 'c', value: 'Gamma' },
@@ -356,13 +356,13 @@ export component KeyedForLoopWithIndex() {
 	<button
 		class="reorder"
 		onClick={() => {
-			@items = [@items[1], @items[2], @items[0]];
+			items = [items[1], items[2], items[0]];
 		}}
 	>
 		{'Rotate'}
 	</button>
 	<ul>
-		for (const item of @items; index i; key item.id) {
+		for (const item of items; index i; key item.id) {
 			<li class={`item-${item.id}`} data-index={i}>{`[${i}] ${item.id}: ${item.value}`}</li>
 		}
 	</ul>
@@ -370,10 +370,10 @@ export component KeyedForLoopWithIndex() {
 
 // Test for loop with sibling elements
 export component ForLoopWithSiblings() {
-	let items = track(['A', 'B']);
+	let &[items] = track(['A', 'B']);
 	<div class="wrapper">
 		<header class="before">{'Before'}</header>
-		for (const item of @items) {
+		for (const item of items) {
 			<div class={`item-${item}`}>{item}</div>
 		}
 		<footer class="after">{'After'}</footer>
@@ -381,7 +381,7 @@ export component ForLoopWithSiblings() {
 	<button
 		class="add"
 		onClick={() => {
-			@items = [...@items, 'C'];
+			items = [...items, 'C'];
 		}}
 	>
 		{'Add'}
@@ -403,17 +403,17 @@ export component ForLoopItemState() {
 }
 
 component TodoItem(props: { id: number; text: string }) {
-	let done = track(false);
+	let &[done] = track(false);
 	<div class={`todo-${props.id}`}>
 		<input
 			type="checkbox"
 			class="checkbox"
-			checked={@done}
+			checked={done}
 			onChange={(e) => {
-				@done = (e.target as HTMLInputElement).checked;
+				done = (e.target as HTMLInputElement).checked;
 			}}
 		/>
-		<span class={@done ? 'completed' : 'pending'}>{props.text}</span>
+		<span class={done ? 'completed' : 'pending'}>{props.text}</span>
 	</div>
 }
 
@@ -429,17 +429,17 @@ export component ForLoopSingleItem() {
 
 // Test for loop adding at beginning
 export component ForLoopAddAtBeginning() {
-	let items = track(['B', 'C']);
+	let &[items] = track(['B', 'C']);
 	<button
 		class="prepend"
 		onClick={() => {
-			@items = ['A', ...@items];
+			items = ['A', ...items];
 		}}
 	>
 		{'Prepend A'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>
@@ -447,19 +447,19 @@ export component ForLoopAddAtBeginning() {
 
 // Test for loop adding in the middle
 export component ForLoopAddInMiddle() {
-	let items = track(['A', 'C']);
+	let &[items] = track(['A', 'C']);
 	<button
 		class="insert"
 		onClick={() => {
-			const copy = [...@items];
+			const copy = [...items];
 			copy.splice(1, 0, 'B');
-			@items = copy;
+			items = copy;
 		}}
 	>
 		{'Insert B'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>
@@ -467,17 +467,17 @@ export component ForLoopAddInMiddle() {
 
 // Test for loop removing from the middle
 export component ForLoopRemoveFromMiddle() {
-	let items = track(['A', 'B', 'C']);
+	let &[items] = track(['A', 'B', 'C']);
 	<button
 		class="remove-middle"
 		onClick={() => {
-			@items = @items.filter((item) => item !== 'B');
+			items = items.filter((item) => item !== 'B');
 		}}
 	>
 		{'Remove B'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>
@@ -495,19 +495,19 @@ export component ForLoopLargeList() {
 
 // Test for loop with swap operation
 export component ForLoopSwap() {
-	let items = track(['A', 'B', 'C', 'D']);
+	let &[items] = track(['A', 'B', 'C', 'D']);
 	<button
 		class="swap"
 		onClick={() => {
-			const copy = [...@items];
+			const copy = [...items];
 			[copy[0], copy[3]] = [copy[3], copy[0]];
-			@items = copy;
+			items = copy;
 		}}
 	>
 		{'Swap First and Last'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>
@@ -515,17 +515,17 @@ export component ForLoopSwap() {
 
 // Test for loop with reverse operation
 export component ForLoopReverse() {
-	let items = track(['A', 'B', 'C', 'D']);
+	let &[items] = track(['A', 'B', 'C', 'D']);
 	<button
 		class="reverse"
 		onClick={() => {
-			@items = [...@items].reverse();
+			items = [...items].reverse();
 		}}
 	>
 		{'Reverse'}
 	</button>
 	<ul>
-		for (const item of @items) {
+		for (const item of items) {
 			<li class={`item-${item}`}>{item}</li>
 		}
 	</ul>

package/tests/hydration/components/head.ripple

@@ -11,13 +11,13 @@ export component StaticTitle() {
 
 // Reactive title
 export component ReactiveTitle() {
-	let title = track('Initial Title');
+	let &[title] = track('Initial Title');
 
 	<head>
-		<title>{@title}</title>
+		<title>{title}</title>
 	</head>
 	<div>
-		<span>{@title}</span>
+		<span>{title}</span>
 	</div>
 }
 
@@ -34,25 +34,25 @@ export component MultipleHeadElements() {
 
 // Head with reactive meta tags
 export component ReactiveMetaTags() {
-	let description = track('Initial description');
+	let &[description] = track('Initial description');
 
 	<head>
 		<title>{'My Page'}</title>
-		<meta name="description" content={@description} />
+		<meta name="description" content={description} />
 	</head>
 
-	<div>{@description}</div>
+	<div>{description}</div>
 }
 
 // Title with template literal
 export component TitleWithTemplate() {
-	let name = track('World');
+	let &[name] = track('World');
 
 	<head>
-		<title>{`Hello ${@name}!`}</title>
+		<title>{`Hello ${name}!`}</title>
 	</head>
 
-	<div>{@name}</div>
+	<div>{name}</div>
 }
 
 // Empty title
@@ -65,26 +65,26 @@ export component EmptyTitle() {
 
 // Title with conditional content
 export component ConditionalTitle() {
-	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>{@title}</div>
+	<div>{title}</div>
 }
 
 // Title with computed value
 export component ComputedTitle() {
-	let count = track(0);
+	let &[count] = track(0);
 	let prefix = 'Count: ';
 
 	<head>
-		<title>{prefix + @count}</title>
+		<title>{prefix + count}</title>
 	</head>
 	<div>
-		<span>{@count}</span>
+		<span>{count}</span>
 	</div>
 }
 

package/tests/hydration/components/hmr.ripple

@@ -19,10 +19,10 @@ export component Layout({ children }: { children: any }) {
 
 // A child component with an if block (the key source of deep hydrate_node)
 export component Content() {
-	let visible = track(true);
+	let &[visible] = track(true);
 
 	<div class="content">
-		if (@visible) {
+		if (visible) {
 			<p class="text">{'Hello world'}</p>
 		}
 	</div>

package/tests/hydration/components/html.ripple

@@ -229,13 +229,13 @@ component NavItem({
 }
 
 component SidebarSection({ title, children }: { title: string; children: any }) {
-	let expanded = track(true);
+	let &[expanded] = track(true);
 	<section class="sidebar-section">
 		<div class="section-header">
 			<h2>{title}</h2>
-			<button onClick={() => (@expanded = !@expanded)}>{'Toggle'}</button>
+			<button onClick={() => (expanded = !expanded)}>{'Toggle'}</button>
 		</div>
-		if (@expanded) {
+		if (expanded) {
 			<div class="section-items">
 				<children />
 			</div>