ripple 0.3.67 → 0.3.69

package/tests/hydration/components/basic.tsrx

@@ -2,349 +2,397 @@
 import { track } from 'ripple';
 import type { Children } from 'ripple';
 
-export component StaticText() {
-	<div>{'Hello World'}</div>
+export function StaticText() {
+	return <><div>{'Hello World'}</div></>;
 }
 
-export component MultipleElements() {
-	<h1>{'Title'}</h1>
-	<p>{'Paragraph text'}</p>
-	<span>{'Span text'}</span>
+export function MultipleElements() {
+	return <>
+		<h1>{'Title'}</h1>
+		<p>{'Paragraph text'}</p>
+		<span>{'Span text'}</span>
+	</>;
 }
 
-export component NestedElements() {
-	<div class="outer">
-		<div class="inner">
-			<span>{'Nested content'}</span>
+export function NestedElements() {
+	return <>
+		<div class="outer">
+			<div class="inner">
+				<span>{'Nested content'}</span>
+			</div>
 		</div>
-	</div>
+	</>;
+}
+
+export function WithAttributes() {
+	return <>
+		<input type="text" placeholder="Enter text" disabled />
+		<a href="/link" target="_blank">{'Link'}</a>
+	</>;
 }
 
-export component WithAttributes() {
-	<input type="text" placeholder="Enter text" disabled />
-	<a href="/link" target="_blank">{'Link'}</a>
+export function ChildComponent() {
+	return <><span class="child">{'Child content'}</span></>;
 }
 
-export component ChildComponent() {
-	<span class="child">{'Child content'}</span>
+export function ParentWithChild() {
+	return <>
+		<div class="parent">
+			<ChildComponent />
+		</div>
+	</>;
 }
 
-export component ParentWithChild() {
-	<div class="parent">
-		<ChildComponent />
-	</div>
+export function FirstSibling() {
+	return <><div class="first">{'First'}</div></>;
 }
 
-export component FirstSibling() {
-	<div class="first">{'First'}</div>
+export function SecondSibling() {
+	return <><div class="second">{'Second'}</div></>;
 }
 
-export component SecondSibling() {
-	<div class="second">{'Second'}</div>
+export function SiblingComponents() {
+	return <>
+		<FirstSibling />
+		<SecondSibling />
+	</>;
 }
 
-export component SiblingComponents() {
-	<FirstSibling />
-	<SecondSibling />
+export function Greeting(props: { name: string }) {
+	return <>
+		<div>
+			{'Hello '}
+			{props.name}
+		</div>
+	</>;
 }
 
-export component Greeting(props: { name: string }) {
-	<div>
-		{'Hello '}
-		{props.name}
-	</div>
+export function WithGreeting() {
+	return <><Greeting name="World" /></>;
 }
 
-export component WithGreeting() {
-	<Greeting name="World" />
+export function ExpressionContent() {
+	return <>
+		const value = 42;
+		const label = 'computed';
+		<div>{value}</div>
+		<span>{label.toUpperCase()}</span>
+	</>;
 }
 
-export component ExpressionContent() {
-	const value = 42;
-	const label = 'computed';
-	<div>{value}</div>
-	<span>{label.toUpperCase()}</span>
+function NestedHelperItem({ item }: { item: number }) {
+	return <><div class="helper-item">{item}</div></>;
 }
 
-function makeNestedTsxTsrxFragment(label: string) {
-	return <tsrx>
+function NestedTsxTsrxFragment({ label }: { label: string }) {
+	return <>
 		<span class="label">{label}</span>
-		const test = <tsx>
-			{[1, 2, 3, 4].map(
-				(item) => <tsx>
-					{<tsrx>
-						<div class="helper-item">{item}</div>
-					</tsrx>}
-				</tsx>,
-			)}
+		for (const item of [1, 2, 3, 4]) {
+			<NestedHelperItem {item} />
+		}
+	</>;
+}
+
+export function NestedTsxTsrxExpressionValues() {
+	return <>
+		for (const item of [1, 2, 3]) {
+			<div class="app-item">{item}</div>
+		}
+		<NestedTsxTsrxFragment label="from helper" />
+	</>;
+}
+
+export function MixedTsrxCollectionText() {
+	return <>
+		const content = <tsx>
+			{[
+				'alpha ',
+				<strong class="middle">
+					{'beta'}
+				</strong>,
+				' gamma ',
+				[
+					'delta ',
+					<em class="tail">
+						{'epsilon'}
+					</em>,
+					' zeta',
+				],
+			]}
+		</tsx>;
+		<div class="mixed-collection">{content}</div>
+	</>;
+}
+
+export function MixedTsrxCollectionSplitServerText() {
+	return <>
+		const content = <tsx>
+			{[
+				'alpha ',
+				<strong class="middle">
+					{'beta'}
+				</strong>,
+				' gamma ',
+				[
+					'delta ',
+					<em class="tail">
+						{'epsilon'}
+					</em>,
+					' zeta',
+				],
+			]}
+		</tsx>;
+		<div class="mixed-collection-split">{content}</div>
+	</>;
+}
+
+export function MixedTsrxCollectionSplitClientText() {
+	return <>
+		const content = <tsx>
+			{[
+				'alpha ',
+				<strong class="middle">
+					{'beta'}
+				</strong>,
+				' gamma ',
+				[
+					'changed ',
+					<em class="tail">
+						{'epsilon'}
+					</em>,
+					' zeta',
+				],
+			]}
 		</tsx>;
-		{test}
-	</tsrx>;
-}
-
-export component NestedTsxTsrxExpressionValues() {
-	{<tsx>
-		{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
-	</tsx>}
-	{makeNestedTsxTsrxFragment('from helper')}
-}
-
-export component MixedTsrxCollectionText() {
-	const content = <tsx>
-		{[
-			'alpha ',
-			<strong class="middle">
-				{'beta'}
-			</strong>,
-			' gamma ',
-			[
-				'delta ',
-				<em class="tail">
-					{'epsilon'}
-				</em>,
-				' zeta',
-			],
-		]}
-	</tsx>;
-
-	<div class="mixed-collection">{content}</div>
-}
-
-export component MixedTsrxCollectionSplitServerText() {
-	const content = <tsx>
-		{[
-			'alpha ',
-			<strong class="middle">
-				{'beta'}
-			</strong>,
-			' gamma ',
-			[
-				'delta ',
-				<em class="tail">
-					{'epsilon'}
-				</em>,
-				' zeta',
-			],
-		]}
-	</tsx>;
-
-	<div class="mixed-collection-split">{content}</div>
-}
-
-export component MixedTsrxCollectionSplitClientText() {
-	const content = <tsx>
-		{[
-			'alpha ',
-			<strong class="middle">
-				{'beta'}
-			</strong>,
-			' gamma ',
-			[
-				'changed ',
-				<em class="tail">
-					{'epsilon'}
-				</em>,
-				' zeta',
-			],
-		]}
-	</tsx>;
-
-	<div class="mixed-collection-split">{content}</div>
-}
-
-export component MixedTsrxCollectionPrimitiveServerText() {
-	const content = <tsx>
-		{[
-			'count: ',
-			1,
-			' / ',
-			true,
-			<span class="primitive-tail">
-				{' ok'}
-			</span>,
-		]}
-	</tsx>;
-
-	<div class="mixed-collection-primitive">{content}</div>
-}
-
-export component MixedTsrxCollectionPrimitiveClientText() {
-	const content = <tsx>
-		{[
-			'count: ',
-			2,
-			' / ',
-			false,
-			<span class="primitive-tail">
-				{' ok'}
-			</span>,
-		]}
-	</tsx>;
-
-	<div class="mixed-collection-primitive">{content}</div>
+		<div class="mixed-collection-split">{content}</div>
+	</>;
+}
+
+export function MixedTsrxCollectionPrimitiveServerText() {
+	return <>
+		const content = <tsx>
+			{[
+				'count: ',
+				1,
+				' / ',
+				true,
+				<span class="primitive-tail">
+					{' ok'}
+				</span>,
+			]}
+		</tsx>;
+		<div class="mixed-collection-primitive">{content}</div>
+	</>;
+}
+
+export function MixedTsrxCollectionPrimitiveClientText() {
+	return <>
+		const content = <tsx>
+			{[
+				'count: ',
+				2,
+				' / ',
+				false,
+				<span class="primitive-tail">
+					{' ok'}
+				</span>,
+			]}
+		</tsx>;
+		<div class="mixed-collection-primitive">{content}</div>
+	</>;
 }
 
 function createPrimitiveItems() {
 	return ['start:', ['one', 2], true, null, false, ':end'];
 }
 
-export component DynamicArrayFromCall() {
-	const items = createPrimitiveItems();
-
-	<div class="dynamic-array-call">{items}</div>
+export function DynamicArrayFromCall() {
+	return <>
+		const items = createPrimitiveItems();
+		<div class="dynamic-array-call">{items}</div>
+	</>;
 }
 
-export component DynamicArrayFromTrack() {
-	let &[items] = track(['start:', ['one', 2], true, null, false, ':end']);
-
-	<div class="dynamic-array-track">{items}</div>
+export function DynamicArrayFromTrack() {
+	return <>
+		let &[items] = track(['start:', ['one', 2], true, null, false, ':end']);
+		<div class="dynamic-array-track">{items}</div>
+	</>;
 }
 
-export component DynamicArrayFromConditional() {
-	const condition = true;
-	const items = condition ? ['start:', ['one', 2], true, null, false, ':end'] : ['fallback'];
-
-	<div class="dynamic-array-conditional">{items}</div>
+export function DynamicArrayFromConditional() {
+	return <>
+		const condition = true;
+		const items = condition ? ['start:', ['one', 2], true, null, false, ':end'] : ['fallback'];
+		<div class="dynamic-array-conditional">{items}</div>
+	</>;
 }
 
-export component DynamicArrayFromLogical() {
-	const condition = true;
-	const items = condition && ['start:', ['one', 2], true, null, false, ':end'];
-
-	<div class="dynamic-array-logical">{items}</div>
-}
-
-export component NestedTsrxInsideTopLevelTsxExpression() {
-	const content = <tsx>
-		<section class="outer">
-			{<tsrx>
-				<div class="inner">{'from tsrx'}</div>
-			</tsrx>}
-		</section>
-	</tsx>;
-
-	{content}
+export function DynamicArrayFromLogical() {
+	return <>
+		const condition = true;
+		const items = condition && ['start:', ['one', 2], true, null, false, ':end'];
+		<div class="dynamic-array-logical">{items}</div>
+	</>;
 }
 
-export component NestedTsrxElementsInsideTopLevelTsxValue() {
-	const content = <tsx>
-		<div class="wrapper">
-			{<tsrx>
-				<section class="native">
-					<span class="nested-tsrx">{'inside nested tsrx'}</span>
-				</section>
-			</tsrx>}
-		</div>
-	</tsx>;
-
-	{content}
+export function NestedTsrxInsideTopLevelTsxExpression() {
+	return <>
+		const content = <tsx>
+			<section class="outer">
+				{<>
+					<div class="inner">
+						{'from tsrx'}
+					</div>
+				</>}
+			</section>
+		</tsx>;
+		{content}
+	</>;
+}
+
+export function NestedTsrxElementsInsideTopLevelTsxValue() {
+	return <>
+		const content = <tsx>
+			<div class="wrapper">
+				{<>
+					<section class="native">
+						<span class="nested-tsrx">
+							{'inside nested tsrx'}
+						</span>
+					</section>
+				</>}
+			</div>
+		</tsx>;
+		{content}
+	</>;
 }
 
-export component TsxDeclaredInsideNestedTsrxFromTopLevelTsx() {
-	const content = <tsx>
-		{<tsrx>
-			const nested = <tsx>
-				<span class="nested-tsx">
-					{'inside nested tsx'}
-				</span>
-			</tsx>;
+export function TsxDeclaredBeforeTopLevelTsx() {
+	return <>
+		const nested = <tsx>
+			<span class="nested-tsx">
+				{'inside nested tsx'}
+			</span>
+		</tsx>;
+		const content = <tsx>
 			<div class="native">{nested}</div>
-		</tsrx>}
-	</tsx>;
-
-	{content}
+		</tsx>;
+		{content}
+	</>;
 }
 
-component TextProp(&{ children }: { children: string }) {
-	<div class="text-prop">{children}</div>
+function TextProp(&{ children }: { children: string }) {
+	return <><div class="text-prop">{children}</div></>;
 }
 
-export component TextPropWithToggle() {
-	let &[show] = track(false);
-
-	<TextProp children={show ? 'hello' : ''} />
-	<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+export function TextPropWithToggle() {
+	return <>
+		let &[show] = track(false);
+		<TextProp children={show ? 'hello' : ''} />
+		<button class="show-text" onClick={() => (show = true)}>{'Show'}</button>
+	</>;
 }
 
 // Test for static content in child component followed by sibling content
-component StaticHeader() {
-	<h1 class="sr-only">{'heading'}</h1>
-	<p class="subtitle">{'first paragraph'}</p>
-	<p class="subtitle">{'second paragraph'}</p>
+function StaticHeader() {
+	return <>
+		<h1 class="sr-only">{'heading'}</h1>
+		<p class="subtitle">{'first paragraph'}</p>
+		<p class="subtitle">{'second paragraph'}</p>
+	</>;
 }
 
-export component StaticChildWithSiblings() {
-	const foo = 'bar';
-	<StaticHeader />
-	<span class="sibling1">{foo}</span>
-	<span class="sibling2">{foo}</span>
+export function StaticChildWithSiblings() {
+	return <>
+		const foo = 'bar';
+		<StaticHeader />
+		<span class="sibling1">{foo}</span>
+		<span class="sibling2">{foo}</span>
+	</>;
 }
 
 // Website-like components for testing complex hydration scenarios
 
-component Header() {
-	<h1 class="sr-only">{'Ripple'}</h1>
-	<img src="/images/logo.png" alt="Logo" class="logo" />
-	<p class="subtitle">{'the elegant TypeScript UI framework'}</p>
-}
-
-component Actions({ playgroundVisible = false }: { playgroundVisible: boolean }) {
-	<div class="social-links">
-		<a href="https://github.com" class="github-link">{'GitHub'}</a>
-		<a href="https://discord.com" class="discord-link">{'Discord'}</a>
-		if (playgroundVisible) {
-			<a href="/playground" class="playground-link">{'Playground'}</a>
-		}
-	</div>
+function Header() {
+	return <>
+		<h1 class="sr-only">{'Ripple'}</h1>
+		<img src="/images/logo.png" alt="Logo" class="logo" />
+		<p class="subtitle">{'the elegant TypeScript UI framework'}</p>
+	</>;
+}
+
+function Actions({ playgroundVisible = false }: { playgroundVisible: boolean }) {
+	return <>
+		<div class="social-links">
+			<a href="https://github.com" class="github-link">{'GitHub'}</a>
+			<a href="https://discord.com" class="discord-link">{'Discord'}</a>
+			if (playgroundVisible) {
+				<a href="/playground" class="playground-link">{'Playground'}</a>
+			}
+		</div>
+	</>;
 }
 
-component Layout({ children }: { children: Children }) {
-	<main>
-		<div class="container">{children}</div>
-	</main>
+function Layout({ children }: { children: Children }) {
+	return <>
+		<main>
+			<div class="container">{children}</div>
+		</main>
+	</>;
 }
 
-component Content() {
-	<div class="content">
-		<p>{'Some content here'}</p>
-	</div>
+function Content() {
+	return <>
+		<div class="content">
+			<p>{'Some content here'}</p>
+		</div>
+	</>;
 }
 
-export component WebsiteIndex() {
-	<Layout>
-		<Header />
-		<Actions playgroundVisible={true} />
-		<Content />
-		<Actions playgroundVisible={false} />
-	</Layout>
+export function WebsiteIndex() {
+	return <>
+		<Layout>
+			<Header />
+			<Actions playgroundVisible={true} />
+			<Content />
+			<Actions playgroundVisible={false} />
+		</Layout>
+	</>;
 }
 
 // Test case for component as last element with no following siblings.
 // This exercises hydrate_advance() in append() - at the end of content,
 // there's no next sibling and that should be handled gracefully.
-component LastChild() {
-	<footer class="last-child">{'I am the last child'}</footer>
+function LastChild() {
+	return <><footer class="last-child">{'I am the last child'}</footer></>;
 }
 
-export component ComponentAsLastSibling() {
-	<div class="wrapper">
-		<h1>{'Header'}</h1>
-		<p>{'Some content'}</p>
-		<LastChild />
-	</div>
+export function ComponentAsLastSibling() {
+	return <>
+		<div class="wrapper">
+			<h1>{'Header'}</h1>
+			<p>{'Some content'}</p>
+			<LastChild />
+		</div>
+	</>;
 }
 
 // Nested version - component is last child inside another component
-component InnerContent() {
-	<div class="inner">
-		<span>{'Inner text'}</span>
-		<LastChild />
-	</div>
-}
-
-export component NestedComponentAsLastSibling() {
-	<section class="outer">
-		<h2>{'Section title'}</h2>
-		<InnerContent />
-	</section>
+function InnerContent() {
+	return <>
+		<div class="inner">
+			<span>{'Inner text'}</span>
+			<LastChild />
+		</div>
+	</>;
+}
+
+export function NestedComponentAsLastSibling() {
+	return <>
+		<section class="outer">
+			<h2>{'Section title'}</h2>
+			<InnerContent />
+		</section>
+	</>;
 }