Além da Marcação Estática

Até agora, o BookIt exibe o mesmo conteúdo toda vez. Mas aplicações reais precisam de comportamento dinâmico. Mostrar um formulário de login ou um painel dependendo do estado de autenticação. Exibir uma lista de serviços, não apenas um. Mostrar indicadores de carregamento enquanto os dados são buscados. É aqui que entra o fluxo de controle.

O Que Você Vai Aprender

O que fluxo de controle significa na sintaxe de template do Svelte
Os diferentes tipos de bloco que o Svelte oferece
Quando usar cada tipo de bloco
Como o fluxo de controle difere do JavaScript

O Que é Fluxo de Controle?

Em JavaScript, você usa if, else e for para controlar a execução do programa. Em templates Svelte, você precisa de algo semelhante, mas para renderização. O Svelte fornece uma sintaxe especial de blocos que permite renderizar conteúdo condicionalmente e iterar sobre dados diretamente na sua marcação.

Ao contrário do JavaScript, que executa uma vez, os blocos de template do Svelte são reativos. Quando os dados dos quais eles dependem mudam, a saída renderizada é atualizada automaticamente.

Blocos de Fluxo de Controle do Svelte

O Svelte fornece quatro blocos de template principais para fluxo de controle:

Bloco	Propósito	Exemplo de Uso
`{#if}`	Renderização condicional	Mostrar formulário de login ou painel
`{#each}`	Iteração de lista	Renderizar todos os serviços
`{#await}`	Tratamento de dados assíncronos	Mostrar carregando → dados → erro
`{#key}`	Forçar recriação	Redefinir componente quando o ID muda

Neste módulo, vamos focar em {#if} e {#each} — os dois que você usará com mais frequência. Você vai encontrar o {#await} no Módulo 9 ao carregar dados do servidor, e o {#key} em cenários avançados.

O Padrão de Sintaxe de Bloco

Todos os blocos do Svelte seguem o mesmo padrão:

{#blockname expression}
  content
{/blockname}

O # inicia um bloco, / o encerra. Alguns blocos têm tags de continuação usando : para ramificações como {:else}.

Aqui está uma prévia rápida do que você vai aprender:

<!-- Conditional: show one thing or another -->
{#if isLoggedIn}
  <Dashboard />
{:else}
  <LoginForm />
{/if}

<!-- Iteration: render many items -->
{#each services as service}
  <ServiceCard {service} />
{/each}

Por Que Não Usar Apenas JavaScript?

Você pode se perguntar por que o Svelte precisa de uma sintaxe especial. Por que não usar apenas JavaScript?

<!-- This doesn't work in Svelte templates -->
<div>
  { if (isLoggedIn) { return <Dashboard /> } }
</div>

Os templates do Svelte não são JavaScript — eles são uma descrição declarativa da sua interface. A sintaxe de blocos fornece uma maneira limpa e legível de expressar renderização condicional e iterativa, mantendo a reatividade.

Compare a legibilidade:

<!-- Svelte's approach: clear and declarative -->
{#if user}
  <p>Welcome, {user.name}!</p>
{:else}
  <p>Please log in.</p>
{/if}

<!-- Ternary alternative: gets messy fast -->
{user ? `<p>Welcome, ${user.name}!</p>` : '<p>Please log in.</p>'}

Para casos simples, você pode usar expressões ternárias no Svelte. Mas à medida que as condições ficam mais complexas, a sintaxe de blocos permanece legível.

Fluxo de Controle no BookIt

Ao longo deste módulo, você vai construir essas funcionalidades do BookIt usando fluxo de controle:

Renderização condicional:

Mostrar formulário de reserva ou confirmação com base no estado de envio
Exibir conteúdo diferente por categoria
Tratar estados de carregamento e erro

Iteração de lista:

Renderizar todos os serviços a partir de um array
Exibir histórico de reservas
Mostrar botões de filtro por categoria

Padrões combinados:

Filtrar serviços por categoria (condição + iteração)
Mostrar "sem resultados" quando os filtros não correspondem a nada (condição dentro de iteração)

Como Este Módulo Evolui

Veja o que vem pela frente:

Renderização Condicional — {#if}, {:else} e {:else if} para mostrar/ocultar conteúdo
Estados Vazios — Tratar o caso de "nada para mostrar" com elegância
Blocos Each — Renderizar listas de itens com {#each}
Each com Chave — Por que identificadores únicos importam para listas dinâmicas
Filtrar Serviços — Combinar tudo em uma exibição filtrada e interativa

Ao final, a página de serviços do BookIt exibirá uma lista categorizada e filtrável com estados vazios adequados — tudo construído com as primitivas de fluxo de controle do Svelte.

Uma Amostra Rápida

Aqui está um vislumbre do que você vai construir ao final deste módulo:

<script>
  let selectedCategory = $state('all');
  
  const services = [
    { id: '1', name: 'Lawn Mowing', category: 'lawn-care', price: 50 },
    { id: '2', name: 'Tree Pruning', category: 'tree-care', price: 150 },
    // ... more services
  ];
  
  let filteredServices = $derived(
    selectedCategory === 'all'
      ? services
      : services.filter(s => s.category === selectedCategory)
  );
</script>

<!-- Category filter buttons -->
{#each categories as category}
  <button onclick={() => selectedCategory = category.id}>
    {category.name}
  </button>
{/each}

<!-- Filtered service list with empty state -->
{#if filteredServices.length > 0}
  {#each filteredServices as service (service.id)}
    <ServiceCard {service} />
  {/each}
{:else}
  <p>No services found in this category.</p>
{/if}

Condições, laços e estado derivado trabalham juntos para criar uma interface dinâmica e reativa.

Resumo

Os blocos de fluxo de controle do Svelte permitem renderizar conteúdo condicionalmente e iterar sobre dados diretamente nos templates. A sintaxe é declarativa, legível e totalmente reativa — quando os dados mudam, a interface é atualizada automaticamente.

Principais conclusões:

{#if} lida com renderização condicional
{#each} lida com iteração de lista
A sintaxe de blocos usa # para iniciar, / para encerrar e : para ramificações
Os blocos de fluxo de controle são reativos por padrão

Próximos Passos

Vamos começar com o padrão mais comum. Continue com Renderização Condicional para aprender {#if}, {:else} e {:else if} para mostrar e ocultar conteúdo.