Skip to content

Commit aaff89b

Browse files
github-actions[bot]Rich-Harris
github-actions[bot]
and
Rich-Harris
authored
Sync svelte docs (#737)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent 531f21e commit aaff89b

File tree

3 files changed

+90
-10
lines changed

3 files changed

+90
-10
lines changed

‎apps/svelte.dev/content/docs/svelte/02-runes/05-$props.md

Lines changed: 80 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,29 @@ title: $props
55
The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
66

77
```svelte
8+
<!--- file: App.svelte --->
89
<script>
910
import MyComponent from './MyComponent.svelte';
1011
</script>
1112
12-
/// file: App.svelte
1313
<MyComponent adjective="cool" />
1414
```
1515

1616
On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...
1717

1818
```svelte
19+
<!--- file: MyComponent.svelte --->
1920
<script>
2021
let props = $props();
2122
</script>
2223
23-
/// file: MyComponent.svelte
2424
<p>this component is {props.adjective}</p>
2525
```
2626

2727
...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
2828

2929
```svelte
30-
/// file: MyComponent.svelte
30+
<!--- file: MyComponent.svelte --->
3131
<script>
3232
let +++{ adjective }+++ = $props();
3333
</script>
@@ -40,11 +40,10 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
4040
Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
4141

4242
```js
43-
/// file: MyComponent.svelte
4443
let { adjective = 'happy' } = $props();
4544
```
4645

47-
> [!NOTE] Fallback values are not turned into reactive state proxies.
46+
> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
4847
4948
## Renaming props
5049

@@ -66,9 +65,8 @@ let { a, b, c, ...others } = $props();
6665

6766
References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
6867

69-
<!-- prettier-ignore -->
7068
```svelte
71-
/// file: App.svelte
69+
<!--- file: App.svelte --->
7270
<script>
7371
import Child from './Child.svelte';
7472
@@ -82,9 +80,8 @@ References to a prop inside a component update when the prop itself updates —
8280
<Child {count} />
8381
```
8482

85-
<!-- prettier-ignore -->
8683
```svelte
87-
/// file: Child.svelte
84+
<!--- file: Child.svelte --->
8885
<script>
8986
let { count } = $props();
9087
</script>
@@ -94,6 +91,80 @@ References to a prop inside a component update when the prop itself updates —
9491
</button>
9592
```
9693

94+
While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
95+
96+
If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
97+
98+
```svelte
99+
<!--- file: App.svelte --->
100+
<script>
101+
import Child from './Child.svelte';
102+
</script>
103+
104+
<Child object={{ count: 0 }} />
105+
```
106+
107+
```svelte
108+
<!--- file: Child.svelte --->
109+
<script>
110+
let { object } = $props();
111+
</script>
112+
113+
<button onclick={() => {
114+
// has no effect
115+
object.count += 1
116+
}}>
117+
clicks: {object.count}
118+
</button>
119+
```
120+
121+
If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
122+
123+
```svelte
124+
<!--- file: App.svelte --->
125+
<script>
126+
import Child from './Child.svelte';
127+
128+
let object = $state({count: 0});
129+
</script>
130+
131+
<Child {object} />
132+
```
133+
134+
```svelte
135+
<!--- file: Child.svelte --->
136+
<script>
137+
let { object } = $props();
138+
</script>
139+
140+
<button onclick={() => {
141+
// will cause the count below to update,
142+
// but with a warning. Don't mutate
143+
// objects you don't own!
144+
object.count += 1
145+
}}>
146+
clicks: {object.count}
147+
</button>
148+
```
149+
150+
The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
151+
152+
```svelte
153+
<!--- file: Child.svelte --->
154+
<script>
155+
let { object = { count: 0 } } = $props();
156+
</script>
157+
158+
<button onclick={() => {
159+
// has no effect if the fallback value is used
160+
object.count += 1
161+
}}>
162+
clicks: {object.count}
163+
</button>
164+
```
165+
166+
In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
167+
97168
## Type safety
98169

99170
You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...

‎apps/svelte.dev/content/docs/svelte/03-template-syntax/05-await.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,12 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
6868
<p>The error is {error}</p>
6969
{/await}
7070
```
71+
72+
> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:
73+
>
74+
> ```svelte
75+
> {#await import('./Component.svelte') then { default: Component }}
76+
> <Component />
77+
> {/await}
78+
> ```
79+

‎apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,7 @@ If you wanted multiple UI placeholders, you had to use named slots. In Svelte 5,
376376
</main>
377377
378378
<footer>
379-
---<slot name="header" />---
379+
---<slot name="footer" />---
380380
+++{@render footer()}+++
381381
</footer>
382382
```

0 commit comments

Comments
 (0)