Livewire 3 і 4 — що змінилося

# 1. Підняти залежність
composer require livewire/livewire:^4.0

# 2. Очистити всі кеші
php artisan optimize:clear

# 3. Прогнати тести, перш ніж чіпати щось іще
php artisan test

'component_layout' => 'layouts::app',

'component_placeholder' => 'livewire.placeholder',

'component_locations' => [
    'resources/views/components',
    'resources/views/livewire',
],

'component_namespaces' => [
    'pages' => 'resources/views/pages',
],

// Продовжувати генерувати класові компоненти
'make_command' => [
    'type' => 'class',
],

use App\Livewire\Dashboard;

Route::get('/dashboard', Dashboard::class)
    ->middleware('auth')
    ->name('dashboard');

use App\Livewire\Dashboard;

Route::livewire('/dashboard', Dashboard::class)
    ->middleware('auth')
    ->name('dashboard');

// Або за іменем компонента
Route::livewire('/dashboard', 'pages::dashboard')
    ->middleware('auth')
    ->name('dashboard');

<livewire:user-profile>
<livewire:order-list>

<livewire:user-profile />
<livewire:order-list />

# Теги компонентів, які не самозакриті
grep -rn "<livewire:[^>]*[^/]>" resources/views/

# Форма через директиву @livewire() не зачеплена
grep -rn "@livewire(" resources/views/

<input wire:model.blur="title">
<select wire:model.change="status">

<input wire:model.live.blur="title">
<select wire:model.live.change="status">

<div wire:model="value">
    <input type="text">
</div>

<div wire:model.deep="value">
    <input type="text">
</div>

# Усі wire:model з модифікатором
grep -rn "wire:model\.[a-z]" resources/views/

# wire:model на не-input елементі — кандидат на проблему зі спливанням
grep -rn "<div[^>]*wire:model" resources/views/

location /livewire/ {
    # …
}

location ~ ^/livewire(-[a-z0-9]+)?/ {
    # …
}

<div wire:transition.opacity.duration.300ms>
    …
</div>

<div wire:transition>
    …
</div>

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 300ms;
}

$this->stream(to: '#container', content: 'Hello', replace: true);

$this->stream('Hello', replace: true, el: '#container');

mount($name, $params = [], $key = null)

mount($name, $params = [], $key = null, $slots = [])

$wire.$js('showToast', { message: 'Збережено' });

$wire.$js.showToast = { message: 'Збережено' };

document.addEventListener('livewire:init', () => {
    Livewire.hook('request', ({ options, fail }) => {
        options.headers['X-Tenant'] = window.tenantId;

        fail(({ status, preventDefault }) => {
            if (status === 419) {
                preventDefault();
                window.location.reload();
            }
        });
    });
});

document.addEventListener('livewire:init', () => {
    Livewire.interceptRequest(({ options, fail }) => {
        options.headers['X-Tenant'] = window.tenantId;

        fail(({ status, preventDefault }) => {
            if (status === 419) {
                preventDefault();
                window.location.reload();
            }
        });
    });

    Livewire.interceptMessage(({ component, succeed }) => {
        succeed(() => {
            console.debug('компонент оновлено', component.name);
        });
    });
});

{{-- Помилки валідації на клієнті --}}
<div x-show="$errors.has('email')" x-text="$errors.first('email')"></div>

composer remove livewire/volt

<?php

use Livewire\Volt\Component;

new class extends Component {
    public string $title = '';
};

?>

<div>…</div>

<?php

use Livewire\Component;

new class extends Component {
    public string $title = '';
};

?>

<div>…</div>

<div>
    <div class="card">Виручка: {{ $this->revenue }}</div>
    <div class="card">Завдань у черзі: {{ $this->queue }}</div>
    <div class="card">Остання активність: …</div>
</div>

<div>
    @island(name: 'revenue')
        <div class="card">Виручка: {{ $this->revenue }}</div>
    @endisland

    @island(name: 'queue', poll: '5s')
        <div class="card">Завдань у черзі: {{ $this->queue }}</div>
    @endisland

    @island(name: 'activity', lazy: true)
        @placeholder
            <div class="card skeleton animate-pulse h-48"></div>
        @endplaceholder

        <div class="card">Остання активність: …</div>
    @endisland
</div>

<button wire:click="$toggle('showFilters')">Фільтри</button>

@if ($showFilters)
    <div class="filters">…</div>
@endif

<button wire:click="$toggle('showFilters')">Фільтри</button>

<div class="filters" wire:show="showFilters">…</div>

<ul wire:sort="reorder">
    @foreach ($tasks as $task)
        <li wire:sort:item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
            <span wire:sort:handle>⠿</span> {{ $task->title }}
        </li>
    @endforeach
</ul>

use Livewire\Attributes\Renderless;

#[Renderless]
public function trackView(): void
{
    $this->post->increment('views');
}