Svelte-SDK

Das Paket @tracio/svelte umhüllt das Kern-@tracio/sdk und stellt idiomatische Svelte-Primitive bereit: einen einmaligen init-Aufruf und readable Stores, die Ihnen die Besucher-ID und das Identifizierungsergebnis liefern.

Installation

npm install @tracio/svelte @tracio/sdk

svelte (5) ist eine Peer-Dependency und wird als bereits in Ihrer App installiert vorausgesetzt.

Einrichtung

Rufen Sie Tracio.init({ publicKey }) einmalig nahe der Wurzel Ihrer App auf — in +layout.svelte bei SvelteKit — abgesichert durch browser, damit es niemals während des serverseitigen Renderings läuft.

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

Der TRACIO-Status wird als Svelte-readable-Stores bereitgestellt. Jeder Store-Wert ist ein QueryState, der data, isLoading und error trägt. Konsumieren Sie den Store mit dem $-Präfix: $visitor.data, $visitor.isLoading, $visitor.error.

Kommen Sie von React? Sveltes QueryState lässt das isFetched-Flag der React-Hooks weg, und useVisitorId() stellt keine imperative Abrufmethode bereit — nur useTracioResult() trägt ein getData().

useVisitorId()

Gibt einen readable Store von { data, isLoading, error } zurück, wobei data der stabile Besucher-Identifikator ist (string | undefined).

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

useTracioResult(opts?)

Gibt einen readable Store von { data, isLoading, error } zurück, der das vollständige TracioResult (Besucher-ID plus Bot-Erkennung) hält. Der zurückgegebene Store trägt zudem eine getData()-Methode (er erweitert Readable) für imperatives (erneutes) Abrufen. opts.immediate ist standardmäßig true; übergeben Sie { immediate: false }, um den Abruf aufzuschieben, bis Sie getData() aufrufen — zum Beispiel hinter einem Einwilligungs-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, der die zugrunde liegende TracioInstance zurückgibt (oder undefined, wenn Tracio.init() für den aktuellen Baum nicht ausgeführt wurde) für fortgeschrittene Nutzung. Er gibt die Instanz direkt zurück — es gibt keinen Store und kein Wrapper-Objekt zum Destrukturieren.

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

Vollständiges Beispiel

<!-- +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ächste Schritte

• JavaScript-SDK-Referenz — die Kern-@tracio/sdk-API, auf der die Stores aufbauen
• Fehlerbehandlung — Fehlercodes und Retry-Strategien
• SDKs-Überblick — jedes Framework-Paket auf einen Blick