İçeriğe geç

npm paketi

@wink/elements npm paketi, Wink web bileşenlerini herhangi bir JavaScript veya TypeScript projesine eklemenin en hızlı yoludur. CDN kaynaklarını enjekte eden ve tüm bileşen öznitelikleri için tam TypeScript tip bildirimleri sağlayan bir load() fonksiyonu sunar.

wink-travel/wink-elements GitHub'da Kaynak kodu, API referansı ve katkı talimatları.

Kurulum

npm install @wink/elements

Hızlı başlangıç

load() fonksiyonunu uygulama başlangıcında bir kez çağırın. İdempotenttir — birden çok kez çağrılması güvenlidir.

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

load({ clientId: 'YOUR_CLIENT_ID' });

Sonra HTML veya JSX içinde herhangi bir Wink bileşenini kullanın:

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

Framework örnekleri

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 });
  }
}

TypeScript tipleri

Tüm bileşen öznitelik arayüzleri, JSX, şablon dizeleri veya tipli sözlüklerde kullanım için dışa aktarılır:

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

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript geçersiz layout değerlerini yakalar
  id: 'abc123',
  sort: 'POPULARITY',
};

Staging CDN kullanımı

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

API

`load(options)`

Seçenek	Tür	Zorunlu	Varsayılan	Açıklama
`clientId`	`string`	Evet	—	Wink OAuth2 Client ID’niz
`configurationId`	`string`	Hayır	—	İsteğe bağlı özelleştirme ID’si
`cdnBaseUrl`	`string`	Hayır	`https://elements.wink.travel`	CDN URL’sini geçersiz kılma

Daha fazla okuma