Descripción general de Svelte 5
Svelte 5 introdujo un nuevo sistema de reactividad llamado “Runes”. Logra una reactividad más explícita y predecible, y también mejora la compatibilidad con TypeScript.
Qué son los Runes
Los Runes son funciones especiales que comienzan con $. El compilador las reconoce y las transforma en código reactivo.
$state - Estado reactivo
Estado de objeto
{user.name} is {user.age} years old
$derived - Valores derivados
Define valores que se calculan a partir de otros estados.
Area: {area}
Perimeter: {perimeter}
Derivaciones complejas
$effect - Efectos secundarios
Ejecuta efectos secundarios en respuesta a cambios de estado.
Operaciones DOM
$props - Propiedades de componentes
{name} is {age} years old
console.log(newAge)} />
$bindable - Enlace bidireccional
Value: {text}
Cambios en el manejo de eventos
Soporte de TypeScript
Guía de migración
# Herramienta de migración automática
npx sv migrate svelte-5
Migración gradual
Svelte 5 mantiene compatibilidad con la sintaxis tradicional, por lo que puedes migrar gradualmente.
Rendimiento
Benchmark (actualización de lista de 1000 elementos):
- Svelte 4: 12ms
- Svelte 5: 5ms (58% más rápido)
Tamaño del bundle:
- Runtime de Svelte 4: 18KB
- Runtime de Svelte 5: 22KB (ligero aumento debido a funciones adicionales)
Resumen
Los Runes de Svelte 5 proporcionan una reactividad más explícita y predecible. Con $state, $derived y $effect, la gestión del estado se vuelve intuitiva y la integración con TypeScript también mejora.
← Volver a la lista