🧩 Exercícios Práticos: Cap 05 — Comunicação entre Componentes: Props, $bindable e Snippets

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

🎯 Nível 1: Fundamentos

Problema 05.1 — Fixação Conceitual e Sintaxe Inicial

Implemente os conceitos básicos de Comunicação entre Componentes: Props, $bindable e Snippets utilizando Svelte 5 e TypeScript.

Resultado Esperado

Componente de Comunicação entre Componentes: Props, $bindable e Snippets renderizado e verificado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_1_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes: Props, $bindable e Snippets
🔑 Gabarito de Código & Solução Comentada 
<!-- 05_props_snippets_e_slots_n1.svelte -->
<script lang="ts">
  const titulo = 'Comunicação entre Componentes: Props, $bindable e Snippets';
</script>
<div><h2>{titulo}</h2></div>

🔍 Nível 2: Prática

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

Refatore uma solução simples para aplicar regras de negócio no contexto de Comunicação entre Componentes: Props, $bindable e Snippets.

Resultado Esperado

Execução com validação estrita de dados concluída.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_2_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes: Props, $bindable e Snippets
🔑 Gabarito de Código & Solução Comentada 
<!-- 05_props_snippets_e_slots_n2.svelte -->
<script lang="ts">
  let statusOk = $state(true);
</script>
<p>Validação: {statusOk ? 'Aprovada' : 'Reprovada'}</p>

🚀 Nível 3: Integração

Problema 05.3 — Cenário Integrado e Tratamento de Erros

Crie um pipeline de integração combinando Comunicação entre Componentes: Props, $bindable e Snippets com tratamento de erros e tipagem.

Resultado Esperado

Módulo integrado com sucesso e assertions validadas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_3_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes: Props, $bindable e Snippets
🔑 Gabarito de Código & Solução Comentada 
// 05_props_snippets_e_slots_service.ts
export async function executarOperacao(): Promise<boolean> {
  return true;
}

🏆 Nível 4: Desafio Corporativo

Problema 05.4 — Sistema Robusto com Testes e Auditoria

Construa uma solução corporativa completa de alta resiliência aplicando Comunicação entre Componentes: Props, $bindable e Snippets.

Resultado Esperado

Sistema corporativo homologado com 100% dos testes e auditoria JSON concluídos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_05_4_SeuNome
  2. Envie na tarefa: Atividade Cap 05 - Comunicação entre Componentes: Props, $bindable e Snippets
🔑 Gabarito de Código & Solução Comentada 
// 05_props_snippets_e_slots_enterprise.ts
export class GerenciadorCorporativo {
  executarAuditoria(): { status: string; timestamp: number } {
    return { status: 'OK', timestamp: Date.now() };
  }
}