SDK Svelte

Pachetul @tracio/svelte încapsulează pachetul de bază @tracio/sdk și expune primitive Svelte idiomatice: un apel init unic și store-uri readable care îți oferă ID-ul vizitatorului și rezultatul identificării.

Instalare

npm install @tracio/svelte @tracio/sdk

svelte (5) este o peer dependency și se presupune că este deja instalat în aplicația ta.

Configurare

Apelează Tracio.init({ publicKey }) o singură dată, aproape de rădăcina aplicației tale — în +layout.svelte pentru SvelteKit — protejat de browser, astfel încât să nu ruleze niciodată în timpul randării pe server.

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

Store-uri

Starea TRACIO este expusă ca store-uri readable Svelte. Fiecare valoare a store-ului este un QueryState care transportă data, isLoading și error. Consumă store-ul cu prefixul $: $visitor.data, $visitor.isLoading, $visitor.error.

Vii dinspre React? QueryState din Svelte omite flag-ul isFetched al hook-urilor React, iar useVisitorId() nu expune o metodă imperativă de fetch — doar useTracioResult() transportă un getData().

useVisitorId()

Returnează un store readable de forma { data, isLoading, error }, unde data este identificatorul stabil al vizitatorului (string | undefined).

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

useTracioResult(opts?)

Returnează un store readable de forma { data, isLoading, error } care deține întregul TracioResult (ID-ul vizitatorului plus detecția de bot). Store-ul returnat transportă de asemenea o metodă getData() (extinde Readable) pentru (re)fetch imperativ. opts.immediate are valoarea implicită true; transmite { immediate: false } pentru a amâna fetch-ul până când apelezi getData() — de exemplu în spatele unui consent gate.

<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 care returnează TracioInstance-ul subiacent (sau undefined când Tracio.init() nu a rulat pentru arborele curent) pentru utilizări avansate. Returnează instanța direct — nu există niciun store sau obiect wrapper de destructurat.

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

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

Pașii următori

• Referință SDK JavaScript — API-ul de bază @tracio/sdk pe care se construiesc store-urile
• Gestionarea erorilor — coduri de eroare și strategii de retry
• Prezentare generală SDK-uri — fiecare pachet de framework dintr-o privire