Skip to content

Commit 8755b8f

Browse files
sync svelte docs
1 parent 0485be4 commit 8755b8f

File tree

6 files changed

+115
-1
lines changed

6 files changed

+115
-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/.generated/client-warnings.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,19 @@ Consider the following code:
200200
201201
To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
202202
203+
### select_multiple_invalid_value
204+
205+
```
206+
The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
207+
```
208+
209+
When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
210+
211+
To silence the warning, ensure that `value`:
212+
213+
- is an array for an explicit selection
214+
- is `null` or `undefined` to keep the selection as is
215+
203216
### state_proxy_equality_mismatch
204217
205218
```

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -632,6 +632,25 @@ In some situations a selector may target an element that is not 'visible' to the
632632
</style>
633633
```
634634

635+
### element_implicitly_closed
636+
637+
```
638+
This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
639+
```
640+
641+
In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
642+
643+
```html
644+
<!-- this HTML... -->
645+
<p><p>hello</p>
646+
647+
<!-- results in this DOM structure -->
648+
<p></p>
649+
<p>hello</p>
650+
```
651+
652+
Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
653+
635654
### element_invalid_self_closing_tag
636655

637656
```

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

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,25 @@ In some situations a selector may target an element that is not 'visible' to the
653653
</style>
654654
```
655655

656+
### element_implicitly_closed
657+
658+
```
659+
This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
660+
```
661+
662+
In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
663+
664+
```html
665+
<!-- this HTML... -->
666+
<p><p>hello</p>
667+
668+
<!-- results in this DOM structure -->
669+
<p></p>
670+
<p>hello</p>
671+
```
672+
673+
Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
674+
656675
### element_invalid_self_closing_tag
657676

658677
```

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,19 @@ Consider the following code:
207207
208208
To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
209209
210+
### select_multiple_invalid_value
211+
212+
```
213+
The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
214+
```
215+
216+
When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
217+
218+
To silence the warning, ensure that `value`:
219+
220+
- is an array for an explicit selection
221+
- is `null` or `undefined` to keep the selection as is
222+
210223
### state_proxy_equality_mismatch
211224
212225
```

0 commit comments

Comments
 (0)