Skip to content

Commit 9f4ef52

Browse files
sync svelte docs
1 parent 48643d6 commit 9f4ef52

File tree

2 files changed

+51
-1
lines changed

2 files changed

+51
-1
lines changed

apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,3 +161,7 @@ function foo(+++getBar+++) {
161161
## Creating attachments programmatically
162162

163163
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
164+
165+
## Converting actions to attachments
166+
167+
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: svelte/attachments
77

88
```js
99
// @noErrors
10-
import { createAttachmentKey } from 'svelte/attachments';
10+
import { createAttachmentKey, fromAction } from 'svelte/attachments';
1111
```
1212

1313
## createAttachmentKey
@@ -48,6 +48,52 @@ function createAttachmentKey(): symbol;
4848

4949

5050

51+
## fromAction
52+
53+
Converts an [action](/docs/svelte/use) into an [attachment](/docs/svelte/@attach) keeping the same behavior.
54+
It's useful if you want to start using attachments on components but you have actions provided by a library.
55+
56+
Note that the second argument, if provided, must be a function that _returns_ the argument to the
57+
action function, not the argument itself.
58+
59+
```svelte
60+
<!-- with an action -->
61+
<div use:foo={bar}>...</div>
62+
63+
<!-- with an attachment -->
64+
<div {@attach fromAction(foo, () => bar)}>...</div>
65+
```
66+
67+
<div class="ts-block">
68+
69+
```dts
70+
function fromAction<
71+
E extends EventTarget,
72+
T extends unknown
73+
>(
74+
action:
75+
| Action<E, T>
76+
| ((element: E, arg: T) => void | ActionReturn<T>),
77+
fn: () => T
78+
): Attachment<E>;
79+
```
80+
81+
</div>
82+
83+
<div class="ts-block">
84+
85+
```dts
86+
function fromAction<E extends EventTarget>(
87+
action:
88+
| Action<E, void>
89+
| ((element: E) => void | ActionReturn<void>)
90+
): Attachment<E>;
91+
```
92+
93+
</div>
94+
95+
96+
5197
## Attachment
5298

5399
An [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted

0 commit comments

Comments
 (0)