💻 Demonstrações Práticas: Cap 02 — Reatividade Moderna no Svelte 5 com Runes ($state, $derived)

Especialização Frontend com Svelte • Exemplos Executáveis

🗺️ Fluxo Arquitetural da Demonstração

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

📄 Código de Demonstração (src/lib/ContadorRunes.svelte)

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

🚀 Saída Esperada no Terminal / Compilação

Rendered DOM:
Valor atual: 1
Dobro do valor: 2
Classificação: Ímpar