ripple 0.3.67 → 0.3.69

package/tests/hydration/components/nested-control-flow.tsrx

@@ -2,222 +2,182 @@
 // Each component tests one specific combination of for / if / switch.
 
 // ── for + if (2 items shown, 1 hidden) ────────────────────────────────────────
-export component ForIf() {
-	const items = [
-		{ id: 1, show: true, label: 'One' },
-		{ id: 2, show: true, label: 'Two' },
-		{ id: 3, show: false, label: 'Three' },
-	];
-
-	<ul class="for-if">
-		for (const item of items; key item.id) {
-			if (item.show) {
-				<li class={`item item-${item.id}`}>{item.label}</li>
+export function ForIf() {
+	return <>
+		const items = [
+			{ id: 1, show: true, label: 'One' },
+			{ id: 2, show: true, label: 'Two' },
+			{ id: 3, show: false, label: 'Three' },
+		];
+		<ul class="for-if">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					<li class={`item item-${item.id}`}>{item.label}</li>
+				}
 			}
-		}
-	</ul>
+		</ul>
+	</>;
 }
 
 // ── for + switch (3 items, alternating cases) ─────────────────────────────────
-export component ForSwitch() {
-	const items = [
-		{ id: 1, kind: 'a' },
-		{ id: 2, kind: 'b' },
-		{ id: 3, kind: 'a' },
-	];
-
-	<ul class="for-switch">
-		for (const item of items; key item.id) {
-			switch (item.kind) {
-				case 'a':
-					<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
-					break;
-				default:
-					<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
-			}
-		}
-	</ul>
-}
-
-// ── if + switch (no for loop) ─────────────────────────────────────────────────
-export component IfSwitch() {
-	const show = true;
-	const kind = 'a';
-
-	<div class="if-switch">
-		if (show) {
-			switch (kind) {
-				case 'a':
-					<p class="case-a">{'Case A'}</p>
-					break;
-				default:
-					<p class="case-default">{'Default'}</p>
-			}
-		}
-	</div>
-}
-
-// ── if + switch where if is false ─────────────────────────────────────────────
-export component IfSwitchHidden() {
-	const show = false;
-	const kind = 'a';
-
-	<div class="if-switch-hidden">
-		if (show) {
-			switch (kind) {
-				case 'a':
-					<p class="case-a">{'Case A'}</p>
-					break;
-				default:
-					<p class="case-default">{'Default'}</p>
-			}
-		}
-		<p class="after">{'after'}</p>
-	</div>
-}
-
-// ── for + if + switch, single item (no inter-item cursor advance needed) ───────
-export component ForIfSwitchSingle() {
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-	];
-
-	<ul class="for-if-switch-single">
-		for (const item of items; key item.id) {
-			if (item.show) {
+export function ForSwitch() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a' },
+			{ id: 2, kind: 'b' },
+			{ id: 3, kind: 'a' },
+		];
+		<ul class="for-switch">
+			for (const item of items; key item.id) {
 				switch (item.kind) {
 					case 'a':
 						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
 						break;
 					default:
-						<li class={`item item-${item.id} kind-default`}>{`D-${item.id}`}</li>
+						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
 				}
 			}
-		}
-	</ul>
+		</ul>
+	</>;
 }
 
