Tanggal :28 Oktober 2020
Belajar Laravel Livewire V2

Belajar Laravel Livewire 2 : Apa Yang Berubah ?

Artikel ini bagian ke 1 dari 3 seri dalam artikel berseri "Belajar Laravel Livewire 2"

Assalamualaikum Warohmatulloh Wabarokatuh, sebelum Laravel 8 rilis, Laravel Livewire lebih dulu rilis versi major keduanya. Karena ini adalah rilis versi major maka ada beberapa breaking change yang ada pada rilis ini. Maka dari itu kita buat seri baru Belajar Laravel Livewire 2 agar kawan – kawan tidak melakukan beberapa kesalahan mendasar karena banyak perubahan dasar di Livewire 2 ini semisal di route dan sudah tidak ada lagi dukungan turbolinks dari bawaan.

Oke sebelum memulai semuanya, mungkin kita akan bahas beberapa perubahan dari versi 1. Untuk yang mau upgrade versinya bisa diperhatikan hal-hal berikut ini.

Upgrade dari Versi 1

  1. Update dependeny livewire/livewire di dalam file composer.json ke ^2.0.
  2. Jalankan composer update livewire/livewire.
  3. Jalankan php artisan view:clear.
  4. Jika sebelumnya kawan – kawan sebelumnya publish asset, jalankan php artisan livewire:publish --assets.

Update Kode di Aplikasi yang menggunakan Versi 1

Ganti $updatesQueryString ke $queryString

Laravel Livewire 1 memiliki banyak cara primitif untuk memanipulasi query string dari browser berdasarkan value dari property. Di V2 banyak cara yang lebih canggih untuk memanipuasi query string.

Perubahan pertama yaitu perubahan dari $updatesQueryString ke $queryString.

class Search extends Component
{
    // Versi 1
    protected $updatesQueryString = ['search']

    // Versi 2
    protected $queryString = ['search']
}

Selain perubahan namanya, ada 2 perubahan signifikan dari cara kerja di dalamnya.

  • Nilai / value dari property sekarang diset otomatis dari query string saat halaman dimuat.
  • Sistem query string sekarang menggunakan API browser history.pushState daripada history.replaceState, ini berarti kita bisa klik tombol kembali di browser untuk mengunjungi ulang query string yang berubah sebelumnya.

Karena sistem query string sekarang secara otomatis set nilai inisial, kita tidak perlu lagi melakukannya pada method mount().

class Search extends Component
{
    ...

    public function mount()
    {
        // Tidak perlu menulis kode ini lagi
        // Property search sekarang diset secara otomatis
        $this->search = request()->query('search', '');
    }
}

Route::livewire() dihapus

Jika di V1 kita diperbolehkan mendaftarkan komponen dengan route untuk satu halaman penuh menggunakan method Route::livewire(). Di V2 Livewire membuat kita bisa langsung mengirimkan komponen ke dalam route dengan method standar Route::get()

// Before
Route::livewire('/post', 'show-posts');

// After
Route::get('/post', \App\Http\Livewire\ShowPosts::class);

Jika kita menggunakan Laravel 7, kita harus menghapus baris namespace(...) pada app/Providers/RouteServiceProvider.php:

protected function mapWebRoutes()
{
    Route::middleware('web')
        ->namespace($this->namespace) // hapus baris ini
        ->group(base_path('routes/web.php'));
}

Hal tersebut menjadi default di Laravel 8, tapi jika menggunakan Laravel 7 kita harus menghapusnya agara bisa mengirim Livewire class ke Route::get(). Jika tidak maka Laravel akan menambahkan namespace ke semua class yang di kirim ke Route::get().

Secara default di V1 komponen halaman Livewire menggunakan blade layout yang ada di resources/views/app.blade.php. Di V2, Livewire menggunakan file yang sama akan tetapi sekarang harus menggunakan sintaks $slot dari komponen blade.

<!-- Sebelumnya -->
<html>
    <body>
        @yield('content')

        @livewireScripts
    </body>
</html>

<!-- Sekarang -->
<html>
    <body>
        {{ $slot }}

        @livewireScripts
    </body>
</html>

Dukungan Turbolinks Dihapus

Livewire sekarang tidak lagi mendukung Turbolinks secara out of the box.

Jika kita ingin tetap menggunakan Turbolinks di dalam aplikasi Livewire kita. Kita harus menggunakan Turbolinks Adapter bersama dengan Javascript milik Livewire.

...
    @livewireScripts
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
</body>

Pagination Views

Jika kita sebelumnya membuat pagination dengan menambahkan WithPagination ke dalam komponen dan menggunakan $posts-&gt;links(), di V2 views diganti dari Bootstrap-4 ke Tailwind.

Livewire V2 tetap mendukung Boostrap, namun kita harus mengkonfigurasi menggunakan property $paginationTheme di dalam komponen.

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    ...
}

Sekian beberapa perubahan di Livewire V2, selanjutnya kita akan Belajar Laravel Livewire 2 dari dasar.

Wassalamualaikum Warohmatulloh Wabarokatuh.

Halo semuanya, saya Amirul seoarang Web Developer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast, saya juga suka makan dan foto makanan.

One Ping

  1. Pingback: Belajar Laravel Livewire 2 : Menginstall Livewire - Kawan Koding

2 Comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *