Astro

Το Astro δεν αποστέλλει καθόλου JavaScript από προεπιλογή και αποδίδει όλα τα components σε στατικό HTML στον διακομιστή. Τα web components του Wink πρέπει να φορτωθούν μέσω ενός client-side <script> tag. Η αρχιτεκτονική island του Astro το καθιστά απλό.

@wink/elements npm package Εγκαταστήστε και φορτώστε το CDN bundle με τύπους TypeScript.

Εγκατάσταση

npm install @wink/elements

Φόρτωση σε κοινό layout

Προσθέστε το script φόρτωσης στο βασικό σας 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>

Χρήση σε σελίδα

Επειδή τα components του Astro αποδίδονται στον διακομιστή, τα tags <wink-*> εξάγονται ως στατικό HTML. Το CDN script καταχωρεί τα custom elements όταν η σελίδα φορτώνει στον browser:

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

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

Μέσα σε component framework (island)

Αν χρησιμοποιείτε React, Vue ή Svelte islands μαζί με το Wink, φορτώστε το @wink/elements στο layout (όπως παραπάνω) και χρησιμοποιήστε τα tags <wink-*> κανονικά μέσα στα island components — τα custom elements θα έχουν καταχωρηθεί όταν το island γίνει hydrate.

// 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_ στον browser:

PUBLIC_WINK_CLIENT_ID=your-client-id