Interaktivitas di Astro

Cara menambahkan interaktivitas pada framework Astro

Dec 25, 2024· tutorials ·7 min read·Dec 25, 2024

Sekilas mengenai Astro

Astro merupakan web framework untuk membuat website yang content-driven semacam blog atau marketing. Astro mengambil jalan sebagai UI-agnostik, yang artinya bisa dikombinasikan dengan berbagai UI framework kesukaan kalian macam React, Vue, Svelte dan lainnya. Astro juga terkenal karena menjadi pelopor bagi arsitektur terbaru di dunia persilatan web framework, yakni Island Arsitektur yang di framework lain mungkin lebih dikenal dengan partial/selective hydration.

Menambahkan UI framework ke Astro

Astro menjadi jembatan bagi yang ingin mulai mengurangi kode-kode JavaScript tapi masih galau. Kamu bisa menulis kode Astro dalam satu projek atau mengkombinasikannya dengan framework lain kalau memang dibutuhkan. Sebagian besar framework populer sudah tersedia official integrasinya dengan Astro, sehingga mudah dan aman untuk menambahkan ke projek kita.

Misalnya kalau ingin menambahkan React ke dalam projek Astro, bisa semudah dengan command:

npx astro add react

Atau install manual dengan cara:

npm install @astrojs/react react react-dom

pnpm add @astrojs/react react react-dom

yarn add @astrojs/react react react-dom

bun add @astrojs/react react react-dom

Kemudian tambahkan konfigurasi di astro.config.*

1
import { defineConfig } from 'astro/config';
2
import react from '@astrojs/react';
3

4
export default defineConfig({
5
  // ...
6
  integrations: [react()],
7
});

Untuk menambahkan kode dari framework lain ke dalam komponen Astro sendiri bisa semudah import seperti komponen lainnya:

1
---
2
import MyReactComponent from '../components/MyReactComponent.jsx';
3
---
4

5
<html>
6
  <body>
7
    <h1>Use React components directly in Astro!</h1>
8
    <MyReactComponent />
9
  </body>
10
</html>

Masalahnya secara bawaan, kode ini akan di render di server baik runtime maupun build-time dan di serve sebagai statik HTML sehingga akan kehilangan reaktivitasnya.

Astro telah menyediakan ekstra directive, jika membutuhkan kode framework yang interaktif.

1
---
2
// Example: hydrating framework components in the browser.
3
import InteractiveButton from '../components/InteractiveButton.jsx';
4
import InteractiveCounter from '../components/InteractiveCounter.jsx';
5
import InteractiveModal from '../components/InteractiveModal.svelte';
6
---
7

8
<!-- This component's JS will begin importing when the page loads -->
9
<InteractiveButton client:load />
10

11
<!-- This component's JS will not be sent to the client until
12
the user scrolls down and the component is visible on the page -->
13
<InteractiveCounter client:visible />
14

15
<!-- This component won't render on the server, but will render on the client when the page loads -->
16
<InteractiveModal client:only="svelte" />

Selengkapnya bisa dibaca mengenai Client Directives yang tersedia di Astro.

Menambah Interaktifitas di Astro

Untuk menambahkan interaktivitas, kamu sebenarnya bisa dengan mudah menggunakan UI framework seperti yang telah dijelaskan singkat pada bagian sebelumnya. Namun yang mau kita bahas adalah menambahkan interaktivitas langsung pada komponen Astro.

Contoh kasusnya misalnya kamu hanya membutuhkan interaktivitas sederhana yang sepertinya terasa overkill untuk menambahkan UI framework tambahan ke dalam projek kalian. Misalnya “cuma” untuk membuka-tutup (toggle) suatu menu sidebar, melakukan DOM manipulasi sederhana, atau sekedar menyampaikan suatu state sederhana ke tempat lain.

Astro seperti halnya HTML, bisa menambahkan kode client-side JavaScript pada markup mereka, contohnya:

1
<h1>Welcom to Astro!</h1>
2

3
<script>
4
  console.log('[Client Log]: Hello from Astro!')
5
</script>

Mengetahui hal ini kita bisa punya beberapa pilihan alternatif API dari web platform yang memang memungkinkan kita dengan mudah menambahkan interaktivitas langsung dari kode Astro komponen.

Menyelipkan event handler

Event di sini maksudnya event-event yang memang sudah tersedia by-default di berbagai komponen bawaan HTML, misalnya kita ingin menambahkan click event pada suatu tombol, maka kita bisa menambahkan event listener seperti biasa contohnya:

1
<button id="alert">Click me!</button>
2

3
<script>
4
  const alertBtn = document.querySelector('#alert');
5

6
  alertBtn.addEventListener('click', () => {
7
    alert('Button was clicked!');
8
  });
9
</script>

Dari kode contoh di atas kita bisa menambahkan akrobat sedikit dengan Vanilla JavaScript yang mungkin sudah mulai jarang digunakan setelah kebanyakan tenggelam dengan UI framework kekinian.

Untuk kasus lain, misalnya toggle menu, kita bisa memanfaatkan DOM manipulation sederhana juga, misal:

