Gatsby

Gatsby ģenerē statisku HTML būvēšanas laikā un atkārtoti aktivizē to klientā. CDN skripti jāielādē tikai pārlūkprogrammas API — gatsby-browser.js ir pareizā vieta.

@wink/elements npm pakotne Instalējiet un ielādējiet CDN pakotni ar TypeScript tipiem.

Instalēšana

npm install @wink/elements

Ielāde caur gatsby-browser.js

onClientEntry API izpildās vienreiz, tiklīdz Gatsby izpildes vide tiek inicializēta pārlūkprogrammā:

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

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

Vides mainīgie

Gatsby pārlūkprogrammas pakotnei atklāj tikai mainīgos, kas sākas ar GATSBY_:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Lietošana lapās un komponentēs

import React from 'react';

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

TypeScript

Gatsby izmanto React, tāpēc pievienojiet tās pašas JSX iekšējās deklarācijas kā React integrācijā:

// Skatīt /integrations/react pilnu deklarācijas failu

gatsby-ssr.js — nav nepieciešamas izmaiņas

Nav jāmaina gatsby-ssr.js. <wink-*> tagi tiek renderēti kā parasti HTML elementi statiskajā izvades failā, un CDN skripts tos uzlabo, kad pārlūkprogramma ielādē lapu.