Svelte / SvelteKit

Svelte passa gli attributi direttamente al DOM senza uno strato di virtual DOM, rendendo gli elementi personalizzati una scelta naturale. Per SvelteKit (SSR), carica il CDN all’interno di onMount o proteggi con il controllo browser.

@wink/elements npm package Installa e carica il bundle CDN con i tipi TypeScript.

Installazione

npm install @wink/elements

SvelteKit — layout root

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

In alternativa, carica all’interno di 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 />

Uso nei componenti

Svelte passa tutti gli attributi sconosciuti direttamente al DOM, quindi non è necessaria alcuna configurazione aggiuntiva:

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

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

Svelte 5 (sintassi 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} />

Variabili d’ambiente

SvelteKit espone al browser solo le variabili con prefisso PUBLIC_:

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

Rendering SSR

Non eseguire mai il rendering degli elementi <wink-*> durante il rendering lato server — gli elementi personalizzati sono registrati nel registro customElements del browser, che non esiste sul server. Avvolgi in {#if browser} o chiama load() solo all’interno di onMount.

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

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

Svelte puro (Vite, senza 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" />

Ulteriori letture

• Riferimento Web Components
• @wink/elements npm package