diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md index 9c849659d6..b3a2d0a3fe 100644 --- a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md +++ b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md @@ -68,16 +68,15 @@ todos[0].done = !todos[0].done; ### Classes -You can also use `$state` in class fields (whether public or private): +You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`: ```js // @errors: 7006 2554 class Todo { done = $state(false); - text = $state(); constructor(text) { - this.text = text; + this.text = $state(text); } reset() { @@ -111,10 +110,9 @@ You can either use an inline function... // @errors: 7006 2554 class Todo { done = $state(false); - text = $state(); constructor(text) { - this.text = text; + this.text = $state(text); } +++reset = () => {+++ diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md index 4db1d043c2..f342945a8a 100644 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md @@ -3,7 +3,9 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc title: {@attach ...} --- -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. +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. + +Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM. > [!NOTE] > 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 ``` -Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. +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).) ## Inline attachments @@ -127,6 +129,35 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl ``` +## Controlling when attachments re-run + +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`): + +```js +// @errors: 7006 2304 2552 +function foo(bar) { + return (node) => { + veryExpensiveSetupWork(node); + update(node, bar); + }; +} +``` + +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: + +```js +// @errors: 7006 2304 2552 +function foo(+++getBar+++) { + return (node) => { + veryExpensiveSetupWork(node); + ++++ $effect(() => { + update(node, getBar()); + });+++ + } +} +``` + ## Creating attachments programmatically To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey). diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index e8669ead53..db848a0299 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter This snippet is shadowing the prop `%prop%` with the same name ``` +### state_field_duplicate + +``` +`%name%` has already been declared on this class +``` + +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... + +```js +class Counter { + count = $state(0); +} +``` + +...or inside the constructor... + +```js +class Counter { + constructor() { + this.count = $state(0); + } +} +``` + +...but it can only happen once. + +### state_field_invalid_assignment + +``` +Cannot assign to a state field before its declaration +``` + ### state_invalid_export ``` @@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function ### state_invalid_placement ``` -`%rune%(...)` can only be used as a variable declaration initializer or a class field +`%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. ``` ### store_invalid_scoped_subscription diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md index a2ebf53216..143137c77e 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -851,6 +851,38 @@ Cannot reassign or bind to snippet parameter This snippet is shadowing the prop `%prop%` with the same name ``` +### state_field_duplicate + +``` +`%name%` has already been declared on this class +``` + +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... + +```js +class Counter { + count = $state(0); +} +``` + +...or inside the constructor... + +```js +class Counter { + constructor() { + this.count = $state(0); + } +} +``` + +...but it can only happen once. + +### state_field_invalid_assignment + +``` +Cannot assign to a state field before its declaration +``` + ### state_invalid_export ``` @@ -860,7 +892,7 @@ Cannot export state from a module if it is reassigned. Either export a function ### state_invalid_placement ``` -`%rune%(...)` can only be used as a variable declaration initializer or a class field +`%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. ``` ### store_invalid_scoped_subscription