Novinky v Livewire v4

Skvělé nové funkce v Livewire 4

V nadcházející verzi Livewire 4 se vývojáři mohou těšit na řadu zajímavých nových funkcí.

V tomto článku se seznámíme s některými významnými funkcemi, které se objeví v Livewire 4, včetně slotů pro komponenty, atributů komponent a nového systému přístupu k jednomu souboru.

1. Nový View-First systém

Livewire 4 zavádí nový view-first systém, v němž lze komponenty definovat v jediném souboru. Tato změna podporuje přehlednější strukturu, ve které mohou logika HTML a PHP bez problémů koexistovat.

Single file components

Livewire komponenty již nebudou mít vlastní složku, ale budou se nacházet společně s ostatními komponentami v adresáři resources/views/components . Kromě toho budou mít nyní všechny komponenty livewire příponu .wire.php. Například komponenta counter by mohla být umístěna v adresáři resources/views/components/counter.wire.php .

@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>

Externí komponenty

Ti, kteří dávají přednost samostatné třídě pro svou Livewire komponentu, tak mohou učinit odkazem na třídu komponenty v horní části komponenty:

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

<div>
    Count: {{ $count }}

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

Další informace naleznete v plánu pro Livewire 4, na který je odkaz na konci článku.

2. Komponentové sloty

Jednou z mnou osobně nejočekávanějších funkcí v Livewire 4 je podpora slotů pro komponenty podobně jako fungují v blade komponentách.

Dosud Livewire komponenty žádné sloty nepodporovaly. Veškerá data se musela předávat prostřednictvím properties, což nebylo vždy příjemné.

Lze předpokládat, že v Livewire 4 získáme nějakou podporu jak pro výchozí sloty, tak pro pojmenované sloty, podobně jako u slotů v Blade komponentách.

Výchozí sloty

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

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

Takto může vypadat samotná Livewire komponenta:

// 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>

Pojmenované sloty

Pro pojmenované sloty bychom mohli očekávat něco jako následující syntaxi:

<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>

Další informace naleznete v plánu pro Livewire 4, na který je odkaz na konci článku.

3. Komponentové atributy

Další významnou funkcí systému Livewire 4 je přidaná podpora atributů komponent.

Tato funkce umožňuje vývojářům snadno předávat atributy přímo komponentám Livewire, podobně jako to umožňují blade komponenty.

Jedná se o obrovské vylepšení DX, které umožňuje snadno předávat třídy CSS nebo atributy HTML komponentám.

Takto může taková komponenta vypadat:

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

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

A zde je uvedeno, jak můžete komponentě předávat atributy:

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

V závislosti na zvolené konečné implementaci však existují určitá omezení. Podle informací dostupných v době psaní článku jsou atributy zachyceny při prvotním vykreslení a memoizovány. To znamená, že pozdější změny atributů se v podřízených komponentách neprojeví.

Další informace naleznete v roadmapě Livewire 4, na kterou odkazujeme na konci článku.

Závěr

Připravovaná verze Livewire 4 je vybavena mnoha úžasnými novými funkcemi, které dále zlepšují již tak vynikající vývojářské prostředí v rámci ekosystému Laravel.

Livewire 4 má být představen (a možná i v nějaké podobě zpřístupněn) na veletrhu Laracon US 2025. Zůstaňte naladěni na další aktualizace.

Mnoho příkladů a informací, které najdete v tomto článku, pochází z roadmapy Livewire 4. Podrobné informace o jednotlivých připravovaných funkcích a další informace naleznete v roadmapě zde.