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 (תחביר רונס)

<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