Svelte / SvelteKit

يمرر Svelte السمات مباشرة إلى DOM بدون طبقة DOM افتراضية، مما يجعل العناصر المخصصة مناسبة بشكل طبيعي. بالنسبة لـ SvelteKit (SSR)، قم بتحميل CDN داخل onMount أو احمِ ذلك باستخدام فحص browser.

@wink/elements npm package قم بتثبيت وتحميل حزمة CDN مع أنواع TypeScript.

التثبيت

npm install @wink/elements

SvelteKit — التخطيط الجذري

src/routes/+layout.ts

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

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

بدلاً من ذلك، قم بالتحميل داخل onMount في +layout.svelte:

src/routes/+layout.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<slot />

الاستخدام في المكونات

يمرر Svelte جميع السمات غير المعروفة مباشرة إلى DOM، لذلك لا حاجة لأي إعداد إضافي:

<script>
  export let layoutId = 'YOUR_LAYOUT_ID';
</script>

<main>
  <wink-content-loader layout="HOTEL" id={layoutId} />
  <wink-lookup />
</main>

Svelte 5 (تركيب runes)

<script lang="ts">
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  let { layoutId }: { layoutId: string } = $props();

  onMount(() => {
    load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  });
</script>

<wink-content-loader layout="HOTEL" id={layoutId} />

متغيرات البيئة

يكشف SvelteKit فقط عن المتغيرات التي تبدأ بـ PUBLIC_ للمتصفح:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

التصيير على الخادم (SSR)

لا تقم أبدًا بعرض عناصر <wink-*> أثناء التصيير على جانب الخادم — حيث يتم تسجيل العناصر المخصصة في سجل customElements الخاص بالمتصفح والذي لا يوجد على الخادم. قم بالتغليف داخل {#if browser} أو استدعِ load() فقط داخل onMount.

<script>
  import { browser } from '$app/environment';
</script>

{#if browser}
  <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
{/if}

Svelte العادي (Vite، بدون SvelteKit)

src/App.svelte

<script>
  import { onMount } from 'svelte';
  import { load } from '@wink/elements';

  onMount(() => {
    load({ clientId: import.meta.env.VITE_WINK_CLIENT_ID });
  });
</script>

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

قراءة إضافية

• مرجع مكونات الويب
• حزمة npm @wink/elements