O Coração do BookIt

Todo aplicativo de reservas precisa de um formulário — é a principal forma dos clientes interagirem com o seu serviço. Eles inserem seus dados, selecionam o que desejam, escolhem quando querem e enviam a reserva. Sem esse formulário, o BookIt seria apenas um folheto estático.

Nesta lição, você vai construir esse formulário como um componente reutilizável. Componentes são um dos recursos mais poderosos do Svelte. Em vez de copiar e colar o mesmo HTML de formulário em várias páginas, você o escreve uma vez e usa em qualquer lugar.

O que é um Componente?

Pense em um componente como uma tag HTML personalizada que você define. Assim como você pode escrever <button> ou <input> e eles funcionam em qualquer lugar, você pode criar uma tag <BookingForm> e usá-la onde precisar de um formulário de reserva.

Componentes encapsulam:

Estrutura (marcação HTML)
Comportamento (lógica JavaScript)
Estilização (CSS)

Isso torna sua base de código modular, manutenível e mais fácil de compreender.

O que Você Vai Aprender

Criar um novo arquivo de componente
Construir a estrutura básica de um formulário com HTML
Importar e usar o componente em uma página

Criar o Arquivo do Componente

Componentes no Svelte são simplesmente arquivos .svelte — só isso. Qualquer arquivo com a extensão .svelte é um componente que pode ser importado e reutilizado em toda a sua aplicação.

A Convenção da Pasta `src/lib`

O SvelteKit possui uma pasta especial chamada src/lib para código compartilhado. É aqui que você coloca:

Componentes reutilizáveis (como o nosso formulário de reserva)
Funções utilitárias (formatadores de data, validadores, etc.)
Definições de tipos (interfaces TypeScript)
Constantes e configurações

Qualquer coisa que você coloque em src/lib pode ser importada de qualquer lugar na sua aplicação usando o alias $lib (mais sobre isso em breve).

Criando o Componente

Vamos criar nosso primeiro componente Svelte:

Crie o diretório src/lib/components/ caso ele ainda não exista
Dentro dele, crie um novo arquivo chamado BookingForm.svelte

src/
├── lib/                          ← Shared code
│   └── components/               ← Reusable UI components
│       └── BookingForm.svelte    ← Create this file
└── routes/                       ← Pages and endpoints
    └── ...

Por que components/? Embora você pudesse colocar BookingForm.svelte diretamente em src/lib, criar uma subpasta components/ mantém as coisas organizadas. À medida que seu aplicativo cresce, você pode ter dezenas de componentes, e tê-los em sua própria pasta evita a bagunça.

Convenção de nomenclatura: Arquivos de componentes são tipicamente nomeados em PascalCase (como BookingForm.svelte), correspondendo à forma como você os usará: <BookingForm />. Isso deixa claro de relance que é um componente, não uma função utilitária ou constante.

Construir a Estrutura do Formulário

Agora vamos construir o formulário em si. Começaremos com HTML puro e semântico — sem JavaScript, sem reatividade, apenas um formulário bem estruturado. Acertar a base HTML é crucial porque afeta a acessibilidade, a experiência do usuário e a facilidade de adicionar interatividade depois.

O que Faz um Bom Formulário?

Antes de escrever código, vamos pensar no que um formulário de reserva precisa:

Rótulos claros — Os usuários devem saber para que serve cada campo
Tipos de input apropriados — type="email" para e-mail, type="date" para datas, etc.
Placeholders úteis — Exemplos do que inserir
Agrupamento lógico — Campos relacionados agrupados juntos
Marcação acessível — Rótulos associados a inputs para leitores de tela

Construindo o HTML

Adicione esta estrutura HTML ao seu arquivo BookingForm.svelte:

