Cours Svelte et SvelteKit · Module 10: Actions
Mise à jour des paramètres
Dans cette leçon3
update() - Réagir aux changements de paramètres
Une action n'est appelée qu'une seule fois. Quand le paramètre change, Svelte ne la rappelle pas : il appelle la méthode update() de l'objet renvoyé avec la nouvelle valeur :
export function tooltip(node, text) {
let tooltipEl;
let currentText = text;
// ... logique d'affichage/masquage
return {
update(newText) {
currentText = newText;
if (tooltipEl) {
tooltipEl.textContent = newText;
}
},
destroy() {
// nettoyage
}
};
}<script>
import { tooltip } from './actions.js';
let message = $state('Texte initial');
</script>
<input bind:value={message} />
<button use:tooltip={message}>
Survole-moi
</button>Objet en tant que paramètre
export function draggable(node, options = {}) {
let { axis = 'both', bounds = null } = options;
// ... logique
return {
update(newOptions) {
axis = newOptions.axis ?? 'both';
bounds = newOptions.bounds ?? null;
},
destroy() {
// nettoyage
}
};
}<div use:draggable={{ axis: 'x', bounds: 'parent' }}>
Fais-moi glisser horizontalement
</div>Nouveauté : les attachments ({@attach})
Depuis Svelte 5.29, tu peux utiliser des attachments à la place des actions. Un attachment est une fonction qui reçoit l'élément et peut renvoyer une fonction de nettoyage. Contrairement à une action, il est entièrement réactif : quand un état utilisé dans son appel change, Svelte le nettoie et le relance, donc tu n'as pas besoin de update().
<script>
let message = $state('Texte initial');
function tooltip(text) {
return (node) => {
node.title = text;
return () => node.removeAttribute('title');
};
}
</script>
<input bind:value={message} />
<button {@attach tooltip(message)}>Survole-moi</button>Les actions (use:) restent entièrement prises en charge et tu les retrouveras dans de nombreuses bibliothèques : c'est pourquoi ce lieu les met en pratique.
Code de cette leçon : App.svelte
<script>
// Actions avec événements - clic extérieur, appui long
import { clickOutside } from './actions.js';
import { longpress } from './actions.js';
let modalOpen = $state(false);
let message = $state('');
function handleClickOutside() {
modalOpen = false;
}
function handleLongpress() {
message = 'Appui long détecté !';
setTimeout(() => message = '', 2000);
}
</script>
<main class="actions-demo">
<h1>Actions avec événements</h1>
<section>
<h2>use:clickOutside</h2>
<button onclick={() => modalOpen = true}>Ouvrir la modale</button>
{#if modalOpen}
<div class="overlay">
<div class="modal" use:clickOutside onoutclick={handleClickOutside}>
<h3>Modale</h3>
<p>Clique en dehors de moi pour fermer</p>
</div>
</div>
{/if}
</section>
<section>
<h2>use:longpress</h2>
<button
use:longpress={500}
onlongpress={handleLongpress}
>
Maintiens 500ms
</button>
{#if message}
<p class="message">{message}</p>
{/if}
</section>
</main>
<style>
.actions-demo {
font-family: 'Georgia', serif;
max-width: 500px;
margin: 0 auto;
padding: 2rem;
background: #1a1a2e;
color: #e8e8f7;
min-height: 100vh;
}
h1 {
color: #7cb3f0;
text-align: center;
}
section {
background: rgba(124, 179, 240, 0.1);
border: 1px solid #7cb3f0;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
h2 {
color: #7cb3f0;
font-size: 1rem;
margin-top: 0;
}
button {
padding: 0.75rem 1.5rem;
background: #3a5f8a;
color: #e8e8f7;
border: 1px solid #7cb3f0;
border-radius: 4px;
cursor: pointer;
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal {
background: #16213e;
border: 2px solid #7cb3f0;
border-radius: 8px;
padding: 2rem;
min-width: 300px;
text-align: center;
}
.modal h3 {
color: #7cb3f0;
margin-top: 0;
}
.message {
margin-top: 0.5rem;
padding: 0.5rem;
background: rgba(255, 215, 0, 0.2);
border-radius: 4px;
color: #ffd700;
}
</style>Entrées de la documentation utilisées dans cette leçon
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelle méthode, dans l'objet retourné par une action, réagit aux changements de paramètres ?