Усе, що нам відомо про Livewire 4

На другий день Laracon US 2025 Caleb Porzio презентував Livewire 4, демонструючи наступну велику версію Livewire. Не можу передати всіх нюансів його виступу, тому радимо подивитися презентацію Келеба на Laracon US 2025.

Намагатимусь викласти основні моменти, але все ж не пропустіть його виступ!

Livewire 4 надає суттєве підвищення продуктивності завдяки Blaze, вдосконалюючи досвід розробника у створенні компонентів та організації їх:

• У Livewire 4 мінімум змін, що ламають сумісність
• Компоненти в одному файлі — за замовчуванням з make:livewire
• Створення багатофайлових, сумісних компонентів за допомогою make:livewire --mfc
• Метод Livewire::visit() з’явиться в Pest 4 для тестування браузерних компонентів Livewire
• Компонентні слоти
• Директива @island
• Та багато іншого...

# Організація компонентів Livewire

У Livewire 4 компоненти за замовчуванням створюються в одному файлі, що зручно об'єднує код компонента для вигляду, PHP-логіки та JavaScript.

Якщо ваш компонент починає розростатися або ви віддаєте перевагу роботі з окремими файлами для виглядів, компонентів та JS, можна створити багатофайлові компоненти (MFC), які розділяють різні частини Livewire компонента на окремі, але сумісні файли:

У MFC JavaScript-файли постачаються як ES6 модулі, що дозволяє використовувати будь-який JS усередині файлу. Це також вирішує проблеми з підсвіткою синтаксису, які є у SFC.

# Livewire Visit

Livewire 4 має API, що працює з Pest 4, під назвою Livewire::visit(), що виконує тестування компонентів Livewire у браузері та використовує Playwright, подібно до API visit() у Pest 4.

# Blaze, Слоти, Острови — О, Боже!

Livewire 4 підтримує слоти, що працюють, як ви очікуєте, через {{ $slot }}, але справжнім відкриттям стали величезні прирости продуктивності завдяки Blaze, що робить рендеринг надзвичайно швидким!

Поряд з Blaze, компонент @island у Livewire 4 дозволяє винести частину компонента, яка вимагає великих ресурсів, на "острів". На такому острові ця частина компонента не вплине на продуктивність інших частин. Використовуючи аргумент lazy: true, можна налаштувати відкладене завантаження острова. Також можна виконувати опитування острова: @island(poll: '5s'). Ось приклад із виступу Келеба на Laracon US:

Яка з нових функцій вас найбільше вражає? Діліться враженнями у вашій улюбленій соціальній мережі!