ripple 0.3.72 → 0.3.74

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

@@ -3,101 +3,91 @@ import { track } from 'ripple';
 // Minimal repro for hydration issue with if block containing children
 // Based on SidebarGroup pattern from website-new
 
-export function IfWithChildren({ children }: { children: any }) {
-	return <>
-		let &[expanded] = track(true);
-		<div class="container">
-			<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
-			if (expanded) {
-				<div class="content">{children}</div>
-			}
-		</div>
-	</>;
+export function IfWithChildren({ children }: { children: any }) @{
+	let &[expanded] = track(true);
+	<div class="container">
+		<div class="header" role="button" onClick={() => (expanded = !expanded)}>{'Toggle'}</div>
+		@if (expanded) {
+			<div class="content">{children}</div>
+		}
+	</div>
 }
 
-export function ChildItem({ text: label }: { text: string }) {
-	return <><div class="item">{label}</div></>;
+export function ChildItem({ text: label }: { text: string }) @{
+	<div class="item">{label}</div>
 }
 
-export function TestIfWithChildren() {
-	return <>
-		<IfWithChildren>
-			<ChildItem text="Item 1" />
-			<ChildItem text="Item 2" />
-		</IfWithChildren>
-	</>;
+export function TestIfWithChildren() @{
+	<IfWithChildren>
+		<ChildItem text="Item 1" />
+		<ChildItem text="Item 2" />
+	</IfWithChildren>
 }
 
 // Simpler variant - if block with static children
-export function IfWithStaticChildren() {
-	return <>
-		let &[expanded] = track(true);
-		<div class="container">
-			<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>
-				</div>
-			}
-		</div>
-	</>;
+export function IfWithStaticChildren() @{
+	let &[expanded] = track(true);
+	<div class="container">
+		<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>
+			</div>
+		}
+	</div>
 }
 
 // Variant with sibling elements before the if block (like SidebarGroup)
-export function IfWithSiblingsAndChildren({ children }: { children: any }) {
-	return <>
-		let &[expanded] = track(true);
-		<section class="group">
-			<div class="item" role="button" onClick={() => (expanded = !expanded)}>
-				<div class="indicator" />
-				<h2 class="text">{'Title'}</h2>
-				<div class="caret">
-					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-						<path d="m9 18 6-6-6-6" />
-					</svg>
-				</div>
+export function IfWithSiblingsAndChildren({ children }: { children: any }) @{
+	let &[expanded] = track(true);
+	<section class="group">
+		<div class="item" role="button" onClick={() => (expanded = !expanded)}>
+			<div class="indicator" />
+			<h2 class="text">{'Title'}</h2>
+			<div class="caret">
+				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+					<path d="m9 18 6-6-6-6" />
+				</svg>
 			</div>
-			if (expanded) {
-				<div class="items">{children}</div>
-			}
-		</section>
-	</>;
+		</div>
+		@if (expanded) {
+			<div class="items">{children}</div>
+		}
+	</section>
 }
 
-export function TestIfWithSiblingsAndChildren() {
-	return <>
-		<IfWithSiblingsAndChildren>
-			<ChildItem text="Item A" />
-			<ChildItem text="Item B" />
-		</IfWithSiblingsAndChildren>
-	</>;
+export function TestIfWithSiblingsAndChildren() @{
+	<IfWithSiblingsAndChildren>
+		<ChildItem text="Item A" />
+		<ChildItem text="Item B" />
+	</IfWithSiblingsAndChildren>
 }
 
 // Test case for hydration pop bug: element with nested children followed by dynamic if sibling
 // This tests that hydrate_node is properly restored after processing an element's children
 // before navigating to a dynamic sibling (if/for/switch)
-export function ElementWithChildrenThenIf() {
-	return <>
-		let &[show] = track(true);
+export function ElementWithChildrenThenIf() @{
+	let &[show] = track(true);
+	<>
 		<div class="wrapper">
 			<div class="nested-parent">
 				<div class="nested-child">
 					<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>
-	</>;
+	</>
 }
 
 // More complex: multiple levels of nesting before if sibling
-export function DeepNestingThenIf() {
-	return <>
-		let &[visible] = track(true);
+export function DeepNestingThenIf() @{
+	let &[visible] = track(true);
+	<>
 		<section class="outer">
 			<article class="middle">
 				<div class="inner">
@@ -107,54 +97,48 @@ export function DeepNestingThenIf() {
 					</p>
 				</div>
 			</article>
-			if (visible) {
+			@if (visible) {
 				<footer class="footer">{'Footer'}</footer>
 			}
 		</section>
 		<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 function DomElementChildrenThenSibling() {
-	return <>
-		let &[activeTab] = track('code');
-		<div class="tabs">
-			<div class="tab-list">
-				<button
-					class="tab"
-					aria-selected={activeTab === 'code' ? 'true' : 'false'}
-					onClick={() => (activeTab = 'code')}
-				>
-					{'Code'}
-				</button>
-				<button
-					class="tab"
-					aria-selected={activeTab === 'preview' ? 'true' : 'false'}
-					onClick={() => (activeTab = 'preview')}
-				>
-					{'Preview'}
-				</button>
-			</div>
-			<div class="panel">
-				if (activeTab === 'code') {
-					<pre class="code">{'const x = 1;'}</pre>
-				} else {
-					<div class="preview">{'Preview content'}</div>
-				}
-			</div>
+export function DomElementChildrenThenSibling() @{
+	let &[activeTab] = track('code');
+	<div class="tabs">
+		<div class="tab-list">
+			<button
+				class="tab"
+				aria-selected={activeTab === 'code' ? 'true' : 'false'}
+				onClick={() => (activeTab = 'code')}
+			>{'Code'}</button>
+			<button
+				class="tab"
+				aria-selected={activeTab === 'preview' ? 'true' : 'false'}
+				onClick={() => (activeTab = 'preview')}
+			>{'Preview'}</button>
 		</div>
-	</>;
+		<div class="panel">
+			@if (activeTab === 'code') {
+				<pre class="code">{'const x = 1;'}</pre>
+			} @else {
+				<div class="preview">{'Preview content'}</div>
+			}
+		</div>
+	</div>
 }
 
 // Test case for element with DOM children followed by static siblings that don't
 // generate sibling() calls. This was causing incorrect pop() generation before next().
 // Pattern: <ul> with dynamic <li> children -> static <h2> -> static <p> -> next()
-export function DomChildrenThenStaticSiblings() {
-	return <>
-		let &[count] = track(0);
+export function DomChildrenThenStaticSiblings() @{
+	let &[count] = track(0);
+	<>
 		<div class="container">
 			<ul class="list">
 				<li class="item">
@@ -167,37 +151,35 @@ export function DomChildrenThenStaticSiblings() {
 			<p class="para">{'Static paragraph'}</p>
 		</div>
 		<button class="inc" onClick={() => count++}>{'Increment'}</button>
-	</>;
+	</>
 }
 
 // Test case for completely static element children followed by static siblings.
 // Pattern from introduction page: <ul> with static <li> (strong, code, text)
 // followed by static <h2> and <p>. No pop() should be generated for these.
-export function StaticListThenStaticSiblings() {
-	return <>
-		<div class="wrapper">
-			<ul class="features">
-				<li>
-					<strong>{'Feature One'}</strong>
-					{': Description of feature one with '}
-					<code>{'code'}</code>
-					{' reference'}
-				</li>
-				<li>
-					<strong>{'Feature Two'}</strong>
-					{': Another feature description'}
-				</li>
-				<li>
-					<strong>{'Feature Three'}</strong>
-					{': Third feature'}
-				</li>
-			</ul>
-			<h2 class="section-heading">{'Section Heading'}</h2>
-			<p class="section-content">
-				{'Static paragraph with '}
-				<a href="/link">{'a link'}</a>
-				{' and more text.'}
-			</p>
-		</div>
-	</>;
+export function StaticListThenStaticSiblings() @{
+	<div class="wrapper">
+		<ul class="features">
+			<li>
+				<strong>{'Feature One'}</strong>
+				{': Description of feature one with '}
+				<code>{'code'}</code>
+				{' reference'}
+			</li>
+			<li>
+				<strong>{'Feature Two'}</strong>
+				{': Another feature description'}
+			</li>
+			<li>
+				<strong>{'Feature Three'}</strong>
+				{': Third feature'}
+			</li>
+		</ul>
+		<h2 class="section-heading">{'Section Heading'}</h2>
+		<p class="section-content">
+			{'Static paragraph with '}
+			<a href="/link">{'a link'}</a>
+			{' and more text.'}
+		</p>
+	</div>
 }

package/tests/hydration/components/if.tsrx

@@ -2,137 +2,115 @@ import { track } from 'ripple';
 
 // If block components for hydration testing
 
-export function IfTruthy() {
-	return <>
-		const show = true;
-		if (show) {
-			<div class="shown">{'Visible'}</div>
-		}
-	</>;
+export function IfTruthy() @{
+	const show = true;
+	@if (show) {
+		<div class="shown">{'Visible'}</div>
+	}
 }
 
-export function IfFalsy() {
-	return <>
-		const show = false;
-		if (show) {
-			<div class="shown">{'Visible'}</div>
-		}
-	</>;
+export function IfFalsy() @{
+	const show = false;
+	@if (show) {
+		<div class="shown">{'Visible'}</div>
+	}
 }
 
-export function IfElse() {
-	return <>
-		const isLoggedIn = true;
-		if (isLoggedIn) {
-			<div class="logged-in">{'Welcome back!'}</div>
-		} else {
-			<div class="logged-out">{'Please log in'}</div>
-		}
-	</>;
+export function IfElse() @{
+	const isLoggedIn = true;
+	@if (isLoggedIn) {
+		<div class="logged-in">{'Welcome back!'}</div>
+	} @else {
+		<div class="logged-out">{'Please log in'}</div>
+	}
 }
 
-export function ReactiveIf() {
-	return <>
-		let &[show] = track(true);
+export function ReactiveIf() @{
+	let &[show] = track(true);
+	<>
 		<button
 			class="toggle"
 			onClick={() => {
 				show = !show;
 			}}
-		>
-			{'Toggle'}
-		</button>
-		if (show) {
+		>{'Toggle'}</button>
+		@if (show) {
 			<div class="content">{'Content visible'}</div>
 		}
-	</>;
+	</>
 }
 
-export function ReactiveIfElse() {
-	return <>
-		let &[isOn] = track(false);
+export function ReactiveIfElse() @{
+	let &[isOn] = track(false);
+	<>
 		<button
 			class="toggle"
 			onClick={() => {
 				isOn = !isOn;
 			}}
-		>
-			{'Toggle'}
-		</button>
-		if (isOn) {
+		>{'Toggle'}</button>
+		@if (isOn) {
 			<div class="on">{'ON'}</div>
-		} else {
+		} @else {
 			<div class="off">{'OFF'}</div>
 		}
-	</>;
+	</>
 }
 
-export function NestedIf() {
-	return <>
-		let &[outer] = track(true);
-		let &[inner] = track(true);
+export function NestedIf() @{
+	let &[outer] = track(true);
+	let &[inner] = track(true);
+	<>
 		<button
 			class="outer-toggle"
 			onClick={() => {
 				outer = !outer;
 			}}
-		>
-			{'Outer'}
-		</button>
+		>{'Outer'}</button>
 		<button
 			class="inner-toggle"
 			onClick={() => {
 				inner = !inner;
 			}}
-		>
-			{'Inner'}
-		</button>
-		if (outer) {
+		>{'Inner'}</button>
+		@if (outer) {
 			<div class="outer-content">
 				{'Outer'}
-				if (inner) {
+				@if (inner) {
 					<span class="inner-content">{'Inner'}</span>
 				}
 			</div>
 		}
-	</>;
+	</>
 }
 
-export function IfElseIfChain() {
-	return <>
-		let &[status] = track<'loading' | 'success' | 'error'>('loading');
-		<div>
-			<button
-				class="success"
-				onClick={() => {
-					status = 'success';
-				}}
-			>
-				{'Success'}
-			</button>
-			<button
-				class="error"
-				onClick={() => {
-					status = 'error';
-				}}
-			>
-				{'Error'}
-			</button>
-			<button
-				class="loading"
-				onClick={() => {
-					status = 'loading';
-				}}
-			>
-				{'Loading'}
-			</button>
-			if (status === 'loading') {
-				<div class="state">{'Loading...'}</div>
-			} else if (status === 'success') {
-				<div class="state">{'Success!'}</div>
-			} else {
-				<div class="state">{'Error occurred'}</div>
-			}
-		</div>
-	</>;
+export function IfElseIfChain() @{
+	let &[status] = track<'loading' | 'success' | 'error'>('loading');
+	<div>
+		<button
+			class="success"
+			onClick={() => {
+				status = 'success';
+			}}
+		>{'Success'}</button>
+		<button
+			class="error"
+			onClick={() => {
+				status = 'error';
+			}}
+		>{'Error'}</button>
+		<button
+			class="loading"
+			onClick={() => {
+				status = 'loading';
+			}}
+		>{'Loading'}</button>
+		@if (status === 'loading') {
+			<div class="state">{'Loading...'}</div>
+		} @else if (status === 'success') {
+			<div class="state">{'Success!'}</div>
+		} @else {
+			<div class="state">{'Error occurred'}</div>
+		}
+	</div>
 }