SvelteSyntaxe de template

use:

À partir de la version de Svelte 5.29, envisagez plutôt l’usage d’attachements, car ils sont plus flexibles et composables.

Les actions sont des fonctions appelées lorsqu’un élément est monté. Elles sont ajoutées grâce à la directive use:, et vont généralement utiliser un $effect afin qu’elles puissent réinitialiser n’importe quel état lorsque l’élément est démonté.

App

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// le node a été monté dans le DOM

		$effect(() => {
			// la mise en place se fait ici

			return () => {
				// le nettoyage ici
			};
		});
	}
</script>

<div use:monaction>...</div>

<script lang="ts">
	import type { Action } from 'svelte/action';


	const myaction: Action = (node) => {
		// le node a été monté dans le DOM

		$effect(() => {
			// la mise en place se fait ici

			return () => {
				// le nettoyage ici
			};
		});
	};
</script>

<div use:monaction>...</div>

Une action peut être exécutée avec un argument :

App

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node, data) {
		// ...
	}
</script>

<div use:monaction={data}>...</div>

<script lang="ts">
	import type { Action } from 'svelte/action';


	const myaction: Action = (node, data) => {
		// ...
	};
</script>

<div use:monaction={data}>...</div>

L’action est exécutée une seule fois (mais pas pendant le rendu côté serveur) — elle ne sera pas rejouée si l’argument change.

Legacy mode
Avant l’introduction de la rune $effect, les actions pouvaient renvoyer un objet avec les méthodes update et destroy, où update était exécutée avec la valeur de l’argument la plus récente. L’utilisation d’effets est à prioriser.

Typage

L’interface Action attend trois arguments de types, tous optionnels — un type de noeud (qui peut être Element si l’action s’applique à tout type de noeud), un paramètre, et n’importe quel gestionnaire d’évènement personnalisé créé par l’action :

App

<script>
	/**
	 * @type {import('svelte/action').Action<
	 * 	HTMLDivElement,
	 * 	undefined,
	 * 	{
	 * 		onswiperight: (e: CustomEvent) => void;
	 * 		onswipeleft: (e: CustomEvent) => void;
	 * 		// ...
	 * 	}
	 * >}
	 */
	function gestures(node) {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	}
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>

<script lang="ts">
	import type { Action } from 'svelte/action';


	const gestures: Action<
		HTMLDivElement,
		undefined,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void;
			// ...
		}
	> = (node) => {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>

Modifier cette page sur Github llms.txt

précédent suivant

bind: transition: