Aula 03 - Estrutura .svelte 🧬

Os Pilares de um Componente

Agenda de Hoje 📅

1. Anatomia do arquivo .svelte
2. A Seção <script>
3. Markup e Interpolação
4. Estilos com Escopo (Scoped CSS)
5. Atributos Dinâmicos
6. Prática: Dashboard Simples

1. O Arquivo .svelte 🧩

• Reúne Estrutura, Lógica e Estilo.
• Lembra o HTML tradicional, mas com "superpoderes".
• Zero configuração extra por arquivo.

2. A Seção <script> 🧠

• Onde definimos nossas variáveis.
• Onde fica a lógica do componente.
• Usa JavaScript padrão (ES6+).

<script>
  let titulo = "Bem-vindo!";
  let contador = 0;
</script>

3. O Markup (HTML) 🏗️

• É o corpo do componente.
• Aceita qualquer tag HTML válida.
• Usa chaves {} para injetar dados do script.

3.1 Interpolação de Texto

<h1>{titulo}</h1>
<p>O valor atual é: {contador}</p>

• Qualquer expressão JS válida funciona dentro das chaves!
• Ex: {contador * 2} ou {nome.toUpperCase()}.

3.2 Renderizando HTML (@html)

• Por segurança, o Svelte escapa tags HTML em variáveis.
• Para renderizar HTML bruto, use a tag {@html ...}.

<script>
  let negrito = "<strong>Cuidado!</strong>";
</script>

<p>{@html negrito}</p>

4. Atributos Dinâmicos 🔗

• Podemos ligar variáveis a atributos HTML (src, href, disabled, etc).

<script>
  let link = "https://svelte.dev";
  let alt = "Logo do Svelte";
</script>

<a href={link}>Acesse o site</a>
<img src="logo.png" {alt} /> <!-- Atalho (Shorthand) -->

5. A Seção <style> 🎨

5.1 Escopo Automático (Scoped)

• O CSS escrito aqui só afeta este componente.
• Não há vazamento de estilo para o resto do site!
• O Svelte gera classes únicas (ex: svelte-xyz123).

5.2 Estilos Globais (:global)

• Se precisar que uma regra afete elementos de forma global:

<style>
  :global(body) {
    background-color: #f0f0f0;
  }
</style>

6. Ordem das Seções 📋

• O Svelte não impõe uma ordem sugerida.
• Sugestão da comunidade: Script -> Markup -> Style.

7. Prática: Mini Perfil de Usuário 👤

• Crie variáveis: nome, fotoURL, bio.
• Exiba no HTML usando chaves.
• Adicione um estilo para o cartão (card).

8. Dicas de Produtividade ⌨️

• Use comentários HTML <!-- ... --> no markup.
• Use comentários JS // ... no script.
• Mantenha os componentes pequenos e focados.

Resumo da Aula ✅

• .svelte = Script + HTML + Style.
• Chaves {} = Dinamismo no HTML.
• CSS é isolado por padrão (Scoped).

Próxima Aula: Reatividade ⚡

• O cifrão reativo $:
• Declarações reativas.
• Como o Svelte percebe mudanças.

Dúvidas? 🤔

"A simplicidade é o último grau de sofisticação."