Калеб Порціо щойно випустив офіційний Livewire v3! У своєму виступі в Laracon він продемонстрував тонну нових функцій, деякі з яких ми розглянемо тут, і ви можете переглянути повне відео:
Переписане ядро Ядро
Livewire було повністю переписано з нуля. Переписування ядра було величезним завданням, але необхідно було виконати все, що увійшло в цей реліз. Нову архітектуру ядра також буде набагато простіше підтримувати для учасників Caleb та ядра Livewire.
Використання
альпійських гір Ядро v3 тепер використовує Alpine на повну силу. Замість того, щоб включати код для застосування оновлень DOM, додавання обробників подій тощо як у Livewire, так і в Alpine, Livewire v3 використовує Alpine для важкої роботи. Зареєструвавши плагіни Alpine, Livewire тепер дозволяє Alpine виконувати важку роботу, забезпечуючи при цьому синтаксичний цукор, який ви полюбили.
Це також означає, що Alpine тепер включений за замовчуванням з Livewire, тому немає необхідності завантажувати Alpine через CDN або NPM. Він автоматично вводиться.
Крім того, v3 використовує плагін Alpine Morph для відмінності DOM і застосування оновлень замість morphdom. Це призведе до меншої кількості проблем, що відрізняються між DOM, і в цілому кращої сумісності між Livewire і Alpine.
Покращена вкладеність
компонентів У минулому я вважав вкладення компонентів Livewire антишаблоном або чимось, чого слід уникати, коли це можливо, через потенційні наслідки для продуктивності. У v3 цього не буде!
Завдяки реактивному реквізиту, пакетним запитам, новій $parent властивості та іншим покращенням, v3 значно покращує вкладення компонентів. Ми розглянемо деякі з цих покращень більш детально пізніше в цій публікації.
Покращена серіалізація
властивостей v2 намагалася інтелектуально визначити, які властивості типів були на початковому рендері, щоб регідратувати їх як ті самі типи на наступні запити. Однак v2 не підтримував глибоко вкладену гідратацію. Якби у вас була колекція зі змішаними типами, v2 не повертала б кожен предмет колекції до початкового типу. V3 набагато розумніший щодо цього і зберігає тип кожного елемента, щоб він міг повернути їх до належних типів за наступними запитами.
Пакетні запити У версії 2, коли кілька компонентів на сторінці опитували або прослуховували одну і ту ж подію, Livewire надсилав окремі запити
для кожного компонента кожного разу, коли йому потрібно було поговорити з сервером. v3 набагато ефективніший і об'єднує всі ці оновлення в один запит.
Кращі стандартні
налаштування Ін'єкція
маркера леза Відмінність DOM є однією з найпоширеніших проблем, з якими ви можете зіткнутися з v2. Проблема, як правило, була викликана @if і подібними директивами Blade, які вставляли або видаляли елементи DOM. v3 намагається обійти ці проблеми, вводячи HTML-коментарі (маркери) там, де ці директиви Blade починаються і закінчуються. Шукаючи ці маркери, Livewire може зіставити нові або видалені елементи DOM за допомогою маркера, щоб правильно розмістити їх у DOM.
<form wire:submit="save">
{{-- ... --}}
<!-- __BLOCK__ -->
@if ($success)
<div>Saved!</div>
@endif
<!-- ENDBLOCK -->
<div>
<button>Save</button>
</div>
<div>
wire:model відкладено за замовчуванням Спочатку «живий» Livewire був дійсно крутою функцією, тому його зробили за замовчуванням
. При подальших роздумах і спостереженні за реальним використанням, Калеб зрозумів, що відстрочка wire:model запитів була кращим за замовчуванням. Більшість програм насправді не потребують синхронізації вхідних значень із сервером при кожному натисканні клавіші, тому версія 3 перевертає поведінку за замовчуванням. Попередня wire:model.defer функціональність є новою за замовчуванням при використанні wire:model. wire:model.live була додана, щоб замінити стару поведінку за замовчуванням на входах, які насправді повинні бути "живими".
{{-- Now deferred by default --}}
<input wire:model="name">
{{-- Syncs with the server on every keystroke --}}
<input wire:model.live="name">
Нові можливості
Автоматично вводяться активи
У v3 Livewire автоматично вводить свої стилі, сценарії та Alpine. Більше не потрібно додавати <livewire:styles /> та<livewire:scripts />/або завантажувати Alpine у свої проекти!
Новий простір імен за замовчуванням За замовчуванням v3 використовує App\Livewire простір
імен (і app/Livewire каталог) замість App\Http\Livewire now. Існує параметр конфігурації, щоб зберегти старий простір імен, якщо ви віддаєте перевагу цьому.
Реактивні властивості Виходячи з інтерфейсних фреймворків, таких як React та Vue, деякі користувачі Livewire автоматично припускали, що властивості
, які вони передали у вкладені компоненти, будуть реагувати на зміни у батьківському елементі. Через деякі обмеження у v2 це було фактично неможливо. Нам довелося покладатися на події або інші обхідні шляхи для синхронізації вкладених компонентів. v3 додає підтримку «реактивного» реквізиту. Це так само просто, як додати #[Reactive] атрибут PHP до властивості у вашому класі компонентів.
<?php
// ...
use Livewire\Attributes\Reactive;
class InvoiceItem extends Component
{
#[Reactive]
public $item;
}Об'єкти форми Об'єкти
Об'єкти форми Об'єкти are a new concept that can help keep component classes clean by abstracting away some of the form-specific code. You may want to put a component's form properties, validation, saving functionality, and more on form objects.
Ось невеликий приклад, але я б рекомендував прочитати документацію для повного списку функцій!
<?php
namespace App\Livewire\Forms;
use Livewire\Form;
class UserForm extends Form
{
#[Rule('required')]
public $name = '';
#[Rule(['required', 'email'])]
public $email = '';
}<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Post;
use App\Livewire\Forms\UserForm;
class UpdateProfile extends Component
{
public UserForm $form;
public function save()
{
auth()->user()->update(
$this->form->all()
);
return $this->redirect('/profile');
}
public function render()
{
return view('livewire.update-profile');
}
}<form wire:submit="save">
<input type="text" wire:model="form.name">
<div>
@error('form.name')
<span class="error">{{ $message }}</span>
@enderror
</div>
<input type="email" wire:model="form.email">
<div>
@error('form.email')
<span class="error">{{ $message }}</span>
@enderror
</div>
<button type="submit">Save</button>
</form>
wire:navigate (Режим SPA)
Ще одним новим доповненням є wire:navigate. Якщо ви використовуєте компоненти Livewire на всю сторінку, тепер ви можете додати wire:navigate атрибут до посилань, щоб увімкнути SPA-подібний досвід. Замість того, щоб виконувати завантаження на всю сторінку, Livewire додасть індикатор завантаження у верхню частину сторінки, завантажить вміст нової сторінки у фоновому режимі, а потім інтелектуально замінить HTML-код на сторінці. Ця функція також підтримує попередню вибірку та перенаправлення та вмикає можливість збереження елементів.
<a href="/profile" wire:navigate>Profile</a>
@persist
З додаванням wire:navigate, тепер у вас можуть з'явитися "збережені" елементи, які не перезавантажуються під час навігації по різних сторінках. Ця функція буде зручною для таких випадків використання, як аудіоплеєри, які ви хочете продовжувати відтворювати аудіо, поки ваші користувачі натискають різні сторінки.
Щоб скористатися цією функцією, оберніть елемент, який ви хочете зберегти, у @persist директиву:
@persist('player')
<audio src="{{ $episode->file }}" controls></audio>
@endpersistЛіниві компоненти Livewire тепер підтримує ліниві компоненти
. Іноді у вас є компонент, який може уповільнити початкове завантаження сторінки або спочатку прихований всередині модалю, який ви хочете ліниво завантажити, щоб забезпечити швидке завантаження початкової сторінки.
Щоб ліниво завантажувати компонент, додайте lazy атрибут до компонента у вашому Blade.
<livewire:your-component lazy />
Livewire пропустить візуалізацію цього компонента під час початкового завантаження сторінки. Після завантаження всього іншого вмісту буде надіслано мережевий запит на повну візуалізацію компонента, і компонент буде вставлено в DOM.
$parent властивість
Для зв'язку з «батьківськими» компонентами в попередніх версіях Livewire доводилося використовувати події і слухачів. У v3 з'явилася нова $parent властивість, яку можна використовувати для виклику методів на батьківських компонентах безпосередньо від дочірніх.
<div>
<span>{{ $item->name }}</span>
<button wire:click="$parent.remove({{ $item->id }})">Remove</button>
</div>
Гібридні методи/оцінка JS з бекенда
v3 дозволяє писати методи JavaScript у ваших серверних компонентах зараз. Додавши #[Js] атрибут до методу на компоненті, ви можете написати код JavaScript у вигляді рядка, і Livewire надасть цей метод вашому інтерфейсу. При виклику wire:clickчерез , JavaScript буде виконуватися на фронтенді без мережевих запитів, що відправляються назад на сервер.
<?php
// ...
use Livewire\Attributes\Js;
class UsersTable extends Component
{
public $filters = [];
#[Js]
public function reset()
{
return <<<'JS'
$wire.filters = [];
JS;
}
// ...
}<div>
<div>
<input wire:model.live="filters.active" type="checkbox">
<label>Only active</label>
</div>
<button wire:click="reset">Reset Filters</button>
@foreach ($users as $user)
{{-- ... --}}
@endforeach
</div>
Іноді корисно виконувати невеликі біти JavaScript з ваших бекенд-методів. v3 вмикає це за допомогою методу$this->js(). Просто викличте метод і введіть рядок JavaScript, і Livewire виконає його на інтерфейсі на наступному рендері.
public function save()
{
// ...
$this->js("alert('You just executed JS from the backend!')");
}Використання
атрибутів PHP Атрибути PHP є відносно новою та потужною функцією для PHP, і Livewire v3 значною мірою використовує їх для нових та існуючих функцій.
#[Url]
Новий #[Url] атрибут замінює властивість $query v2. Додайте #[Url] над будь-якою властивістю компонента, і вона буде відстежуватися в рядку запиту.
<?php
// ...
use Livewire\Attributes\Url;
class UsersTable extends Component
{
#[Url]
public $filters = [];
// ...
}#[On]
Новий #[On] атрибут замінює властивість $listeners v2. Додайте #[On('some-event')] вище метод на вашому компоненті, і він буде виконуватися кожного разу, коли ця подія буде відправлена. та Нові #[Layout] та
<?php
// ...
use Livewire\Attributes\Url;
class UsersTable extends Component
{
// ...
#[On('filters-reset')]
public function resetFilters()
{
// ...
}
}#[Title]#[Title] атрибути дозволяють встановлювати вигляд макета та заголовок для компонентів на всю сторінку.
#[Layout] Вони можуть додаватися за методом render компонента або на самому класі.
#[Layout('layouts.app')]
public function render()
{
return view('livewire.create-post');
}#[Computed]
Замінивши синтаксис v2 getSomeProperty на обчислені властивості, ми отримаємо #[Computed] атрибут. Він функціонує так само, як і старий синтаксис, але має деякі нові, дійсно потужні доповнення.
У версії 2 обчислені властивості можна кешувати лише під час одного запиту. У v3 властивість можна кешувати для кількох запитів і навіть для компонентів. Це зробить кешування дорогих запитів до бази даних легким!
use Livewire\Attributes\Computed;
// Cache across requests
#[Computed(persist: true)]
public function user()
{
return User::findOrFail($this->userId);
}
// Cache across all instances of this component
#[Computed(cache: true)]
public function user()
{
return User::findOrFail($this->userId);
}#[Rule]
Новий #[Rule] атрибут замінює властивість $rules і rules метод з v2. Додайте #[Rule(['required', 'max:150'])] до властивості вашого компонента, щоб повідомити Livewire, як його слід перевіряти.
<?php
// ...
use Livewire\Attributes\Rule;
class InvoiceItem extends Component
{
#[Rule(['required', 'max:120'])]
public $itemName;
// ...
}#[Locked]
Новий #[Locked] атрибут дозволяє заборонити користувачеві оновлювати властивість з інтерфейсу. Ви можете використовувати це як захід безпеки для ресурсів, які користувачі не зможуть змінювати.
<?php
// ...
use Livewire\Attributes\Locked;
class InvoiceItem extends Component
{
#[Locked]
public $id;
// ...
}Оновлення
Процес оновлення для більшості програм буде досить швидким. У бета-версію включено команду ремісника, яка допоможе з деякими з найбільш виснажливих змін, а потім ви можете слідувати посібнику livewire:upgrade з оновлення, щоб переконатися, що все оновлено.
Якщо ви хочете залишити оновлення експертам Livewire, ми з Калебом пропонуємо послугу, щоб дати вам швидкий початок процесу оновлення. Ви можете перевірити це тут.
Новий дизайн сайту та домен
На додаток до всіх нових функцій та покращень, сайт документів Livewire був повністю перероблений, перебудований та переписаний!
Нові документи набагато ретельніші, ніж документи v2. Вони детально розглядають кожну функцію та детально розповідають про те, як Livewire обробляє гідратацію, морфінг та вкладені компоненти під капотом. Рекомендую прочитати весь сайт, як у вас є час. Це майстер-клас зі створення програм Livewire v3!
Ще одне гучне оголошення полягає в тому, що сайт документів переноситься на livewire.laravel.com. Продовжуйте туди і перевірте!
Це був довгий пост, але було так багато нових функцій для висвітлення! Я сподіваюся, що незабаром ви спробуєте v3 і не соромтеся звертатися з відгуками про покращення.
