Gatsby

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

@wink/elements npm пакет Инсталирайте и заредете 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 вътрешни декларации като при React интеграцията:

// Вижте /integrations/react за пълния файл с декларации

gatsby-ssr.js — не са необходими промени

Не е нужно да променяте gatsby-ssr.js. Таговете <wink-*> се рендерират като обикновени HTML елементи в статичния изход, а CDN скриптът ги обновява, когато браузърът зареди страницата.