In this exercise, we’ve forgotten to pass the name
prop expected by PackageInfo.svelte
, meaning the <code>
element is empty and the npm link is broken.
We could fix it by adding the prop...
App
<PackageInfo
name={pkg.name}
version={pkg.version}
description={pkg.description}
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
<PackageInfo {...pkg} />
Conversely, you can get an object containing all the props that were passed into a component using a rest property...
let { name, ...stuff } = $props();
...or by skipping destructuring altogether:
let stuff = $props();
previous next
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',
version: 5,
description: 'blazing fast',
website: 'https://svelte.dev'
};
</script>
<PackageInfo
version={pkg.version}
description={pkg.description}
website={pkg.website}
/>