Astro

Astro varsayılan olarak sıfır JavaScript gönderir ve tüm bileşenleri sunucuda statik HTML olarak render eder. Wink web bileşenleri, istemci tarafı <script> etiketi ile yüklenmelidir. Astro’nun ada mimarisi bunu kolaylaştırır.

@wink/elements npm paketi CDN paketini TypeScript tipleriyle birlikte yükleyin ve kurun.

Kurulum

npm install @wink/elements

Paylaşılan bir düzen içinde yükleme

Yükleyici betiğini temel düzeninize ekleyin, böylece her sayfada çalışır:

<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>

Bir sayfada kullanma

Astro bileşenleri sunucuda render edildiği için <wink-*> etiketleri statik HTML olarak çıktı verir. CDN betiği, sayfa tarayıcıda yüklendiğinde özel elementleri kaydeder:

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

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

Bir framework bileşeni içinde (ada)

React, Vue veya Svelte adalarını Wink ile birlikte kullanıyorsanız, @wink/elements paketini düzen içinde (yukarıdaki gibi) yükleyin ve ada bileşenlerinizde <wink-*> etiketlerini normal şekilde kullanın — özel elementler ada hidrasyonundan önce kaydedilmiş olur.

// src/components/HotelCard.tsx (React ada)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() zaten düzen tarafından çağrıldı — burada render etmek güvenlidir
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Ortam değişkenleri

Astro, yalnızca PUBLIC_ ile başlayan değişkenleri tarayıcıya açar:

PUBLIC_WINK_CLIENT_ID=your-client-id