Por qué me he pasado a Svelte 5 y las runas

Llevo un mes migrando proyectos a Svelte 5, y voy a decir algo que no esperaba decir tan rápido: las runas me han convencido antes de terminar el primer proyecto migrado. Viniendo de años defendiendo la reactividad implícita de Svelte 3 y 4 como una de sus mejores bazas, no me lo esperaba de mí mismo.

Lo que fallaba de $: y no quería admitir

La reactividad con $: funcionaba bien mientras el componente era pequeño. En cuanto crecía, dejaba de ser evidente por qué un bloque se ejecutaba o no se ejecutaba — dependía de qué variables tocaba Svelte “adivinar” analizando el código estáticamente, y esa magia, cuando fallaba, fallaba en silencio. Más de una vez perdí media hora buscando por qué un valor no se actualizaba, para acabar descubriendo que Svelte no había detectado la dependencia porque estaba escondida dentro de una función.

Qué cambia con las runas

$state, $derived y $effect hacen explícito lo que antes era implícito. Una variable reactiva ahora se declara como tal, en vez de “ser reactiva porque vive en la raíz de un componente .svelte”. Un valor derivado se declara como derivado, en vez de intentar que el compilador adivine que ese $: calcula algo en vez de ejecutar un efecto secundario. Ya no hay que memorizar en qué casos concretos Svelte consigue rastrear la dependencia y en cuáles no — si algo depende de un estado, lo dices, y punto.

Migrar no fue tan traumático como temía

Esperaba una migración larga y dolorosa. En la práctica, empezar con $state en variables sueltas y dejar el resto del componente igual funcionó sin problemas — se puede migrar componente a componente, sin tener que parar el proyecto entero durante semanas. Lo único que me hizo revisar con más cuidado fueron los componentes con mucho estado compartido entre varios archivos, donde antes usaba stores de svelte/store y ahora prefiero clases con runas a nivel de módulo.

Lo que sigo echando de menos

Sinceramente, poco. Quizás la brevedad de escribir $: total = precio * cantidad en una sola línea, frente a let total = $derived(precio * cantidad), que es un puñado de caracteres más largo. Es una queja menor comparada con lo que se gana en poder leer un componente de arriba a abajo y saber exactamente qué es estado, qué es derivado y qué es un efecto secundario, sin tener que adivinar nada.