Tutorial MingleJS: Integrasi Component Vue/React di Livewire

Posted on by syauqi wiryahasana

Membangun aplikasi web dengan beragam komponen JavaScript terkadang membutuhkan fleksibilitas untuk memilih framework yang paling tepat. MingleJS hadir sebagai solusi untuk mengintegrasikan komponen Vue dan React ke dalam aplikasi Livewire atau Filament. Dikembangkan oleh Joao Patricio, paket ini sangat berguna untuk halaman arahan dan komponen kompleks yang memerlukan penggunaan Vue atau React. Selain itu, MingleJS juga bisa menjadi jembatan untuk mengadopsi Livewire secara bertahap atau memanfaatkan komponen pihak ketiga dari ekosistem Vue atau React.

Cara Kerja MingleJS

MingleJS bekerja dengan merender di sisi server, kemudian memasang komponen di sisi klien. Komponen Livewire sisi server akan merender setiap komponen JS, sehingga Anda mendapatkan interaktivitas JavaScript di front-end yang terisolasi ke komponen Livewire. Selain itu, backend dapat mengirimkan data ke komponen yang tersedia di front-end.

Berikut contoh implementasi MingleJS pada komponen Livewire:

namespace App\Livewire;

use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Component;

class ChatApp extends Component implements HasMingles
{
use InteractsWithMingles;

public function component(): string
{
    return 'resources/js/ChatApp/index.js';
}

public function mingleData()
{
    return [
        'message' => 'Message in a bottle 🍾',
    ];
}

// ...

}


Komponen Mingle terdiri dari:

  • Komponen Livewire yang menggunakan trait InteractsWithMingles.
  • File JavaScript yang berfungsi sebagai perekat.
  • File komponen front-end.

Berikut contoh komponen Mingle menggunakan React:

// resources/js/ChatApp/index.js
import mingle from '@mingle/mingleReact'
import ChatApp from './ChatApp.jsx'

mingle('resources/js/ChatApp/index.js', ChatApp)

// resources/js/ChatApp/ChatApp.jsx
import React from 'react'

function ChatApp({wire, …props}) {

const message = props.mingleData.message

console.log(message) // 'Message in a bottle 🍾'

wire.doubleIt(2)
    .then(data => {
        console.log(data) // 4
    })

return (
    <div>
        {/* <!-- Buat sesuatu yang luar biasa! --> */}
    </div>
)

}

Untuk memulai petualangan Anda dengan MingleJS, kunjungi dokumentasi MingleJS. Pencipta MingleJS juga menyediakan aplikasi demo MingleJS open-source dan demo langsung yang dapat Anda coba.
MingleJS membuka pintu bagi para developer untuk memanfaatkan framework JavaScript favorit mereka dalam pengembangan aplikasi Livewire atau Filament. Dengan MingleJS, fleksibilitas dan potensi kreativitas dalam membangun aplikasi web semakin tak terbatas!