Przejdź do głównej zawartości

pakiet npm

Pakiet npm @wink/elements to najszybszy sposób na dodanie komponentów webowych Wink do dowolnego projektu JavaScript lub TypeScript. Udostępnia funkcję load(), która wstrzykuje zasoby CDN oraz pełne deklaracje typów TypeScript dla wszystkich atrybutów komponentów.

wink-travel/wink-elements na GitHub Kod źródłowy, dokumentacja API oraz instrukcje dotyczące współtworzenia.

Instalacja

npm install @wink/elements

Szybki start

Wywołaj load() raz podczas uruchamiania aplikacji. Funkcja jest idempotentna — można ją bezpiecznie wywołać wielokrotnie.

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

load({ clientId: 'YOUR_CLIENT_ID' });

Następnie użyj dowolnego komponentu Wink w swoim HTML lub JSX:

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID"></wink-content-loader>

Przykłady dla frameworków

Next.js (App Router)

'use client';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return <html><body>{children}</body></html>;
}

Nuxt 3

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

export default defineNuxtPlugin(() => {
  load({ clientId: useRuntimeConfig().public.winkClientId });
});

Astro

---
import { load } from '@wink/elements';
---
<script>
  import { load } from '@wink/elements';
  load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
</script>

SvelteKit

import { load as loadWink } from '@wink/elements';
import { browser } from '$app/environment';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

Typy TypeScript

Wszystkie interfejsy atrybutów komponentów są eksportowane do użycia w JSX, template literals lub typowanych słownikach:

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript wykryje nieprawidłowe wartości layoutu
  id: 'abc123',
  sort: 'POPULARITY',
};

Użycie stagingowego CDN

load({
  clientId: 'YOUR_CLIENT_ID',
  cdnBaseUrl: 'https://staging-elements.wink.travel',
});

API

`load(options)`

Opcja	Typ	Wymagane	Domyślnie	Opis
`clientId`	`string`	Tak	—	Twój Wink OAuth2 Client ID
`configurationId`	`string`	Nie	—	Opcjonalny identyfikator konfiguracji
`cdnBaseUrl`	`string`	Nie	`https://elements.wink.travel`	Nadpisanie adresu URL CDN

Dalsza lektura