ripple 0.3.72 → 0.3.74

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

@@ -1,118 +1,111 @@
 import { track, trackAsync } from 'ripple';
 
-export function MixedControlFlowStatic() {
-	return <>
-		const rows = [
-			{ id: 1, kind: 'a', enabled: true },
-			{ id: 2, kind: 'b', enabled: true },
-			{ id: 3, kind: 'a', enabled: false },
-		];
-		<section class="mixed-static">
-			for (const row of rows; key row.id) {
-				if (row.enabled) {
-					switch (row.kind) {
-						case 'a':
-							try {
-								<div class={`row row-${row.id} kind-a`}>{`A-${row.id}`}</div>
-							} pending {
-								<div class={`pending pending-${row.id}`}>{'pending a'}</div>
-							}
-							break;
-						default:
-							try {
-								<div class={`row row-${row.id} kind-b`}>{`B-${row.id}`}</div>
-							} pending {
-								<div class={`pending pending-${row.id}`}>{'pending b'}</div>
-							}
+export function MixedControlFlowStatic() @{
+	const rows = [
+		{ id: 1, kind: 'a', enabled: true },
+		{ id: 2, kind: 'b', enabled: true },
+		{ id: 3, kind: 'a', enabled: false },
+	];
+	<section class="mixed-static">
+		@for (const row of rows; key row.id) {
+			@if (row.enabled) {
+				@switch (row.kind) {
+					@case 'a': {
+						@try {
+							<div class={`row row-${row.id} kind-a`}>{`A-${row.id}`}</div>
+						} @pending {
+							<div class={`pending pending-${row.id}`}>{'pending a'}</div>
+						}
+					}
+					@default: {
+						@try {
+							<div class={`row row-${row.id} kind-b`}>{`B-${row.id}`}</div>
+						} @pending {
+							<div class={`pending pending-${row.id}`}>{'pending b'}</div>
+						}
 					}
 				}
 			}
-		</section>
-	</>;
+		}
+	</section>
 }
 
-export function MixedControlFlowReactive() {
-	return <>
-		let &[show] = track(true);
-		let &[mode] = track<'a' | 'b'>('a');
-		let &[items] = track([
-			{ id: 1, label: 'One' },
-			{ id: 2, label: 'Two' },
-		]);
+export function MixedControlFlowReactive() @{
+	let &[show] = track(true);
+	let &[mode] = track<'a' | 'b'>('a');
+	let &[items] = track([
+		{ id: 1, label: 'One' },
+		{ id: 2, label: 'Two' },
+	]);
+	<>
 		<button
 			class="toggle-show"
 			onClick={() => {
 				show = !show;
 			}}
-		>
-			{'Toggle Show'}
-		</button>
+		>{'Toggle Show'}</button>
 		<button
 			class="toggle-mode"
 			onClick={() => {
 				mode = mode === 'a' ? 'b' : 'a';
 			}}
-		>
-			{'Toggle Mode'}
-		</button>
+		>{'Toggle Mode'}</button>
 		<button
 			class="add-item"
 			onClick={() => {
 				items = [...items, { id: 3, label: 'Three' }];
 			}}
-		>
-			{'Add Item'}
-		</button>
-		if (show) {
+		>{'Add Item'}</button>
+		@if (show) {
 			<div class="mixed-reactive-list">
-				for (const item of items; key item.id) {
-					switch (mode) {
-						case 'a':
-							try {
+				@for (const item of items; key item.id) {
+					@switch (mode) {
+						@case 'a': {
+							@try {
 								<p class={`item item-${item.id}`}>{`A:${item.label}`}</p>
-							} pending {
+							} @pending {
 								<p class="pending">{'pending a'}</p>
 							}
-							break;
-						default:
-							try {
+						}
+						@default: {
+							@try {
 								<p class={`item item-${item.id}`}>{`B:${item.label}`}</p>
-							} pending {
+							} @pending {
 								<p class="pending">{'pending b'}</p>
 							}
+						}
 					}
 				}
 			</div>
 		}
-	</>;
+	</>
 }
 
-export function MixedControlFlowAsyncPending() {
-	return <>
-		const rows = [1, 2];
-		const state = 'slow';
+export function MixedControlFlowAsyncPending() @{
+	const rows = [1, 2];
+	const state = 'slow';
+	<>
 		<div class="before">{'before'}</div>
-		for (const row of rows) {
-			if (row === 1) {
-				switch (state) {
-					case 'slow':
-						try {
+		@for (const row of rows) {
+			@if (row === 1) {
+				@switch (state) {
+					@case 'slow': {
+						@try {
 							<AsyncRow label={`row-${row}`} />
-						} pending {
+						} @pending {
 							<div class={`pending-row pending-row-${row}`}>{`pending ${row}`}</div>
 						}
-						break;
-					default:
+					}
+					@default: {
 						<div class="unexpected">{'unexpected'}</div>
+					}
 				}
 			}
 		}
-	</>;
+	</>
 }
 
-function AsyncRow({ label }: { label: string }) {
-	return <>
-		let &[value] = trackAsync(() => Promise.resolve(label));
-		<div class="resolved-row">{value}</div>
-	</>;
+function AsyncRow({ label }: { label: string }) @{
+	let &[value] = trackAsync(() => Promise.resolve(label));
+	<div class="resolved-row">{value}</div>
 }