1
<header id="header" data-state="close" class="group">
2
  <nav class="fixed right-4 top-16 z-20 min-w-[200px] transform transition-all duration-500 group-[[data-menu=close]]:translate-x-[110%] group-[[data-menu=open]]:translate-x-0">
3
    <ul>
4
      <li>Home</li>
5
      <li>Blog</li>
6
      <li>About</li>
7
    </ul>
8
  </nav>
9

10
  <button id="menu-toggle">Toggle menu!</button>
11
</header>
12

13
<script>
14
  const toggleBtn = document.querySelector('#menu-toggle');
15

16
  toggleBtn.addEventListener('click', () => {
17
    const header = document.querySelector('#header');
18

19
    const prevState = header.getAttribute('data-state');
20
    const nextState = prevState === 'open' ? 'close' : 'open';
21

22
    header.setAttribute('data-state', nextState);
23
  });
24
</script>

Sedikit trik, kalau dengan Tailwind kita bisa menambahkan style berdasarkan parent-nya, sehingga untuk kasus sederhana seperti open/close state ini kita bisa langsung menyimpannya di atribut data-* seperti pada contoh kode di atas dan menggunakan selector class group-[[data-menu=open]] atau group-[[data-menu=close]] untuk mendeteksi kondisi state dalam keadaan terbuka atau tertutup.

Menggunakan Custom Element dari Web Component

Salah satu fitur utama pada web component adalah kita bisa membuat custom element. Custom element merupakan custom tag HTML yang behavior-nya sudah didefinisikan oleh si web developer, biasanya berupa perpanjangan dari dari berbagai element yang tersedia di peramban.

Misal pada contoh kode berikut kita akan menambakan custom element pada Astro komponen berupa tombol hati yang akan mendeteksi sudah berapa kali tombol tersebut ditekan. Perhatikan contoh kode di bawah:

1
<!-- Wrap the component elements in our custom element “astro-heart”. -->
2
<astro-heart>
3
  <button aria-label="Heart">💜</button> × <span>0</span>
4
</astro-heart>
5

6
<script>
7
  // Define the behaviour for our new type of HTML element.
8
  class AstroHeart extends HTMLElement {
9
    connectedCallback() {
10
      let count = 0;
11

12
      const heartButton = this.querySelector('button');
13
      const countSpan = this.querySelector('span');
14

15
      // Each time the button is clicked, update the count.
16
      heartButton.addEventListener('click', () => {
17
        count++;
18
        countSpan.textContent = count.toString();
19
      });
20
    }
21
  }
22

23
  // Tell the browser to use our AstroHeart class for <astro-heart> elements.
24
  customElements.define('astro-heart', AstroHeart);
25
</script>

Dengan memanfaatkan custom element, kalian bisa menambahkan interaktivitas yang lebih kaya dengan kode yang lebih oke tapi masih pakai Vanilla JavaScript sehingga tidak diperlukan library tambahan.

Berbagi state antar komponen

Selain untuk menambahkan interaktivitas sederhana, script tambahan biasanya juga dibutuhkan untuk saling berbagi state antar satu komponen dengan komponen lain, maupun dengan UI framework yang digunakan di dalam projek tersebut. Ini contoh kasus umum ketika menggunakan Astro karena biasanya memang kita akan gonta-ganti antara kode Astro dengan kode UI framework dalam satu projek.

Berdasarkan dokumentasi resmi “Share state between islands”, mereka merekomendasikan untuk menggunakan Nano Stores, ataupun alternative serupa yang sudah ada bawaan di masing-masing UI framework, seperti:

Namun yang akan kita bahas lebih lanjut adalah cara alternatif lain memanfaatkan web platform API.

Membagikan custom event

Event pada dasarnya adalah pub-sub (publish-subscribe) konsep dimana ada yang mempublikasikan sesuatu dan ada yang akan berlangganan terhadap suatu event. Kamu bisa membaca selengkapnya mengenai cara mengirim dan berlangganan suatu event di “Creating and triggering events”.

Mengambil contoh kasus yang sama dengan sebelumnya, kita akan membuat tombol hati sederhana dengan text yang menampilkan jumlah klik. Namun kali ini kita akan memisah keduanya menjadi 2 komponen terpisah. Satu untuk menampilkan tombolnya, kita akan buat berkas HeartBtn.astro dan untuk text-nya kita akan membuat CounterText.astro dan dijadikan 1 pada index.astro. Berikut contoh kode index.astro:

1
---
2
import HeartBtn from '../components/HeartBtn.astro'
3
import CounterText from '../components/CounterText.astro'
4
---
5

6
<html lang="en">
7
  <head>
8
    <meta charset="utf-8" />
9
    <meta name="viewport" content="width=device-width" />
10
    <title>Astro</title>
11
  </head>
12
  <body>
13
    <h1>Astro: Send & Subscribe Custom Event</h1>
14
    <div style="display:inline-block;">
15
      <HeartBtn />
16
      <CounterText />
17
    </div>
18
  </body>
19
</html>

Pada komponen HeartBtn.astro, kita akan membuat tombol dan akan mengirimkan Custom Event saat ditekan. Berikut contoh kode implementasinya:

