Astro

O Astro não envia JavaScript por defeito e renderiza todos os componentes para HTML estático no servidor. Os componentes web Wink devem ser carregados através de uma tag <script> do lado do cliente. A arquitetura island do Astro torna isto simples.

@wink/elements npm package Instale e carregue o bundle CDN com tipos TypeScript.

Instalar

npm install @wink/elements

Carregar num layout partilhado

Adicione o script de carregamento ao seu layout base para que seja executado em todas as páginas:

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

Usar numa página

Como os componentes Astro são renderizados no servidor, as tags <wink-*> são geradas como HTML estático. O script CDN regista os elementos personalizados quando a página carrega no navegador:

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

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

Dentro de um componente de framework (island)

Se estiver a usar React, Vue ou Svelte islands juntamente com Wink, carregue @wink/elements no layout (como acima) e use as tags <wink-*> dentro dos seus componentes island normalmente — os elementos personalizados serão registados quando a island hidratar.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() já foi chamado pelo layout — seguro para renderizar aqui
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Variáveis de ambiente

O Astro expõe apenas variáveis prefixadas com PUBLIC_ ao navegador:

PUBLIC_WINK_CLIENT_ID=your-client-id