ripple 0.3.68 → 0.3.69

package/tests/hydration/components/composite.tsrx

@@ -1,51 +1,63 @@
 import type { Children } from 'ripple';
 
-export component Layout(&{ children }: { children?: Children }) {
-	<div class="layout">{children}</div>
+export function Layout(&{ children }: { children?: Children }) {
+	return <><div class="layout">{children}</div></>;
 }
 
-export component TextWrappedLayout(&{ children }: { children?: Children }) {
-	<div class="layout">
-		{text 'before'}
-		{children}
-		{text 'after'}
-	</div>
+export function TextWrappedLayout(&{ children }: { children?: Children }) {
+	return <>
+		<div class="layout">
+			{'before'}
+			{children}
+			{'after'}
+		</div>
+	</>;
 }
 
-export component SingleChild() {
-	<div class="single">{'single'}</div>
+export function SingleChild() {
+	return <><div class="single">{'single'}</div></>;
 }
 
-export component MultiRootChild() {
-	<h1>{'title'}</h1>
-	<p>{'description'}</p>
+export function MultiRootChild() {
+	return <>
+		<h1>{'title'}</h1>
+		<p>{'description'}</p>
+	</>;
 }
 
-export component EmptyLayout() {
-	<Layout />
+export function EmptyLayout() {
+	return <><Layout /></>;
 }
 
-export component LayoutWithSingleChild() {
-	<Layout>
-		<SingleChild />
-	</Layout>
+export function LayoutWithSingleChild() {
+	return <>
+		<Layout>
+			<SingleChild />
+		</Layout>
+	</>;
 }
 
-export component LayoutWithMultipleChildren() {
-	<Layout>
-		<SingleChild />
-		<div class="extra">{'extra'}</div>
-	</Layout>
+export function LayoutWithMultipleChildren() {
+	return <>
+		<Layout>
+			<SingleChild />
+			<div class="extra">{'extra'}</div>
+		</Layout>
+	</>;
 }
 
-export component LayoutWithMultiRootChild() {
-	<Layout>
-		<MultiRootChild />
-	</Layout>
+export function LayoutWithMultiRootChild() {
+	return <>
+		<Layout>
+			<MultiRootChild />
+		</Layout>
+	</>;
 }
 
-export component LayoutWithTextAroundChildren() {
-	<TextWrappedLayout>
-		<SingleChild />
-	</TextWrappedLayout>
+export function LayoutWithTextAroundChildren() {
+	return <>
+		<TextWrappedLayout>
+			<SingleChild />
+		</TextWrappedLayout>
+	</>;
 }

package/tests/hydration/components/events.tsrx

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