props_rest_readonly error
The error 'Rest element properties of `$props()` such as `%property%` are readonly' occurs when attempting to modify a rest property from `$props()`.
Svelte · Language · all subjects
core/runes: $props
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Type $props with an interface
Type `$props` just like a regular object with certain properties. You can define an interface with required properties, optional properties (using `?`), event handlers, snippets, and spread remaining properties using `[key: string]: unknown`. Then destructure and assign the interface to `$props()`.
Generic $props with generics attribute
Components can declare a generic relationship between their properties using the `generics` attribute on the script tag. The content of the `generics` attribute is what you would put between the `<...>` tags of a generic function, allowing multiple generics, `extends` constraints, and fallback types.
ownership_invalid_mutation warning
Mutating unbound props is strongly discouraged because it creates code that is hard to reason about at scale ('who mutated this value?'). Instead, either create callback props to communicate changes, or mark the prop as $bindable in the parent to explicitly allow mutations. The warning message shows the property name and location when this pattern is detected.
Compiler error: props_duplicate
Cannot use `%rune%()` more than once.
Compiler error: props_illegal_name
Declaring or accessing a prop starting with `$$` is illegal as they are reserved for Svelte internals.
Compiler error: props_invalid_identifier
`$props()` can only be used with an object destructuring pattern.
Compiler error: props_invalid_pattern
`$props()` assignment must not contain nested properties or computed keys.
Compiler error: props_invalid_placement
`$props()` can only be used at the top level of components as a variable declaration initializer.
ownership_invalid_mutation warning: mutating unbound props
The warning 'Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead' occurs when a child component mutates a prop that is not explicitly bound. For example, if `App` passes `<Child {person} />` and `Child` receives `let { person } = $props()` and then mutates `person.name`, this warning is thrown. This is discouraged because it can create code that is hard to reason about at scale ('who mutated this value?'). To fix it, either create callback props to communicate changes, or mark the prop as `$bindable` in the parent component.