Gatsby

Gatsby generira statični HTML tijekom izgradnje i rehidrira na klijentu. CDN skripte moraju se učitavati samo u browser API-jima — gatsby-browser.js je pravo mjesto za to.

@wink/elements npm paket Instalirajte i učitajte CDN paket s TypeScript tipovima.

Instalacija

npm install @wink/elements

Učitavanje putem gatsby-browser.js

onClientEntry API se izvršava jednom čim se Gatsby runtime inicijalizira u pregledniku:

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

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

Varijable okoline

Gatsby izlaže samo varijable koje počinju s GATSBY_ browser bundlu:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Korištenje u stranicama i komponentama

import React from 'react';

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

TypeScript

Gatsby koristi React, stoga dodajte iste JSX intrinsic deklaracije kao i React integracija:

// Pogledajte /integrations/react za punu datoteku deklaracija

gatsby-ssr.js — nije potrebna izmjena

Nije potrebno mijenjati gatsby-ssr.js. <wink-*> tagovi se renderiraju kao obični HTML elementi u statičkom outputu, a CDN skripta ih nadograđuje kada preglednik učita stranicu.