SDK Svelte

Paket @tracio/svelte membungkus inti @tracio/sdk dan menyediakan primitif Svelte yang idiomatis: satu kali pemanggilan init, serta readable store yang memberikan Anda ID pengunjung dan hasil identifikasi.

Instalasi

npm install @tracio/svelte @tracio/sdk

svelte (5) merupakan peer dependency dan diasumsikan sudah terpasang di aplikasi Anda.

Penyiapan

Panggil Tracio.init({ publicKey }) sekali saja, di dekat root aplikasi Anda — di +layout.svelte untuk SvelteKit — dilindungi oleh browser agar tidak pernah berjalan selama 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 />

Store

State TRACIO diekspos sebagai readable store Svelte. Setiap nilai store berupa QueryState yang membawa data, isLoading, dan error. Konsumsi store dengan awalan $: $visitor.data, $visitor.isLoading, $visitor.error.

Berasal dari React? QueryState Svelte menghilangkan flag isFetched milik hook React, dan useVisitorId() tidak menyediakan metode fetch imperatif — hanya useTracioResult() yang membawa getData().

useVisitorId()

Mengembalikan readable store berupa { data, isLoading, error }, di mana data adalah pengidentifikasi pengunjung yang stabil (string | undefined).

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

useTracioResult(opts?)

Mengembalikan readable store berupa { data, isLoading, error } yang menyimpan TracioResult lengkap (ID pengunjung plus deteksi bot). Store yang dikembalikan juga membawa metode getData() (ia memperluas Readable) untuk pengambilan (ulang) secara imperatif. opts.immediate secara default true; berikan { immediate: false } untuk menunda pengambilan hingga Anda memanggil getData() — misalnya di balik 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 yang mengembalikan TracioInstance yang mendasari (atau undefined bila Tracio.init() belum dijalankan untuk tree saat ini) untuk penggunaan lanjutan. Ia mengembalikan instance secara langsung — tidak ada store atau objek pembungkus yang perlu didestrukturisasi.

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

Contoh lengkap

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

Langkah berikutnya

• Referensi SDK JavaScript — API inti @tracio/sdk yang menjadi dasar store
• Penanganan Error — kode error dan strategi retry
• Ikhtisar SDK — setiap paket framework secara sekilas