svelte/action

Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode destroy qui sera appelée lors de la destruction de l'élément.

<script>
	/** @type {import('svelte/action').Action}  */
	function foo(node) {
		// le noeud a été ajouté au DOM

		return {
			destroy() {
				// le noeud a été supprimé du DOM
			}
		};
	}
</script>

<div use:foo />

Une action peut avoir un argument. Si la valeur renvoyée possède une méthode update, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au markup.

Ne vous inquiétez pas du fait que l'on redéclare la fonction foo pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.

<script>
	/** @type {string} */
	export let bar;

	/** @type {import('svelte/action').Action<HTMLElement, string>}  */
	function foo(node, bar) {
		// le noeud a été ajouté au DOM

		return {
			update(bar) {
				// la valeur de `bar` a changé
			},

			destroy() {
				// le noeud a été supprimé du DOM
			}
		};
	}
</script>

<div use:foo={bar} />

Attributespermalink

Les actions émettent parfois des évènements ou appliquent des attributs personnalisés à l'élément sur lequel elles sont utilisées. Pour gérer cela, les actions typées avec Action ou ActionReturn peuvent avoir un dernier paramètres, Attributes :

Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with Action or ActionReturn type can have a last parameter, Attributes:

<script>
	/**
	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
	 */
	function foo(node, { prop }) {
		// le noeud a été ajouté au DOM

		//...LOGIQUE
		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));

		return {
			destroy() {
				// le noeud a été supprimé du DOM
			}
		};
	}
</script>

<div use:foo={{ prop: 'someValue' }} on:emit={handleEmit} />

Typespermalink

Actionpermalink

Les actions sont des fonctions exécutées lorsqu'un élément est créé. Vous pouvez utiliser cette interface pour les typer. L'exemple suivant définit une action qui ne fonctionne que pour les éléments <div> et accepte un paramètre optionnel qui a une valeur par défaut :

ts
export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  // ...
}

Action<HTMLDivElement> et Action<HTMLDivElement, undefined> indiquent tous les deux que l'action n'accepte pas de paramètre.

Une action peut renvoyer un objet avec les méthodes update et destroy, et vous pouvez typer quels attributs et évènements elle apporte. Voir l'interface ActionReturn pour plus de détails.

Docs: https://svelte.dev/docs/svelte-action

ts
interface Action<
	Element = HTMLElement,
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

ts
<Node extends Element>(
	...args: undefined extends Parameter
		? [node: Node, parameter?: Parameter]
		: [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

ActionReturnpermalink

Les actions peuvent renvoyer un objet contenant les deux propriétés définies dans cette interface. Les deux sont optionnelles.

• update: Une action peut avoir un paramètre. Cette méthode est appelée à chaque fois que ce paramètre change, juste après que Svelte ait appliqué les mises à jour au markup. ActionReturn et ActionReturn<undefined> signifient toutes les deux que l'action n'accepte pas de paramètre.
• destroy: Méthode qui est appelée après la destruction de l'élément

De plus, vous pouvez spécifier quels attributs et évènements additionnels l'action apporte à l'élément sur lequel elle est appliquée. Ceci n'a d'impact que sur les types Typescript et n'a pas d'effet au moment de l'exécution.

Exemple d'usage:

ts
interface Attributes {
	newprop?: string;
	'on:event': (e: CustomEvent<boolean>) => void;
}

export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
	// ...
	return {
		update: (updatedParameter) => {...},
		destroy: () => {...}
	};
}

Docs: https://svelte.dev/docs/svelte-action

ts
interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

ts
update?: (parameter: Parameter) => void;

ts
destroy?: () => void;