Skip to content

Commit 48643d6

Browse files
Sync svelte docs (#1353)
sync svelte docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 04a3645 commit 48643d6

File tree

4 files changed

+102
-9
lines changed

4 files changed

+102
-9
lines changed

apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,15 @@ todos[0].done = !todos[0].done;
6868

6969
### Classes
7070

71-
You can also use `$state` in class fields (whether public or private):
71+
You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
7272

7373
```js
7474
// @errors: 7006 2554
7575
class Todo {
7676
done = $state(false);
77-
text = $state();
7877

7978
constructor(text) {
80-
this.text = text;
79+
this.text = $state(text);
8180
}
8281

8382
reset() {
@@ -111,10 +110,9 @@ You can either use an inline function...
111110
// @errors: 7006 2554
112111
class Todo {
113112
done = $state(false);
114-
text = $state();
115113

116114
constructor(text) {
117-
this.text = text;
115+
this.text = $state(text);
118116
}
119117

120118
+++reset = () => {+++

apps/svelte.dev/content/docs/svelte/03-template-syntax/[email protected]

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
33
title: {@attach ...}
44
---
55

6-
Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
6+
Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
7+
8+
Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
79

810
> [!NOTE]
911
> Attachments are available in Svelte 5.29 and newer.
@@ -56,7 +58,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
5658
</button>
5759
```
5860

59-
Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
61+
Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
6062

6163
## Inline attachments
6264

@@ -127,6 +129,35 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
127129
</Button>
128130
```
129131

132+
## Controlling when attachments re-run
133+
134+
Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
135+
136+
```js
137+
// @errors: 7006 2304 2552
138+
function foo(bar) {
139+
return (node) => {
140+
veryExpensiveSetupWork(node);
141+
update(node, bar);
142+
};
143+
}
144+
```
145+
146+
In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
147+
148+
```js
149+
// @errors: 7006 2304 2552
150+
function foo(+++getBar+++) {
151+
return (node) => {
152+
veryExpensiveSetupWork(node);
153+
154+
+++ $effect(() => {
155+
update(node, getBar());
156+
});+++
157+
}
158+
}
159+
```
160+
130161
## Creating attachments programmatically
131162

132163
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
846846
This snippet is shadowing the prop `%prop%` with the same name
847847
```
848848

849+
### state_field_duplicate
850+
851+
```
852+
`%name%` has already been declared on this class
853+
```
854+
855+
An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
856+
857+
```js
858+
class Counter {
859+
count = $state(0);
860+
}
861+
```
862+
863+
...or inside the constructor...
864+
865+
```js
866+
class Counter {
867+
constructor() {
868+
this.count = $state(0);
869+
}
870+
}
871+
```
872+
873+
...but it can only happen once.
874+
875+
### state_field_invalid_assignment
876+
877+
```
878+
Cannot assign to a state field before its declaration
879+
```
880+
849881
### state_invalid_export
850882

851883
```
@@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
855887
### state_invalid_placement
856888

857889
```
858-
`%rune%(...)` can only be used as a variable declaration initializer or a class field
890+
`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
859891
```
860892

861893
### store_invalid_scoped_subscription

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -851,6 +851,38 @@ Cannot reassign or bind to snippet parameter
851851
This snippet is shadowing the prop `%prop%` with the same name
852852
```
853853

854+
### state_field_duplicate
855+
856+
```
857+
`%name%` has already been declared on this class
858+
```
859+
860+
An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
861+
862+
```js
863+
class Counter {
864+
count = $state(0);
865+
}
866+
```
867+
868+
...or inside the constructor...
869+
870+
```js
871+
class Counter {
872+
constructor() {
873+
this.count = $state(0);
874+
}
875+
}
876+
```
877+
878+
...but it can only happen once.
879+
880+
### state_field_invalid_assignment
881+
882+
```
883+
Cannot assign to a state field before its declaration
884+
```
885+
854886
### state_invalid_export
855887

856888
```
@@ -860,7 +892,7 @@ Cannot export state from a module if it is reassigned. Either export a function
860892
### state_invalid_placement
861893

862894
```
863-
`%rune%(...)` can only be used as a variable declaration initializer or a class field
895+
`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
864896
```
865897

866898
### store_invalid_scoped_subscription

0 commit comments

Comments
 (0)