Gatsby

Gatsby gera HTML estático no momento da construção e reidrata no cliente. Scripts CDN devem ser carregados apenas nas APIs do navegador — gatsby-browser.js é o local correto.

@wink/elements npm package Instale e carregue o bundle CDN com tipos TypeScript.

Instalar

npm install @wink/elements

Carregar via gatsby-browser.js

A API onClientEntry executa uma vez assim que o runtime do Gatsby inicializa no navegador:

gatsby-browser.js

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

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

Variáveis de ambiente

Gatsby expõe apenas variáveis prefixadas com GATSBY_ para o bundle do navegador:

.env.production

GATSBY_WINK_CLIENT_ID=your-client-id

.env.development

GATSBY_WINK_CLIENT_ID=your-client-id

Usar em páginas e componentes

src/pages/hotels.tsx

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, por isso adicione as mesmas declarações intrínsecas JSX da integração React:

src/wink-elements.d.ts

// Veja /integrations/react para o ficheiro de declaração completo

Erros de build SSR

Durante o gatsby build, o Gatsby renderiza páginas para HTML estático num ambiente Node.js onde window e document não estão disponíveis. Se importar @wink/elements ao nível superior de um componente de página (fora do onClientEntry), a build irá falhar.

Use sempre gatsby-browser.js / onClientEntry — nunca importe load diretamente no escopo de um módulo de página ou componente.

gatsby-ssr.js — não são necessárias alterações

Não precisa modificar gatsby-ssr.js. As tags <wink-*> são renderizadas como elementos HTML simples na saída estática, e o script CDN atualiza-os quando o navegador carrega a página.

Leitura adicional

• Referência de Web Components
• @wink/elements npm package
• Integração React