RÉFÉRENCE RAPIDE SVELTE
Composants, réactivité, stores, transitions, SvelteKit
Composants
Composant de base
Hello {name}!
Structure d'un composant
| <script> | Logique du composant (JS/TS) |
| Markup | Template HTML avec {expressions} |
| <style> | CSS limité (auto-délimité au composant) |
| <script context="module"> | Exécuté une fois par module, pas par instance |
Réactivité
Affectations réactives
Déclarations réactives
$: marque les déclarations et instructions réactives
Règles de réactivité
| Affectation déclenche | count += 1 déclenche la mise à jour ; obj.x = 1 aussi |
| Mutation de tableau | Utiliser arr = [...arr, item] (réaffecter pour déclencher) |
| $: déclaration | Se recalcule automatiquement quand les variables référencées changent |
| $: instruction | Exécute des effets de bord de façon réactive |
Props
Déclarer et passer des props
Diffusion de props
Événements
Événements DOM
value = e.target.value} />
Modificateurs d'événements
| preventDefault | Appelle e.preventDefault() |
| stopPropagation | Arrête la propagation de l'événement |
| once | Le gestionnaire ne s'exécute qu'une seule fois |
| self | Seulement si event.target est l'élément |
| capture | Utiliser la phase de capture |
Événements de composants
Liaisons
Liaison bidirectionnelle
Liaisons d'élément et de composant
Types de liaisons
| bind:value | Valeur d'input/select/textarea |
| bind:checked | État de la case à cocher |
| bind:group | Groupe de boutons radio/cases à cocher |
| bind:this | Référence à l'élément DOM |
| bind:clientWidth/Height | Dimensions de l'élément (lecture seule) |
Stores
Store inscriptible
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Component — auto-subscribe with $
Méthodes de store
count.set(10); // set value
count.update(n => n + 1); // update from current
const unsub = count.subscribe(v => console.log(v));
Types de stores
| writable(val) | Store en lecture-écriture |
| readable(val, fn) | Lecture seule, défini par la fonction de démarrage |
| derived(stores, fn) | Calculé à partir d'autres stores |
| $store | Syntaxe d'abonnement automatique dans les composants |
Transitions
Transitions intégrées
{
#if visible}
Fades in/out
Fly in, fade out
{/if}
Options de transition
| fade | Opacité de 0 à 1 |
| fly | Animer le décalage x/y + opacité |
| slide | Glisser en entrée/sortie (hauteur) |
| scale | Agrandir et fondre |
| draw | Animation de tracé SVG |
| duration | Durée de la transition en ms |
| delay | Délai avant le démarrage |
Slots
Slots par défaut et nommés
Default header
Default content
Title
Body content goes here
Props de slot
{
#each items as item}
{/each}
{index}: {item.name}
Contexte
Définir et obtenir le contexte
Contexte vs Stores
| Contexte | Limité à l'arbre de composants, pas réactif par défaut |
| Stores | Global, réactif, importable partout |
| Contexte + Store | Passer un store via le contexte pour une réactivité délimitée |
Bases de SvelteKit
Routage basé sur les fichiers
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Fonctions de chargement
// +page.js (runs on client & server)
export async function load({ params, fetch }) {
const res = await fetch(`/api/posts/${params.slug}`);
return { post: await res.json() };
}
Fichiers clés
| +page.svelte | Composant de page |
| +page.js / +page.ts | Fonction de chargement client/universelle |
| +page.server.js | Chargement côté serveur uniquement / actions de formulaire |
| +layout.svelte | Mise en page partagée |
| +error.svelte | Page d'erreur |
| +server.js | Point d'API (GET, POST, ...) |