Astro

Astro จะไม่ส่ง JavaScript ใดๆ โดยค่าเริ่มต้นและเรนเดอร์คอมโพเนนต์ทั้งหมดเป็น HTML แบบสแตติกบนเซิร์ฟเวอร์ คอมโพเนนต์เว็บ Wink ต้องถูกโหลดผ่านแท็ก <script> ฝั่งไคลเอนต์ สถาปัตยกรรมแบบ island ของ Astro ทำให้เรื่องนี้ง่ายขึ้นมาก

@wink/elements npm package ติดตั้งและโหลด CDN bundle พร้อมกับ TypeScript types.

ติดตั้ง

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>

ภายในคอมโพเนนต์เฟรมเวิร์ก (island)

ถ้าคุณใช้ React, Vue หรือ Svelte islands ร่วมกับ Wink ให้โหลด @wink/elements ในเลย์เอาต์ (ตามตัวอย่างข้างต้น) และใช้แท็ก <wink-*> ภายในคอมโพเนนต์ island ของคุณตามปกติ — คอมโพเนนต์ที่กำหนดเองจะถูกลงทะเบียนเมื่อ island เริ่มทำงาน

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