Gatsby

Gatsby генерує статичний HTML під час збірки та повторно активує його на клієнті. Скрипти CDN мають завантажуватися лише через браузерні API — gatsby-browser.js є правильним місцем для цього.

@wink/elements npm package Встановіть і завантажте CDN-бандл з типами TypeScript.

Встановлення

npm install @wink/elements

Завантаження через gatsby-browser.js

API onClientEntry виконується один раз, щойно середовище 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, тому додайте ті ж JSX intrinsic декларації, що й для інтеграції React:

// Див. /integrations/react для повного файлу декларацій

gatsby-ssr.js — змін не потрібно

Вам не потрібно змінювати gatsby-ssr.js. Теги <wink-*> рендеряться як звичайні HTML-елементи у статичному виводі, а CDN-скрипт оновлює їх, коли браузер завантажує сторінку.