SvelteRéférence

svelte/attachments

import { createAttachmentKey(alias) function createAttachmentKey(): symbol
import createAttachmentKeyCreates an object key that will be recognised as an attachment when the object is spread onto an element,
as a programmatic alternative to using {@attach ...}. This can be useful for library authors, though
is generally not needed when building an app.
<script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
</script>

<button {...props}>click me</button>5.29
reference, fromAction(alias) function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T, Record<never, any>> | ((element: E, arg: T) => void | ActionReturn<T, Record<never, any>>), fn: () => T): Attachment<E> (+1 overload)
import fromActionConverts an action into an attachment 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.
<!-- with an action -->
<div use:foo={bar}>...</div>

<!-- with an attachment -->
<div {@attach fromAction(foo, () => bar)}>...</div>reference } from 'svelte/attachments';

createAttachmentKey

Disponible de puis la version 5.29

Crée une clé d’objet qui sera reconnue comme attachement lorsque l’objet sera étalé sur un élément. Ceci est une alternative programmatique à l’usage de {@attach ...}, et peut être utile aux auteurs et autrices de librairies. En revanche, createAttachmentKey ne devrait généralement pas être nécessaire si vous développez une application.

<script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('cliqué'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attaché !';
		}
	};
</script>

<button {...props}>cliquez-moi</button>

function createAttachmentKey(): symbol;

fromAction

Convertit une action en un attachement conservant le même comportement. C’est utile si vous souhaitez commencer à utiliser les attachements sur des composants mais vos actions sont fournies par une librairie.

Notez que le deuxième argument, si fourni, doit être une fonction qui renvoie l’argument à la fonction action, et non l’argument lui-même.

<!-- with an action -->
<div use:foo={bar}>...</div>

<!-- with an attachment -->
<div {@attach fromAction(foo, () => bar)}>...</div>

function fromAction<
	E extends EventTarget,
	T extends unknown
>(
	action:
		| Action<E, T>
		| ((element: E, arg: T) => void | ActionReturn<T>),
	fn: () => T
): Attachment<E>;

function fromAction<E extends EventTarget>(
	action:
		| Action<E, void>
		| ((element: E) => void | ActionReturn<void>)
): Attachment<E>;

Attachment

Un attachement est une fonction qui est exécutée lorsqu’un élément est monté dans le DOM, et renvoie de manière optionnellement une fonction qui sera appelée lorsque l’élément sera supprimé du DOM.

Un attachement peut être attaché à un élément avec {@attach ...}, ou en étalant un objet contenant une propriété créée avec createAttachmentKey.

interface Attachment<T extends EventTarget = Element> {/*…*/}

(element: T): void | (() => void);

Modifier cette page sur Github llms.txt

précédent suivant

svelte/animate svelte/compiler