Svelte / SvelteKit

Svelte transmet les attributs directement au DOM sans couche de DOM virtuel, ce qui rend les éléments personnalisés parfaitement adaptés. Pour SvelteKit (SSR), chargez le CDN dans onMount ou protégez avec la vérification browser.

@wink/elements npm package Installez et chargez le bundle CDN avec les types TypeScript.

Installation

npm install @wink/elements

SvelteKit — layout racine

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

Alternativement, chargez dans onMount dans +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 />

Utilisation dans les composants

Svelte transmet tous les attributs inconnus directement au DOM, donc aucune configuration supplémentaire n’est nécessaire :

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

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

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

Variables d’environnement

SvelteKit expose uniquement les variables préfixées par PUBLIC_ au navigateur :

.env

PUBLIC_WINK_CLIENT_ID=your-client-id

Rendu SSR

Ne jamais rendre les éléments <wink-*> lors du rendu côté serveur — les éléments personnalisés sont enregistrés dans le registre customElements du navigateur qui n’existe pas sur le serveur. Encapsulez dans {#if browser} ou appelez load() uniquement dans onMount.

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

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

Svelte nu (Vite, sans 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" />

Lectures complémentaires

• Référence Web Components
• @wink/elements npm package