RIFERIMENTO RAPIDO SVELTE
Componenti, reattività, store, transizioni, SvelteKit
Componenti
Componente base
Hello {name}!
Struttura del componente
| <script> | Logica del componente (JS/TS) |
| Markup | Template HTML con {espressioni} |
| <style> | CSS con scope (auto-applicato al componente) |
| <script context="module"> | Eseguito una volta per modulo, non per istanza |
Reattività
Assegnazioni reattive
Dichiarazioni reattive
$: contrassegna le dichiarazioni e le istruzioni reattive
Regole di reattività
| L'assegnazione attiva l'aggiornamento | count += 1 scatena un aggiornamento; anche obj.x = 1 |
| Mutazione di array | Usare arr = [...arr, item] (riassegnare per attivare) |
| Dichiarazione $: | Si ricalcola automaticamente quando le variabili dipendenti cambiano |
| Istruzione $: | Esegue effetti collaterali in modo reattivo |
Props
Dichiarazione e passaggio di props
Props con spread
Eventi
Eventi DOM
value = e.target.value} />
Modificatori di eventi
| preventDefault | Chiama e.preventDefault() |
| stopPropagation | Interrompe il bubbling dell'evento |
| once | Il gestore si attiva solo una volta |
| self | Solo se event.target è l'elemento |
| capture | Usa la fase di cattura |
Eventi dei componenti
Binding
Binding bidirezionale
Binding di elementi e componenti
Tipi di binding
| bind:value | Valore di input/select/textarea |
| bind:checked | Stato della casella di controllo |
| bind:group | Gruppo radio/checkbox |
| bind:this | Riferimento all'elemento DOM |
| bind:clientWidth/Height | Dimensioni dell'elemento (sola lettura) |
Store
Store scrivibile
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Component — auto-subscribe with $
Metodi dello store
count.set(10); // set value
count.update(n => n + 1); // update from current
const unsub = count.subscribe(v => console.log(v));
Tipi di store
| writable(val) | Store leggibile e scrivibile |
| readable(val, fn) | Sola lettura, impostato dalla funzione start |
| derived(stores, fn) | Calcolato da altri store |
| $store | Sintassi di sottoscrizione automatica nei componenti |
Transizioni
Transizioni integrate
{
#if visible}
Fades in/out
Fly in, fade out
{/if}
Opzioni di transizione
| fade | Opacità da 0 a 1 |
| fly | Anima offset x/y + opacità |
| slide | Scivola dentro/fuori (altezza) |
| scale | Scala e dissolvenza |
| draw | Animazione del tratto SVG |
| duration | Durata della transizione in ms |
| delay | Ritardo prima dell'avvio |
Slot
Slot predefiniti e con nome
Default header
Default content
Title
Body content goes here
Props degli slot
{
#each items as item}
{/each}
{index}: {item.name}
Contesto
Impostazione e lettura del contesto
Contesto vs Store
| Contesto | Limitato all'albero dei componenti, non reattivo per default |
| Store | Globale, reattivo, importabile ovunque |
| Contesto + Store | Passa uno store via contesto per reattività con scope |
SvelteKit Nozioni di base
Routing basato su file
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Funzioni load
// +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() };
}
File chiave
| +page.svelte | Componente pagina |
| +page.js / +page.ts | Funzione load client/universale |
| +page.server.js | Load solo server / azioni form |
| +layout.svelte | Layout condiviso |
| +error.svelte | Pagina di errore |
| +server.js | Endpoint API (GET, POST, ...) |