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