Gatsby

Gatsby genereerib staatilise HTML-i ehituse ajal ja taastab selle kliendipoolsel kasutamisel. CDN skriptid tuleb laadida ainult brauseri API-de kaudu — gatsby-browser.js on selleks õige koht.

@wink/elements npm pakett Paigalda ja laadi CDN komplekt koos TypeScripti tüüpidega.

Paigalda

npm install @wink/elements

Laadi gatsby-browser.js kaudu

onClientEntry API käivitub üks kord kohe, kui Gatsby runtime brauseris initsialiseerub:

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

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

Keskkonnamuutujad

Gatsby avaldab brauseri komplektile ainult muutujad, mille eesliide on GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Kasutamine lehtedel ja komponentides

import React from 'react';

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

TypeScript

Gatsby kasutab Reacti, seega lisa samad JSX sisemised deklaratsioonid nagu Reacti integratsioonis:

// Vaata /integrations/react täielikku deklaratsioonifaili

gatsby-ssr.js — muudatusi pole vaja

Sul ei ole vaja muuta gatsby-ssr.js. <wink-*> sildid renderduvad staatilises väljundis tavaliste HTML elementidena ja CDN skript uuendab neid, kui brauser lehe laadib.