Astro

Astro non include JavaScript di default e rende tutti i componenti in HTML statico sul server. I componenti web Wink devono essere caricati tramite un tag <script> client-side. L’architettura island di Astro rende questo semplice.

@wink/elements npm package Installa e carica il bundle CDN con i tipi TypeScript.

Installazione

npm install @wink/elements

Caricamento in un layout condiviso

Aggiungi lo script loader al layout base in modo che venga eseguito in ogni pagina:

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

Uso in una pagina

Poiché i componenti Astro sono renderizzati sul server, i tag <wink-*> vengono emessi come HTML statico. Lo script CDN registra gli elementi personalizzati quando la pagina viene caricata nel browser:

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

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

All’interno di un componente framework (island)

Se usi React, Vue o Svelte islands insieme a Wink, carica @wink/elements nel layout (come sopra) e usa i tag <wink-*> normalmente all’interno dei componenti island — gli elementi personalizzati saranno registrati quando l’isola si idraterà.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() già chiamato dal layout — sicuro renderizzare qui
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Variabili d’ambiente

Astro espone al browser solo le variabili con prefisso PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id