REFERENCIA RÁPIDA DE SVELTE
Componentes, reactividad, stores, transiciones, SvelteKit
Componentes
Componente Básico
Hello {name}!
Estructura del Componente
| <script> | Lógica del componente (JS/TS) |
| Markup | Plantilla HTML con {expresiones} |
| <style> | CSS con ámbito (auto-delimitado al componente) |
| <script context="module"> | Se ejecuta una vez por módulo, no por instancia |
Reactividad
Asignaciones Reactivas
Declaraciones Reactivas
$: marca declaraciones e instrucciones reactivas
Reglas de Reactividad
| La asignación dispara | count += 1 dispara actualización; obj.x = 1 también |
| Mutación de arrays | Usar arr = [...arr, item] (reasignar para disparar) |
| Declaración $: | Se recalcula automáticamente cuando cambian las variables referenciadas |
| Instrucción $: | Ejecuta efectos secundarios de forma reactiva |
Props
Declarar y Pasar Props
Props Expandidas
Eventos
Eventos del DOM
value = e.target.value} />
Modificadores de Eventos
| preventDefault | Llama a e.preventDefault() |
| stopPropagation | Detiene la propagación del evento |
| once | El manejador se dispara solo una vez |
| self | Solo si event.target es el elemento |
| capture | Usar fase de captura |
Eventos de Componente
Bindings
Enlace Bidireccional
Bindings de Elementos y Componentes
Tipos de Binding
| bind:value | Valor de input/select/textarea |
| bind:checked | Estado del checkbox |
| bind:group | Grupo de radio/checkbox |
| bind:this | Referencia al elemento DOM |
| bind:clientWidth/Height | Dimensiones del elemento (solo lectura) |
Stores
Store Escribible
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Componente — suscripción automática con $
Métodos del Store
count.set(10); // establecer valor
count.update(n => n + 1); // actualizar desde el valor actual
const unsub = count.subscribe(v => console.log(v));
Tipos de Store
| writable(val) | Store de lectura-escritura |
| readable(val, fn) | Solo lectura, establecido por función de inicio |
| derived(stores, fn) | Calculado a partir de otros stores |
| $store | Sintaxis de suscripción automática en componentes |
Transiciones
Transiciones Incorporadas
{
#if visible}
Aparece/desaparece
Vuela al entrar, desaparece al salir
{/if}
Opciones de Transición
| fade | Opacidad de 0 a 1 |
| fly | Anima desplazamiento x/y + opacidad |
| slide | Desliza entrada/salida (altura) |
| scale | Escalar y desvanecer |
| draw | Animación de trazo de ruta SVG |
| duration | Tiempo de transición en ms |
| delay | Retraso antes de iniciar |
Slots
Slots por Defecto y con Nombre
Cabecera por defecto
Contenido por defecto
Título
El contenido del cuerpo va aquí
Props de Slot
{
#each items as item}
{/each}
{index}: {item.name}
Contexto
Establecer y Obtener Contexto
Contexto vs Stores
| Contexto | Con ámbito de árbol de componentes, no reactivo por defecto |
| Stores | Global, reactivo, importable desde cualquier lugar |
| Contexto + Store | Pasar un store vía contexto para reactividad con ámbito |
Conceptos Básicos de SvelteKit
Enrutamiento Basado en Archivos
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Funciones de Carga
// +page.js (se ejecuta en cliente y servidor)
export async function load({ params, fetch }) {
const res = await fetch(`/api/posts/${params.slug}`);
return { post: await res.json() };
}
Archivos Clave
| +page.svelte | Componente de página |
| +page.js / +page.ts | Función de carga universal/cliente |
| +page.server.js | Carga solo en servidor / acciones de formulario |
| +layout.svelte | Envoltorio de diseño compartido |
| +error.svelte | Página de error |
| +server.js | Endpoint de API (GET, POST, ...) |