Gatsby

Gatsby はビルド時に静的な HTML を生成し、クライアント側で再活性化します。CDN スクリプトはブラウザの API 内でのみ読み込む必要があるため、gatsby-browser.js が適切な場所です。

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

インストール

npm install @wink/elements

gatsby-browser.js での読み込み

onClientEntry API は Gatsby のランタイムがブラウザで初期化されるとすぐに一度だけ実行されます：

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

環境変数

Gatsby は GATSBY_ で始まる変数のみをブラウザバンドルに公開します：

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

ページやコンポーネントでの使用

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby は React を使用しているため、React 統合と同じ JSX 内蔵宣言を追加してください：

// 完全な宣言ファイルは /integrations/react を参照してください

gatsby-ssr.js — 変更不要

gatsby-ssr.js を変更する必要はありません。<wink-*> タグは静的出力では通常の HTML 要素としてレンダリングされ、ブラウザがページを読み込むと CDN スクリプトがそれらをアップグレードします。