Astro

Astro mengirimkan nol JavaScript secara default dan merender semua komponen ke HTML statis di server. Komponen web Wink harus dimuat melalui tag <script> sisi klien. Arsitektur island Astro membuat ini menjadi mudah.

@wink/elements npm package Pasang dan muat bundel CDN dengan tipe TypeScript.

Pasang

npm install @wink/elements

Muat di layout bersama

Tambahkan skrip loader ke layout dasar Anda agar dijalankan di setiap halaman:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    <slot />

    <script>
      import { load } from '@wink/elements';
      load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
    </script>
  </body>
</html>

Gunakan di halaman

Karena komponen Astro dirender di server, tag <wink-*> akan dihasilkan sebagai HTML statis. Skrip CDN mendaftarkan elemen kustom saat halaman dimuat di browser:

---
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <main>
    <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
    <wink-lookup />
  </main>
</Layout>

Di dalam komponen framework (island)

Jika Anda menggunakan React, Vue, atau Svelte islands bersama Wink, muat @wink/elements di layout (seperti di atas) dan gunakan tag <wink-*> di dalam komponen island Anda secara normal — elemen kustom akan terdaftar saat island melakukan hidrasi.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() sudah dipanggil oleh layout — aman untuk dirender di sini
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

---
import HotelCard from '../components/HotelCard.tsx';
---
<HotelCard client:load layoutId="YOUR_LAYOUT_ID" />

Variabel lingkungan

Astro hanya mengekspos variabel yang diawali dengan PUBLIC_ ke browser:

PUBLIC_WINK_CLIENT_ID=your-client-id