Introdução ao Svelte

⁉️ O QUE É O SVELTE?

O Svelte nada mais é que uma ferramenta e framework JS para criar componentes, basicamente como o React ou Angular. Porém, ao contrário desses, o Svelte compila seu código para um que possa ser nativamente interpretado pelo seu navegador, permitindo que você tenha um código de alta performance com menor tamanho de downlod.

🛠️ TYPESCRIPT (OPCIONAL)

SVELTE COM TYPESCRIPT

O uso do TypeScript em conjunto com o Svelte é altamente recomendado. Com o TypeScript, você adiciona verificação de tipo ao JavaScript, melhorando a robustez do código. Integrado ao Svelte, que oferece eficiência e clareza, essa combinação resulta em um desenvolvimento web mais confiável e produtivo. Comece aproveitando o potencial dessas ferramentas visitando o site oficial do TypeScript: https://www.typescriptlang.org/

📖 BASE

Nós criamos cada componente Svelte num arquivo com a extensão... advinha... .svelte. Cada arquivo de componente possui três partes principais: a lógica, a estilização e o template. Exemplo:

<script lang="ts">
    //aqui fica o código da lógica em TypeScript.
    //mas se preferir, pode retirar o lang=ts para
    //usar JavaScript puro
</script>

<style lang="scss">
    //aqui em lang eu optei por usar Sass,
    //mas você pode remover essa prop para
    //usar CSS puro
</style>

<p>
    Componente renderizado!
</p>

🔢 ESTADO

Podemos declarar uma variável e interpolá-la em nosso componente usando as chaves. O componente será automaticamente rerenderizado e atualizado com o novo valor.

<script>
    let clicks = 0;
</script>

<button>
    Clicou aqui {clicks} vezes
</button>

🚨 EVENTOS

O código acima ainda não funciona quando pressionamos o botão porque ainda não atribuimos um evento a ser disparado quando ocorrer a ação de clique.

A sintaxe é bem simples: usamos ON seguido pela ação e fazemos um binding com o nome da função que será chamada.

<script>
    let clicks = 0;

    function onClick(){
        clicks += 1;
    }
</script>

<button>
    Clicou aqui {clicks} vezes
</button>

Temos nosso primeiro componente funcional! Com eventos e estado!

🔁 RENDERIZAÇÃO CONDICIONAL E LOOP

E se quiséssemos renderizar alguma mensagem somente se o número de clicks for zero, por exemplo? É aí que entra em cena a renderização condicional. Observemos:

<script>
    let clicks = 0;

    function onClick(){
        clicks += 1;
    }
</script>

<button>
    Clicou aqui {clicks} vezes
</button>

{#if clicks == 0}
    <p>Você não clicou nenhuma vez</p>
{/if}

A mensagem só será renderizada quando a condição dentro do bloco #if for satisfeita.

E se tivéssemos um array de usuários e quiséssemos renderizar um componente para cada? É para isso que existe o #each.

let users = ["Andrew", "Calleb", "Kylle", "Tauri"];

{#each users as user}
    <p>Olá, {user}</p>
{/each}

🧩 PROPS

Para passar dados para um componente children basta usarmos a palavra-chave export na frente da variável que transformaremos numa prop acessível a partir do componente pai.

• User.svelte

<script>
    export let name;
</script>

<p>Olá, {user}</p>

• Home.svelte

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

{#each users as user}
    <User name={name}>
{/each}

---

Bom, é isso! Esse era para ser um tutorial sucinto de introdução ao Svelte, portanto optei por não abordar assuntos mais complexos, como Store, Context, mas você pode encontrá-los nesse site oficial altamente didático.

Caso após o tutorial tenha decidido que realmente quer aprender mais sobre a ferramenta, lhe desejo boa sorte! Lembrando que ajuda bastante já ter conhecimento sobre algum outro framework web e, ESPECIALMENTE JavaScript!