Caleb Porzio apresentou o Livewire 4 no segundo dia da Laracon US 2025, revelando a próxima grande versão do Livewire. Não tenho como fazer justiça ao que Caleb apresentou, então faça um favor a si mesmo e assista à apresentação dele na Laracon US 2025 .

Tentarei compartilhar os destaques da melhor forma possível, mas acredite, assista à apresentação dele!

O Livewire 4 acrescenta alguns ganhos enormes de desempenho via Blaze, alguns DX adoram consolidar como criamos componentes e os organizamos, e muito mais:

• O Livewire 4 deve ter mudanças mínimas de interrupção
• Os componentes de arquivo único são o padrão com make:livewire
• Crie componentes multi-arquivo e colocalizados com make:livewire --mfc
• O Livewire::visit() método está chegando ao Pest 4 para fazer testes de navegador de componentes do Livewire
• Slots de componentes
• A @island diretiva
• E mais...

# Organização de componentes Livewire

A criação de componentes no Livewire 4 tem como padrão componentes de arquivo único, o que é uma maneira útil de colocalizar o código do componente para a visualização, a lógica do componente PHP e o JavaScript.

Se o seu componente começar a crescer — ou se você preferir arquivos separados para visualizações, componentes e JS — você pode criar componentes de vários arquivos (MFCs), que dividem todas as várias partes de um componente Livewire em arquivos separados, mas colocalizados:

Em MFCs, os arquivos JavaScript são servidos como módulos ES6 e permitem que você execute qualquer JS que desejar dentro do arquivo. Isso também resolve os problemas de destaque de sintaxe atualmente presentes em SFCs.

# Visita Livewire

O Livewire 4 tem uma API que funciona com o Pest 4 chamada Livewire::visit() , que executa um teste de componente do Livewire no navegador e utiliza o Playwright de forma semelhante à visit() API do Pest 4.

# Blaze, Slots, Ilhas, Oh Meu Deus!

O Livewire 4 suporta slots que funcionam como você esperaria {{ $slot }} , mas o verdadeiro destaque foram os enormes ganhos de desempenho do Blaze, que torna a renderização extremamente rápida!

Assim como o Blaze, o @island componente no Livewire 4 é útil para pegar uma parte cara de um componente e colocá-la em uma ilha. Na ilha, essa parte do componente não afetará o desempenho das outras partes. Usando o lazy: true argumento , você pode fazer a ilha carregar lentamente. Você também pode pesquisar uma ilha usando @island(poll: '5s') . Veja um exemplo da palestra de Caleb na Laracon US:

Qual recurso te deixou mais animado? Conte para a gente no seu aplicativo de mídia social favorito !