1
<button id="btn">💜</button>
2

3
<script>
4
  const btn = document.querySelector('#btn');
5
  let state = 0
6
  btn.addEventListener('click', () => {
7
    state += 1
8

9
    // Sending custom event with the detail state
10
    btn.dispatchEvent(new CustomEvent("increment", { detail: state }))
11
  });
12
</script>

Sedangkan pada CounterText.astro, kita akan berlanganan state yang dikirimkan oleh tombol tersebut, contoh kodenya:

1
<span>x <span id="text">0</span></span>
2

3
<script>
4
  const btn = document.querySelector('#btn');
5
  const p = document.querySelector('#text');
6

7
  btn.addEventListener('increment', (e) => {
8
    p.innerText = e.detail
9
  });
10
</script>

Terlihat overkill ya? Mungkin karena sebenarnya bisa juga langsung manipulasi dengan innerText pada HeartBtn.astro ke komponen sebelahnya. Seperti yang sering kita lakukan di jaman jQuery merajalela. Yang bikin repot karena Custom Event ini menempel pada element sumber. Jadi untuk bisa subcribe, kita mesti select dulu komponen sumbernya. Tapi ini penyederhanaan kasus saja, siapa tau nanti kalian ketemu kasus dimana perlu menggunakan Custom Event.

Lihat kode selengkapnya pada Codesandbox contoh mengirim dan berlangganan Custom Event

Menggunakan postMessage

Pada dasarnya ini mirip dengan Custom Event, hanya saja event-nya akan ditempelkan langsung ke objek global window, jadinya kita tidak perlu select ke component sumber.

Berikut contoh kode melempar state dari Astro ke React dengan memanfaatkan postMessage, dengan contoh kasus membuat fitur yang sama, berikut kode index.astro:

1
---
2
import HeartBtn from "../components/HeartBtn.astro";
3
import CounterText from "../components/CounterText.jsx";
4
---
5

6
<html lang="en">
7
  <head>
8
    <meta charset="utf-8" />
9
    <meta name="viewport" content="width=device-width" />
10
    <title>Astro</title>
11
  </head>
12
  <body>
13
    <h1>Astro: window.postMessage</h1>
14
    <div style="display:inline-block;">
15
      <HeartBtn />
16
      <CounterText client:only="react" />
17
    </div>
18
  </body>
19
</html>

Pada komponen HeartBtn.astro, kita akan mengubah sedikit dari yang sebelumnya melempar Custom Event, di sini kita akan melempar postMessage, lihat kode berikut:

1
<button id="btn">💜</button>
2

3
<script>
4
  const btn = document.querySelector('#btn');
5
  let state = 0
6
  if (btn) {
7
    btn.addEventListener("click", () => {
8
      state += 1;
9
      window.postMessage({ type: "increment", state });
10
    });
11
  }
12
</script>

Dan kode komponen CounterText akan kita ubah dari komponen Astro menjadi komponen React yang subscribe event dari postMessage tersebut, berikut contoh kodenya:

1
import { useEffect, useState } from "react";
2

3
const CounterText = () => {
4
  const [count, setCount] = useState(0);
5

6
  const eventHandler = (e) => {
7
    if (e?.data?.type === "increment") {
8
      setCount(e?.data?.state);
9
    }
10
  };
11

12
  useEffect(() => {
13
    window.addEventListener("message", eventHandler);
14

15
    return () => {
16
      window?.removeEventListener("message", eventHandler);
17
    };
18
  }, []);
19

20
  return (
21
    <span>
22
      x <span id="text">{count}</span>
23
    </span>
24
  );
25
};
26

27
export default CounterText;

Lihat kode selengkapnya pada Codesandbox contoh menggunakan postMessage

Bahan bacaan tambahan

👋 Sekian dan terima kasih

Maaf-maaf aja kalau gak bermanfaat 🙇😭

Foto cover diambil dari laman Pexel, Foto oleh Đức Phúc

On This Page

Sekilas mengenai Astro
Menambahkan UI framework ke Astro
Menambah Interaktifitas di Astro
1. Menyelipkan event handler
2. Menggunakan Custom Element dari Web Component
Berbagi state antar komponen
1. Membagikan custom event
2. Menggunakan postMessage
Bahan bacaan tambahan

Panduan Unit Testing di Vue.js

Langkah-langkah memasang dan melakukan testing pada kode Vue.js dan Nuxt.js dengan belajar dari berbagai kasus yang terjadi pada proyek nyata

Mar 19, 2019 • In category tutorials
30 min read
#web
#javascript
02 - Cerita buruh menjadi programmer

Cerita panjang perjalanan hidup dan karir saya sampai bisa menjadi programmer di beberapa perusahaan teknologi besar di Indonesia

Nov 16, 2019 • In category experience
9 min read
#thought
Seni menghapus dan memperbarui sebuah kode

Menceritakan bagaimana pekerjaan saya sehari-hari yang seringkali berhadapan dengan keharusan untuk menghapus kode orang lain

Jul 02, 2019 • In category experience
5 min read
#thought