Astro

Astro domyślnie nie wysyła żadnego JavaScriptu i renderuje wszystkie komponenty do statycznego HTML na serwerze. Komponenty webowe Wink muszą być ładowane za pomocą tagu <script> po stronie klienta. Architektura island w Astro ułatwia to zadanie.

@wink/elements npm package Zainstaluj i załaduj pakiet CDN z typami TypeScript.

Instalacja

npm install @wink/elements

Załaduj w wspólnym layoucie

Dodaj skrypt loadera do swojego bazowego layoutu, aby był uruchamiany na każdej stronie:

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

Użycie na stronie

Ponieważ komponenty Astro są renderowane po stronie serwera, tagi <wink-*> są generowane jako statyczny HTML. Skrypt CDN rejestruje elementy niestandardowe, gdy strona ładuje się w przeglądarce:

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

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

Wewnątrz komponentu frameworka (island)

Jeśli używasz React, Vue lub Svelte islands razem z Wink, załaduj @wink/elements w layoucie (jak powyżej) i używaj tagów <wink-*> normalnie wewnątrz swoich komponentów island — elementy niestandardowe zostaną zarejestrowane zanim island zostanie zhydratowany.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() już wywołane przez layout — bezpiecznie renderować tutaj
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Zmienne środowiskowe

Astro udostępnia w przeglądarce tylko zmienne z prefiksem PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id