Gatsby

Gatsby genera HTML estático en tiempo de compilación y se hidrata en el cliente. Los scripts CDN deben cargarse solo en APIs del navegador — gatsby-browser.js es el lugar correcto.

@wink/elements npm package Instala y carga el paquete CDN con tipos para TypeScript.

Instalar

npm install @wink/elements

Cargar vía gatsby-browser.js

La API onClientEntry se ejecuta una vez tan pronto como el runtime de Gatsby se inicializa en el navegador:

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

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

Variables de entorno

Gatsby expone solo variables con prefijo GATSBY_ al paquete del navegador:

GATSBY_WINK_CLIENT_ID=tu-client-id

GATSBY_WINK_CLIENT_ID=tu-client-id

Uso en páginas y componentes

import React from 'react';

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

TypeScript

Gatsby usa React, así que agrega las mismas declaraciones intrínsecas JSX que la integración de React:

// Consulta /integrations/react para el archivo completo de declaración

gatsby-ssr.js — no se requieren cambios

No necesitas modificar gatsby-ssr.js. Las etiquetas <wink-*> se renderizan como elementos HTML simples en la salida estática, y el script CDN las actualiza cuando el navegador carga la página.