Skip to content

Commit 7992ef8

Browse files
committed
tweak docs
1 parent 017db61 commit 7992ef8

File tree

1 file changed

+12
-2
lines changed
  • sites/svelte-5-preview/src/routes/docs/content/01-api

1 file changed

+12
-2
lines changed

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -490,7 +490,7 @@ let { a, b, c, ...everythingElse }: MyProps = $props();
490490
>
491491
> ...TypeScript [widens the type](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwBIAHGHIgZwB4AVeAXnilQE8A+ACgEoAueagbgBQgiCAzwA3vAAe9eABYATPAC+c4qQqUp03uQwwsqAOaqOnIfCsB6a-AB6AfiA) of `x` to be `string | number`, instead of erroring.
492492
493-
By default props are treated as readonly, meaning reassignments will not propagate upwards and mutations will result in a warning. You will also get an error trying to `bind:` to them. To declare props as bindable, use [`$bindable()`](#bindable).
493+
By default props are treated as readonly, meaning reassignments will not propagate upwards and mutations will result in a warning at runtime in development mode. You will also get a runtime error when trying to `bind:` to a readonly prop in a parent component. To declare props as bindable, use [`$bindable()`](#bindable).
494494
495495
### What this replaces
496496
@@ -500,14 +500,24 @@ Note that you can still use `export const` and `export function` to expose thing
500500
501501
### `$bindable()`
502502
503-
To declare props as bindable, use `$bindable()`. Besides using them as regular props, the parent can then also `bind:` to them.
503+
To declare props as bindable, use `$bindable()`. Besides using them as regular props, the parent can (_can_, not _must_) then also `bind:` to them.
504504
505505
```svelte
506506
<script>
507507
let { bindableProp = $bindable() } = $props();
508508
</script>
509509
```
510510
511+
You can pass an argument to `$bindable()`. This argument is used as a fallback value when the property is `undefined`.
512+
513+
```svelte
514+
<script>
515+
let { bindableProp = $bindable('fallback') } = $props();
516+
</script>
517+
```
518+
519+
Note that the parent is not allowed to pass `undefined` to a property with a fallback if it `bind:`s to that property.
520+
511521
## `$inspect`
512522
513523
The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its

0 commit comments

Comments
 (0)