-// ── for + if + switch, two items shown (the cursor-advance regression) ─────────
-export component ForIfSwitchMulti() {
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: true },
-	];
-
-	<ul class="for-if-switch-multi">
-		for (const item of items; key item.id) {
-			if (item.show) {
-				switch (item.kind) {
+// ── if + switch (no for loop) ─────────────────────────────────────────────────
+export function IfSwitch() {
+	return <>
+		const show = true;
+		const kind = 'a';
+		<div class="if-switch">
+			if (show) {
+				switch (kind) {
 					case 'a':
-						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+						<p class="case-a">{'Case A'}</p>
 						break;
 					default:
-						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
+						<p class="case-default">{'Default'}</p>
 				}
 			}
-		}
-	</ul>
+		</div>
+	</>;
 }
 
-// ── for + if + switch, last item hidden (if=false path between items) ──────────
-export component ForIfSwitchWithDisabled() {
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: false },
-		{ id: 3, kind: 'a', show: true },
-	];
-
-	<ul class="for-if-switch-disabled">
-		for (const item of items; key item.id) {
-			if (item.show) {
-				switch (item.kind) {
+// ── if + switch where if is false ─────────────────────────────────────────────
+export function IfSwitchHidden() {
+	return <>
+		const show = false;
+		const kind = 'a';
+		<div class="if-switch-hidden">
+			if (show) {
+				switch (kind) {
 					case 'a':
-						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+						<p class="case-a">{'Case A'}</p>
 						break;
 					default:
-						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
+						<p class="case-default">{'Default'}</p>
 				}
 			}
-		}
-	</ul>
+			<p class="after">{'after'}</p>
+		</div>
+	</>;
 }
 
-// ── switch + try (no for/if) ──────────────────────────────────────────────────
-export component SwitchTry() {
-	const kind = 'a';
+// ── for + if + switch, single item (no inter-item cursor advance needed) ───────
+export function ForIfSwitchSingle() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+		];
+		<ul class="for-if-switch-single">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					switch (item.kind) {
+						case 'a':
+							<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+							break;
+						default:
+							<li class={`item item-${item.id} kind-default`}>{`D-${item.id}`}</li>
+					}
+				}
+			}
+		</ul>
+	</>;
+}
 
-	<div class="switch-try">
-		switch (kind) {
-			case 'a':
-				try {
-					<p class="resolved-a">{'A resolved'}</p>
-				} pending {
-					<p class="pending-a">{'A pending'}</p>
+// ── for + if + switch, two items shown (the cursor-advance regression) ─────────
+export function ForIfSwitchMulti() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: true },
+		];
+		<ul class="for-if-switch-multi">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					switch (item.kind) {
+						case 'a':
+							<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+							break;
+						default:
+							<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
+					}
 				}
-				break;
-			default:
-				<p class="default">{'Default'}</p>
-		}
-	</div>
+			}
+		</ul>
+	</>;
 }
 
-// ── for + switch + try (no if) ────────────────────────────────────────────────
-export component ForSwitchTry() {
-	const items = [
-		{ id: 1, kind: 'a' },
-		{ id: 2, kind: 'b' },
-	];
+// ── for + if + switch, last item hidden (if=false path between items) ──────────
+export function ForIfSwitchWithDisabled() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: false },
+			{ id: 3, kind: 'a', show: true },
+		];
+		<ul class="for-if-switch-disabled">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					switch (item.kind) {
+						case 'a':
+							<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+							break;
+						default:
+							<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
+					}
+				}
+			}
+		</ul>
+	</>;
+}
 
