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 Instalá y cargá el paquete CDN con tipos para TypeScript.

Instalación

npm install @wink/elements

Carga 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 que comienzan con GATSBY_ al bundle del navegador:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-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 agregá las mismas declaraciones intrínsecas JSX que en la integración React:

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

gatsby-ssr.js — no se requieren cambios

No necesitás 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.