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

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

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

1. Новое ядро, основанное на Alpine: Ядро Livewire полностью переписано, увеличивая зависимость от Alpine и используя его под капотом. По мнению Калеба, это означает улучшенное сравнение изменений, быстрое создание новых функций и меньше дублирования между Livewire и Alpine.

2. Livewire scripts, styles и Alpine внедряются автоматически: После установки Livewire v3 вам больше не придется вручную добавлять @livewireStyles, @livewireScripts и Alpine в свой макет. Все это внедряется автоматически.

3. Горячая перезагрузка без этапа сборки: Livewire v3 включает горячую перезагрузку без этапа сборки. Просто сохраните файл в своем редакторе и мгновенно увидите эти изменения в своем браузере, не нарушая состояние ваших компонентов!

4. wire:transition: Livewire v3 будет иметь оболочку вокруг x-transition, называемую wire:transition. Добавьте wire:transition к любому элементу, который будет показан или скрыт с помощью Livewire, и получите очень переходы.

5. Написание функций JavaScript в ваших классах PHP: Livewire v3 поддерживает написание функций JavaScript непосредственно в ваших серверных компонентах Livewire. Вы можете добавить функцию к своему компоненту, добавить комментарий /** @js */ над функцией, затем вернуть некоторый код JavaScript, используя синтаксис HEREDOC PHP, и вызвать его из своего фронтенда. Вот тебе и «верьте в бэкенд»))

6. @locked свойства: Livewire v3 будет поддерживать заблокированные свойства — свойства, которые нельзя обновить с фронтенда.

7. wire:model deferred по умолчанию: «Отложенное» (deferred) поведение станет функциональностью по умолчанию в v3. По мнению многих, это экономит ненужные запросы на сервер и повышает производительность.

8. Запросы группируются: Livewire v3 теперь «умно группирует запросы», чтобы wire:polls, events, listeners можно было объединить в один запрос.

9. Реактивные свойства: Старая проблема Livewire c nested components, похоже, решена. Добавив /** @prop */ над свойством в дочернем компоненте, обновив его в родительском компоненте, влечет обновление в дочернем компоненте.

10. / @modelable / свойства*: В Livewire v3 вы можете добавить wire:model при использовании компонента ввода, затем внутри компонента ввода добавить /** @modelable */ над свойством, где вы храните значение для компонента, и Livewire сделает остальное.

11. Доступ к данным и методам родительского компонента с помощью $parent: В Livewire v3 будет новый способ доступа к данным и методам родительского компонента.

12. @teleport: Livewire v3 также включит новую директиву Blade @teleport, которая позволит вам «телепортировать» кусок разметки и отрендерить его в другой части DOM.

13. Lazy «ленивые» компоненты: Livewire v3 появятся «ленивые» компоненты. Просто добавьте атрибут «lazy» при отображении компонента, и он изначально не будет отображаться.

14. wire:navigate: В Livewire v3 вы сможете добавить wire:navigate к любому anchor тегу, и при клике Livewire загрузит страницу в фоновом режиме, затем заменит DOM, что «добавит больше SPA-подобных ощущений».

15. @persist: Еще одна директива Blade, которую будет включать Livewire v3, — это @persist. Используя @persist в сочетании с wire:navigate, позволит сохранять «фрагменты приложения» при при переходе по страницам.