Svelte SDK

@tracio/svelte paketi, çekirdek @tracio/sdk paketini sarmalar ve idiomatik Svelte primitifleri sunar: tek seferlik bir init çağrısı ve size ziyaretçi kimliğini ve tanımlama sonucunu veren readable store'lar.

Kurulum

npm install @tracio/svelte @tracio/sdk

svelte (5) bir peer dependency'dir ve uygulamanızda zaten kurulu olduğu varsayılır.

Yapılandırma

Tracio.init({ publicKey }) çağrısını uygulamanızın kök noktasına yakın bir yerde bir kez yapın — SvelteKit'te +layout.svelte içinde — sunucu tarafı render sırasında asla çalışmaması için browser ile korumaya alarak.

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

TRACIO durumu, Svelte readable store'ları olarak sunulur. Her store değeri, data, isLoading ve error taşıyan bir QueryState'tir. Store'u $ ön ekiyle tüketin: $visitor.data, $visitor.isLoading, $visitor.error.

React'ten mi geliyorsunuz? Svelte'in QueryState yapısı, React hook'larının isFetched bayrağını içermez ve useVisitorId() imperatif bir fetch metodu sunmaz — yalnızca useTracioResult() bir getData() taşır.

useVisitorId()

{ data, isLoading, error } yapısında bir readable store döndürür; burada data, kararlı ziyaretçi tanımlayıcısıdır (string | undefined).

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

useTracioResult(opts?)

Tam TracioResult'ı (ziyaretçi kimliği artı bot algılama) tutan { data, isLoading, error } yapısında bir readable store döndürür. Döndürülen store, imperatif (yeniden) getirme için ayrıca bir getData() metodu taşır (Readable'ı genişletir). opts.immediate varsayılan olarak true'dur; getirmeyi siz getData() çağırana kadar ertelemek için { immediate: false } geçin — örneğin bir onay geçidinin arkasında.

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

İleri düzey kullanım için alttaki TracioInstance'ı (veya geçerli ağaç için Tracio.init() çalıştırılmadıysa undefined) döndüren bir kaçış kapağı (escape hatch). Örneği doğrudan döndürür — destrüktüre edilecek bir store veya wrapper nesnesi yoktur.

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

Tam örnek

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

Sonraki adımlar

• JavaScript SDK Referansı — store'ların üzerine inşa edildiği çekirdek @tracio/sdk API'si
• Hata Yönetimi — hata kodları ve yeniden deneme stratejileri
• SDK'lara genel bakış — her framework paketi bir bakışta