Astro

Astro за замовчуванням не відправляє JavaScript і рендерить усі компоненти у статичний HTML на сервері. Веб-компоненти Wink потрібно завантажувати через тег <script> на стороні клієнта. Архітектура островів Astro робить це просто.

@wink/elements npm package Встановіть і завантажте CDN-бандл з типами TypeScript.

Встановлення

npm install @wink/elements

Завантаження у спільному лейауті

Додайте скрипт завантаження у ваш базовий лейаут, щоб він запускався на кожній сторінці:

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

Використання на сторінці

Оскільки компоненти Astro рендеряться на сервері, теги <wink-*> виводяться як статичний HTML. CDN-скрипт реєструє кастомні елементи при завантаженні сторінки у браузері:

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

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

Усередині компонента фреймворку (острів)

Якщо ви використовуєте React, Vue або Svelte острови разом з Wink, завантажте @wink/elements у лейауті (як вище) і використовуйте теги <wink-*> всередині ваших острівних компонентів як зазвичай — кастомні елементи будуть зареєстровані до моменту гідратації острова.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() вже викликано лейаутом — безпечно рендерити тут
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Змінні середовища

Astro надає у браузер лише змінні, що починаються з PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id