Skip to main content

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: 4,
		website: 'https://svelte.dev'
	};
</script>
 
<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	website={pkg.website}
/>
initialising