8000 docs: clarify when attachments re-run (#15927) · sveltejs/svelte@22a0211 · GitHub
[go: up one dir, main page]

Skip to content

Commit 22a0211

Browse files
authored
docs: clarify when attachments re-run (#15927)
* clarify when attachments re-run * Update documentation/docs/03-template-syntax/09-@attach.md * Update documentation/docs/03-template-syntax/09-@attach.md * update docs * fix
1 parent a96d01b commit 22a0211

File tree

1 file changed

+33
-2
lines changed

1 file changed

+33
-2
lines changed

documentation/docs/03-template-syntax/09-@attach.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
title: {@attach ...}
33
---
44

5-
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.
5+
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.
6+
7+
Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
68

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

58-
Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
60+
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).)
5961

6062
## Inline attachments
6163

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

131+
## Controlling when attachments re-run
132+
133+
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`):
134+
135+
```js
136+
// @errors: 7006 2304 2552
137+
function foo(bar) {
138+
return (node) => {
139+
veryExpensiveSetupWork(node);
140+
update(node, bar);
141+
};
142+
}
143+
```
144+
145+
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:
146+
147+
```js
148+
// @errors: 7006 2304 2552
149+
function foo(+++getBar+++) {
150+
return (node) => {
151+
veryExpensiveSetupWork(node);
152+
153+
+++ $effect(() => {
154+
update(node, getBar());
155+
});+++
156+
}
157+
}
158+
```
159+
129160
## Creating attachments programmatically
130161

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

0 commit comments

Comments
 (0)
0