Was ist neu in Livewire v4

Großartige neue Funktionen in Livewire 4

Mit der bevorstehenden Veröffentlichung von Livewire 4 können sich Entwickler auf eine ganze Reihe spannender neuer Funktionen freuen.

In diesem Artikel stellen wir Ihnen einige der herausragenden Funktionen von Livewire 4 vor, darunter Komponentenslots, Komponentenattribute und ein neues View-First-System mit einem einzigen Dateiansatz.

1. Neues View-First-System

Livewire 4 führt ein neues View-First-System ein, bei dem die Komponenten in einer einzigen Datei definiert werden können. Diese Änderung fördert eine klarere Struktur, in der die HTML- und PHP-Logik nahtlos nebeneinander bestehen können.

Single-file components

Livewire-Komponenten haben kein eigenes Livewire-Verzeichnis mehr, sondern befinden sich zusammen mit Ihren anderen Komponenten in resources/views/components . Abgesehen davon haben alle Livewire-Komponenten jetzt die Endung .wire.php. Eine Zählerkomponente könnte sich zum Beispiel in resources/views/components/counter.wire.php befinden.

@php
new class extends Livewire\Component {
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
}
@endphp

<div>
    Count: {{ $count }}

    <button wire:click="increment">Increment</button>
</div>

Externe Komponenten

Diejenigen, die eine eigene Klasse für ihre Livewire-Komponente bevorzugen, können dies immer noch tun, indem sie die Komponentenklasse am Anfang der Livewire-Komponente referenzieren:

@php(new \App\Livewire\Components\Counter)

<div>
    Count: {{ $count }}

    <button wire:click="increment">Increment</button>
</div>

Weitere Informationen finden Sie in der Livewire 4 Roadmap, die am Ende des Artikels verlinkt ist.

2. Komponenten-Steckplätze

Eine der von mir persönlich am meisten erwarteten Funktionen in Livewire 4 ist die Unterstützung von blattähnlichen Komponentensteckplätzen.

Bis jetzt unterstützten Livewire-Komponenten keine Slots jeglicher Art. Alle Daten mussten über Eigenschaften übergeben werden, was nicht immer angenehm zu handhaben war.

Wir können davon ausgehen, dass wir in Livewire 4 eine Art Unterstützung sowohl für Standard-Komponentenslots als auch für benannte Komponentenslots, ähnlich wie bei Blade-Komponentenslots, erhalten werden.

Standard-Slots

// Livewire v3
<wire:modal title="Create" />

// Livewire v4
<wire:modal>Create</wire:modal>

So könnte die Livewire-Komponente selbst aussehen:

// modal.wire.php

@php
new class extends Livewire\Component {
    public $isOpen = false;

    public function toggle()
    {
        $this->isOpen = ! $this->isOpen;
    }
}
@endphp

<div wire:show="isOpen">
    <button wire:click="toggle">Close</button>

    {{ $slot }}
</div>

Benannte Steckplätze

Für benannte Steckplätze könnte die Syntax etwa wie folgt aussehen:

<wire:modal>
    <wire:slot name="header">
        <h1>Create post</h1>
    </wire:slot>

    <form>
        <input wire:model="title">
        @if ($saved) Form saved successfully! @endif
    </form>
</wire:modal>

// modal.wire.php

@php
new class extends Livewire\Component {
    public $isOpen = false;

    public function toggle()
    {
        $this->isOpen = ! $this->isOpen;
    }
}
@endphp

<div wire:show="isOpen">
    @if ($header = $slot('header'))
        {{ $header }}
    @endif

    <button wire:click="toggle">Close</button>

    {{ $slot }}
</div>

Weitere Informationen finden Sie in der Livewire 4 Roadmap, die am Ende des Artikels verlinkt ist.

3. Attribute der Komponente

Eine weitere wichtige Funktion in Livewire 4 ist die zusätzliche Unterstützung von Komponentenattributen.

Diese Funktion ermöglicht es Entwicklern, Attribute direkt an Livewire-Komponenten weiterzuleiten, ähnlich wie dies bei Blade-Komponenten möglich ist.

Dies ist eine enorme DX-Verbesserung, die es Ihnen ermöglicht, CSS-Klassen oder HTML-Attribute einfach an Ihre Komponenten weiterzugeben.

So könnte eine solche Komponente aussehen:

@php
new class extends Livewire\Component {
    #[Prop]
    public string $type = 'info';
}
@endphp

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $slot }}
</div>

And here is how you could pass attributes to the component:

<!-- Usage -->
<wire:alert type="error" class="mb-4" id="error-alert" data-testid="alert">
    Something went wrong!
</wire:alert>

Allerdings gibt es je nach der gewählten endgültigen Implementierung gewisse Einschränkungen. Nach den zum Zeitpunkt der Erstellung dieses Berichts verfügbaren Informationen werden die Attribute beim ersten Rendering erfasst und gespeichert. Dies bedeutet, dass spätere Änderungen an den Attributen nicht in den untergeordneten Komponenten wiedergegeben werden.

Weitere Informationen finden Sie in der Livewire 4 Roadmap, die am Ende des Artikels verlinkt ist.

Schlussfolgerung

Das kommende Livewire 4 ist vollgepackt mit einer Menge großartiger neuer Funktionen, die die bereits hervorragende Entwicklererfahrung innerhalb des Laravel-Ökosystems weiter verbessern.

Livewire 4 soll auf der Laracon US 2025 vorgestellt werden (und vielleicht sogar in irgendeiner Form verfügbar sein). Bleiben Sie dran für weitere Updates.

Viele der Beispiele und Informationen in diesem Artikel stammen aus der Livewire 4 Roadmap. Detaillierte Informationen zu den einzelnen kommenden Funktionen und mehr finden Sie in der Roadmap hier.