Svelte SDK

Pakiet @tracio/svelte opakowuje rdzeniowy @tracio/sdk i udostępnia idiomatyczne prymitywy Svelte: jednorazowe wywołanie init oraz readable store'y, które dostarczają identyfikator odwiedzającego i wynik identyfikacji.

Instalacja

npm install @tracio/svelte @tracio/sdk

svelte (5) jest peer dependency i zakłada się, że jest już zainstalowany w Twojej aplikacji.

Konfiguracja

Wywołaj Tracio.init({ publicKey }) jednorazowo, blisko korzenia aplikacji — w +layout.svelte w przypadku SvelteKit — zabezpieczone przez browser, aby nigdy nie uruchamiało się podczas renderowania po stronie serwera.

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

Stan TRACIO jest udostępniany jako readable store'y Svelte. Każda wartość store'a to QueryState niosący data, isLoading i error. Konsumuj store za pomocą prefiksu $: $visitor.data, $visitor.isLoading, $visitor.error.

Przychodzisz z React? QueryState w Svelte pomija flagę isFetched znaną z hooków React, a useVisitorId() nie udostępnia imperatywnej metody pobierania — tylko useTracioResult() niesie getData().

useVisitorId()

Zwraca readable store { data, isLoading, error }, w którym data to stabilny identyfikator odwiedzającego (string | undefined).

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

useTracioResult(opts?)

Zwraca readable store { data, isLoading, error } przechowujący pełny TracioResult (identyfikator odwiedzającego plus wykrywanie botów). Zwracany store niesie także metodę getData() (rozszerza Readable) do imperatywnego (ponownego) pobierania. opts.immediate domyślnie ma wartość true; przekaż { immediate: false }, aby odroczyć pobieranie do momentu wywołania getData() — na przykład za bramką zgody.

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

Furtka awaryjna, która zwraca bazowy TracioInstance (lub undefined, gdy Tracio.init() nie zostało uruchomione dla bieżącego drzewa) do zaawansowanych zastosowań. Zwraca instancję bezpośrednio — nie ma store'a ani obiektu opakowującego do destrukturyzacji.

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

Pełny przykład

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

Kolejne kroki

• Dokumentacja JavaScript SDK — rdzeniowe API @tracio/sdk, na którym opierają się store'y
• Obsługa błędów — kody błędów i strategie ponawiania
• Przegląd SDK — każdy pakiet frameworkowy w skrócie