💻 Demonstrações Práticas: Cap 01 — O Compilador Svelte, Vite e Anatomia do Componente

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

🗺️ Fluxo Arquitetural da Demonstração

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

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

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

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

$ npm run dev
VITE v5.4.0 ready in 180 ms
➜ Local: http://localhost:5173/