Lanzamiento oficial de Svelte 5 - Nuevo sistema de reactividad con Runes

Descripción general de Svelte 5

Svelte 5 es un lanzamiento mayor que representa una evolución fundamental del framework. Con el nuevo sistema de reactividad llamado “Runes”, ahora es posible escribir código más explícito y predecible.

flowchart TB
    subgraph Svelte5["Svelte 5 Cambios principales"]
        subgraph Runes["Runes (Nueva reactividad)"]
            R1["$state() - Declaración de estado reactivo"]
            R2["$derived() - Cálculo de valores derivados"]
            R3["$effect() - Ejecución de efectos secundarios"]
            R4["$props() - Propiedades de componentes"]
            R5["$bindable() - Props con enlace bidireccional"]
        end

        subgraph Perf["Mejora de rendimiento"]
            P1["Hasta 2 veces más rápido"]
            P2["Reducción del tamaño del bundle"]
            P3["Mejora en el uso de memoria"]
            P4["Detección de diferencias más eficiente"]
        end

        subgraph DX["Experiencia del desarrollador"]
            D1["Soporte mejorado de TypeScript"]
            D2["Reactividad más explícita"]
            D3["Facilidad de depuración"]
            D4["Ruta de migración gradual"]
        end
    end

Fundamentos de Runes

$state - Estado reactivo

  Count: {count}


Name: {user.name}


  {#each items as item}
    
{item}
  {/each}

$derived - Estado derivado

Count: {count}
Doubled: {doubled}
Stats: Sum={stats.sum}, Avg={stats.avg}

$effect - Efectos secundarios

Propiedades de componentes

$props

  {@render children?.()}



 alert('Clicked!')}>
  Delete

$bindable - Enlace bidireccional

 value = e.currentTarget.value}
/>





Hello, {name}!

Snippets

{#snippet row(item)}
  
    {item.name}
    ${item.price}
  
{/snippet}

{#snippet header()}
  
    Name
    Price
  
{/snippet}



    {@render header()}
  
    {#each items as item (item.id)}
      {@render row(item)}
    {/each}
  
  
  

Comparación Svelte 4 vs Svelte 5

Manejo de eventos

Click


Click


 count++}>Count: {count}


 alert('Once!')}>Click once
...


 console.log(e.detail)} />

Componentes de clase

Count: {count}





Reset

Migración

Migración automática

# Usar svelte-migrate
npx sv migrate svelte-5

# O archivos específicos
npx sv migrate svelte-5 src/components/Button.svelte

Migración gradual

 count++}>
  {count}

// svelte.config.js
export default {
  compilerOptions: {
    // Desactivar Runes para operar en modo legacy
    runes: false
  }
};

Integración con SvelteKit

// +page.svelte
<script>
  let { data } = $props();

  let posts = $state(data.posts);
  let search = $state('');

  let filtered = $derived(
    posts.filter(p => p.title.toLowerCase().includes(search.toLowerCase()))
  );
</script>

<input bind:value={search} placeholder="Search..." />

{#each filtered as post (post.id)}
  <article>
    <h2>{post.title}</h2>
    <p>{post.excerpt}</p>
  </article>
{/each}

Mejora de rendimiento

Comparación de rendimiento de Svelte 5 (js-framework-benchmark)

Resumen

Enlaces de referencia

• Documentación oficial de Svelte 5
• Blog de lanzamiento de Svelte 5
• Guía de Runes
• Guía de migración