SvelteKit - Funcionalidades extras

Como já dito anteriormente, o Svelte é somente uma biblioteca para criação de componentes reativos. Vimos algumas de suas funcionalidades e exemplos.

O SvelteKit por outro lado é uma plataforma mais completa, que utiliza o Svelte como seu mecanismo de criar páginas e componentes, mas também algumas funcionalidades que permitem a criação de aplicações completas, inclusive com recursos de processamento do lado do servidor.

Algumas das funcionalidades são:

Páginas e roteamento (routing)

No SvelteKit existe o conceito de páginas. Cada página é simplesmente um componente Svelte, mas que é mapeado para uma rota específica, baseado no seu nome e na pasta que se encontra no projeto.

Exemplos em uma aplicação SvelteKit qualquer:

• A rota "/" (raiz do site) é direcionada para exibir o componente localizado no arquivo "src/routes/index.svelte"
• A rota "/quem-somos" é direcionada para exibir o componente localizado no arquivo "src/routes/quem-somos.svelte" ou "src/routes/quem-somos/index.svelte". Qualquer uma das alternativas, a que existir vai funcionar.
• A rota dinâmica "/cliente/35" ou "/cliente/72" vai exibir o componente "src/routes/cliente/[id].svelte". Repare que neste caso a pasta "src/routes/cliente" tem um arquivo chamado "[id].svelte" (sim, com colchetes no nome mesmo). Isso significa que o arquivo tem no nome um atributo dinâmico chamado "id" que é substituído pelo valor que o usuário passar na rota. Nesse exemplo "/cliente/35" vai passar 35 como o "id" e "/cliente/72" vai passar 72 com o "id". O valor do ID pode ser obtido dentro do arquivo "[id].svelte" como veremos mais à frente.

Mais informações sobre roteamento e páginas em: https://kit.svelte.dev/docs#routing

Endpoints

No SvelteKit existe o conceito de endpoints, que são rotas especiais que não mostram componentes Svelte, mas sim processam uma função javascript no lado do servidor e retornam um conteúdo desejado (um JSON por exemplo). Servem para se criar APIs dentro do próprio SvelteKit para uso pelos componentes da aplicação ou externo.

Não vamos explorar endpoints no nosso projeto da loja pois usaremos uma API externa que já foi criada no admin.

Para saber mais sobre endpoints acesse a documentação do SvelteKit.

Layouts

Layouts são componentes especiais que permitem que você crie um HTML que "envolve" todas as páginas que estão na mesma pasta que ele ou abaixo. É muito útil para se criar cabeçalhos e rodapés comuns a muitas páginas, por exemplo.

Os layouts sempre tem o nome "__layout.svelte" e ficam dentro de qualquer pasta ou subpasta em "src/routes".

Exemplo de um layout:

src/routes/__layout.svelte

<H1>Minha Loja Virtual</H1>

<DIV>Menu da loja</DIV>

<DIV>

<!-- No lugar da tag slot,  fica o conteúdo da página atual que se está acessando -->

<slot></slot>

</DIV>

<DIV>
    Rodapé da loja

</DIV>

Repare que o Layout tem um tag chamada que é substituída pela página que estamos acessando. Exemplo, se você acessar a rota /produtos/ativos/banana o SvelteKit vai procurar pelo componente "src/routes/produtos/ativos/[nomeDoProduto].svelte" e irá renderizar seu conteúdo no lugar da tag do layout "src/routes/__layout.svelte" retornando o HTML completo, com o conteúdo do Layout com o conteúdo da página no centro. É um recurso muito prático e útil.

Existem vários outros recursos no SvelteKit e vamos explorar ainda alguns deles na nossa loja on-line.