Astro

Astro nu livrează JavaScript în mod implicit și redă toate componentele ca HTML static pe server. Componentele web Wink trebuie încărcate printr-un tag <script> client-side. Arhitectura island a Astro face acest lucru simplu.

@wink/elements npm package Instalează și încarcă pachetul CDN cu tipuri TypeScript.

Instalare

npm install @wink/elements

Încarcă într-un layout comun

Adaugă scriptul loader în layout-ul de bază astfel încât să ruleze pe fiecare pagină:

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

Utilizare pe o pagină

Pentru că componentele Astro sunt renderizate pe server, tag-urile <wink-*> sunt generate ca HTML static. Scriptul CDN înregistrează elementele personalizate când pagina se încarcă în browser:

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

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

Într-un component de framework (island)

Dacă folosești React, Vue sau Svelte islands împreună cu Wink, încarcă @wink/elements în layout (ca mai sus) și folosește tag-urile <wink-*> în interiorul componentelor island normal — elementele personalizate vor fi înregistrate până când island-ul se hidratează.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() a fost deja apelat de layout — este sigur să redai aici
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Variabile de mediu

Astro expune către browser doar variabilele prefixate cu PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id