Gatsby

Gatsby generiert statisches HTML zur Build-Zeit und rehydriert im Client. CDN-Skripte müssen nur in Browser-APIs geladen werden — gatsby-browser.js ist der richtige Ort dafür.

@wink/elements npm package Installieren und laden Sie das CDN-Bundle mit TypeScript-Typen.

Installation

npm install @wink/elements

Laden über gatsby-browser.js

Die onClientEntry API wird einmal ausgeführt, sobald das Gatsby-Runtime im Browser initialisiert wird:

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

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

Umgebungsvariablen

Gatsby stellt nur Variablen mit dem Präfix GATSBY_ dem Browser-Bundle zur Verfügung:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Verwendung in Seiten und Komponenten

import React from 'react';

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

TypeScript

Gatsby verwendet React, daher fügen Sie dieselben JSX-Intrinsic-Deklarationen wie bei der React-Integration hinzu:

// Siehe /integrations/react für die vollständige Deklarationsdatei

gatsby-ssr.js — keine Änderungen erforderlich

Sie müssen gatsby-ssr.js nicht ändern. Die <wink-*> Tags werden im statischen Output als einfache HTML-Elemente gerendert, und das CDN-Skript aktualisiert sie, wenn der Browser die Seite lädt.