<!-- filename: src/lib/components/BookingForm.svelte -->
<form>
	<h2>Book a Service</h2>

	<div class="field">
		<label for="name">Your Name</label>
		<input type="text" id="name" name="name" placeholder="Jane Smith" />
	</div>

	<div class="field">
		<label for="email">Email Address</label>
		<input type="email" id="email" name="email" placeholder="jane@example.com" />
	</div>

	<div class="field">
		<label for="date">Preferred Date</label>
		<input type="date" id="date" name="date" />
	</div>

	<div class="field">
		<label for="time">Preferred Time</label>
		<select id="time" name="time">
			<option value="">Select a time...</option>
			<option value="09:00">9:00 AM</option>
			<option value="10:00">10:00 AM</option>
			<option value="11:00">11:00 AM</option>
			<option value="13:00">1:00 PM</option>
			<option value="14:00">2:00 PM</option>
			<option value="15:00">3:00 PM</option>
		</select>
	</div>

	<div class="field">
		<label for="notes">Additional Notes</label>
		<textarea id="notes" name="notes" rows="3" placeholder="Any special requests?"></textarea>
	</div>

	<button type="submit">Request Booking</button>
</form>

Entendendo a Estrutura

Vamos detalhar o que cada parte faz:

O wrapper do formulário:

<form>

O elemento <form> envolve todos os inputs. Quando os usuários pressionam Enter ou clicam no botão de envio, o formulário dispara um evento de submit. Vamos lidar com isso em lições futuras.

Padrão de wrapper de campo:

<div class="field">
	<label for="name">Your Name</label>
	<input type="text" id="name" name="name" placeholder="Jane Smith" />
</div>

Cada campo é envolvido em um <div class="field">. Isso:

Agrupa o rótulo e o input juntos
Facilita a estilização (podemos direcionar .field no CSS)
Cria seções semânticas no formulário

A conexão entre for e id:

O atributo for="name" do rótulo corresponde ao id="name" do input
Isso associa o rótulo ao input
Clicar no rótulo foca o input
Leitores de tela anunciam o rótulo quando o input está em foco

Os tipos de input importam:

type="text" — Input de texto simples para nomes
type="email" — Valida o formato de e-mail, exibe teclado de e-mail no celular
type="date" — Exibe um seletor de data em navegadores modernos
<select> — Menu suspenso para escolher entre opções predefinidas
<textarea> — Texto de múltiplas linhas para observações

Por que isso é HTML puro: Note que não há $state, sem variáveis reativas, sem manipuladores de eventos. Isso é intencional. Estamos construindo a estrutura primeiro, depois adicionamos o comportamento. Essa é uma boa prática — acerte o HTML, depois torne-o interativo.

Usar o Componente

Agora que criamos o componente de formulário, vamos usá-lo na página de detalhes do serviço. É aqui que os usuários verão as informações do serviço e poderão reservar aquele serviço específico.

Como Funcionam as Importações de Componentes

No Svelte, usar um componente é um processo de duas etapas:

Importar o componente na sua tag <script>
Usá-lo na sua marcação como uma tag HTML

O nome do componente se torna uma tag HTML personalizada. Se você importar BookingForm, você o usa como <BookingForm />. A barra de auto-fechamento (/>) é importante — componentes sem filhos devem ser auto-fechados.

Adicionando à Página de Serviço

Atualize src/routes/services/[slug]/+page.svelte:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
	import BookingForm from '$lib/components/BookingForm.svelte'

	let { data } = $props()
</script>

<nav>
	<a href="/services">← Back to Services</a>
</nav>

