Svelte SDK

แพ็กเกจ @tracio/svelte ห่อหุ้มคอร์ @tracio/sdk และเปิดให้ใช้ Svelte primitive ที่เป็นสำนวนแบบ Svelte โดยเฉพาะ ได้แก่ การเรียก init เพียงครั้งเดียว และ readable store ที่ส่งค่า visitor ID และผลการระบุตัวตนให้คุณ

การติดตั้ง

npm install @tracio/svelte @tracio/sdk

svelte (5) เป็น peer dependency และคาดว่าติดตั้งไว้ในแอปของคุณอยู่แล้ว

การตั้งค่า

เรียก Tracio.init({ publicKey }) เพียงครั้งเดียวใกล้กับรากของแอป — ใน +layout.svelte สำหรับ SvelteKit — โดยป้องกันด้วย browser เพื่อไม่ให้ทำงานระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์

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

สถานะของ TRACIO ถูกเปิดให้ใช้ในรูปของ Svelte readable store แต่ละค่าของสโตร์คือ QueryState ที่บรรจุ data, isLoading และ error เข้าถึงค่าของสโตร์ด้วยคำนำหน้า $: $visitor.data, $visitor.isLoading, $visitor.error

มาจาก React ใช่ไหม? QueryState ของ Svelte ตัดแฟล็ก isFetched ของ React hook ออก และ useVisitorId() ไม่เปิดเมธอด fetch แบบ imperative — มีเพียง useTracioResult() เท่านั้นที่มี getData()

useVisitorId()

คืน readable store ของ { data, isLoading, error } โดยที่ data คือตัวระบุ visitor ที่เสถียร (string | undefined)

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

useTracioResult(opts?)

คืน readable store ของ { data, isLoading, error } ที่บรรจุ TracioResult ฉบับเต็ม (visitor ID พร้อมการตรวจจับบอท) สโตร์ที่คืนมายังมีเมธอด getData() (มันขยายจาก Readable) สำหรับการ (re-)fetch แบบ imperative ค่าเริ่มต้นของ opts.immediate คือ true; ส่ง { immediate: false } เพื่อเลื่อนการ fetch ออกไปจนกว่าคุณจะเรียก getData() — เช่น อยู่หลัง 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 ที่คืน TracioInstance ที่อยู่เบื้องล่าง (หรือ undefined เมื่อ Tracio.init() ยังไม่ได้ทำงานสำหรับ tree ปัจจุบัน) สำหรับการใช้งานขั้นสูง มันคืนอินสแตนซ์โดยตรง — ไม่มีสโตร์หรืออ็อบเจกต์ wrapper ให้ destructure

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

ตัวอย่างแบบเต็ม

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

ขั้นตอนถัดไป

• JavaScript SDK Reference — คอร์ API @tracio/sdk ที่สโตร์ทั้งหลายสร้างต่อยอดขึ้นมา
• Error Handling — รหัสข้อผิดพลาดและกลยุทธ์การ retry
• SDKs overview — ทุกแพ็กเกจเฟรมเวิร์กในภาพรวมเดียว