Astro

Astro tidak menghantar JavaScript secara lalai dan merender semua komponen ke HTML statik di pelayan. Komponen web Wink mesti dimuatkan melalui tag <script> sisi klien. Seni bina pulau Astro menjadikan ini mudah.

@wink/elements npm package Pasang dan muatkan bundel CDN dengan jenis TypeScript.

Pasang

npm install @wink/elements

Muatkan dalam susun atur kongsi

Tambah skrip pemuat ke susun atur asas anda supaya ia berjalan pada setiap halaman:

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

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

Gunakan pada halaman

Oleh kerana komponen Astro dirender di pelayan, tag <wink-*> dikeluarkan sebagai HTML statik. Skrip CDN mendaftar elemen tersuai apabila halaman dimuatkan dalam pelayar:

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

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

Dalam komponen rangka kerja (pulau)

Jika anda menggunakan React, Vue, atau Svelte pulau bersama Wink, muatkan @wink/elements dalam susun atur (seperti di atas) dan gunakan tag <wink-*> dalam komponen pulau anda seperti biasa — elemen tersuai akan didaftarkan sebelum pulau dihidratkan.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() sudah dipanggil oleh susun atur — selamat 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" />

Pembolehubah persekitaran

Astro hanya mendedahkan pembolehubah yang diawali dengan PUBLIC_ kepada pelayar:

PUBLIC_WINK_CLIENT_ID=your-client-id