Skip to content

Commit 6b50faa

Browse files
Sync svelte docs (sveltejs#959)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent c9c48fb commit 6b50faa

File tree

4 files changed

+54
-3
lines changed

4 files changed

+54
-3
lines changed

apps/svelte.dev/content/docs/svelte/03-template-syntax/11-bind.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,34 @@ The general syntax is `bind:property={expression}`, where `expression` is an _lv
1212
<input bind:value />
1313
```
1414

15+
1516
Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.
1617

1718
Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.
1819

20+
## Function bindings
21+
22+
You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
23+
24+
```svelte
25+
<input bind:value={
26+
() => value,
27+
(v) => value = v.toLowerCase()}
28+
/>
29+
```
30+
31+
In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
32+
33+
```svelte
34+
<div
35+
bind:clientWidth={null, redraw}
36+
bind:clientHeight={null, redraw}
37+
>...</div>
38+
```
39+
40+
> [!NOTE]
41+
> Function bindings are available in Svelte 5.9.0 and newer.
42+
1943
## `<input bind:value>`
2044

2145
A `bind:value` directive on an `<input>` element binds the input's `value` property:

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
7878
Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
7979
```
8080

81+
### bind_group_invalid_expression
82+
83+
```
84+
`bind:group` can only bind to an Identifier or MemberExpression
85+
```
86+
8187
### bind_invalid_expression
8288

8389
```
84-
Can only bind to an Identifier or MemberExpression
90+
Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
8591
```
8692

8793
### bind_invalid_name
@@ -94,6 +100,12 @@ Can only bind to an Identifier or MemberExpression
94100
`bind:%name%` is not a valid binding. %explanation%
95101
```
96102

103+
### bind_invalid_parens
104+
105+
```
106+
`bind:%name%={get, set}` must not have surrounding parentheses
107+
```
108+
97109
### bind_invalid_target
98110

99111
```

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,10 @@ namespace AST {
320320
/** The 'x' in `bind:x` */
321321
name: string;
322322
/** The y in `bind:x={y}` */
323-
expression: Identifier | MemberExpression;
323+
expression:
324+
| Identifier
325+
| MemberExpression
326+
| SequenceExpression;
324327
}
325328
326329
/** A `class:` directive */

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,16 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
8282
Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
8383
```
8484

85+
### bind_group_invalid_expression
86+
87+
```
88+
`bind:group` can only bind to an Identifier or MemberExpression
89+
```
90+
8591
### bind_invalid_expression
8692

8793
```
88-
Can only bind to an Identifier or MemberExpression
94+
Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
8995
```
9096

9197
### bind_invalid_name
@@ -98,6 +104,12 @@ Can only bind to an Identifier or MemberExpression
98104
`bind:%name%` is not a valid binding. %explanation%
99105
```
100106

107+
### bind_invalid_parens
108+
109+
```
110+
`bind:%name%={get, set}` must not have surrounding parentheses
111+
```
112+
101113
### bind_invalid_target
102114

103115
```

0 commit comments

Comments
 (0)