{#if data.service}
	<h1>{data.service.name}</h1>
	<p>{data.service.description}</p>

	<dl>
		<dt>Price</dt>
		<dd>${data.service.price}</dd>

		<dt>Duration</dt>
		<dd>{data.service.duration} minutes</dd>
	</dl>

	<BookingForm />
{:else}
	<h1>Service Not Found</h1>
	<p>We couldn't find that service.</p>
	<a href="/services">Browse all services</a>
{/if}

O que Mudou?

Duas adições pequenas, mas cruciais:

1. A instrução de importação:

import BookingForm from '$lib/components/BookingForm.svelte';

Isso diz ao Svelte: "Quero usar o componente BookingForm do arquivo em src/lib/components/BookingForm.svelte."

import BookingForm — O nome que você usará na sua marcação (pode ser qualquer coisa, mas deve corresponder ao nome do arquivo)
from '$lib/components/BookingForm.svelte' — Onde encontrar o componente
A extensão .svelte é obrigatória (ao contrário de alguns frameworks onde você pode omiti-la)

2. Usando o componente:

<BookingForm />

Isso renderiza o componente neste local da sua página. É como colocar todo o conteúdo de BookingForm.svelte bem aqui, mas de uma forma limpa e reutilizável.

O / no final significa que esta é uma tag auto-fechada (sem filhos). Para componentes com filhos, você escreveria <BookingForm>conteúdo</BookingForm>, mas nosso formulário não precisa disso.

Onde na Página?

Colocamos <BookingForm /> após os detalhes do serviço:

<h1>{data.service.name}</h1>
<p>{data.service.description}</p>
<dl>...</dl>
<BookingForm /> ← Added here

Isso cria um fluxo lógico: os usuários leem sobre o serviço e, em seguida, veem imediatamente como reservá-lo.

O Alias `$lib`

Note que importamos de $lib/components/BookingForm.svelte, não de um caminho relativo como ../../../lib/components/BookingForm.svelte.

O SvelteKit fornece o alias $lib que sempre aponta para src/lib. Isso torna as importações mais limpas e evita a bagunça de ../../../ conforme seu projeto cresce.

<!-- ❌ Fragile — breaks if you move the file -->
import BookingForm from '../../../lib/components/BookingForm.svelte';

<!-- ✅ Stable — always works from anywhere -->
import BookingForm from '$lib/components/BookingForm.svelte';

Testar o Formulário

Vamos verificar se tudo funciona. Certifique-se de que seu servidor de desenvolvimento está rodando (npm run dev ou pnpm dev) e acesse uma página de detalhes de serviço.

Etapas de Teste

Navegue até um serviço:
- Acesse http://localhost:5173/services
- Clique em qualquer serviço (ex.: "Corte de Grama")
- Ou acesse diretamente http://localhost:5173/services/lawn-mowing
Verifique o layout: Você deve ver (de cima para baixo):
- Nome do serviço como título
- Descrição do serviço
- Informações de preço e duração
- O formulário de reserva com todos os campos
Tente interagir com o formulário:
- Digite no campo "Seu Nome" — o texto aparece
- Digite no campo "Endereço de E-mail" — o texto aparece
- Clique no seletor de data — o calendário abre
- Selecione um horário no menu suspenso — a opção muda
- Digite no campo de observações — o texto aparece
Clique no botão de envio:
- A página é atualizada
- Todos os dados digitados desaparecem
- Nada é salvo ou enviado a lugar nenhum

O Que Está Funcionando e O Que Não Está

✅ Funcionando:

O formulário é exibido corretamente
Todos os campos estão visíveis e estilizados
Você pode digitar e selecionar valores
A estrutura HTML está correta

❌ Ainda não está funcionando:

Os valores digitados não são rastreados em JavaScript
Nada acontece ao enviar o formulário
Sem validação
Sem prévia da reserva
Os dados não são salvos em nenhum lugar

Por Que Parece "Quebrado"

O formulário pode parecer quebrado porque ainda não faz nada. Isso é esperado! Construímos a estrutura (o esqueleto HTML), mas ainda não adicionamos o comportamento (o JavaScript que rastreia e responde à entrada do usuário).

É isso que corrigiremos na próxima lição, adicionando $state para rastrear os campos do formulário.

Por Que Componentes?

Você pode estar se perguntando: "Por que criar um arquivo separado? Por que não colocar o HTML do formulário diretamente na página do serviço?"

Essa é uma ótima pergunta, especialmente se você é novo no desenvolvimento baseado em componentes. Vamos explorar os benefícios.

1. Reutilização: Escreva Uma Vez, Use em Qualquer Lugar

Imagine que você decide exibir o formulário de reserva também em:

Uma página dedicada /book
Um popup modal quando os usuários clicam em "Reserva Rápida"
Uma página de administração para criar reservas de teste

Sem um componente, você copiaria e colaria o HTML do formulário em todos esses lugares. Agora você tem quatro cópias do mesmo formulário. Se precisar adicionar um novo campo, você o altera quatro vezes. Se encontrar um bug, você o corrige quatro vezes. Isso é um pesadelo de manutenção.

Com um componente:

<!-- Any page -->
<script>
	import BookingForm from '$lib/components/BookingForm.svelte'
</script>

<BookingForm />

Um componente, usos infinitos. Altere uma vez, atualiza em todos os lugares.

2. Organização: Separação de Responsabilidades

As páginas devem se concentrar nas responsabilidades de nível de página:

Quais dados carregar
Layout e estrutura da página
Quais componentes exibir

Elas não devem estar sobrecarregadas com os detalhes de cada formulário, modal ou widget complexo. Os componentes permitem separar o quê (a página) do como (a implementação do componente).

Compare:

<!-- ❌ Page does everything —  hard to scan -->
<h1>Service Details</h1>
<!-- 150 lines of form HTML -->
<!-- 50 lines of form logic -->
<!-- 80 lines of form styling -->

Versus:

<!-- ✅ Page delegates to component — easy to understand -->
<h1>Service Details</h1>
<BookingForm />

A segunda versão é mais fácil de entender em um primeiro olhar.

3. Isolamento: Prevenção de Bugs

Quando a lógica do formulário vive no mesmo arquivo que a lógica da página, elas podem interferir uma na outra. Nomes de variáveis podem entrar em conflito. Manipuladores de eventos podem afetar acidentalmente os elementos errados.

Os componentes criam fronteiras. A lógica do formulário fica em BookingForm.svelte. A lógica da página fica em +page.svelte. Eles se comunicam por meio de interfaces bem definidas (props e eventos), e não compartilhando estado global.

4. Testabilidade

Precisa testar o formulário de reserva? Se for um componente, você pode:

<script>
	import BookingForm from '$lib/components/BookingForm.svelte'
	import { mount } from 'svelte'

	// Test the form in isolation
	const form = mount(BookingForm, { target: document.body })
</script>

Se estiver incorporado em uma página, você teria que testar a página inteira, o carregamento de dados do serviço, o roteamento e tudo mais apenas para testar o formulário.

Paralelo com o Mundo Real

Pense em culinária. Você poderia escrever uma receita como um único parágrafo gigante descrevendo tudo, desde as compras até a apresentação do prato. Ou poderia dividi-la em seções: ingredientes, preparação, cozimento, serviço.

Os componentes são como essas seções — eles dividem interfaces complexas em partes gerenciáveis e nomeadas.

Quando Criar Componentes

Como regra geral, crie um componente quando:

Você o usará em vários lugares
É complexo o suficiente para sobrecarregar o arquivo pai
Representa um conceito de UI distinto (como um formulário, cartão, modal)
Você quer testá-lo de forma independente

Por ora, saiba apenas que o pensamento baseado em componentes é fundamental para o desenvolvimento web moderno. Exploraremos isso detalhadamente no Módulo 7: Componentes.

Sua Estrutura de Projeto

src/
├── lib/
│   └── components/
│       └── BookingForm.svelte    ← New component
└── routes/
    └── services/
        └── [slug]/
            ├── +page.js
            └── +page.svelte      ← Uses BookingForm

Erros Comuns

Caminho de Importação Incorreto

<!-- ❌ Missing file extension -->
import BookingForm from '$lib/components/BookingForm';

<!-- ✅ Include .svelte extension -->
import BookingForm from '$lib/components/BookingForm.svelte';

As importações de componentes Svelte exigem a extensão .svelte.

Componente Fora de `src/lib`

Você pode tecnicamente colocar componentes em qualquer lugar, mas src/lib é a convenção. Se você criar componentes em src/components em vez disso, o alias $lib não funcionará — você precisaria de importações relativas.

Resumo

Você criou o formulário de reservas do BookIt como um componente reutilizável. Ele reside em src/lib/components e pode ser importado em qualquer lugar usando o alias $lib. O formulário é renderizado, mas ainda não é interativo.

Principais conclusões:

Componentes são arquivos .svelte que você importa e usa como tags HTML
Coloque componentes reutilizáveis em src/lib/components
Use o alias $lib para importações limpas

O formulário é exibido, mas não rastreia o que os usuários digitam. Continue com Rastreie Campos do Formulário com $state para tornar o formulário reativo.