Gatsby

Gatsby מייצר HTML סטטי בזמן הבנייה ומבצע רה-הידרציה בצד הלקוח. סקריפטים מ-CDN חייבים להיטען רק ב-API של הדפדפן — gatsby-browser.js הוא המקום הנכון לכך.

@wink/elements npm package התקן וטעין את חבילת ה-CDN עם טיפוסי TypeScript.

התקנה

npm install @wink/elements

טעינה דרך gatsby-browser.js

ה-API onClientEntry רץ פעם אחת ברגע ש-runtime של Gatsby מאותחל בדפדפן:

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

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

משתני סביבה

Gatsby חושף רק משתנים שמתחילים ב-GATSBY_ לחבילת הדפדפן:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

שימוש בעמודים וברכיבים

import React from 'react';

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

TypeScript

Gatsby משתמש ב-React, לכן הוסף את אותן הכרזות JSX intrinsic כמו באינטגרציה של React:

// ראה /integrations/react עבור קובץ ההכרזה המלא

gatsby-ssr.js — אין צורך בשינויים

אין צורך לשנות את gatsby-ssr.js. תגיות <wink-*> מתורגמות לאלמנטים HTML רגילים ביציאה הסטטית, וסקריפט ה-CDN משדרג אותן כאשר הדפדפן טוען את העמוד.