Astro

Astro pēc noklusējuma nesūta JavaScript un renderē visus komponentus kā statisku HTML serverī. Wink tīmekļa komponenti jāielādē, izmantojot klienta puses <script> tagu. Astro salu arhitektūra to padara vienkāršu.

@wink/elements npm package Instalējiet un ielādējiet CDN pakotni ar TypeScript tipiem.

Instalēšana

npm install @wink/elements

Ielāde kopīgā izkārtojumā

Pievienojiet ielādes skriptu savam pamatizkārtojumam, lai tas tiktu izpildīts katrā lapā:

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

Lietošana lapā

Tā kā Astro komponenti tiek renderēti serverī, <wink-*> tagi tiek izvadīti kā statisks HTML. CDN skripts reģistrē pielāgotos elementus, kad lapa tiek ielādēta pārlūkprogrammā:

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

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

Iekš framework komponenta (sala)

Ja izmantojat React, Vue vai Svelte salas kopā ar Wink, ielādējiet @wink/elements izkārtojumā (kā augstāk) un izmantojiet <wink-*> tagus savos salu komponentos parasti — pielāgotie elementi tiks reģistrēti līdz brīdim, kad sala hidratēsies.

// src/components/HotelCard.tsx (React sala)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() jau izsaukts izkārtojumā — droši renderēt šeit
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Vides mainīgie

Astro pārlūkprogrammai atklāj tikai mainīgos, kas sākas ar PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id