Especialização Frontend com Svelte • Svelte 5 & SvelteKit • Capítulo 01

🗺️ Mapa Conceitual do Tópico

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

🏛️ 1. Fundamentos e Diretrizes Técnicas

1. Filosofia: Compilação vs Interpretação em Tempo de Execução

Ao contrário de frameworks tradicionais como React ou Vue que enviam uma biblioteca de runtime e uma camada de Virtual DOM (VDOM) para o navegador, o Svelte é um compilador. Durante o build (via Vite e @sveltejs/vite-plugin-svelte), o código declarativo é convertido em instruções imperativas enxutas que manipulam diretamente os nós do DOM real.

2. Anatomia de um Componente Svelte

Um componente Svelte reside em um arquivo .svelte e agrega três seções essenciais:

  • <script lang="ts">: Lógica TypeScript e estado reativo.
  • <template> implícito: Marcação HTML enriquecida com interpolações {expressao} e diretivas.
  • <style>: Estilos CSS com escopo estritamente local aplicados via classes únicas geradas pelo compilador.

3. Vantagens Arquiteturais

  • Zero Overhead de VDOM: Não há cálculo de diff de árvores inteiras de objetos JavaScript em memória.
  • Bundle Mínimo: Apenas o código estritamente necessário é enviado ao cliente.
  • Performance Nativa: Tempo de resposta instantâneo a eventos de usuário.

💻 2. Código de Demonstração Corporativo

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