ripple 0.3.72 → 0.3.76

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

@@ -2,280 +2,266 @@
 // Each component tests one specific combination of for / if / switch.
 
 // ── for + if (2 items shown, 1 hidden) ────────────────────────────────────────
-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>
-				}
+export function 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>
 			}
-		</ul>
-	</>;
+		}
+	</ul>
 }
 
 // ── for + switch (3 items, alternating cases) ─────────────────────────────────
-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-b`}>{`B-${item.id}`}</li>
+export function 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>
+				}
+				@default: {
+					<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
 				}
 			}
-		</ul>
-	</>;
+		}
+	</ul>
 }
 
 // ── 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':
-						<p class="case-a">{'Case A'}</p>
-						break;
-					default:
-						<p class="case-default">{'Default'}</p>
+export function IfSwitch() @{
+	const show = true;
+	const kind = 'a';
+	<div class="if-switch">
+		@if (show) {
+			@switch (kind) {
+				@case 'a': {
+					<p class="case-a">Case A</p>
+				}
+				@default: {
+					<p class="case-default">{'Default'}</p>
 				}
 			}
-		</div>
-	</>;
+		}
+	</div>
 }
 
 // ── 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':
-						<p class="case-a">{'Case A'}</p>
-						break;
-					default:
-						<p class="case-default">{'Default'}</p>
+export function 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>
+				}
+				@default: {
+					<p class="case-default">{'Default'}</p>
 				}
 			}
-			<p class="after">{'after'}</p>
-		</div>
-	</>;
+		}
+		<p class="after">{'after'}</p>
+	</div>
 }
 
 // ── 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>
+export function 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) {
+				@switch (item.kind) {
+					@case 'a': {
+						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+					}
+					@default: {
+						<li class={`item item-${item.id} kind-default`}>{`D-${item.id}`}</li>
 					}
 				}
 			}
-		</ul>
-	</>;
+		}
+	</ul>
 }
 
 // ── 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>
+export function 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) {
+					@case 'a': {
+						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+					}
+					@default: {
+						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
 					}
 				}
 			}
-		</ul>
-	</>;
+		}
+	</ul>
 }
 
 // ── 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>
+export function 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) {
+					@case 'a': {
+						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+					}
+					@default: {
+						<li class={`item item-${item.id} kind-b`}>{`B-${item.id}`}</li>
 					}
 				}
 			}
-		</ul>
-	</>;
+		}
+	</ul>
 }
 
 // ── switch + try (no for/if) ──────────────────────────────────────────────────
-export function SwitchTry() {
-	return <>
-		const kind = 'a';
-		<div class="switch-try">
-			switch (kind) {
-				case 'a':
-					try {
-						<p class="resolved-a">{'A resolved'}</p>
-					} pending {
-						<p class="pending-a">{'A pending'}</p>
-					}
-					break;
-				default:
-					<p class="default">{'Default'}</p>
+export function SwitchTry() @{
+	const kind = 'a';
+	<div class="switch-try">
+		@switch (kind) {
+			@case 'a': {
+				@try {
+					<p class="resolved-a">{'A resolved'}</p>
+				} @pending {
+					<p class="pending-a">{'A pending'}</p>
+				}
+			}
+			@default: {
+				<p class="default">{'Default'}</p>
 			}
-		</div>
-	</>;
+		}
+	</div>
 }
 
 // ── 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 {
-							<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>
-						}
+export function ForSwitchTry() @{
+	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 {
+						<li class={`item item-${item.id} kind-a`}>{`A-${item.id}`}</li>
+					} @pending {
+						<li class={`pending pending-${item.id}`}>{`pending ${item.id}`}</li>
+					}
+				}
+				@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>
 }
 
 // ── 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>
-					}
+export function 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>
-	</>;
+		}
+	</ul>
 }
 
 // ── 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>
-							}
+export function 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) {
+				@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>
+						}
+					}
+					@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>
-	</>;
+		}
+	</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>
-							}
+export function ForIfSwitchTryMulti() @{
+	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>
+						}
+					}
+					@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,55 +2,47 @@
 import { Portal, track } from 'ripple';
 
 // Simple portal with static content
-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>
-	</>;
+export function 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>
 }
 
 // Portal with conditional rendering
-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>
-	</>;
+export function 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>
 }
 
 // Component with portal that shouldn't break on initial load
-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>
-	</>;
+export function 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>
 }
 
 // Nested portals scenario
-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>
+export function NestedContentWithPortal() @{
+	<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>
 }

package/tests/hydration/components/reactivity.tsrx

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