Svelte – svelte-component

---

RedThing.svelte

<strong>Red thing</strong>

<style>
	strong {
		color: red;
	}
</style>

GreenThing.svelte

<strong>Green thing</strong>

<style>
	strong {
		color: green;
	}
</style>

BlueThing.svelte

<strong>Blue thing</strong>

<style>
	strong {
		color: blue;
	}
</style>

ColorComp.svelte

<script>
	import RedThing from './components/RedThing.svelte';
	import GreenThing from './components/GreenThing.svelte';
	import BlueThing from './components/BlueThing.svelte';

	const options = [
		{ color: 'red',   component: RedThing   },
		{ color: 'green', component: GreenThing },
		{ color: 'blue',  component: BlueThing  },
	];

	let selected = options[0];
</script>

<select bind:value={selected}>
	{#each options as option}
		<option value={option}>{option.color}</option>
	{/each}
</select>

<svelte:component this={selected.component}/>

App.svelte

	<Hoverable />
	<Profile />
	<Modal />
	<!-- <Map /> -->
	<FolderComp />
	<ColorComp />

dan hasilnya…

alright berhasil ya…. link github ada disini… cyaaa …