Livewire 4: Evolusi Terbesar yang Bikin Ngoding Makin Nikmat

Kalau kamu pengguna Livewire, satu hal yang pasti: Livewire 4 bukan sekadar update biasa. Ini adalah rilis paling besar sepanjang sejarah Livewire.

Tapi tenang…Ini bukan tentang nambah kerumitan, justru kebalikannya:

default yang lebih masuk akal friction makin kecil dan tools yang lebih kuat buat bikin UI modern tanpa ribet

Tim Livewire benar-benar rethink ulang: “Gimana sih seharusnya komponen Livewire itu terasa saat dipakai sehari-hari?”

Dan jujur saja… hasilnya keren.

Mari kita bahas satu per satu, pelan-pelan.

1. View-based Components: Satu File, Beres

Perubahan paling kelihatan di Livewire 4 adalah cara nulis komponen.

Di Livewire 3, kita biasa bolak-balik:

• satu file PHP (class)
• satu file Blade (view)

Sekarang? Semua bisa dalam satu file Blade.

<?php // resources/views/components/⚡counter.blade.php

use Livewire\Component;

new class extends Component {
    public $count = 0;

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

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

<style>
    /* CSS khusus komponen ini */
</style>

<script>
    /* JavaScript khusus komponen ini */
</script>

Kenapa ini penting?

• State, logic, tampilan → deket semua
• Lebih gampang dipahami
• Cocok buat komponen kecil sampai menengah

Dan ya… ikon ⚡ itu memang sengaja. Biar sekali lihat di file tree, kamu langsung tahu:

“Oh ini Livewire, bukan Blade biasa.”

Kalau kamu tim “rapi-rapi enterprise”, tenang…

2. Multi-file Components (MFC): Tetap Rapi Kalau Sudah Gede

Untuk komponen besar, Livewire 4 tetap mendukung format terpisah tapi dalam satu folder:

⚡counter/
├── counter.php
├── counter.blade.php
├── counter.css      (opsional)
├── counter.js       (opsional)
└── counter.test.php (opsional)

Bikin pakai:

php artisan make:livewire Counter --mfc

Dan yang keren: bisa convert bolak-balik kapan saja**.

php artisan livewire:convert

3. Routing Lebih Konsisten & Masuk Akal

Sekarang Livewire ngenalin:

Route::livewire('/posts/create', 'pages::post.create');

Dibanding versi lama:

Route::get('/posts/create', CreatePost::class);

Kenapa ini lebih enak?**

• Nggak tergantung class
• Konsisten dengan cara kita manggil komponen di Blade
• Lebih cocok untuk struktur besar & modular

4. Namespace yang Lebih Terarah

Livewire 4 datang dengan opini struktur (dan ini bagus).

Default:

• pages:: → halaman
• layouts:: → layout

Route::livewire('/dashboard', 'pages::dashboard');

Kalau aplikasimu modular, kamu bisa bikin sendiri:

• admin::
• billing::
• reports::

Ini bikin codebase lebih kebaca dan scalable.

5. CSS & JavaScript Sekarang “Nempel” ke Komponen

Sekarang kamu bisa langsung nulis CSS & JS di komponen:

<div>
    <h1 class="title">{{ $count }}</h1>
    <button wire:click="$js.celebrate">+</button>
</div>

<style>
.title {
    color: blue;
    font-size: 2rem;
}
</style>

<script>
    this.$js.celebrate = () => {
        confetti()
    }
</script>

Keunggulan besar:

• CSS auto scoped (nggak bocor)
• JS punya akses ke this (alias $wire)
• Di-serve sebagai file .css & .js → auto cached

Kalau mau global:

<style global>

6. Islands: Fitur Bintang Livewire 4

Ini game changer.

Dengan @island, kamu bisa bikin bagian kecil yang update sendiri tanpa nge-refresh seluruh komponen.

@island
    <div>
        Revenue: {{ $this->revenue }}
        <button wire:click="$refresh">Refresh</button>
    </div>
@endisland

Yang di luar island nggak ikut render ulang.

Dulu?

• Harus bikin child component
• Props
• Events
• Ribet

Sekarang? Satu directive, selesai.

Dan bukan cuma DOM…Query database juga ikut terisolasi.

7. Slots & Attribute Forwarding (Kayak Blade, Tapi Reaktif)

Slots sekarang reactive:

<livewire:card :$post>
    <h2>{{ $post->title }}</h2>
    <button wire:click="delete({{ $post->id }})">Delete</button>
</livewire:card>

Method delete() tetap dipanggil di parent.

Attribute forwarding juga makin natural:

<livewire:post.show :$post class="mt-4" />
<div {{ $attributes }}>
    ...
</div>

8. Drag & Drop Native, Tanpa Library

Livewire 4 sekarang punya sorting bawaan:

<ul wire:sort="reorder">
    @foreach ($items as $item)
        <li wire:sort:item="{{ $item->id }}">
            {{ $item->title }}
        </li>
    @endforeach
</ul>
public function reorder($item, $position)
{
    // $item = ID
    // $position = index baru
}

✔️ Animasi halus ✔️ Bisa multi-list ✔️ Bisa drag handle

9. Transisi Halus Pakai View Transitions API

<div wire:transition>
    Alert message
</div>

Untuk wizard:

#[Transition(type: 'forward')]
public function next() {}

#[Transition(type: 'backward')]
public function previous() {}

Ini pakai native browser API, jadi super smooth.

10. Optimistic UI: UI Terasa Instan

Beberapa directive favorit:

• wire:show → toggle tanpa request
• wire:text → update teks instan
• wire:bind → bind atribut HTML
• $dirty → deteksi perubahan

<div wire:show="$dirty">
    Ada perubahan yang belum disimpan
</div>

11. Loading State Makin Mudah

Setiap request otomatis punya atribut data-loading.

<button wire:click="save" class="data-loading:opacity-50">
    Save
</button>

CSS-first, simpel, bersih.

12. Placeholder Inline (Skeleton Lebih Rapi)

@placeholder
    <div class="animate-pulse h-32 bg-gray-200"></div>
@endplaceholder

Nggak perlu view terpisah. Skeleton tinggal di tempatnya.

13. JavaScript Power Tools

• wire:ref
• $refs
• #[Json] method
• $js action
• Interceptors (lokal & global)

Contoh interceptor global:

Livewire.interceptRequest(({ onError }) => {
    onError(({ response, preventDefault }) => {
        if (response.status === 419) {
            preventDefault()
            alert('Session habis')
            location.reload()
        }
    })
})

14. Upgrade? Aman

Tenang. Livewire 4 backward compatible.

• Komponen lama tetap jalan
• Class-based component masih didukung
• Format baru cuma default untuk yang baru

Install:

composer require livewire/livewire:^4.0

Penutup

Livewire 4 bukan cuma “versi baru”.