Astro

Astro no envia cap JavaScript per defecte i renderitza tots els components a HTML estàtic al servidor. Els components web de Wink s’han de carregar mitjançant una etiqueta <script> del costat client. L’arquitectura d’illes d’Astro fa que això sigui senzill.

@wink/elements npm package Instal·la i carrega el paquet CDN amb tipus TypeScript.

Instal·lar

npm install @wink/elements

Carregar en un layout compartit

Afegeix l’script carregador al teu layout base perquè s’executi a cada pàgina:

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

Ús en una pàgina

Com que els components Astro es renderitzen al servidor, les etiquetes <wink-*> es generen com a HTML estàtic. L’script CDN registra els elements personalitzats quan la pàgina es carrega al navegador:

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

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

Dins d’un component de framework (illa)

Si utilitzes illes React, Vue o Svelte juntament amb Wink, carrega @wink/elements al layout (com s’ha indicat) i utilitza les etiquetes <wink-*> dins dels teus components illa normalment — els elements personalitzats s’hauran registrat quan l’illa s’hidrati.

// src/components/HotelCard.tsx (illa React)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() ja cridat pel layout — segur per renderitzar aquí
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Variables d’entorn

Astro només exposa variables prefixades amb PUBLIC_ al navegador:

PUBLIC_WINK_CLIENT_ID=your-client-id