Gatsby

Gatsby genereert statische HTML tijdens de build en hydrateert opnieuw aan de clientzijde. CDN-scripts moeten alleen worden geladen in browser-API’s — gatsby-browser.js is de juiste plek.

@wink/elements npm package Installeer en laad de CDN-bundel met TypeScript-typen.

Installeren

npm install @wink/elements

Laden via gatsby-browser.js

De onClientEntry API wordt één keer uitgevoerd zodra de runtime van Gatsby in de browser initialiseert:

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

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

Omgevingsvariabelen

Gatsby maakt alleen variabelen met de prefix GATSBY_ beschikbaar voor de browser-bundel:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Gebruik in pagina’s en componenten

import React from 'react';

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

TypeScript

Gatsby gebruikt React, voeg daarom dezelfde JSX intrinsic declaraties toe als bij de React-integratie:

// Zie /integrations/react voor het volledige declaratiebestand

gatsby-ssr.js — geen aanpassingen nodig

Je hoeft gatsby-ssr.js niet aan te passen. De <wink-*> tags renderen als gewone HTML-elementen in de statische output, en het CDN-script upgrade ze wanneer de browser de pagina laadt.