-	<ul class="for-switch-try">
-		for (const item of items; key item.id) {
-			switch (item.kind) {
+// ── switch + try (no for/if) ──────────────────────────────────────────────────
+export function SwitchTry() {
+	return <>
+		const kind = 'a';
+		<div class="switch-try">
+			switch (kind) {
 				case 'a':
 					try {
-						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+						<p class="resolved-a">{'A resolved'}</p>
 					} pending {
-						<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+						<p class="pending-a">{'A pending'}</p>
 					}
 					break;
 				default:
-					try {
-						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
-					} pending {
-						<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
-					}
+					<p class="default">{'Default'}</p>
 			}
-		}
-	</ul>
+		</div>
+	</>;
 }
 
-// ── for + if + try (no switch) ────────────────────────────────────────────────
-export component ForIfTry() {
-	const items = [
-		{ id: 1, show: true },
-		{ id: 2, show: true },
-	];
-
-	<ul class="for-if-try">
-		for (const item of items; key item.id) {
-			if (item.show) {
-				try {
-					<li class={`item item-${item.id}`}>{`item-${item.id}`}</li>
-				} pending {
-					<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
-				}
-			}
-		}
-	</ul>
-}
-
-// ── for + if + switch + try, single item ─────────────────────────────────────
-export component ForIfSwitchTrySingle() {
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-	];
-
-	<ul class="for-if-switch-try-single">
-		for (const item of items; key item.id) {
-			if (item.show) {
+// ── for + switch + try (no if) ────────────────────────────────────────────────
+export function ForSwitchTry() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a' },
+			{ id: 2, kind: 'b' },
+		];
+		<ul class="for-switch-try">
+			for (const item of items; key item.id) {
 				switch (item.kind) {
 					case 'a':
 						try {
@@ -228,42 +188,94 @@ export component ForIfSwitchTrySingle() {
 						break;
 					default:
 						try {
-							<li class={`item item-${item.id} kind-default`}>{`D-${item.id}`}</li>
+							<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
 						} pending {
 							<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
 						}
 				}
 			}
-		}
-	</ul>
+		</ul>
+	</>;
 }
 
-// ── for + if + switch + try, multiple items (matches MixedControlFlowStatic) ──
-export component ForIfSwitchTryMulti() {
-	const items = [
-		{ id: 1, kind: 'a', show: true },
-		{ id: 2, kind: 'b', show: true },
-	];
+// ── for + if + try (no switch) ────────────────────────────────────────────────
+export function ForIfTry() {
+	return <>
+		const items = [
+			{ id: 1, show: true },
+			{ id: 2, show: true },
+		];
+		<ul class="for-if-try">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					try {
+						<li class={`item item-${item.id}`}>{`item-${item.id}`}</li>
+					} pending {
+						<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+					}
+				}
+			}
+		</ul>
+	</>;
+}
 
-	<ul class="for-if-switch-try-multi">
-		for (const item of items; key item.id) {
-			if (item.show) {
-				switch (item.kind) {
-					case 'a':
-						try {
-							<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
-						} pending {
-							<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
-						}
-						break;
-					default:
-						try {
-							<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
-						} pending {
-							<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
-						}
+// ── for + if + switch + try, single item ─────────────────────────────────────
+export function ForIfSwitchTrySingle() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+		];
+		<ul class="for-if-switch-try-single">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					switch (item.kind) {
+						case 'a':
+							try {
+								<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+							} pending {
+								<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+							}
+							break;
+						default:
+							try {
+								<li class={`item item-${item.id} kind-default`}>{`D-${item.id}`}</li>
+							} pending {
+								<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+							}
+					}
+				}
+			}
+		</ul>
+	</>;
+}
+
+// ── for + if + switch + try, multiple items (matches MixedControlFlowStatic) ──
+export function ForIfSwitchTryMulti() {
+	return <>
+		const items = [
+			{ id: 1, kind: 'a', show: true },
+			{ id: 2, kind: 'b', show: true },
+		];
+		<ul class="for-if-switch-try-multi">
+			for (const item of items; key item.id) {
+				if (item.show) {
+					switch (item.kind) {
+						case 'a':
+							try {
+								<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+							} pending {
+								<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+							}
+							break;
+						default:
+							try {
+								<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
+							} pending {
+								<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+							}
+					}
 				}
 			}
-		}
-	</ul>
+		</ul>
+	</>;
 }

package/tests/hydration/components/portal.tsrx

@@ -2,48 +2,55 @@
 import { Portal, track } from 'ripple';
 
 // Simple portal with static content
