ripple 0.3.67 → 0.3.69

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

@@ -3,191 +3,201 @@ import { track } from 'ripple';
 // Minimal repro for hydration issue with if block containing children
 // Based on SidebarGroup pattern from website-new
 
-export component 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 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 component ChildItem({ text: label }: { text: string }) {
-	<div class="item">{label}</div>
+export function ChildItem({ text: label }: { text: string }) {
+	return <><div class="item">{label}</div></>;
 }
 
-export component TestIfWithChildren() {
-	<IfWithChildren>
-		<ChildItem text="Item 1" />
-		<ChildItem text="Item 2" />
-	</IfWithChildren>
+export function TestIfWithChildren() {
+	return <>
+		<IfWithChildren>
+			<ChildItem text="Item 1" />
+			<ChildItem text="Item 2" />
+		</IfWithChildren>
+	</>;
 }
 
 // Simpler variant - if block with static children
-export component 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>
+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>
+	</>;
 }
 
 // Variant with sibling elements before the if block (like SidebarGroup)
-export component 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>
+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>
 			</div>
-		</div>
-		if (expanded) {
-			<div class="items">{children}</div>
-		}
-	</section>
+			if (expanded) {
+				<div class="items">{children}</div>
+			}
+		</section>
+	</>;
 }
 
-export component TestIfWithSiblingsAndChildren() {
-	<IfWithSiblingsAndChildren>
-		<ChildItem text="Item A" />
-		<ChildItem text="Item B" />
-	</IfWithSiblingsAndChildren>
+export function TestIfWithSiblingsAndChildren() {
+	return <>
+		<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 component ElementWithChildrenThenIf() {
-	let &[show] = track(true);
-
-	<div class="wrapper">
-		<div class="nested-parent">
-			<div class="nested-child">
-				<span class="deep">{'Deep content'}</span>
+export function ElementWithChildrenThenIf() {
+	return <>
+		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) {
+				<div class="conditional">{'Conditional content'}</div>
+			}
 		</div>
-		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);
-
-	<section class="outer">
-		<article class="middle">
-			<div class="inner">
-				<p class="leaf">
-					<strong>{'Bold'}</strong>
-					<em>{'Italic'}</em>
-				</p>
-			</div>
-		</article>
-		if (visible) {
-			<footer class="footer">{'Footer'}</footer>
-		}
-	</section>
-
-	<button class="btn" onClick={() => (visible = !visible)}>{'Toggle'}</button>
+export function DeepNestingThenIf() {
+	return <>
+		let &[visible] = track(true);
+		<section class="outer">
+			<article class="middle">
+				<div class="inner">
+					<p class="leaf">
+						<strong>{'Bold'}</strong>
+						<em>{'Italic'}</em>
+					</p>
+				</div>
+			</article>
+			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 component 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>
-			}
+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>
 		</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 component DomChildrenThenStaticSiblings() {
-	let &[count] = track(0);
-
-	<div class="container">
-		<ul class="list">
-			<li class="item">
-				{'Item count: '}
-				{count}
-			</li>
-			<li class="item">{'Another item'}</li>
-		</ul>
-		<h2 class="heading">{'Static Heading'}</h2>
-		<p class="para">{'Static paragraph'}</p>
-	</div>
-
-	<button class="inc" onClick={() => count++}>{'Increment'}</button>
+export function DomChildrenThenStaticSiblings() {
+	return <>
+		let &[count] = track(0);
+		<div class="container">
+			<ul class="list">
+				<li class="item">
+					{'Item count: '}
+					{count}
+				</li>
+				<li class="item">{'Another item'}</li>
+			</ul>
+			<h2 class="heading">{'Static Heading'}</h2>
+			<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 component 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>
+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>
+	</>;
 }

package/tests/hydration/components/if.tsrx

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