Tips memainkan logic state di svelte

Dari pada repot repot bikin seperti ini

<script>1
	let show=false
</script>

<button on:click={() => show=!show}>click me</button>
{#if show}
// show something
{/if}

bayangin kalau ada banyak logic state di satu komponen. harus bikin variabel yg lain juga.

baiknya dibuat perkomponen seperti ini. nama file LogicState.svelte

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	// default statenya
	export let state = false;
	const setTrue = () => {
		state = true;
		dispatch('isTrue');
	};
	const setFalse = () => {
		state = false;
		dispatch('isFalse');
	};
	const toggle = () => {
		state = !state;
		state ? dispatch('isTrue') : dispatch('isFalse');
	};
</script>

<slot {state} {setTrue} {setFalse} {toggle} />

nah nanti tinggal pakai seperti ini berulang ulang

<script>
	import LogicState from 'LogicState.svelte' 
</script>

<LogicState
	state={false}
	let:state
	let:setTrue
	let:setFalse
	on:isTrue={alert}
	on:isFalse={alert}
>
	<button on:click={setTrue}>
		show
	</button>

	{#if show}
	 hai
	{/if}
</LogicState>

<LogicState
	state={true}
	let:state
	let:setTrue
	let:setFalse
	on:isTrue={alert}
	on:isFalse={alert}
>
	<button on:click={setTrue}>
		show
	</button>

	{#if show}
	 show by default
	{/if}
</LogicState>