Svelte / SvelteKit

Svelte przekazuje atrybuty bezpośrednio do DOM bez warstwy wirtualnego DOM, co sprawia, że elementy niestandardowe są naturalnym wyborem. Dla SvelteKit (SSR) załaduj CDN wewnątrz onMount lub zabezpiecz za pomocą sprawdzenia browser.

@wink/elements npm package Zainstaluj i załaduj pakiet CDN z typami TypeScript.

Instalacja

npm install @wink/elements

SvelteKit — główny layout

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

Alternatywnie, załaduj wewnątrz onMount w +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 />

Użycie w komponentach

Svelte przekazuje wszystkie nieznane atrybuty bezpośrednio do DOM, więc nie jest potrzebna dodatkowa konfiguracja:

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

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

Svelte 5 (składnia 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} />

Zmienne środowiskowe

SvelteKit udostępnia w przeglądarce tylko zmienne z prefiksem PUBLIC_:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

Renderowanie SSR

Nigdy nie renderuj elementów <wink-*> podczas renderowania po stronie serwera — elementy niestandardowe są rejestrowane w rejestrze customElements przeglądarki, który nie istnieje na serwerze. Owiń w {#if browser} lub wywołuj load() tylko wewnątrz onMount.

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

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

Czysty Svelte (Vite, bez 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" />

Dalsza lektura

• Referencje Web Components
• @wink/elements npm package