O Svelte é uma estrutura simples e fácil de usar e suas últimas alterações devem torná-lo ainda mais fácil.

Em junho de 2023, Svelte anunciou seu lançamento estável mais recente, a versão 4. A atualização do Svelte 4 é principalmente uma versão de manutenção do Svelte 3, destinada a preparar o terreno para a próxima geração do Svelte ser lançada como Svelte 5.

O Svelte 4 adiciona várias melhorias ao ecossistema Svelte, incluindo um redesenho do site, definindo transições locais como padrão, melhorando o suporte a componentes da Web e mudando de TypeScript para JSDoc.

1. Redesenho Svelte do Site

Svelte 4 chegou junto com melhorias no oficial site Svelte. O novo visual do site é fantástico, com documentos TypeScript aprimorados, uma opção de modo escuro, e uma experiência de usuário geralmente aprimorada em todos os dispositivos.

O site Svelte agora possui um REPL aprimorado que permite que você experimente o código Svelte diretamente no navegador.

Além disso, todos os links de tutoriais do Svelte agora apontam para a nova experiência dos alunos do Svelte, enquanto tutoriais antigos estão disponíveis para usuários do Safari 16.3 e versões anteriores.

instagram viewer

2. As transições locais são padrão

Imagine a experiência dolorosa de ter que se contentar com transições CSS depois de ver sua página carregar por mais tempo do que o esperado porque você usou transições Svelte.

Normalmente, uma transição é reproduzida quando você destrói um bloco pai. Você pode substituir esse comportamento com o |local modificador. Isso faz com que a transição seja executada somente quando você destrói o bloco que contém o componente de destino. Em Svelte 4, este |local modificador é definido como padrão para transições.

No trecho abaixo, uma transição de slide é adicionada localmente ao div elemento:

 {item}

3. Suporte aprimorado de componentes da Web

Svelte sempre promoveu a reutilização e manutenção, daí seu suporte contínuo para componentes web. Os componentes da Web permitem criar elementos HTML personalizados reutilizáveis ​​com estilos e comportamentos injetados.

O Svelte 4 muda a forma como gera componentes web, removendo bugs e inconsistências. Essas mudanças incluem:

  • Exportar cria uma propriedade de componente, tornando-a acessível aos consumidores de componentes.
  • As atribuições são reativas. Para alterar o estado de um componente e acionar uma nova renderização, atribua-o a uma variável declarada localmente.
  • Use o $ símbolo no início de uma instrução para marcá-la como uma instrução reativa. As instruções reativas são executadas após outro código de script e antes da renderização da marcação do componente, sempre que os valores dependentes são alterados.
  • Ao criar objetos de armazenamento, prefixe o armazenamento com $ para permitir o acesso reativo a um valor.
  • Configurando o atributo de contexto de uma tag de script para módulo faz com que o script seja executado uma vez quando o módulo é avaliado pela primeira vez, e não para cada instância do componente.

4. A mudança de TypeScript para JSDoc

JSDoc é uma ferramenta de documentação que suporta a inclusão de anotações de tipo e comentários em códigos JavaScript.

Considerando que o JSDoc engana os desenvolvedores para documentar seus códigos, esta migração visa encorajar mais desenvolvedores Svelte a formar o hábito de documentar adequadamente seus códigos. Uma base de código JavaScrpt adequadamente documentada exigiria pouca ou nenhuma verificação de tipo.

Se você é novo no TypeScript, você deve explore o TypeScript e descubra por que os desenvolvedores o preferem.

Migrando para o Svelte 4

O Svelte 4 aprimorou o desempenho e simplificou o desenvolvimento, o que é excelente para criar aplicativos da Web de alto desempenho. Esta nova versão também deve incentivar uma melhor documentação de código com a mudança para JSDoc.

O Svelte continua a melhorar e, embora não seja uma estrutura com a qual todos os desenvolvedores estejam familiarizados, aqueles que a elogiam fortemente.