Astro

Astro não envia JavaScript por padrão e renderiza todos os componentes para HTML estático no servidor. Os componentes web Wink devem ser carregados via uma tag <script> do lado do cliente. A arquitetura island do Astro torna isso simples.

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

Instalar

npm install @wink/elements

Carregar em um layout compartilhado

Adicione o script loader ao seu layout base para que ele 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 em uma página

Como os componentes Astro são renderizados no servidor, as tags <wink-*> são geradas como HTML estático. O script CDN registra os elementos customizados 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 você estiver usando islands React, Vue ou Svelte junto com Wink, carregue @wink/elements no layout (como acima) e use as tags <wink-*> normalmente dentro dos seus componentes island — os elementos customizados estarão registrados quando a island for hidratada.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() já foi chamado pelo layout — seguro 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

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

PUBLIC_WINK_CLIENT_ID=your-client-id