Gatsby

Gatsby generira statični HTML med gradnjo in ga nato rehidrira na odjemalcu. CDN skripte je treba nalagati samo v brskalniških API-jih — gatsby-browser.js je pravi kraj za to.

@wink/elements npm package Namestite in naložite CDN paket z TypeScript tipi.

Namestitev

npm install @wink/elements

Nalaganje preko gatsby-browser.js

API onClientEntry se zažene enkrat takoj, ko se Gatsbyjev runtime inicializira v brskalniku:

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

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

Okoljske spremenljivke

Gatsby izpostavi samo spremenljivke, ki se začnejo z GATSBY_, v brskalniški paket:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Uporaba na straneh in komponentah

import React from 'react';

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

TypeScript

Gatsby uporablja React, zato dodajte enake JSX intrinsic deklaracije kot pri React integraciji:

// Oglejte si /integrations/react za celotno datoteko deklaracij

gatsby-ssr.js — spremembe niso potrebne

Ni vam treba spreminjati gatsby-ssr.js. Oznake <wink-*> se v statičnem izhodu upodabljajo kot običajni HTML elementi, CDN skripta pa jih nadgradi, ko brskalnik naloži stran.