Gatsby

Gatsby generează HTML static la momentul construirii și îl rehidratează pe client. Scripturile CDN trebuie încărcate doar în API-urile browserului — gatsby-browser.js este locul potrivit.

@wink/elements npm package Instalează și încarcă pachetul CDN cu tipuri TypeScript.

Instalare

npm install @wink/elements

Încărcare prin gatsby-browser.js

API-ul onClientEntry rulează o singură dată imediat ce runtime-ul Gatsby se inițializează în browser:

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

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

Variabile de mediu

Gatsby expune către pachetul browser doar variabilele prefixate cu GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Utilizare în pagini și componente

import React from 'react';

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

TypeScript

Gatsby folosește React, așa că adaugă aceleași declarații JSX intrinseci ca în integrarea React:

// Vezi /integrations/react pentru fișierul complet de declarații

gatsby-ssr.js — nu sunt necesare modificări

Nu trebuie să modifici gatsby-ssr.js. Etichetele <wink-*> se redau ca elemente HTML simple în output-ul static, iar scriptul CDN le actualizează când browserul încarcă pagina.