Skip to main content

Part 1 / Props / Spread props

In this exercise, we've forgotten to specify the version prop expected by PackageInfo.svelte, meaning it shows 'version undefined'.

We could fix it by adding the version prop...

App.svelte
<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	version={pkg.version}
	website={pkg.website}
/>

...but since the properties of pkg correspond to the component's expected props, we can 'spread' them onto the component instead:

App.svelte
<PackageInfo {...pkg} />

Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with export, you can do so by accessing $$props directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.

Next: Logic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	import PackageInfo from './PackageInfo.svelte';
 
	const pkg = {
		name: 'svelte',
		speed: 'blazing',
		version: 3,
		website: 'https://svelte.dev'
	};
</script>
 
<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	website={pkg.website}
/>
initialising