Astro

Astro ve výchozím nastavení neposílá žádný JavaScript a všechny komponenty vykresluje na serveru do statického HTML. Wink webové komponenty musí být načteny pomocí <script> tagu na straně klienta. Island architektura Astro to usnadňuje.

@wink/elements npm balíček Nainstalujte a načtěte CDN balíček s TypeScript typy.

Instalace

npm install @wink/elements

Načtení ve sdíleném layoutu

Přidejte loader skript do základního layoutu, aby se spouštěl na každé stránce:

<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žití na stránce

Protože Astro komponenty jsou vykresleny na serveru, tagy <wink-*> jsou vypsány jako statické HTML. CDN skript zaregistruje vlastní elementy, když se stránka načte v prohlížeči:

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

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

Uvnitř framework komponenty (island)

Pokud používáte React, Vue nebo Svelte islandy společně s Wink, načtěte @wink/elements v layoutu (jak je výše) a používejte tagy <wink-*> uvnitř island komponent normálně — vlastní elementy budou zaregistrovány v době, kdy island hydratuje.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() již bylo zavoláno v layoutu — bezpečné vykreslit zde
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Proměnné prostředí

Astro zpřístupňuje v prohlížeči pouze proměnné s prefixem PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id