Svelte – Spread Props

---

Alright guyss welcome back to our channel… okay sekarang kita masuk ke materi selanjutnya untuk project kita.. kita mencoba spread […] dari Svelte :

pertama buat file Info.svelte

<script>
	export let name;
	export let version;
	export let speed;
	export let website;
</script>

<p>
	The <code>{name}</code> package is {speed} fast.
	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
	and <a href={website}>learn more here</a>
</p>

kemudian pada App.svelte kita gunakan spread dari property yang sudah di declare sebelumnya..

<script>
	
	import Counter from './components/Counter.svelte'
	import Toggle from './components/Toggle.svelte'
	import Img from './components/Img.svelte'
	import String from './components/String.svelte'
	import Statement from './components/Statement.svelte'
	import Condition from './components/Condition.svelte';
	import Nested from './components/Nested.svelte';
	import Info from './components/Info.svelte';

	export let name;

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Counter />
	<Toggle />
	<Img />
	<String />
	<Statement />
	<Condition />
	<Nested answer={42}/>
	<Nested/>
	<Info {...pkg}/>

</main>

<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

dan kita lihat pada info kita passing data baru kedalam component tersebut sehingga hasilnya akan tampak seperti ini..

okay untuk link github semua ini ada disini … cyaaa….