Svelte-SDK

Het pakket @tracio/svelte verpakt de kern-@tracio/sdk en stelt idiomatische Svelte-primitieven beschikbaar: één eenmalige init-aanroep en readable stores die je de bezoekers-ID en het identificatieresultaat aanreiken.

Installatie

npm install @tracio/svelte @tracio/sdk

svelte (5) is een peer-dependency en wordt verondersteld al in je app geïnstalleerd te zijn.

Setup

Roep Tracio.init({ publicKey }) eenmalig aan, dicht bij de root van je app — in +layout.svelte bij SvelteKit — afgeschermd door browser, zodat het nooit tijdens server-side rendering draait.

<!-- +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

De TRACIO-status wordt beschikbaar gesteld als Svelte readable stores. Elke store-waarde is een QueryState die data, isLoading en error draagt. Consumeer de store met het $-voorvoegsel: $visitor.data, $visitor.isLoading, $visitor.error.

Kom je van React? Sveltes QueryState laat de isFetched-vlag van de React-hooks weg, en useVisitorId() stelt geen imperatieve fetch-methode beschikbaar — alleen useTracioResult() draagt een getData().

useVisitorId()

Geeft een readable store van { data, isLoading, error } terug, waarbij data de stabiele bezoekersidentifier is (string | undefined).

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

useTracioResult(opts?)

Geeft een readable store van { data, isLoading, error } terug die het volledige TracioResult (bezoekers-ID plus botdetectie) bevat. De teruggegeven store draagt ook een getData()-methode (hij breidt Readable uit) voor imperatief (opnieuw) ophalen. opts.immediate staat standaard op true; geef { immediate: false } door om het ophalen uit te stellen totdat je getData() aanroept — bijvoorbeeld achter een toestemmingsscherm.

<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()

Escape hatch die de onderliggende TracioInstance teruggeeft (of undefined wanneer Tracio.init() niet voor de huidige tree is uitgevoerd) voor geavanceerd gebruik. Hij geeft de instantie direct terug — er is geen store of wrapper-object om te destructureren.

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

Volledig voorbeeld

<!-- +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}

Volgende stappen

• JavaScript-SDK-referentie — de kern-@tracio/sdk-API waarop de stores voortbouwen
• Foutafhandeling — foutcodes en retry-strategieën
• SDK's-overzicht — elk framework-pakket in één oogopslag