🧩 Exercícios Práticos: Cap 01 — O Compilador Svelte, Vite e Anatomia do Componente

Especialização Frontend com Svelte • Trilha de Exercícios Progressivos em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 01.1 — Fixação Conceitual e Sintaxe Inicial

Crie um componente Svelte simples que renderize um título ‘Olá Mundo Svelte’ e um parágrafo descritivo.

Resultado Esperado

Olá Mundo Svelte renderizado com sucesso no navegador.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_1_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - O Compilador Svelte, Vite e Anatomia do Componente
🔑 Gabarito de Código & Solução Comentada 
<!-- OlaMundo.svelte -->
<script lang="ts">
  const titulo = 'Olá Mundo Svelte';
  const descricao = 'Primeiro componente no Padrão Ouro.';
</script>

<main>
  <h1>{titulo}</h1>
  <p>{descricao}</p>
</main>

<style>
  main { font-family: sans-serif; padding: 1rem; }
  h1 { color: #ff3e00; }
</style>

🔍 Nível 2: Prática

Problema 01.2 — Aplicação com Regras de Negócio

Crie um componente que exiba dados estruturados de um usuário (nome, cargo e status online) tipados via interface TypeScript.

Resultado Esperado

Perfil de usuário exibido com badge condicional de status.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_2_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - O Compilador Svelte, Vite e Anatomia do Componente
🔑 Gabarito de Código & Solução Comentada 
<!-- PerfilUsuario.svelte -->
<script lang="ts">
  interface Usuario {
    nome: string;
    cargo: string;
    ativo: boolean;
  }

  const user: Usuario = {
    nome: 'Linus Torvalds',
    cargo: 'Engenheiro de Kernel',
    ativo: true
  };
</script>

<div class="perfil">
  <h3>{user.nome}</h3>
  <p>{user.cargo}</p>
  <span class={user.ativo ? 'online' : 'offline'}>
    {user.ativo ? 'Disponível' : 'Ausente'}
  </span>
</div>

<style>
  .perfil { border: 1px solid #ccc; padding: 1rem; border-radius: 6px; }
  .online { color: green; font-weight: bold; }
  .offline { color: red; }
</style>

🚀 Nível 3: Integração

Problema 01.3 — Cenário Integrado e Tratamento de Erros

Crie um layout composto com cabeçalho, barra lateral e rodapé reaproveitando variáveis de configuração centralizadas.

Resultado Esperado

Estrutura responsiva completa de dashboard renderizada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_3_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - O Compilador Svelte, Vite e Anatomia do Componente
🔑 Gabarito de Código & Solução Comentada 
<!-- DashboardShell.svelte -->
<script lang="ts">
  const appConfig = {
    appName: 'Portal Corporativo',
    ano: 2026,
    modulos: ['Visão Geral', 'Métricas', 'Auditoria']
  };
</script>

<div class="layout">
  <header><h1>{appConfig.appName}</h1></header>
  <div class="content">
    <aside>
      <ul>
        {#each appConfig.modulos as mod}
          <li>{mod}</li>
        {/each}
      </ul>
    </aside>
    <main><p>Conteúdo da aplicação Svelte.</p></main>
  </div>
  <footer><small>© {appConfig.ano} Todos os direitos reservados.</small></footer>
</div>

<style>
  .layout { display: flex; flex-direction: column; min-height: 100vh; }
  .content { display: flex; flex: 1; }
  aside { width: 220px; background: #f4f4f4; padding: 1rem; }
  main { flex: 1; padding: 1.5rem; }
</style>

🏆 Nível 4: Desafio Corporativo

Problema 01.4 — Sistema Robusto com Testes e Auditoria

Projete uma suíte de verificação arquitetural que valide se um componente Svelte atende às diretrizes corporativas de acessibilidade e performance.

Resultado Esperado

Relatório de conformidade estrutural com 0 violações de a11y.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_4_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - O Compilador Svelte, Vite e Anatomia do Componente
🔑 Gabarito de Código & Solução Comentada 
// auditComponent.ts
export interface AuditReport {
  component: string;
  hasScopedStyle: boolean;
  hasTypeHints: boolean;
  compliant: boolean;
}

export function auditSvelteComponent(sourceCode: string, name: string): AuditReport {
  const hasScoped = sourceCode.includes('<style>');
  const hasTypes = sourceCode.includes('lang="ts"') || sourceCode.includes('type') || sourceCode.includes('interface');
  return {
    component: name,
    hasScopedStyle: hasScoped,
    hasTypeHints: hasTypes,
    compliant: hasScoped && hasTypes
  };
}