Estrutura

Componentes

Abaixo vocẽ pode ver a estrutura inicial de um componente svelte. Lembrou de algo? Bem parecido com um arquivo html.

<!-- App.svelte -->
<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
	h1 {
		color: #ff3d02;
	}
</style>

Se você veio de outros frameworks/bibliotecas como o React, deve ter estranhado a falta de um export default Component.

Bem, no svelte o componente é exportado como padrão de forma automática. Isso facilita nosso trabalho, pois evita aquele erro de importação.

Na próxima seção falaremos mais sobre cada uma das partes dos componentes.

Um detalhe importante é que a ordem não importa, ou seja você pode escrever assim:

<h1>Hello {name}!</h1>

<style>
	h1 {
		color: #ff3d02;
	}
</style>

<script>
	let name = 'world';
</script>

Apesar de plenamente possível, deixe na formatação padrão. Lembre-se dessa frase:

“Qualquer tolo consegue escrever código que um computador entenda. Bons programadores escrevem código que humanos possam entender.” Martin Fowler

Essa frase significa muito, pois nos mostra a importância de escrever bons códigos, pois outros programadores precisam entender o que nós fizemos sem muita dificuldade. Então tente seguir os padrões definidos e não fique inventando a sua forma de escrever código. Simplifique.

Html

As tags html representam a parte visual dos componentes. Se você estudou bem a estrutura html, fica fácil entender e utilizar no svelte.

Olhe esse exemplo.

<h1>Título</h1>
<p>Parágrafo</p>

Nada de mais, certo? Bom, isso não funcionaria se utilizado no React. Você precisaria de uma tag pai para agrupar essas duas tags. Ou então utilizar um React fragment.

<>
	<h1>Título</h1>
	<p>Parágrafo</p>
</>

Você vai perceber ao longo deste guia diversas comparações com o React, pois também utilizo nos meus projetos. É apenas uma comparação e não uma definição de qual é melhor. Aliás, se você fizer essa pergunta para mim, eu te devolvo a pergunta: Melhor em que?

Quer uma dica, aprenda os dois e aproveite o melhor que cada um tem a oferecer.

Um outro detalhe sobre as tags. Uma tag com letra inicial minúscula representa um elemento Html comum. Uma tag com letra Maiúscula representa um componente.

Tag comum:

<h1>Título</h1>
<p>Parágrafo</p>

Componente:

<Header />
<Sidebar />

Css

Um componente tem seus próprios estilos. Fazemos isso utilizando a tag <style>

Olhe o exemplo abaixo:

<style>
	p {
		color: red;
		font-size: 1em;
	}
</style>

O que você precisa saber é que os estilos definidos dentro de um componente tem um escopo local, ou seja, não interferem nos outros componentes.

Vamos ver na prática:

Abaixo eu crio um componente chamado Paragraph.svelte

<!-- Paragraph.svelte -->
<p>Parágrafo do componente</p>

<style>
	p {
		color: red;
		font-size: 1em;
	}
</style>

Defini uma cor e um tamanho de fonte.

Vou importar esse componente na minha página principal e inserí-lo no código.

<!-- App.svelte -->
<script>
	import Paragraph from './Paragraph.svelte';
</script>

<p>Parágrafo da página principal</p>
<Paragraph />

<style>
	p {
		color: green;
		font-size: 2rem;
	}
</style>

Você deve pensar que o estilo definido acima vai sobrescrever o estilo do componente <Paragraph />. Mas isso não acontece. Cada componente tem um escopo próprio. Pesquise sobre css modules.

Mas e se eu quiser aplicar um estilo padrão a todas as tags <p>, como posso fazer?

Simples, utilizando o seletor :global().

<!-- App.svelte -->
<script>
	import Paragraph from './Paragraph.svelte';
</script>

<p>Parágrafo da página principal</p>
<Paragraph />

<style>
	:global(p) {
		color: green;
		font-size: 2rem;
	}
</style>

Agora todas as tags <p> serão afetadas. Você pode fazer isso com classes e id’s. Exemplo: :global(.minha_classe) ou :global(#meu_id)

E como criar animações globais com @keyframes? Basta colocar um identificador -global- antes do nome da animação. Fazendo isso você consegue utilizar essa animação em qualquer componente.

<style>
	@keyframes -global-nome-da-animacao {
	}
</style>

Javascript

Nessa seção, veremos a terceira parte que compôe um componente svelte. A tag <script> .

Um bloco <script> contém JavaScript que é executado quando uma instância de componente é criada. Svelte docs

O trecho de código abaixo mostrará no console a mensagem: “Olá”

<script>
	console.log('Olá');
</script>

É dentro dessa tag é que a “mágica” acontece. Aqui nós criaremos nossas varíaveis, funções e outras coisas mais que darão “vida” aos nossos componentes. Por enquanto é apenas isso que você precisa saber sobre essa tag. Há mais coisas que veremos nas próximas páginas.

Vamos seguir…