HonoJS + AlpineJS: Interaksi Antarmuka

#javascript #honojs #alpinejs

Hono secara default support penulisan kode menggunakan jsx sebagai template engine yang memudahkan penggunanya untuk looping data ataupun hanya sekedar untuk membuat component. Namun bukan cuma itu, HonoJS juga mendukung CSR(client-side rendering) dengan menggunakan vite ataupun bisa diatur pada tsconfig.ts dengan memberi nilai "jsxImportSource": "hono/jsx",. Dengan dukungan tersebut saya kira teman-teman yang terbiasa menggunakan basis reactjs akan lebih mudah jika ingin mencoba fullstack menggunakan honojs.

Kesempatan kali ini saya ingin skip terlebih dahulu untuk membuat halaman website dengan pendekatan CSR pada honojs. Yang saya gunakan adalah jsx sebagai template engine dan untuk interaksinya menggunakan alpinejs.

Menambahkan AlpineJS Pada Halaman

Kita bisa menambahkan alpinejs dengan script tag, untuk lebih jelasnya kita bisa mengunjugi website alpinejs disini.
Untuk memulainya kita coba dengan membuat layout terlebih dahulu.

// Layout.tsx
import { html } from "hono/html";

export const Layout = ({children}: {children?: any}) => {

// saya menggunakan helper html 
return html`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- inisiasi Alpinejs -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <title>Hono + Alpine </title>
  </head>
  <body>

// kita bisa membuat store disini agar bisa diakses dengan mudah
// kita juga bisa menggunakan x-init ataupun x-data untuk inisiasi
    <div
x-data="{
init() {
Alpine.store('kumpulanModal', {
showConfirm: false,
})
},
}"
>${children}</div>
  </body>
  </html>
`
}

Alpine Untuk Tampilkan Modal

Selanjutnya kita bisa membuat halaman contoh

// ContohPage.tsx
import {Layout} from './layout'

export const ContohPage = () => {

return(
<div>
<button x-on:click="$store.kumpulanModal.showConfirm =  !$store.kumpulanModal.showConfirm">Tampil Modal</button>
// modal
<div x-show="$store.kumpulanModal.showConfirm"> 
<div className={'fixed inset-0 bg-black/50 flex justify-center items-center'}>
<div className={'bg-white rounded min-w-1/3 '}>
<button x-on:click="$store.kumpulanModal.showConfirm =  false">Tutup</button>
</div>
</div>
</div>

</div>
)
}

Panggil Contoh Halaman di`index.tsx`

Terkadang kita lupa mengganti index.ts menjadi index.tsx

import {Hono} from 'hono'
import {ContohPage} from './ContohPage'

const app = new Hono()

app.get('/contoh', (c) => {
return c.html(<ContohPage />)
})
.
.
.
.