Svelte / SvelteKit

Svelte übergibt Attribute direkt an das DOM ohne eine virtuelle DOM-Schicht, was benutzerdefinierte Elemente besonders geeignet macht. Für SvelteKit (SSR) laden Sie das CDN innerhalb von onMount oder schützen Sie es mit der browser-Prüfung.

@wink/elements npm package Installieren und laden Sie das CDN-Bundle mit TypeScript-Typen.

Installation

npm install @wink/elements

SvelteKit — Root-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 });
  }
}

Alternativ laden Sie es innerhalb von onMount in +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 />

Verwendung in Komponenten

Svelte übergibt alle unbekannten Attribute direkt an das DOM, daher ist keine zusätzliche Konfiguration erforderlich:

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

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

Svelte 5 (Runen-Syntax)

<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} />

Umgebungsvariablen

SvelteKit stellt nur Variablen mit dem Präfix PUBLIC_ im Browser zur Verfügung:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

SSR-Rendering

Rendern Sie <wink-*>-Elemente niemals während des serverseitigen Renderings — benutzerdefinierte Elemente werden im Browser-customElements-Register registriert, das auf dem Server nicht existiert. Verpacken Sie sie in {#if browser} oder rufen Sie load() nur innerhalb von onMount auf.

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

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

Reines Svelte (Vite, ohne 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" />

Weiterführende Literatur

• Web Components reference
• @wink/elements npm package