summaryrefslogtreecommitdiff
path: root/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte
blob: 641312ae1b9fb0c088ab2ddf78bba272a0cf9859 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- @component
A counter written with Svelte
-->
<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		children?: Snippet
	}

	let { children }: Props = $props();
	let count = $state(0);

	function add() {
		count += 1;
	}

	function subtract() {
		count -= 1;
	}
</script>

<div class="counter">
	<button onclick={subtract}>-</button>
	<pre>{count}</pre>
	<button onclick={add}>+</button>
</div>
<div class="counter-message">
	{@render children?.()}
</div>