Belajar Astro - Extensibility & Custom Integrations

#Pendahuluan

Setiap framework punya batas, dan yang membedakan framework yang hebat adalah kemudahan melebarkan batas itu. Episode 18 ini membahas ekstensibilitas Astro: menulis custom integration, memakai library pihak ketiga, memperluas build pipeline, dan menghubungkan ekosistem frontend yang berbeda.

Kalian akan belajar bahwa integrasi Astro bukan sihir — mereka adalah objek JavaScript biasa dengan hooks yang berjalan pada momen tertentu dalam lifecycle build. Memahami ini membuka pintu untuk mengotomatiskan banyak hal yang sebelumnya dikerjakan manual.

Di akhir episode, kalian bisa menulis integrasi sendiri dan mengintegrasikan tool apa pun ke dalam project Astro.

#Custom Astro Integrations dan Plugins

#Anatomi Integrasi

Integrasi Astro adalah objek dengan fungsi hooks yang dipanggil pada waktu tertentu: astro:config:setup, astro:config:done, dan astro:build:done. Contoh integrasi sederhana yang menyuntikkan skrip ke seluruh halaman:

Integrasi kustom sederhana

import type { AstroIntegration } from "astro";
 
export function sapaPengunjung(): AstroIntegration {
  return {
    name: "sapa-pengunjung",
    hooks: {
      "astro:config:done": ({ injectScript }) => {
        injectScript(
          "page",
          `console.log("Selamat datang di situs ini!");`,
        );
      },
    },
  };
}

Fungsi injectScript("page", ...) menyuntikkan kode ke halaman. Integrasi ini cukup ditambahkan ke array integrations di astro.config.mjs untuk langsung aktif.

#Kapan Menulis Integrasi Sendiri

Tulis integrasi kustom ketika kebutuhan berulang dan bisa dipakai ulang di banyak project: menambahkan meta tag otomatis, mengubah build output, atau mengintegrasikan layanan analytics. Untuk kebutuhan sekali pakai, cukup buat script biasa.

#Using Third-Party Frameworks dan Libraries

#Memakai Package npm Secara Langsung

Library JavaScript biasa bisa dipakai langsung di frontmatter atau src/lib. Karena Astro memakai Vite, hampir semua package npm yang kompatibel browser langsung berfungsi tanpa konfigurasi:

npm install date-fns

Lalu gunakan di halaman:

Memakai library di frontmatter

---
import { format } from "date-fns";
import { id } from "date-fns/locale";
 
const tanggal = format(new Date(), "d MMMM yyyy", { locale: id });
---
 
<p>Hari ini: {tanggal}</p>

format(new Date(), "d MMMM yyyy", { locale: id }) memakai date-fns untuk memformat tanggal dalam bahasa Indonesia — semua proses berjalan di build time.

#Komponen dari Framework Lain

Integrasi React, Vue, Svelte, dan Solid (episode 7) adalah contoh utama interoperabilitas. Kalian juga bisa memuat komponen UI dari design system apa pun selama dikonversi atau dibungkus dalam bentuk yang didukung.

#Extending Build Pipeline dengan Custom Scripts

#Script di package.json

Script kustom ditambahkan ke package.json dan bisa dirantai dengan perintah build:

{
  "scripts": {
    "build": "astro build && node scripts/gen-sitemap-ekstra.mjs",
    "prerender": "node scripts/prerender.mjs"
  }
}

Perintah astro build && node scripts/gen-sitemap-ekstra.mjs menjalankan build lalu menghasilkan file tambahan. Pendekatan ini fleksibel untuk kebutuhan yang tidak ditangani integrasi.

#Hook astro:build:done

Untuk akses penuh ke hasil build, gunakan hook astro:build:done di dalam integrasi. Hook ini menerima daftar halaman yang dihasilkan — sempurna untuk laporan, validasi, atau transformasi output:

Hook astro:build:done

"astro:build:done": ({ pages }) => {
  console.log(`Total halaman yang dibangun: ${pages.length}`);
}

pages berisi semua rute yang dihasilkan. Kalian bisa menulis ringkasan build ke file atau memvalidasi bahwa halaman penting benar-benar ada.

#Interoperability Across Frontend Ecosystems

#Satu Project, Banyak Teknologi

Kekuatan Astro yang sering diremehkan: tim frontend yang berbeda bisa hidup dalam satu project. Tim A memakai React untuk dashboard, tim B memakai Svelte untuk widget — keduanya dirender Astro dengan hydrate yang terpisah.

#Pola untuk Integrasi yang Sehat

Agar integrasi tidak menjadi spaghetti:

• Buat satu direktori per framework yang jelas, misalnya src/components/react dan src/components/svelte.
• Batasi komunikasi antar framework lewat props dan events sederhana.
• Dokumentasikan di mana setiap framework dipakai dan alasannya.

Interoperabilitas adalah kekuatan, tetapi batas yang jelas membuatnya tetap terpelihara.

#Penutup

Episode 18 membuka ekstensibilitas Astro: menulis custom integration dengan hooks seperti injectScript dan astro:build:done, memakai library npm langsung, memperluas build pipeline dengan script kustom, serta memelihara interoperabilitas lintas framework.

Inti yang harus dibawa pulang:

• Integrasi Astro adalah objek dengan hooks di momen tertentu build.
• injectScript menyuntikkan kode ke halaman dari integrasi.
• Library npm bisa dipakai langsung karena Astro memakai Vite.
• Script kustom bisa dirantai dengan && di package.json.
• astro:build:done memberi akses ke hasil build.
• Batasi komunikasi antar framework agar tetap terpelihara.

Di episode 19 selanjutnya kita akan membahas tooling modern dan build automation: Astro CLI dan Vite, integrasi TypeScript dengan strict typing, pipeline CI/CD untuk project Astro, serta linting, formatting, dan pre-commit hooks. Kualitas kalian akan terjaga secara otomatis.