Runes en Svelte

¿Qué son las Runes en Svelte?

Las Runes en Svelte son el sistema de reactividad introducido en Svelte 5. Son objetos especiales que almacenan y administran valores reactivos de manera más eficiente que los anteriores stores. Permiten declarar variables reactivas usando la sintaxis $ (por ejemplo: let $count = 0), y cualquier cambio en su valor actualiza automáticamente todos los componentes que lo utilizan.

Características

  Características clave de los runes

  • Modularidad: Los runes encapsulan lógica reutilizable que se puede compartir entre componentes.
  • Reactividad: Los runes están diseñados para interactuar con la reactividad de Svelte, actualizando automáticamente los valores enlazados.
  • Reutilizables: Puedes crear tus propios runes y compartirlos entre proyectos.
  • Simplicidad: Permiten gestionar comportamientos complejos de manera más clara y organizada.

Ejemplos de Contador básico

Variable reactiva $count que se incrementa en 1 y actualiza automáticamente toda la UI donde se use.

js 
// 1. Contador básico
let $count = 0;
function increment() {
$count++;
}

Ejemplos de Toggle booleano

Estado reactivo $isVisible que alterna entre true/false para controlar la visibilidad de elementos en la UI.

js 
// 2. Toggle booleano
let $isVisible = false;
function toggle() {
$isVisible = !$isVisible;
}

Objeto reactivo

Objeto $user con propiedades reactivas que mantiene sincronizada la UI cuando se modifica cualquier propiedad.

js 
// 3. Objeto reactivo
let $user = {
name: 'Ana',
age: 25
};
function updateAge() {
$user.age++;
}

Lista reactiva

Array $todos que mantiene una lista de tareas y se actualiza de forma inmutable para preservar la reactividad.

js 
// 4. Lista reactiva
let $todos = [];
function addTodo(text) {
$todos = [...$todos, { text, completed: false }];
}

Valor derivado

Combina reactivamente $firstName y $lastName para crear $fullName que se actualiza cuando cambia cualquier nombre.

js 
// 5. Valor derivado (computed)
let $firstName = 'Juan';
let $lastName = 'Pérez';
let $fullName = $derived(`${$firstName} ${$lastName}`);

Estado con validación

Campo $email con validación reactiva que verifica automáticamente el formato cada vez que cambia el valor.

js 
// 6. Estado con validación
let $email = '';
let $isValid = $derived(() => {
return $email.includes('@') && $email.length > 5;
});