Skip to main content

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();

Edit this page on GitHub

<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}
/>