Gatsby

Gatsby generuoja statinį HTML kūrimo metu ir atgaivina jį kliento pusėje. CDN skriptai turi būti įkeliami tik naršyklės API — gatsby-browser.js yra tinkama vieta.

@wink/elements npm paketas Įdiekite ir įkelkite CDN paketą su TypeScript tipais.

Įdiegimas

npm install @wink/elements

Įkėlimas per gatsby-browser.js

onClientEntry API paleidžiamas vieną kartą, kai tik Gatsby vykdymo laikas inicializuojasi naršyklėje:

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

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

Aplinkos kintamieji

Gatsby naršyklės paketui atskleidžia tik kintamuosius, prasidedančius GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Naudojimas puslapiuose ir komponentuose

import React from 'react';

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

TypeScript

Gatsby naudoja React, tad pridėkite tas pačias JSX intrinsekcijas kaip React integracijoje:

// Žr. /integrations/react pilną deklaracijos failą

gatsby-ssr.js — keitimų nereikia

Jums nereikia keisti gatsby-ssr.js. <wink-*> žymos statiniame išvestyje atvaizduojamos kaip paprasti HTML elementai, o CDN skriptas juos atnaujina, kai naršyklė įkelia puslapį.