Gatsby

Gatsby generuje statyczny HTML podczas budowania i odświeża go po stronie klienta. Skrypty CDN muszą być ładowane tylko w API przeglądarki — gatsby-browser.js to właściwe miejsce.

@wink/elements npm package Zainstaluj i załaduj pakiet CDN z typami TypeScript.

Instalacja

npm install @wink/elements

Ładowanie przez gatsby-browser.js

API onClientEntry uruchamia się raz, gdy tylko środowisko Gatsby zostanie zainicjalizowane w przeglądarce:

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

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

Zmienne środowiskowe

Gatsby udostępnia do pakietu przeglądarki tylko zmienne z prefiksem GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Użycie na stronach i w komponentach

import React from 'react';

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

TypeScript

Gatsby używa React, więc dodaj te same deklaracje JSX intrinsic co w integracji React:

// Zobacz /integrations/react dla pełnego pliku deklaracji

gatsby-ssr.js — nie wymaga zmian

Nie musisz modyfikować gatsby-ssr.js. Tag <wink-*> renderuje się jako zwykłe elementy HTML w statycznym wyjściu, a skrypt CDN uaktualnia je, gdy przeglądarka załaduje stronę.