Especialização Frontend com Svelte • Svelte 5 & SvelteKit • Capítulo 02

🗺️ Mapa Conceitual do Tópico

flowchart LR
    MUT["Mutação: contador++"] --> STATE["$state() Signal"]
    STATE --> DERIVED["$derived(contador * 2)"]
    DERIVED --> DOM["Atualização Fina no DOM (Granular)"]

    style MUT fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style STATE fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style DERIVED fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style DOM fill:#fce4ec,stroke:#e91e63,stroke-width:2px

🏛️ 1. Fundamentos e Diretrizes Técnicas

1. A Revolução das Runes no Svelte 5

O Svelte 5 introduziu as Runes — símbolos nativos de compilação como $state, $derived e $effect que unificam a reatividade dentro e fora de componentes .svelte. Anteriormente, o Svelte 3/4 usava atribuições simples (let x = 0; x++) e declarações reativas com labels ($: dobro = x * 2). As Runes substituem essa mágica sintática por primitivas reativas baseadas em Signals universais.

2. A Rune $state

Permite declarar estado reativo profundo. Objetos e arrays instanciados com $state tornam-se reativos através de Proxies internos, permitindo mutações pontuais (arr.push(item)) sem necessidade de reatribuição (arr = [...arr, item]).

3. A Rune $derived e $derived.by

Expressa valores computados dependentes de outros estados reativos. O Svelte memoriza o cálculo e apenas o reavalia quando alguma dependência reativa sofre alteração.

💻 2. Código de Demonstração Corporativo

<script lang="ts">
  let contagem = $state(0);
  let dobro = $derived(contagem * 2);
  let ehPar = $derived(contagem % 2 === 0);

  function incrementar() {
    contagem += 1;
  }
  function zerar() {
    contagem = 0;
  }
</script>

<div class="box">
  <h2>Contador com Runes ($state e $derived)</h2>
  <p>Valor atual: <strong>{contagem}</strong></p>
  <p>Dobro do valor: <strong>{dobro}</strong></p>
  <p>Classificação: <em>{ehPar ? 'Par' : 'Ímpar'}</em></p>

  <button onclick={incrementar}>Incrementar (+1)</button>
  <button onclick={zerar}>Zerar</button>
</div>

<style>
  .box { padding: 1.5rem; background: #fff; border: 1px solid #ddd; }
  button { margin-right: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; }
</style>