docs: clarify when attachments re-run #15927
Conversation
|
|
| @@ -55,7 +57,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur | |||
| </button> | |||
| ``` | |||
|
|
|||
| 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. | |||
There was a problem hiding this comment.
Good clarification, but I think we also should have a code example showing how to do it if that's not what you want.
| 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. | |
| 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. | |
| In case this is not the desired behavior, and you instead want the attachment to only be executed once on mount, then make sure to not read state eagerly inside the function body. Assuming `tippy` would be very expensive to setup and tear down (which it isn't), then you could rewrite the above example by passing a reference to the `content` variable and invoke it inside a nested effect: | |
| ```svelte | |
| <!--- file: App.svelte ---> | |
| <script> | |
| import tippy from 'tippy.js'; | |
| let content = $state('Hello!'); | |
| /** | |
| * @param {() => string} content | |
| * @returns {import('svelte/attachments').Attachment} | |
| */ | |
| function tooltip(content) { | |
| return (element) => { | |
| const tooltip = tippy(element); | |
| $effect(() => { | |
| tippy.setContent(content()); | |
| }); | |
| return tooltip.destroy; | |
| }; | |
| } | |
| </script> | |
| <input bind:value={content} /> | |
| <button {@attach tooltip(() => content)}> | |
| Hover me | |
| </button> | |
| ``` |
There was a problem hiding this comment.
I think this is probably a niche enough thing that we could move it to a separate 'Controlling when attachments re-run' section further down — thoughts?
There was a problem hiding this comment.
Fine with me, I just want to have it mentioned somewhere
No description provided.