📊 Capítulo 01: O Compilador Svelte, Vite e Anatomia do Componente

Especialização Frontend com Svelte 5 & SvelteKit

🗺️ Visão Arquitetural

flowchart TD
    SRC["Arquivo .svelte (HTML + script + style)"] --> COMP["Compilador Svelte 5 (Vite Plugin)"]
    COMP --> JS["JavaScript Puro Cirúrgico (DOM Updates)"]
    COMP --> CSS["CSS Scoped com Hashing de Classe"]
    JS --> BROWSER["Execução Ultra-rápida no Navegador (Zero Virtual DOM)"]

    style SRC fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style COMP fill:#ffecb3,stroke:#ffa000,stroke-width:2px
    style JS fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style BROWSER fill:#e1f5fe,stroke:#03a9f4,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 tecnologia: string = 'Svelte 5';
  let versao: string = '5.0.0';
</script>

<div class="card">
  <h2>Bem-vindo ao {tecnologia}!</h2>
  <p>Versão em execução: <strong>{versao}</strong></p>
</div>

<style>
  .card {
    padding: 1.5rem;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
  }
  h2 {
    color: #ff3e00;
  }
</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.