Astro

Astro по подразбиране не изпраща JavaScript и рендерира всички компоненти като статичен HTML на сървъра. Wink уеб компонентите трябва да се зареждат чрез клиентски <script> таг. Островната архитектура на Astro прави това лесно.

@wink/elements npm package Инсталирайте и заредете CDN пакета с TypeScript типове.

Инсталиране

npm install @wink/elements

Зареждане в споделен layout

Добавете скрипта за зареждане в основния layout, за да се изпълнява на всяка страница:

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

Вътре в компонент на framework (остров)

Ако използвате React, Vue или Svelte острови заедно с Wink, заредете @wink/elements в layout-а (както по-горе) и използвайте <wink-*> тагове нормално във вашите островни компоненти — потребителските елементи ще бъдат регистрирани към момента на хидратацията на острова.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() вече е извикан от layout — безопасно е да се рендерира тук
  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