Astro

Astro štandardne neodosiela žiadny JavaScript a všetky komponenty renderuje na serveri do statického HTML. Wink webové komponenty musia byť načítané cez <script> tag na strane klienta. Architektúra ostrovov v Astro to výrazne uľahčuje.

@wink/elements npm package Nainštalujte a načítajte CDN balík s typmi pre TypeScript.

Inštalácia

npm install @wink/elements

Načítanie v spoločnom rozložení

Pridajte loader skript do základného rozloženia, aby sa spustil na každej stránke:

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

Použitie na stránke

Keďže Astro komponenty sa renderujú na serveri, tagy <wink-*> sa vygenerujú ako statické HTML. CDN skript zaregistruje vlastné elementy, keď sa stránka načíta v prehliadači:

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

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

Vo frameworkovom komponente (ostrov)

Ak používate React, Vue alebo Svelte ostrovy spolu s Wink, načítajte @wink/elements v rozložení (ako vyššie) a používajte tagy <wink-*> vo vašich ostrovných komponentoch bežne — vlastné elementy budú zaregistrované v čase, keď sa ostrov hydratuje.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() už bolo zavolané v rozložení — bezpečné renderovať tu
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Premenné prostredia

Astro sprístupňuje prehliadaču len premenné s prefixom PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id