Laravel Livewire v3.6: Novas Diretivas HTML e Ações JavaScript

O Laravel Livewire lançou sua versão 3.6 no final de fevereiro, trazendo recursos empolgantes para desenvolvedores que buscam criar interfaces dinâmicas e interativas com mais facilidade. Entre as novidades estão novas diretivas HTML para manipulação de elementos no DOM e o suporte a ações JavaScript, que permitem executar código no lado do cliente ou realizar atualizações otimistas antes de uma requisição ao servidor. Vamos explorar os destaques dessa atualização!

Ações JavaScript

Caleb Porzio, o criador do Livewire, introduziu o suporte a ações JavaScript, que são funções JavaScript definidas pelo desenvolvedor e chamadas a partir de eventos como wire:click ou diretamente via $wire. Essas ações podem ser usadas para executar código apenas no lado do cliente ou para aplicar atualizações otimistas antes de disparar uma requisição ao servidor.

Veja um exemplo prático retirado do Pull Request #9202:

<?php
use Livewire\\Volt\\Component;
 
new class extends Component {
    public function save()
    {
        *// Lógica de salvamento aqui...*
    }
};
?>
 
<div>
    <button wire:click="doSomething">Do Something</button>
</div>
 
@script
<script>
    $js('doSomething', () => {
        console.log('doSomething');
 
        $wire.save();
    });
</script>
@endscript

Além disso, é possível chamar ações JavaScript diretamente do PHP usando o método ->js():

$this->js('onPostSaved');

Essa funcionalidade abre portas para interações mais fluidas e personalizadas na interface do usuário. Para mais detalhes, consulte a documentação oficial sobre ações.

Novas Diretivas HTML

A versão 3.6 também trouxe novas diretivas HTML que tornam o Livewire ainda mais poderoso e intuitivo. Josh Hanley contribuiu com as diretivas wire:show e wire:text, enquanto Caleb Porzio adicionou wire:cloak e wire:transition.

• wire:show: Similar ao x-show do Alpine.js, essa diretiva controla a visibilidade de um elemento no DOM usando CSS. Veja um exemplo:

<div>
    <button x-on:click="$wire.showModal = true">Novo Post</button>
 
    <div wire:show="showModal">
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>
 
            <button type="submit">Salvar Post</button>
        </form>
    </div>
</div>

• wire:text: Equivalente ao x-text do Alpine.js, essa diretiva atualiza dinamicamente o conteúdo de um elemento, sendo ideal para interfaces otimistas. Confira este exemplo:

<div>
    <button x-on:click="$wire.likes++; $wire.like()">❤️ Curtir</button>
 
    Curtidas: <span wire:text="likes"></span>
</div>

Além disso, as diretivas wire:cloak e wire:transition ajudam a melhorar a experiência do usuário ao ocultar elementos antes do carregamento e adicionar transições suaves, respectivamente.

Para aprender mais sobre essas diretivas, acesse a documentação oficial:

• wire:cloak
• wire:show
• wire:text
• wire:transition

Notas de Lançamento

A lista completa de novos recursos e mudanças pode ser encontrada no diff entre as versões 3.5.20 e 3.6.0 no GitHub. Para um mergulho mais profundo, a documentação do Livewire é o lugar perfeito para começar.