Basic Svelte
Introduction
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
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);
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}
/>