Aula 17 - Reatividade Nativa com Stores e Runes ⚡

📑 1. Fundamentos Teóricos & Análise Técnica

O grande diferencial arquitetural do Svelte em relação a frameworks como React e Vue reside na eliminação do DOM Virtual (vDOM). Enquanto outros frameworks processam a reconciliação e o cálculo de diferenças em tempo de execução no navegador, o Svelte atua como um Compilador. Ele transforma o código declarativo em instruções JavaScript altamente otimizadas que manipulam diretamente os nós do DOM quando os dados mudam.

A partir do Svelte 5, o modelo reativo foi unificado sob o paradigma das Runes — primitivas sintáticas reconhecidas pelo compilador que funcionam universalmente, tanto dentro de arquivos .svelte quanto em arquivos JavaScript/TypeScript puros (.svelte.js): 1. $state(): Declara um valor reativo observável pelo compilador. 2. $derived(): Cria expressões derivadas que se recalculam automaticamente e com memoização profunda quando suas fontes sofrem mutação. 3. $effect(): Executa efeitos colaterais de sincronização com o DOM ou APIs do navegador após a renderização. 4. $props(): Declara as propriedades recebidas pelo componente de forma tipada e com suporte a valores padrão.

📐 Arquitetura Conceitual & Diagrama de Fluxo

flowchart LR
    subgraph FrameworksTradicionais ["Frameworks com Virtual DOM"]
        State1["Estado Muda"] --> VDOM["Gera Nova Árvore vDOM"]
        VDOM --> Diff["Diffing / Reconciliação (CPU)"]
        Diff --> Patch["Patch Cirúrgico no DOM"]
    end
    subgraph SvelteCompilador ["Svelte 5 (Compilador + Runes)"]
        Rune["$state(valor) Muda"] --> DirectCode["Instrução JS Compilada Executada Imediatamente no DOM!"]
    end
    style FrameworksTradicionais fill:#ffebee,stroke:#c62828
    style SvelteCompilador fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Compilação em Tempo de Build: Zero custo de overhead de vDOM no navegador do cliente. - Reatividade Universal: Runes podem ser exportadas de módulos .svelte.ts para compartilhar estado global sem bibliotecas externas. - Rastreamento Fino de Propriedades: Mutações em propriedades de objetos aninhados disparam apenas as atualizações necessárias. - Desempenho Extremo: Menor tamanho de bundle do mercado e tempos de resposta imediatos em testes de benchmark.

🛠️ 2. Implementação Prática em Svelte 5 Runes e Stores

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// Counter.svelte (Svelte 5 com Runes)
<script lang="ts">
  // 1. Definição de Props com Rune $props()
  let { initialValue = 0 }: { initialValue?: number } = $props();

  // 2. Estado Reativo com $state()
  let count = $state(initialValue);

  // 3. Valor Computado com $derived()
  let double = $derived(count * 2);

  // 4. Efeito Reativo com $effect()
  $effect(() => {
    console.log(`[Svelte Rune Effect] O contador agora é: ${count}`);
  });

  function increment() {
    count += 1; // Mutação direta e limpa!
  }
</script>

<div class="counter-card">
  <h2>Valor: {count}</h2>
  <p>Dobro do Valor: {double}</p>
  <button onclick={increment}>Incrementar (+1)</button>
</div>

💡 Análise Passo a Passo do Código

1. Rune $state: let count = $state(0) instrui o compilador a instrumentar atribuições a count para atualizar o DOM.
2. Mutação Limpa: count += 1 é sintaxe JavaScript padrão sem necessidade de chamadas a setCount() ou setters verbosos.
3. Derivação Declarativa: $derived(count * 2) monitora dependências automaticamente sem necessidade de arrays de dependência manuais.

🎯 3. Próximos Passos & Sequência Didática