Gatsby

Gatsby generuje statický HTML počas buildovania a následne ho rehydratuje na klientovi. CDN skripty musia byť načítané iba v prehliadačových API — gatsby-browser.js je správne miesto.

@wink/elements npm balík Nainštalujte a načítajte CDN balík s typmi pre TypeScript.

Inštalácia

npm install @wink/elements

Načítanie cez gatsby-browser.js

API onClientEntry sa spustí raz hneď, ako sa runtime Gatsby inicializuje v prehliadači:

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

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

Premenné prostredia

Gatsby sprístupňuje do balíka prehliadača iba premenné s prefixom GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Použitie na stránkach a v komponentoch

import React from 'react';

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

TypeScript

Gatsby používa React, preto pridajte rovnaké JSX intrinsic deklarácie ako pri React integrácii:

// Pozrite /integrations/react pre kompletný deklaratívny súbor

gatsby-ssr.js — nie sú potrebné žiadne zmeny

Nemusíte upravovať gatsby-ssr.js. Tagy <wink-*> sa v statickom výstupe renderujú ako obyčajné HTML elementy a CDN skript ich v prehliadači po načítaní stránky upgradne.