Aula 04 - Reatividade no Svelte ⚡

Objetivo

Objetivo: Dominar o conceito de reatividade, aprender a usar a sintaxe $: para criar variáveis dependentes e entender como o Svelte atualiza a interface de forma cirúrgica.

---

1. O que é Reatividade? 🔄

Reatividade é a capacidade de um sistema responder a mudanças de dados. No Svelte, a reatividade é baseada em atribuições.

Quando você faz count = count + 1, o Svelte sabe que a variável count mudou e agenda uma atualização para todos os lugares onde ela é usada no HTML.

---

2. Declarações Reativas ($:) 🧠

Às vezes, queremos que uma variável seja recalculada automaticamente sempre que outra variável mudar. Para isso, usamos o prefixo $:.

<script>
  let count = 0;

  // Esta variável SEMPRE será o dobro de count
  $: dobrado = count * 2;
</script>

<button on:click={() => count++}>Clique: {count}</button>
<p>O dobro é {dobrado}</p>

Conceito

O símbolo $: pode ser lido como "sempre que as variáveis usadas aqui mudarem, execute isto de novo".

---

3. Blocos Reativos 🧱

Você não está limitado a apenas variáveis. Você pode usar $: para executar blocos inteiros de código ou condicionais reativas.

<script>
  let count = 0;

  $: {
    console.log("O contador mudou para:", count);
    if (count >= 10) {
      alert("Você clicou muito!");
      count = 0;
    }
  }
</script>

---

4. O Fluxo de Reatividade (Mermaid) 📊

graph TD
    A[Ação do Usuário/Evento] --> B[Alteração de Variável]
    B --> C{Compilador Svelte}
    C -- "Detecta dependências ($:)" --> D[Atualiza Variáveis Derivadas]
    D --> E[Sincroniza com o DOM Real]
    E --> F[Interface Atualizada]

---

5. Dica Pro: Debugging Reativo 💻

Uma forma muito comum e rápida de debugar no Svelte é usar o $: com o console.log.

<div id="termynal" data-termynal>
    <span data-ty="input">$: console.log(minhaVariavel)</span>
    <span data-ty="progress"></span>
    <span data-ty>O contador mudou para: 1</span>
    <span data-ty>O contador mudou para: 2</span>
</div>

---

6. Mini-Projeto: Calculadora de Área de Retângulo 🚀

Vamos aplicar a reatividade em um exemplo prático: 1. No seu App.svelte, crie duas variáveis: largura e altura (inicie com 10). 2. Crie uma declaração reativa para area que multiplique as duas. 3. No markup, crie dois campos de input vinculados a essas variáveis (usaremos bind:value, que veremos mais a fundo na Aula 07, mas tente usar agora!). 4. Exiba a área na tela. Ela deve mudar instantaneamente enquanto você digita.

Curiosidade

O $: é na verdade uma sintaxe válida do JavaScript chamada "Labeled Statement". O Svelte apenas deu um novo significado a ela para facilitar sua vida!

---

7. Exercício de Fixação 📝

1. O que dispara uma atualização reativa no Svelte?
2. Para que serve o prefixo $:?
3. Como você criaria um alerta que só aparece quando uma variável nome estiver vazia, usando reatividade?

---

Próxima Aula: Vamos aprender a organizar nosso código com a Componentização! 🧩