🧩 Exercícios Práticos: Cap 02 — Reatividade Moderna no Svelte 5 com Runes ($state, $derived)

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

🎯 Nível 1: Fundamentos

Problema 02.1 — Fixação Conceitual e Sintaxe Inicial

Crie um botão de alternância (toggle) com $state que alterne entre visível e invisível.

Resultado Esperado

Status alternando entre True e False a cada clique.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_1_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Reatividade Moderna no Svelte 5 com Runes ($state, $derived)
🔑 Gabarito de Código & Solução Comentada 
<!-- Toggle.svelte -->
<script lang="ts">
  let visivel = $state(false);
</script>

<button onclick={() => visivel = !visivel}>
  {visivel ? 'Ocultar' : 'Exibir'} Detalhes
</button>

{#if visivel}
  <p>Conteúdo confidencial revelado com sucesso!</p>
{/if}

🔍 Nível 2: Prática

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

Crie uma lista de compras reativa com $state permitindo adicionar novos itens a partir de um array.

Resultado Esperado

Novo item adicionado e exibido na lista imediatamente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_2_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Reatividade Moderna no Svelte 5 com Runes ($state, $derived)
🔑 Gabarito de Código & Solução Comentada 
<!-- ListaCompras.svelte -->
<script lang="ts">
  let itens = $state<string[]>(['Maçã', 'Café']);
  let novoItem = $state('');

  function adicionar() {
    if (novoItem.trim()) {
      itens.push(novoItem.trim());
      novoItem = '';
    }
  }
</script>

<input bind:value={novoItem} placeholder="Novo item..." />
<button onclick={adicionar}>Adicionar</button>

<ul>
  {#each itens as item}
    <li>{item}</li>
  {/each}
</ul>

🚀 Nível 3: Integração

Problema 02.3 — Cenário Integrado e Tratamento de Erros

Construa um conversor de moedas reativo com $state para o valor base e $derived para as conversões em USD, EUR e GBP.

Resultado Esperado

Conversões recalculadas em tempo real com base no input em BRL.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_3_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Reatividade Moderna no Svelte 5 com Runes ($state, $derived)
🔑 Gabarito de Código & Solução Comentada 
<!-- Conversor.svelte -->
<script lang="ts">
  let valorBrl = $state(100);
  let emUsd = $derived((valorBrl / 5.50).toFixed(2));
  let emEur = $derived((valorBrl / 6.00).toFixed(2));
</script>

<label>
  Valor em BRL:
  <input type="number" bind:value={valorBrl} />
</label>

<p>Em USD: ${emUsd}</p>
<p>Em EUR: €{emEur}</p>

🏆 Nível 4: Desafio Corporativo

Problema 02.4 — Sistema Robusto com Testes e Auditoria

Crie uma classe reativa em TypeScript puro (CarrinhoCompras.svelte.ts) utilizando $state e $derived para gerenciar subtotal, desconto e total geral.

Resultado Esperado

Módulo reativo universal testado com cálculo exato de total e descontos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_02_4_SeuNome
  2. Envie na tarefa: Atividade Cap 02 - Reatividade Moderna no Svelte 5 com Runes ($state, $derived)
🔑 Gabarito de Código & Solução Comentada 
// CarrinhoCompras.svelte.ts
export interface ItemCarrinho {
  id: string;
  nome: string;
  preco: number;
  quantidade: number;
}

export class CarrinhoCompras {
  itens = $state<ItemCarrinho[]>([]);
  descontoPercentual = $state(0);

  subtotal = $derived(
    this.itens.reduce((acc, item) => acc + (item.preco * item.quantidade), 0)
  );

  total = $derived(
    this.subtotal * (1 - this.descontoPercentual / 100)
  );

  adicionar(item: ItemCarrinho) {
    this.itens.push(item);
  }
}