-export component SimplePortal() {
-	<div class="container">
-		<h1>{'Main Content'}</h1>
-		<Portal target={typeof document !== 'undefined' ? document.body : null}>
-			<div class="portal-content">{'Portal content'}</div>
-		</Portal>
-	</div>
+export function SimplePortal() {
+	return <>
+		<div class="container">
+			<h1>{'Main Content'}</h1>
+			<Portal target={typeof document !== 'undefined' ? document.body : null}>
+				<div class="portal-content">{'Portal content'}</div>
+			</Portal>
+		</div>
+	</>;
 }
 
 // Portal with conditional rendering
-export component ConditionalPortal() {
-	let &[show] = track(true);
-
-	<div class="container">
-		<button class="toggle" onClick={() => (show = !show)}>{'Toggle'}</button>
-		if (show) {
-			<Portal target={typeof document !== 'undefined' ? document.body : null}>
-				<div class="portal-content">{'Portal is visible'}</div>
-			</Portal>
-		}
-	</div>
+export function ConditionalPortal() {
+	return <>
+		let &[show] = track(true);
+		<div class="container">
+			<button class="toggle" onClick={() => (show = !show)}>{'Toggle'}</button>
+			if (show) {
+				<Portal target={typeof document !== 'undefined' ? document.body : null}>
+					<div class="portal-content">{'Portal is visible'}</div>
+				</Portal>
+			}
+		</div>
+	</>;
 }
 
 // Component with portal that shouldn't break on initial load
-export component PortalWithMainContent() {
-	<div>
-		<div class="main-content">{'Main page content'}</div>
-		<Portal target={typeof document !== 'undefined' ? document.body : null}>
-			<div class="portal-content">{'Modal content'}</div>
-		</Portal>
-		<div class="footer">{'Footer'}</div>
-	</div>
+export function PortalWithMainContent() {
+	return <>
+		<div>
+			<div class="main-content">{'Main page content'}</div>
+			<Portal target={typeof document !== 'undefined' ? document.body : null}>
+				<div class="portal-content">{'Modal content'}</div>
+			</Portal>
+			<div class="footer">{'Footer'}</div>
+		</div>
+	</>;
 }
 
 // Nested portals scenario
-export component NestedContentWithPortal() {
-	<div class="outer">
-		<div class="inner">
-			<span>{'Nested content'}</span>
+export function NestedContentWithPortal() {
+	return <>
+		<div class="outer">
+			<div class="inner">
+				<span>{'Nested content'}</span>
+			</div>
+			<Portal target={typeof document !== 'undefined' ? document.body : null}>
+				<div class="portal-content">{'Portal content'}</div>
+			</Portal>
 		</div>
-		<Portal target={typeof document !== 'undefined' ? document.body : null}>
-			<div class="portal-content">{'Portal content'}</div>
-		</Portal>
-	</div>
+	</>;
 }

package/tests/hydration/components/reactivity.tsrx

@@ -2,41 +2,51 @@ import { track } from 'ripple';
 
 // Reactive components for hydration testing
 
-export component TrackedState() {
-	let &[count] = track(0);
-	<div class="count">{count}</div>
+export function TrackedState() {
+	return <>
+		let &[count] = track(0);
+		<div class="count">{count}</div>
+	</>;
 }
 
-export component CounterWithInitial(props: { initial: number }) {
-	let &[count] = track(props.initial);
-	<div>
-		<span class="count">{count}</span>
-	</div>
+export function CounterWithInitial(props: { initial: number }) {
+	return <>
+		let &[count] = track(props.initial);
+		<div>
+			<span class="count">{count}</span>
+		</div>
+	</>;
 }
 
-export component CounterWrapper() {
-	<CounterWithInitial initial={5} />
+export function CounterWrapper() {
+	return <><CounterWithInitial initial={5} /></>;
 }
 
-export component ComputedValues() {
-	let &[a] = track(2);
-	let &[b] = track(3);
-	const sum = () => a + b;
-	<div class="sum">{sum()}</div>
+export function ComputedValues() {
+	return <>
+		let &[a] = track(2);
+		let &[b] = track(3);
+		const sum = () => a + b;
+		<div class="sum">{sum()}</div>
+	</>;
 }
 
-export component MultipleTracked() {
-	let &[x] = track(10);
-	let &[y] = track(20);
-	let &[z] = track(30);
-	<div class="x">{x}</div>
-	<div class="y">{y}</div>
-	<div class="z">{z}</div>
+export function MultipleTracked() {
+	return <>
+		let &[x] = track(10);
+		let &[y] = track(20);
+		let &[z] = track(30);
+		<div class="x">{x}</div>
+		<div class="y">{y}</div>
+		<div class="z">{z}</div>
+	</>;
 }
 
-export component DerivedState() {
-	let &[firstName] = track('John');
-	let &[lastName] = track('Doe');
-	const fullName = () => `${firstName} ${lastName}`;
-	<div class="name">{fullName()}</div>
+export function DerivedState() {
+	return <>
+		let &[firstName] = track('John');
+		let &[lastName] = track('Doe');
+		const fullName = () => `${firstName} ${lastName}`;
+		<div class="name">{fullName()}</div>
+	</>;
 }