Gatsby

Gatsby genera HTML estàtic en temps de compilació i es rehidrata al client. Els scripts CDN s’han de carregar només en APIs del navegador — gatsby-browser.js és el lloc adequat.

@wink/elements npm package Instal·la i carrega el paquet CDN amb tipus TypeScript.

Instal·lar

npm install @wink/elements

Carregar via gatsby-browser.js

L’API onClientEntry s’executa una vegada tan bon punt s’inicialitza el runtime de Gatsby al navegador:

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

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

Variables d’entorn

Gatsby exposa només les variables prefixades amb GATSBY_ al paquet del navegador:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Ús en pàgines i components

import React from 'react';

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

TypeScript

Gatsby utilitza React, així que afegeix les mateixes declaracions intrínseques JSX que la integració de React:

// Consulta /integrations/react per al fitxer complet de declaracions

gatsby-ssr.js — no cal fer canvis

No cal modificar gatsby-ssr.js. Les etiquetes <wink-*> es renderitzen com a elements HTML plans a la sortida estàtica, i l’script CDN les actualitza quan el navegador carrega la pàgina.