Skip to content

Commit 49c8582

Browse files
committed
update docs
1 parent e4ee271 commit 49c8582

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

documentation/docs/03-template-syntax/[email protected]

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
5757
</button>
5858
```
5959

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.
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).)
6161

6262
## Inline attachments
6363

@@ -128,6 +128,33 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
128128
</Button>
129129
```
130130

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+
function foo(bar) {
137+
return (node) => {
138+
veryExpensiveSetupWork(node);
139+
update(node, bar);
140+
};
141+
}
142+
```
143+
144+
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:
145+
146+
```js
147+
function foo(+++getBar+++) {
148+
return (node) => {
149+
veryExpensiveSetupWork(node);
150+
151+
+++ $effect(() => {
152+
update(node, getBar());
153+
});+++
154+
}
155+
}
156+
```
157+
131158
## Creating attachments programmatically
132159

133160
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)