Svelte 5 é oficialmente lançado!

A versão 5 do framework Svelte acabou de ser liberada no dia 19/10/2024, e trás diversas novidades e melhorias.

As principais novidades são:

• Ainda mais melhorias de performance
• Um sistema de reatividade mais granular com runas
• Sintaxe do template mais expressiva com snippets e event attributes
• Suporte ao TypeScript nativamente
• Compatibilidade com a sintaxe anterior, para você continuar usando-a, se preferir

Runas

O novo sistema de reatividade é uma das maiores mudanças dessa versão. Runes, como é chamado, é um sistema reativo mais granular, e que funciona além dos arquivos .svelte, podendo ser usado universalmente no seu projeto.

No Svelte 4 variáveis criadas no escopo principal do componente era reativa por padrão:

let count = 0;

Já no Svelte 5, para criar uma variável reativa no template, utilize o seguinte código:

let count = $state(0);

Para observar mudanças nessa variável, você usaria o seguinte código no Svelte 4:

$: double = count * 2;

Já na nova versão temos as runas $derived e $effect para isso:

const double = $derived(count * 2);

As propriedades de um componente eram definidas com export let:

export let required;
export let type;

E agora são definidas com a runa $props:

let { required, type } = $props();

Eventos

Outra grande mudança é que agora eventos são atributos, antes eram diretivas, iniciadas com on:

<button on:click={() => count++}>clicks: {count}</button>

Agora eles são apenas propriedades:

<button onclick={() => count++}>clicks: {count}</button>

Tem diversas outras novidades na parte de eventos. Agora você pode passar callbacks como propriedades em componentes, foram removidos os modificadores de eventos, agora você deve implementar eles direto no handler manualmente etc.

Snippets

Agora você pode criar trechos de template reutilizáveis, por exemplo:

{#snippet user(data)}
    <img alt={`Foto do ${data.name}`} src={data.photo}>
    <p>{data.name}</p>
{/snippet}

Para usar esse snippet é só renderizar ele em qualquer parte do template com a tag render:

{@render user(userData)}

Além dessas novidades, existem diversas outras que você pode conferir na nova documentação do Svelte:

https://svelte.dev/docs/svelte/overview

E aí! Você já usa Svelte? O que achou dessas novidades?