Экосистема Laravel продолжает активно развиваться, и настало время новой major версии одного из самых пререкаемых инструментов - Laravel Livewire. 20 июля 2023 года выходит 3-я версия Laravel Livewire.

Перечислим самые важные новинки:

Новое ядро, основанное на Alpine: Ядро Livewire полностью переписано. Повысилась зависимость от Alpine, который используется "под капотом". По мнению Калеба, это означает "быстрое создание новых функций" и "меньшее дублирования между Livewire и Alpine".
Livewire scripts, styles и Alpine внедряются автоматически: После установки Livewire v3 вам больше не придется вручную добавлять @livewireStyles, @livewireScripts и Alpine в свой макет. Внедряется автоматически.
Горячая перезагрузка без этапа сборки: Livewire v3 включает горячую перезагрузку без этапа сборки. После сохранения файла файл вы мгновенно увидите эти изменения в своем браузере, при этом состояние компонентов не нарушится!
wire:transition: Livewire v3 наконец-то получит x-transition, вводится wire:transition. Добавьте wire:transition к любому элементу, который будет показан или скрыт с помощью Livewire, и получите "переходы".
Написание функций JavaScript в классах PHP: Livewire v3 поддерживает написание функций JavaScript непосредственно в серверных компонентах Livewire. Вы можете добавить функцию к своему компоненту, добавить комментарий /** @js */ над функцией, затем вернуть некоторый код JavaScript, используя синтаксис HEREDOC PHP. Вот тебе и "верьте в бэкенд"))
@locked свойства: Livewire v3 будет поддерживать заблокированные свойства - свойства, которые нельзя обновить с фронтенда.
wire:model deferred по умолчанию: "Отложенное" (deferred) поведение станет функциональностью по умолчанию в v3. По мнению многих, это избавит от ненужных запросов на сервер и повысит производительность.
Запросы группируются: Livewire v3 теперь "умно группирует запросы", чтобы wire:polls, events, listeners можно было объединить в один запрос.
Реактивные свойства: Старая проблема Livewire c nested components, похоже, решена. Добавив /** @prop */ над свойством в дочернем компоненте, обновив его в родительском компоненте, вы получите обновление в дочернем компоненте.
/ @modelable / свойства*: В Livewire v3 вы можете добавить wire:model при использовании компонента ввода, затем внутри компонента ввода добавить /** @modelable */ над свойством, где вы храните значение для компонента, и Livewire сделает остальное.
Доступ к данным и методам родительского компонента с помощью $parent: В Livewire v3 будет новый способ доступа к данным и методам родительского компонента.
@teleport: Livewire v3 также включит новую директиву Blade @teleport, которая позволит вам "телепортировать" кусок разметки и отрендерить его в другой части DOM.
Lazy "ленивые" компоненты: Livewire v3 появятся "ленивые" компоненты. Просто добавьте атрибут "lazy" при отображении компонента, и он изначально не будет отображаться при первоначальной загрузке.
wire:navigate: В Livewire v3 вы сможете добавить wire:navigate к любому anchor тегу, и при клике Livewire загрузит страницу в фоновом режиме, затем заменит DOM, что "добавит больше SPA-подобных ощущений".
@persist: Еще одна директива Blade, которую будет включать Livewire v3, - это @persist. Используя @persist в сочетании с wire:navigate, позволит сохранять "фрагменты приложения" при при переходе по страницам.

Livewire v. 3 — что же нового