ripple 0.3.67 → 0.3.69

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

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