تخطَّ إلى المحتوى

حزمة npm

حزمة @wink/elements على npm هي أسرع طريقة لإضافة مكونات ويب Wink إلى أي مشروع جافاسكريبت أو تايب سكريبت. توفر دالة load() التي تقوم بحقن موارد CDN وتصريحات أنواع TypeScript كاملة لجميع سمات المكونات.

wink-travel/wink-elements على GitHub كود المصدر، مرجع API، وتعليمات المساهمة.

التثبيت

npm install @wink/elements

البداية السريعة

استدعِ load() مرة واحدة عند بدء تشغيل التطبيق. الدالة idempotent — آمنة للاستدعاء عدة مرات.

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

load({ clientId: 'YOUR_CLIENT_ID' });

ثم استخدم أي مكون من Wink في HTML أو JSX الخاص بك:

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

أمثلة على الأُطُر

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

يتم تصدير جميع واجهات سمات المكونات للاستخدام في JSX، أو القوالب النصية، أو القواميس المطبقة بالأنواع:

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

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript سيتحقق من صحة قيم layout
  id: 'abc123',
  sort: 'POPULARITY',
};

استخدام CDN تجريبي

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

API

`load(options)`

الخيار	النوع	مطلوب	الافتراضي	الوصف
`clientId`	`string`	نعم	—	معرف عميل OAuth2 الخاص بـ Wink
`configurationId`	`string`	لا	—	معرف تخصيص اختياري
`cdnBaseUrl`	`string`	لا	`https://elements.wink.travel`	تجاوز عنوان URL الخاص بـ CDN

قراءة إضافية