diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md index f342945a8a..47939d6375 100644 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/09-@attach.md @@ -161,3 +161,7 @@ function foo(+++getBar+++) { ## Creating attachments programmatically To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey). + +## Converting actions to attachments + +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. diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md index 77d1df4cdd..508fde358f 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md @@ -34,6 +34,22 @@ function add() { } ``` +### await_reactivity_loss + +``` +Detected reactivity loss +``` + +TODO + +### await_waterfall + +``` +An async value (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app. +``` + +TODO + ### binding_property_non_reactive ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index db848a0299..20f57770d1 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -480,6 +480,12 @@ Expected token %token% Expected whitespace ``` +### experimental_async + +``` +Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true` +``` + ### export_undefined ``` @@ -534,6 +540,12 @@ The arguments keyword cannot be used within the template or at the top level of %message% ``` +### legacy_await_invalid + +``` +Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode +``` + ### legacy_export_invalid ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md index 7069f90206..b579d38602 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md @@ -632,6 +632,25 @@ In some situations a selector may target an element that is not 'visible' to the ``` +### element_implicitly_closed + +``` +This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises. +``` + +In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `

` inside another `

`: + +```html + +

hello

+ + +

+

hello

+``` + +Similarly, a parent element's closing tag will implicitly close all child elements, even if the ` +### await_outside_boundary + +``` +Cannot await outside a `` with a `pending` snippet +``` + +TODO + ### invalid_default_snippet ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md index ae1a439043..00d31ceee6 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md @@ -15,6 +15,7 @@ import { createEventDispatcher, createRawSnippet, flushSync, + getAbortSignal, getAllContexts, getContext, hasContext, @@ -23,6 +24,7 @@ import { onDestroy, onMount, setContext, + settled, tick, unmount, untrack @@ -291,6 +293,40 @@ function flushSync(fn?: (() => T) | undefined): T; +## getAbortSignal + +Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](/docs/svelte/$derived) or [effect](/docs/svelte/$effect) re-runs or is destroyed. + +Must be called while a derived or effect is running. + +```svelte + +``` + +
+ +```dts +function getAbortSignal(): AbortSignal; +``` + +
+ + + ## getAllContexts Retrieves the whole context map that belongs to the closest parent component. @@ -461,6 +497,21 @@ function setContext(key: any, context: T): T; +## settled + +Returns a promise that resolves once any state changes, and asynchronous work resulting from them, +have resolved and the DOM has been updated + +
+ +```dts +function settled(): Promise; +``` + +
+ + + ## tick Returns a promise that resolves once any pending state changes have been applied. diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md index 68fae2cb1b..497ae3a329 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-attachments.md @@ -7,7 +7,7 @@ title: svelte/attachments ```js // @noErrors -import { createAttachmentKey } from 'svelte/attachments'; +import { createAttachmentKey, fromAction } from 'svelte/attachments'; ``` ## createAttachmentKey @@ -48,6 +48,52 @@ function createAttachmentKey(): symbol; +## fromAction + +Converts an [action](/docs/svelte/use) into an [attachment](/docs/svelte/@attach) keeping the same behavior. +It's useful if you want to start using attachments on components but you have actions provided by a library. + +Note that the second argument, if provided, must be a function that _returns_ the argument to the +action function, not the argument itself. + +```svelte + +
...
+ + +
bar)}>...
+``` + +
+ +```dts +function fromAction< + E extends EventTarget, + T extends unknown +>( + action: + | Action + | ((element: E, arg: T) => void | ActionReturn), + fn: () => T +): Attachment; +``` + +
+ +
+ +```dts +function fromAction( + action: + | Action + | ((element: E) => void | ActionReturn) +): Attachment; +``` + +
+ + + ## Attachment An [attachment](/docs/svelte/@attach) is a function that runs when an element is mounted diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md index 40105c0d16..41dc05f1ef 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md @@ -1224,6 +1224,32 @@ warningFilter?: (warning: Warning) => boolean; A function that gets a `Warning` as an argument and returns a boolean. Use this to filter out warnings. Return `true` to keep the warning, `false` to discard it. + + + +
+ +```dts +experimental?: {/*…*/} +``` + +
+ +Experimental options + +
+ +```dts +async?: boolean; +``` + +
+ +Allow `await` keyword in deriveds, template expressions, and the top level of components + +
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md index 143137c77e..186d322adb 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -485,6 +485,12 @@ Expected token %token% Expected whitespace ``` +### experimental_async + +``` +Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true` +``` + ### export_undefined ``` @@ -539,6 +545,12 @@ The arguments keyword cannot be used within the template or at the top level of %message% ``` +### legacy_await_invalid + +``` +Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode +``` + ### legacy_export_invalid ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md index 6314ffd30d..0e18ba7d43 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md @@ -653,6 +653,25 @@ In some situations a selector may target an element that is not 'visible' to the ``` +### element_implicitly_closed + +``` +This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises. +``` + +In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `

` inside another `

`: + +```html + +

hello

+ + +

+

hello

+``` + +Similarly, a parent element's closing tag will implicitly close all child elements, even if the ` +### await_outside_boundary + +``` +Cannot await outside a `` with a `pending` snippet +``` + +TODO + ### invalid_default_snippet ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md index 8554eb52d5..b1dac918df 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md @@ -41,6 +41,22 @@ function add() { } ``` +### await_reactivity_loss + +``` +Detected reactivity loss +``` + +TODO + +### await_waterfall + +``` +An async value (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app. +``` + +TODO + ### binding_property_non_reactive ```