SDK Svelte

Le paquet @tracio/svelte encapsule le cœur @tracio/sdk et expose des primitives idiomatiques de Svelte : un appel init unique, et des stores lisibles qui vous fournissent l'identifiant visiteur et le résultat d'identification.

Installation

npm install @tracio/svelte @tracio/sdk

svelte (5) est une peer dependency et doit déjà être installé dans votre application.

Configuration

Appelez Tracio.init({ publicKey }) une seule fois, près de la racine de votre application — dans +layout.svelte pour SvelteKit — protégé par browser pour qu'il ne s'exécute jamais lors du rendu côté serveur.

<!-- +layout.svelte -->
<script>
  import { Tracio } from "@tracio/svelte"
  import { browser } from "$app/environment"
  if (browser) Tracio.init({ publicKey: import.meta.env.VITE_TRACIO_KEY })
</script>
<slot />

Stores

L'état de TRACIO est exposé sous forme de stores lisibles Svelte. La valeur de chaque store est un QueryState qui porte data, isLoading et error. Consommez le store avec le préfixe $ : $visitor.data, $visitor.isLoading, $visitor.error.

Vous venez de React ? Le QueryState de Svelte omet le flag isFetched des hooks React, et useVisitorId() n'expose pas de méthode de récupération impérative — seul useTracioResult() porte un getData().

useVisitorId()

Renvoie un store lisible de { data, isLoading, error }, où data est l'identifiant visiteur stable (string | undefined).

<script>
  import { useVisitorId } from "@tracio/svelte"
  const visitor = useVisitorId()
</script>
{$visitor.data}

useTracioResult(opts?)

Renvoie un store lisible de { data, isLoading, error } contenant le TracioResult complet (identifiant visiteur plus détection des bots). Le store renvoyé porte également une méthode getData() (il étend Readable) pour une (re)récupération impérative. opts.immediate vaut true par défaut ; passez { immediate: false } pour différer la récupération jusqu'à ce que vous appeliez getData() — par exemple derrière une barrière de consentement.

<script>
  import { useTracioResult } from "@tracio/svelte"
  const result = useTracioResult({ immediate: false })
  // $result.data / $result.isLoading / $result.error
  // result.getData(): Promise<void> — call to fetch on demand
</script>

useTracio()

Échappatoire qui renvoie l'instance TracioInstance sous-jacente (ou undefined lorsque Tracio.init() n'a pas été exécuté pour l'arbre courant) pour un usage avancé. Elle renvoie l'instance directement — il n'y a aucun store ni objet d'enveloppe à déstructurer.

<script>
  import { useTracio } from "@tracio/svelte"
  const tracio = useTracio()
</script>

Exemple complet

<!-- +layout.svelte -->
<script>
  import { Tracio } from "@tracio/svelte"
  import { browser } from "$app/environment"
  if (browser) Tracio.init({ publicKey: import.meta.env.VITE_TRACIO_KEY })
</script>
<slot />

<!-- AnyComponent.svelte -->
<script>
  import { useVisitorId } from "@tracio/svelte"
  const visitor = useVisitorId()
</script>
{#if $visitor.isLoading}Loading…{:else if $visitor.error}Error: {$visitor.error.message}{:else}Visitor: {$visitor.data}{/if}

Étapes suivantes

• Référence du SDK JavaScript — l'API du cœur @tracio/sdk sur laquelle reposent les stores
• Gestion des erreurs — codes d'erreur et stratégies de nouvelle tentative
• Aperçu des SDK — tous les paquets par framework en un coup d'œil