Svelte SDK

Gói @tracio/svelte bao bọc @tracio/sdk lõi và cung cấp các primitive đặc trưng của Svelte: một lệnh gọi init duy nhất và các readable store trao cho bạn ID khách truy cập cùng kết quả nhận dạng.

Cài đặt

npm install @tracio/svelte @tracio/sdk

svelte (5) là một peer dependency và được giả định là đã được cài đặt sẵn trong ứng dụng của bạn.

Thiết lập

Gọi Tracio.init({ publicKey }) một lần, gần gốc của ứng dụng — trong +layout.svelte với SvelteKit — được bảo vệ bởi browser để nó không bao giờ chạy trong quá trình 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

Trạng thái TRACIO được cung cấp dưới dạng các readable store của Svelte. Mỗi giá trị store là một QueryState mang theo data, isLoading và error. Sử dụng store với tiền tố $: $visitor.data, $visitor.isLoading, $visitor.error.

Đến từ React? QueryState của Svelte bỏ đi cờ isFetched của các React hook, và useVisitorId() không cung cấp phương thức fetch mệnh lệnh nào — chỉ useTracioResult() mang theo một getData().

useVisitorId()

Trả về một readable store của { data, isLoading, error }, trong đó data là định danh khách truy cập ổn định (string | undefined).

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

useTracioResult(opts?)

Trả về một readable store của { data, isLoading, error } giữ toàn bộ TracioResult (ID khách truy cập cùng phát hiện bot). Store trả về cũng mang theo một phương thức getData() (nó mở rộng Readable) để (tái) fetch theo kiểu mệnh lệnh. opts.immediate mặc định là true; truyền { immediate: false } để hoãn việc fetch cho đến khi bạn gọi getData() — ví dụ phía sau một cổng đồng thuận (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 trả về TracioInstance bên dưới (hoặc undefined khi Tracio.init() chưa chạy cho cây hiện tại) cho các trường hợp sử dụng nâng cao. Nó trả về instance trực tiếp — không có store hay đối tượng wrapper nào để destructure.

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

Ví dụ đầy đủ

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

Bước tiếp theo

• Tài liệu tham khảo JavaScript SDK — API @tracio/sdk lõi mà các store xây dựng dựa trên
• Xử lý lỗi — mã lỗi và chiến lược retry
• Tổng quan SDK — mọi gói framework trong một cái nhìn