Lançamento Oficial do Svelte 5 - Novo Sistema de Reatividade com Runes

Visão Geral do Svelte 5

O Svelte 5 é um lançamento major que representa uma evolução fundamental do framework. Com o novo sistema de reatividade chamado “Runes”, agora é possível escrever código mais explícito e previsível.

flowchart TB
    subgraph Svelte5["Svelte 5 Principais Mudanças"]
        subgraph Runes["Runes (Nova Reatividade)"]
            R1["$state() - Declaração de estado reativo"]
            R2["$derived() - Cálculo de valores derivados"]
            R3["$effect() - Execução de efeitos colaterais"]
            R4["$props() - Propriedades do componente"]
            R5["$bindable() - Props com binding bidirecional"]
        end

        subgraph Perf["Melhorias de Desempenho"]
            P1["Até 2x mais rápido"]
            P2["Redução do tamanho do bundle"]
            P3["Melhoria no uso de memória"]
            P4["Detecção de diferenças mais eficiente"]
        end

        subgraph DX["Experiência do Desenvolvedor"]
            D1["Suporte aprimorado a TypeScript"]
            D2["Reatividade mais explícita"]
            D3["Facilidade de debug"]
            D4["Caminho de migração gradual"]
        end
    end

Fundamentos dos Runes

$state - Estado Reativo

  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 - Efeitos Colaterais

Propriedades de Componentes

$props

  {@render children?.()}



 alert('Clicked!')}>
  Delete

$bindable - Binding Bidirecional

 value = e.currentTarget.value}
/>





Hello, {name}!

Snippets

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

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



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

Comparação Svelte 4 vs Svelte 5

Manipulação de Eventos

Click


Click


 count++}>Count: {count}


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


 console.log(e.detail)} />

Componentes de Classe

Count: {count}





Reset

Migração

Migração Automática

# Usando svelte-migrate
npx sv migrate svelte-5

# Ou arquivo específico
npx sv migrate svelte-5 src/components/Button.svelte

Migração Gradual

 count++}>
  {count}

// svelte.config.js
export default {
  compilerOptions: {
    // Desabilitar Runes para operar em modo legado
    runes: false
  }
};

Integração com 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}

Melhorias de Desempenho

Comparação de Desempenho Svelte 5 (js-framework-benchmark)

Resumo

Links de Referência

• Documentação Oficial do Svelte 5
• Blog de Lançamento do Svelte 5
• Guia de Runes
• Guia de Migração