Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

In this exercise, in App.svelte 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, in PackageInfo.svelte 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();

...in which case you can access the properties by their object paths:

console.log(stuff.name, stuff.version, stuff.description, stuff.website);

Edit this page on GitHub

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