Svelte SDK

Paketet @tracio/svelte omsluter kärnpaketet @tracio/sdk och exponerar idiomatiska Svelte-primitiver: ett init-anrop som körs en gång, och readable stores som ger dig besökar-ID:t och identifieringsresultatet.

Installation

npm install @tracio/svelte @tracio/sdk

svelte (5) är ett peer-beroende och förväntas redan vara installerat i din app.

Uppsättning

Anropa Tracio.init({ publicKey }) en gång, nära roten av din app — i +layout.svelte för SvelteKit — skyddat av browser så att det aldrig körs under server-side-rendering.

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

TRACIO-tillstånd exponeras som Svelte readable stores. Varje store-värde är ett QueryState som bär data, isLoading och error. Konsumera storen med prefixet $: $visitor.data, $visitor.isLoading, $visitor.error.

Kommer du från React? Sveltes QueryState utelämnar React-hookarnas isFetched-flagga, och useVisitorId() exponerar ingen imperativ hämtningsmetod — bara useTracioResult() bär ett getData().

useVisitorId()

Returnerar en readable store med { data, isLoading, error }, där data är den stabila besökaridentifieraren (string | undefined).

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

useTracioResult(opts?)

Returnerar en readable store med { data, isLoading, error } som håller hela TracioResult (besökar-ID plus botdetektering). Den returnerade storen bär även en getData()-metod (den utökar Readable) för imperativ (om)hämtning. opts.immediate är som standard true; skicka { immediate: false } för att skjuta upp hämtningen tills du anropar getData() — till exempel bakom en samtyckesgrind.

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

Nödutgång som returnerar den underliggande TracioInstance (eller undefined när Tracio.init() inte har körts för det aktuella trädet) för avancerad användning. Den returnerar instansen direkt — det finns ingen store eller wrapper-objekt att destrukturera.

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

Fullständigt exempel

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

Nästa steg

• JavaScript SDK-referens — kärn-API:t @tracio/sdk som stores bygger på
• Felhantering — felkoder och omförsöksstrategier
• Översikt över SDK:er — varje ramverkspaket i ett svep