Gatsby

Gatsby génère du HTML statique au moment de la compilation et réhydrate côté client. Les scripts CDN doivent être chargés uniquement via les API du navigateur — gatsby-browser.js est l’endroit approprié.

@wink/elements npm package Installez et chargez le bundle CDN avec les types TypeScript.

Installation

npm install @wink/elements

Chargement via gatsby-browser.js

L’API onClientEntry s’exécute une fois dès que le runtime de Gatsby s’initialise dans le navigateur :

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

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

Variables d’environnement

Gatsby expose uniquement les variables préfixées par GATSBY_ au bundle côté navigateur :

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Utilisation dans les pages et composants

import React from 'react';

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

TypeScript

Gatsby utilise React, ajoutez donc les mêmes déclarations JSX intrinsèques que pour l’intégration React :

// Voir /integrations/react pour le fichier de déclaration complet

gatsby-ssr.js — aucune modification nécessaire

Vous n’avez pas besoin de modifier gatsby-ssr.js. Les balises <wink-*> sont rendues comme des éléments HTML simples dans la sortie statique, et le script CDN les met à jour lorsque le navigateur charge la page.