ripple 0.3.71 → 0.3.74

package/tests/hydration/components/composite.tsrx

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

package/tests/hydration/components/events.tsrx

@@ -2,117 +2,97 @@ import { track } from 'ripple';
 
 // Event handling components for hydration testing
 
-export function ClickCounter() {
-	return <>
-		let &[count] = track(0);
-		<div>
-			<button
-				class="increment"
-				onClick={() => {
-					count++;
-				}}
-			>
-				{'Increment'}
-			</button>
-			<span class="count">{count}</span>
-		</div>
-	</>;
+export function ClickCounter() @{
+	let &[count] = track(0);
+	<div>
+		<button
+			class="increment"
+			onClick={() => {
+				count++;
+			}}
+		>{'Increment'}</button>
+		<span class="count">{count}</span>
+	</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 function 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 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 function 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 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 function 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 ToggleButton() {
-	return <>
-		let &[isOn] = track(false);
-		<div>
-			<button
-				class="toggle"
-				onClick={() => {
-					isOn = !isOn;
-				}}
-			>
-				{isOn ? 'ON' : 'OFF'}
-			</button>
-		</div>
-	</>;
+export function ToggleButton() @{
+	let &[isOn] = track(false);
+	<div>
+		<button
+			class="toggle"
+			onClick={() => {
+				isOn = !isOn;
+			}}
+		>
+			{isOn ? 'ON' : 'OFF'}
+		</button>
+	</div>
 }
 
-export function ChildButton(props: { onClick: () => void; label: string }) {
-	return <><button class="child-btn" onClick={props.onClick}>{props.label}</button></>;
+export function ChildButton(props: { onClick: () => void; label: string }) @{
+	<button class="child-btn" onClick={props.onClick}>{props.label}</button>
 }
 
-export function ParentWithChildButton() {
-	return <>
-		let &[count] = track(0);
-		<div>
-			<ChildButton
-				onClick={() => {
-					count++;
-				}}
-				label="Click me"
-			/>
-			<span class="count">{count}</span>
-		</div>
-	</>;
+export function ParentWithChildButton() @{
+	let &[count] = track(0);
+	<div>
+		<ChildButton
+			onClick={() => {
+				count++;
+			}}
+			label="Click me"
+		/>
+		<span class="count">{count}</span>
+	</div>
 }