Astro

Astro tarnib vaikimisi null JavaScripti ja renderdab kõik komponendid staatiliseks HTML-iks serveris. Wink veebikomponendid tuleb laadida kliendipoolse <script> sildi kaudu. Astro saare arhitektuur teeb selle lihtsaks.

@wink/elements npm package Paigalda ja laadi CDN pakett koos TypeScripti tüüpidega.

Paigalda

npm install @wink/elements

Laadi jagatud paigutuses

Lisa laadimisskript oma põhipaigutusse, et see käivituks igal lehel:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Minu sait</title>
  </head>
  <body>
    <slot />

    <script>
      import { load } from '@wink/elements';
      load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
    </script>
  </body>
</html>

Kasutamine lehel

Kuna Astro komponendid renderdatakse serveris, väljastatakse <wink-*> sildid staatilise HTML-ina. CDN skript registreerib kohandatud elemendid, kui leht brauseris laetakse:

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

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

Raamistiku komponendi sees (saar)

Kui kasutad Reacti, Vue või Svelte saari koos Winkiga, laadi @wink/elements paigutuses (nagu eespool) ja kasuta <wink-*> silte oma saare komponentides tavapäraselt — kohandatud elemendid registreeritakse enne saare hüdreerimist.

// src/components/HotelCard.tsx (React saar)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() on juba paigutuse poolt kutsutud — siin on ohutu renderdada
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

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

Keskkonnamuutujad

Astro avaldab brauserile ainult muutujad, mille eesliide on PUBLIC_:

PUBLIC_WINK_CLIENT_ID=your-client-id