ripple 0.3.7 → 0.3.8

package/tests/hydration/components/if-children.ripple

@@ -4,11 +4,11 @@ import { track } from 'ripple';
 // Based on SidebarGroup pattern from website-new
 
 export component IfWithChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let &[expanded] = track(true);
 
 	<div class="container">
-		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
-		if (@expanded) {
+		<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
+		if (expanded) {
 			<div class="content">
 				<children />
 			</div>
@@ -29,11 +29,11 @@ export component TestIfWithChildren() {
 
 // Simpler variant - if block with static children
 export component IfWithStaticChildren() {
-	let expanded = track(true);
+	let &[expanded] = track(true);
 
 	<div class="container">
-		<div class="header" role="button" onClick={() => (@expanded = !@expanded)}>{'Toggle'}</div>
-		if (@expanded) {
+		<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
+		if (expanded) {
 			<div class="content">
 				<span>{'Static child 1'}</span>
 				<span>{'Static child 2'}</span>
@@ -44,10 +44,10 @@ export component IfWithStaticChildren() {
 
 // Variant with sibling elements before the if block (like SidebarGroup)
 export component IfWithSiblingsAndChildren({ children }: { children: any }) {
-	let expanded = track(true);
+	let &[expanded] = track(true);
 
 	<section class="group">
-		<div class="item" role="button" onClick={() => (@expanded = !@expanded)}>
+		<div class="item" role="button" onClick={() => (expanded = !expanded)}>
 			<div class="indicator" />
 			<h2 class="text">{'Title'}</h2>
 			<div class="caret">
@@ -56,7 +56,7 @@ export component IfWithSiblingsAndChildren({ children }: { children: any }) {
 				</svg>
 			</div>
 		</div>
-		if (@expanded) {
+		if (expanded) {
 			<div class="items">
 				<children />
 			</div>
@@ -75,7 +75,7 @@ export component TestIfWithSiblingsAndChildren() {
 // This tests that hydrate_node is properly restored after processing an element's children
 // before navigating to a dynamic sibling (if/for/switch)
 export component ElementWithChildrenThenIf() {
-	let show = track(true);
+	let &[show] = track(true);
 
 	<div class="wrapper">
 		<div class="nested-parent">
@@ -83,17 +83,17 @@ export component ElementWithChildrenThenIf() {
 				<span class="deep">{'Deep content'}</span>
 			</div>
 		</div>
-		if (@show) {
+		if (show) {
 			<div class="conditional">{'Conditional content'}</div>
 		}
 	</div>
 
-	<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>
+	<button class="toggle" onClick={() => (show = !show)}>{'Toggle'}</button>
 }
 
 // More complex: multiple levels of nesting before if sibling
 export component DeepNestingThenIf() {
-	let visible = track(true);
+	let &[visible] = track(true);
 
 	<section class="outer">
 		<article class="middle">
@@ -104,39 +104,39 @@ export component DeepNestingThenIf() {
 				</p>
 			</div>
 		</article>
-		if (@visible) {
+		if (visible) {
 			<footer class="footer">{'Footer'}</footer>
 		}
 	</section>
 
-	<button class="btn" onClick={() => (@visible = !@visible)}>{'Toggle'}</button>
+	<button class="btn" onClick={() => (visible = !visible)}>{'Toggle'}</button>
 }
 
 // Test case for CodeBlock pattern: element with only DOM element children (like buttons)
 // followed by another sibling element. This requires pop() to restore hydrate_node
 // because we descend into the first element to get the button children.
 export component DomElementChildrenThenSibling() {
-	let activeTab = track('code');
+	let &[activeTab] = track('code');
 
 	<div class="tabs">
 		<div class="tab-list">
 			<button
 				class="tab"
-				aria-selected={@activeTab === 'code' ? 'true' : 'false'}
-				onClick={() => (@activeTab = 'code')}
+				aria-selected={activeTab === 'code' ? 'true' : 'false'}
+				onClick={() => (activeTab = 'code')}
 			>
 				{'Code'}
 			</button>
 			<button
 				class="tab"
-				aria-selected={@activeTab === 'preview' ? 'true' : 'false'}
-				onClick={() => (@activeTab = 'preview')}
+				aria-selected={activeTab === 'preview' ? 'true' : 'false'}
+				onClick={() => (activeTab = 'preview')}
 			>
 				{'Preview'}
 			</button>
 		</div>
 		<div class="panel">
-			if (@activeTab === 'code') {
+			if (activeTab === 'code') {
 				<pre class="code">{'const x = 1;'}</pre>
 			} else {
 				<div class="preview">{'Preview content'}</div>
@@ -149,13 +149,13 @@ export component DomElementChildrenThenSibling() {
 // generate sibling() calls. This was causing incorrect pop() generation before next().
 // Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
 export component DomChildrenThenStaticSiblings() {
-	let count = track(0);
+	let &[count] = track(0);
 
 	<div class="container">
 		<ul class="list">
 			<li class="item">
 				{'Item count: '}
-				{@count}
+				{count}
 			</li>
 			<li class="item">{'Another item'}</li>
 		</ul>
@@ -163,7 +163,7 @@ export component DomChildrenThenStaticSiblings() {
 		<p class="para">{'Static paragraph'}</p>
 	</div>
 
-	<button class="inc" onClick={() => @count++}>{'Increment'}</button>
+	<button class="inc" onClick={() => count++}>{'Increment'}</button>
 }
 
 // Test case for completely static element children followed by static siblings.

package/tests/hydration/components/if.ripple

@@ -26,31 +26,31 @@ export component IfElse() {
 }
 
 export component ReactiveIf() {
-	let show = track(true);
+	let &[show] = track(true);
 	<button
 		class="toggle"
 		onClick={() => {
-			@show = !@show;
+			show = !show;
 		}}
 	>
 		{'Toggle'}
 	</button>
-	if (@show) {
+	if (show) {
 		<div class="content">{'Content visible'}</div>
 	}
 }
 
 export component ReactiveIfElse() {
-	let isOn = track(false);
+	let &[isOn] = track(false);
 	<button
 		class="toggle"
 		onClick={() => {
-			@isOn = !@isOn;
+			isOn = !isOn;
 		}}
 	>
 		{'Toggle'}
 	</button>
-	if (@isOn) {
+	if (isOn) {
 		<div class="on">{'ON'}</div>
 	} else {
 		<div class="off">{'OFF'}</div>
@@ -58,12 +58,12 @@ export component ReactiveIfElse() {
 }
 
 export component NestedIf() {
-	let outer = track(true);
-	let inner = track(true);
+	let &[outer] = track(true);
+	let &[inner] = track(true);
 	<button
 		class="outer-toggle"
 		onClick={() => {
-			@outer = !@outer;
+			outer = !outer;
 		}}
 	>
 		{'Outer'}
@@ -71,15 +71,15 @@ export component NestedIf() {
 	<button
 		class="inner-toggle"
 		onClick={() => {
-			@inner = !@inner;
+			inner = !inner;
 		}}
 	>
 		{'Inner'}
 	</button>
-	if (@outer) {
+	if (outer) {
 		<div class="outer-content">
 			{'Outer'}
-			if (@inner) {
+			if (inner) {
 				<span class="inner-content">{'Inner'}</span>
 			}
 		</div>
@@ -87,12 +87,12 @@ export component NestedIf() {
 }
 
 export component IfElseIfChain() {
-	let status = track<'loading' | 'success' | 'error'>('loading');
+	let &[status] = track<'loading' | 'success' | 'error'>('loading');
 	<div>
 		<button
 			class="success"
 			onClick={() => {
-				@status = 'success';
+				status = 'success';
 			}}
 		>
 			{'Success'}
@@ -100,7 +100,7 @@ export component IfElseIfChain() {
 		<button
 			class="error"
 			onClick={() => {
-				@status = 'error';
+				status = 'error';
 			}}
 		>
 			{'Error'}
@@ -108,14 +108,14 @@ export component IfElseIfChain() {
 		<button
 			class="loading"
 			onClick={() => {
-				@status = 'loading';
+				status = 'loading';
 			}}
 		>
 			{'Loading'}
 		</button>
-		if (@status === 'loading') {
+		if (status === 'loading') {
 			<div class="state">{'Loading...'}</div>
-		} else if (@status === 'success') {
+		} else if (status === 'success') {
 			<div class="state">{'Success!'}</div>
 		} else {
 			<div class="state">{'Error occurred'}</div>

package/tests/hydration/components/mixed-control-flow.ripple

@@ -31,9 +31,9 @@ export component MixedControlFlowStatic() {
 }
 
 export component MixedControlFlowReactive() {
-	let show = track(true);
-	let mode = track<'a' | 'b'>('a');
-	let items = track([
+	let &[show] = track(true);
+	let &[mode] = track<'a' | 'b'>('a');
+	let &[items] = track([
 		{ id: 1, label: 'One' },
 		{ id: 2, label: 'Two' },
 	]);
@@ -41,7 +41,7 @@ export component MixedControlFlowReactive() {
 	<button
 		class="toggle-show"
 		onClick={() => {
-			@show = !@show;
+			show = !show;
 		}}
 	>
 		{'Toggle Show'}
@@ -49,7 +49,7 @@ export component MixedControlFlowReactive() {
 	<button
 		class="toggle-mode"
 		onClick={() => {
-			@mode = @mode === 'a' ? 'b' : 'a';
+			mode = mode === 'a' ? 'b' : 'a';
 		}}
 	>
 		{'Toggle Mode'}
@@ -57,16 +57,16 @@ export component MixedControlFlowReactive() {
 	<button
 		class="add-item"
 		onClick={() => {
-			@items = [...@items, { id: 3, label: 'Three' }];
+			items = [...items, { id: 3, label: 'Three' }];
 		}}
 	>
 		{'Add Item'}
 	</button>
 
-	if (@show) {
+	if (show) {
 		<div class="mixed-reactive-list">
-			for (const item of @items; key item.id) {
-				switch (@mode) {
+			for (const item of items; key item.id) {
+				switch (mode) {
 					case 'a':
 						try {
 							<p class={`item item-${item.id}`}>{`A:${item.label}`}</p>

package/tests/hydration/components/portal.ripple

@@ -13,11 +13,11 @@ export component SimplePortal() {
 
 // Portal with conditional rendering
 export component ConditionalPortal() {
-	let show = track(true);
+	let &[show] = track(true);
 
 	<div class="container">
-		<button class="toggle" onClick={() => (@show = !@show)}>{'Toggle'}</button>
-		if (@show) {
+		<button class="toggle" onClick={() => (show = !show)}>{'Toggle'}</button>
+		if (show) {
 			<Portal target={typeof document !== 'undefined' ? document.body : null}>
 				<div class="portal-content">{'Portal is visible'}</div>
 			</Portal>

package/tests/hydration/components/reactivity.ripple

@@ -3,14 +3,14 @@ import { track } from 'ripple';
 // Reactive components for hydration testing
 
 export component TrackedState() {
-	let count = track(0);
-	<div class="count">{@count}</div>
+	let &[count] = track(0);
+	<div class="count">{count}</div>
 }
 
 export component CounterWithInitial(props: { initial: number }) {
-	let count = track(props.initial);
+	let &[count] = track(props.initial);
 	<div>
-		<span class="count">{@count}</span>
+		<span class="count">{count}</span>
 	</div>
 }
 
@@ -19,24 +19,24 @@ export component CounterWrapper() {
 }
 
 export component ComputedValues() {
-	let a = track(2);
-	let b = track(3);
-	const sum = () => @a + @b;
+	let &[a] = track(2);
+	let &[b] = track(3);
+	const sum = () => a + b;
 	<div class="sum">{sum()}</div>
 }
 
 export component MultipleTracked() {
-	let x = track(10);
-	let y = track(20);
-	let z = track(30);
-	<div class="x">{@x}</div>
-	<div class="y">{@y}</div>
-	<div class="z">{@z}</div>
+	let &[x] = track(10);
+	let &[y] = track(20);
+	let &[z] = track(30);
+	<div class="x">{x}</div>
+	<div class="y">{y}</div>
+	<div class="z">{z}</div>
 }
 
 export component DerivedState() {
-	let firstName = track('John');
-	let lastName = track('Doe');
-	const fullName = () => `${@firstName} ${@lastName}`;
+	let &[firstName] = track('John');
+	let &[lastName] = track('Doe');
+	const fullName = () => `${firstName} ${lastName}`;
 	<div class="name">{fullName()}</div>
 }

package/tests/hydration/components/return.ripple

@@ -266,17 +266,17 @@ export component ReturnWithElseBothReturn() {
 
 // Reactive return - starts true, can toggle to false
 export component ReactiveReturnTrueToFalse() {
-	let condition = track(true);
+	let &[condition] = track(true);
 
 	<button
 		class="toggle"
 		onClick={() => {
-			@condition = !@condition;
+			condition = !condition;
 		}}
 	>
 		{'Toggle'}
 	</button>
-	if (@condition) {
+	if (condition) {
 		<div class="guard">{'guard hit'}</div>
 		return;
 	}
@@ -285,17 +285,17 @@ export component ReactiveReturnTrueToFalse() {
 
 // Reactive return - starts false, can toggle to true
 export component ReactiveReturnFalseToTrue() {
-	let condition = track(false);
+	let &[condition] = track(false);
 
 	<button
 		class="toggle"
 		onClick={() => {
-			@condition = !@condition;
+			condition = !condition;
 		}}
 	>
 		{'Toggle'}
 	</button>
-	if (@condition) {
+	if (condition) {
 		<div class="guard">{'guard hit'}</div>
 		return;
 	}
@@ -305,19 +305,19 @@ export component ReactiveReturnFalseToTrue() {
 // Reactive nested return - only inner condition (b) is tracked
 export component ReactiveNestedReturn() {
 	let a = true;
-	let b = track(true);
+	let &[b] = track(true);
 
 	<button
 		class="toggle"
 		onClick={() => {
-			@b = !@b;
+			b = !b;
 		}}
 	>
 		{'Toggle'}
 	</button>
 	if (a) {
 		<div class="a">{'a'}</div>
-		if (@b) {
+		if (b) {
 			<div class="b">{'b'}</div>
 			return;
 		}
@@ -398,29 +398,29 @@ export component MultipleSiblingReturns() {
 
 // Reactive sibling returns - cycles first -> second -> fallback
 export component ReactiveSiblingReturns() {
-	let mode = track('first');
+	let &[mode] = track('first');
 
 	<button
 		class="toggle"
 		onClick={() => {
-			if (@mode === 'first') {
-				@mode = 'second';
-			} else if (@mode === 'second') {
-				@mode = 'none';
+			if (mode === 'first') {
+				mode = 'second';
+			} else if (mode === 'second') {
+				mode = 'none';
 			} else {
-				@mode = 'first';
+				mode = 'first';
 			}
 		}}
 	>
 		{'Toggle'}
 	</button>
 
-	if (@mode === 'first') {
+	if (mode === 'first') {
 		<div class="first">{'first guard'}</div>
 		return;
 	}
 
-	if (@mode === 'second') {
+	if (mode === 'second') {
 		<div class="second">{'second guard'}</div>
 		return;
 	}
@@ -430,13 +430,13 @@ export component ReactiveSiblingReturns() {
 
 // Reactive nested returns with tracked outer and inner conditions
 export component ReactiveOuterInnerReturns() {
-	let a = track(true);
-	let b = track(true);
+	let &[a] = track(true);
+	let &[b] = track(true);
 
 	<button
 		class="toggle-a"
 		onClick={() => {
-			@a = !@a;
+			a = !a;
 		}}
 	>
 		{'Toggle A'}
@@ -445,40 +445,40 @@ export component ReactiveOuterInnerReturns() {
 	<button
 		class="toggle-b"
 		onClick={() => {
-			@b = !@b;
+			b = !b;
 		}}
 	>
 		{'Toggle B'}
 	</button>
 
-	if (@a) {
+	if (a) {
 		<div class="a">{'a'}</div>
-		if (@b) {
+		if (b) {
 			<div class="b">{'b'}</div>
 			return;
 		}
 	}
 
-	<div class="rest">{@a ? 'a-on rest' : 'a-off rest'}</div>
+	<div class="rest">{a ? 'a-on rest' : 'a-off rest'}</div>
 }
 
 // Reactive else-if return chain that transitions between return and non-return states
 export component ReactiveElseIfReturns() {
-	let status = track(0);
+	let &[status] = track(0);
 
 	<button
 		class="toggle"
 		onClick={() => {
-			@status = (@status + 1) % 3;
+			status = (status + 1) % 3;
 		}}
 	>
 		{'Toggle'}
 	</button>
 
-	if (@status === 0) {
+	if (status === 0) {
 		<div class="zero">{'zero'}</div>
 		return;
-	} else if (@status === 1) {
+	} else if (status === 1) {
 		<div class="one">{'one'}</div>
 		return;
 	}
@@ -489,15 +489,15 @@ export component ReactiveElseIfReturns() {
 
 // Deeply nested independent return guards with multiple root-level siblings
 export component ReactiveDeepNestedIndependentReturns() {
-	let c1 = track(false);
-	let c2 = track(false);
-	let c3 = track(false);
-	let c4 = track(false);
+	let &[c1] = track(false);
+	let &[c2] = track(false);
+	let &[c3] = track(false);
+	let &[c4] = track(false);
 
 	<button
 		class="toggle-c1"
 		onClick={() => {
-			@c1 = !@c1;
+			c1 = !c1;
 		}}
 	>
 		{'Toggle C1'}
@@ -505,7 +505,7 @@ export component ReactiveDeepNestedIndependentReturns() {
 	<button
 		class="toggle-c2"
 		onClick={() => {
-			@c2 = !@c2;
+			c2 = !c2;
 		}}
 	>
 		{'Toggle C2'}
@@ -513,7 +513,7 @@ export component ReactiveDeepNestedIndependentReturns() {
 	<button
 		class="toggle-c3"
 		onClick={() => {
-			@c3 = !@c3;
+			c3 = !c3;
 		}}
 	>
 		{'Toggle C3'}
@@ -521,7 +521,7 @@ export component ReactiveDeepNestedIndependentReturns() {
 	<button
 		class="toggle-c4"
 		onClick={() => {
-			@c4 = !@c4;
+			c4 = !c4;
 		}}
 	>
 		{'Toggle C4'}
@@ -529,7 +529,7 @@ export component ReactiveDeepNestedIndependentReturns() {
 
 	<div class="top">{'top'}</div>
 
-	if (@c1) {
+	if (c1) {
 		<div class="hit-1">{'hit-1'}</div>
 		return;
 	}
@@ -537,7 +537,7 @@ export component ReactiveDeepNestedIndependentReturns() {
 	<div class="middle">{'middle'}</div>
 	<section class="nest-1">
 		<div class="nest-1-a">{'nest-1-a'}</div>
-		if (@c2) {
+		if (c2) {
 			<div class="hit-2">{'hit-2'}</div>
 			return;
 		}
@@ -545,13 +545,13 @@ export component ReactiveDeepNestedIndependentReturns() {
 		<div class="nest-1-b">{'nest-1-b'}</div>
 		<section class="nest-2">
 			<div class="nest-2-a">{'nest-2-a'}</div>
-			if (@c3) {
+			if (c3) {
 				<div class="hit-3">{'hit-3'}</div>
 				return;
 			}
 
 			<div class="nest-2-b">{'nest-2-b'}</div>
-			if (@c4) {
+			if (c4) {
 				<div class="hit-4">{'hit-4'}</div>
 				return;
 			}