📊 Capítulo 02: Reatividade Moderna no Svelte 5 com Runes ($state, $derived)

Especialização Frontend com Svelte 5 & SvelteKit

🗺️ Visão Arquitetural

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

🎯 Slide 1: Pilares e Conceitos Chave

• Sem Virtual DOM: Compilação direta para código imperativo de manipulação do DOM real.
• Signals Nativos com Runes: Reatividade granular orientada a dependências pontuais.
• Componentes Coesos: Lógica, template e estilo isolados no mesmo arquivo .svelte.

🎯 Slide 2: Exemplo Prático em Ação

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

🎯 Slide 3: Boas Práticas e Produção

• Utilize TypeScript estrito em todos os componentes via lang="ts".
• Valide schemas de dados com Zod e cubra cenários com testes no Vitest.
• Meça sempre as métricas Core Web Vitals (LCP, INP, CLS) em produção.