Gatsby

A Gatsby statikus HTML-t generál build időben, majd kliensoldalon újraéleszti azt. A CDN szkripteket csak böngésző API-kon keresztül szabad betölteni — a gatsby-browser.js a megfelelő hely erre.

@wink/elements npm csomag Telepítsd és töltsd be a CDN csomagot TypeScript típusokkal.

Telepítés

npm install @wink/elements

Betöltés gatsby-browser.js-en keresztül

Az onClientEntry API egyszer fut le, amint a Gatsby futtatókörnyezete inicializálódik a böngészőben:

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

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

Környezeti változók

A Gatsby csak azokat a változókat teszi elérhetővé a böngészői csomag számára, amelyek GATSBY_ előtaggal kezdődnek:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Használat oldalakban és komponensekben

import React from 'react';

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

TypeScript

A Gatsby React-et használ, ezért add hozzá ugyanazokat a JSX intrinsic deklarációkat, mint a React integrációnál:

// Lásd a /integrations/react teljes deklarációs fájlját

gatsby-ssr.js — nem szükséges módosítás

Nem kell módosítanod a gatsby-ssr.js fájlt. A <wink-*> tagek sima HTML elemekként jelennek meg a statikus kimenetben, és a CDN szkript frissíti őket, amikor a böngésző betölti az oldalt.