Astro

AstroはデフォルトでJavaScriptを一切出力せず、すべてのコンポーネントをサーバー上で静的HTMLとしてレンダリングします。Winkのウェブコンポーネントはクライアントサイドの<script>タグで読み込む必要があります。Astroのアイランドアーキテクチャにより、これが簡単に実現できます。

@wink/elements npm package TypeScript型定義付きのCDNバンドルをインストールして読み込みます。

インストール

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