Svelte - Componentes

Como já dito, um componente Svelte é um arquivo com a extensão ".svelte" como por exemplo: Usuario.svelte, Fatura.svelte, Cabecalho.svelte, etc. Você pode importar e usar componentes dentro de outros componentes, assim como passar atributos para os componentes, como se eles fossem novas TAGs HTML disponíveis no seu documento.

Vamos ver um exemplo em Svelte que tem um componente principal (App.svelte) que utiliza o componente Playlist.svelte, e este por sua vez utiliza o Musica.svelte.

Detalhando cada componente, do mais abaixo para o mais acima:

Musica.svelte

<script>
    export let nome;

</script>

<style>
    div {
        background-color: palegreen;
        margin-bottom: 10px;
        border: 2px dashed gray;
        padding: 5px;
    }

</style>

<div>

&#127925; Tocando: {nome}...    

</div>

Começando com o Musica.svelte. Ele tem uma variável chamada "nome". Repare que ela foi declarada com "export let nome;". O uso do export, faz com que a variável não só seja parte do estado do componente música, mas também ela automaticamente vira um atributo do componente, ou seja, quando você for usar o componente música, deve passar qual o seu nome, assim: .

A declaração de variáveis com o "export" sempre a converte em um atributo.

Esse componente é bem simples, somente exibindo o nome da música (atributo "nome") que será passado para ele quando ele for utilizado em um documento.

Repare também que o existe uma estilização do elemento "DIV" no Musica.svelte. É interessante observar que no Svelte estilos que são aplicados a elementos dentro de um componente não passam para outros componentes, então somente as DIVs dentro de Música recebem esse estilo.

Playlist.svelte

<script>
    import Musica from './Musica.svelte';

    export let nome;
    export let musicas;

</script>

<style>
    div {
        border: 3px solid green;
        margin: 10px;
        padding: 2px;
    }
    h1 {
        color: green;
        font-size: 20px;
    }

</style>

<div>
    <h1>
        Playlist: {nome}
    </h1>
    {#each musicas as nomeDaMusica}
        <Musica nome={nomeDaMusica} />
    {/each} 

</div>

O Playlist.svelte começa importando o componente Musica assim: import Musica from './Musica.svelte';

A Playlist por sua vez tem dois atributos que devem ser passados para ela quando ela for criada em um documento: o nome e a lista de músicas. Por enquanto esses atributos não tem valor definido, mas quando o App.svelte vou criar playlists, ele deve passar o nome e lista de músicas de cada uma que criar.

Esse componente somente exibe o nome da playlyst em um H1 e depois faz uma iteração na lista de músicas que será passado pra ela com o {#each} e para cada uma, cria um componente .

App.svelte

<script>
    import Playlist from './Playlist.svelte'

    let lancamentos = [
        'Cai cai balão',
        'Billie jean'
    ];

    let musicasQuestionaveis = [
        'Let it go',
        'Baby Shark'
    ];

</script>

<Playlist nome="Lançamentos" musicas={lancamentos} />

<Playlist nome="Musicas questionáveis" musicas={musicasQuestionaveis} />

Esse é o componente raíz da aplicação exemplo que estamos criando.

Veja que ele inicia importando o componente Playlist e logo depois cria duas listas de músicas, um chamado "lancamentos" e outro chamado "musicasQuestionaveis", cada array com uma lista de nomes.

Ao final são criadas duas Playlists, passando-se os atributos "nome" e "musicas", uma para cada array dos citados acima.

Resultado:

Só mostramos o básico do Svelte e existe muito mais para se aprender.

Para saber mais sobre o Svelte acesse https://svelte.dev/

É recomendável que você faça o tutorial oficial on-line disponível no site do Svelte. É realmente muito bem guiado e vai te dá uma visão muito mais profunda das funcionalidades disponíveis. Faça o tutorial do Svelte em: https://svelte.dev/tutorial