Gatsby

Gatsby menjana HTML statik semasa binaan dan menghidupkan semula di klien. Skrip CDN mesti dimuatkan hanya dalam API pelayar — gatsby-browser.js adalah tempat yang betul.

@wink/elements npm package Pasang dan muatkan bundel CDN dengan jenis TypeScript.

Pasang

npm install @wink/elements

Muatkan melalui gatsby-browser.js

API onClientEntry dijalankan sekali sebaik sahaja runtime Gatsby dimulakan dalam pelayar:

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

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

Pembolehubah persekitaran

Gatsby hanya mendedahkan pembolehubah yang diawali dengan GATSBY_ kepada bundel pelayar:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

Gunakan dalam halaman dan komponen

import React from 'react';

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

TypeScript

Gatsby menggunakan React, jadi tambah deklarasi JSX intrinsic yang sama seperti integrasi React:

// Lihat /integrations/react untuk fail deklarasi penuh

gatsby-ssr.js — tiada perubahan diperlukan

Anda tidak perlu mengubah gatsby-ssr.js. Tag <wink-*> dirender sebagai elemen HTML biasa dalam output statik, dan skrip CDN akan menaik tarafnya apabila pelayar memuatkan halaman.