Svelte SDK

החבילה @tracio/svelte עוטפת את ה־@tracio/sdk המרכזי וחושפת פרימיטיבים אידיומטיים של Svelte: קריאת init חד־פעמית, ו־stores מסוג readable שמחזירים לך את מזהה המבקר ואת תוצאת הזיהוי.

התקנה

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 נחשף כ־stores מסוג readable של Svelte. כל ערך של store הוא QueryState הנושא את data,‏ isLoading ו־error. צרוך את ה־store עם התחילית $:‏ $visitor.data,‏ $visitor.isLoading,‏ $visitor.error.

מגיע מ־React? ה־QueryState של Svelte משמיט את הדגל isFetched של ה־hooks ב־React, ו־useVisitorId() אינו חושף מתודת שליפה אימפרטיבית — רק useTracioResult() נושא getData().

useVisitorId()

מחזיר store מסוג readable של { data, isLoading, error }, כאשר data הוא מזהה המבקר היציב (string | undefined).

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

useTracioResult(opts?)

מחזיר store מסוג readable של { data, isLoading, error } המחזיק את ה־TracioResult המלא (מזהה המבקר יחד עם זיהוי בוטים). ה־store המוחזר נושא גם מתודת getData() (הוא מרחיב את Readable) לשליפה (מחדש) אימפרטיבית. ברירת המחדל של opts.immediate היא true; העבר { immediate: false } כדי לדחות את השליפה עד שתקרא ל־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() לא רץ עבור העץ הנוכחי) לשימוש מתקדם. הוא מחזיר את המופע ישירות — אין store או אובייקט עטיפה לפירוק (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 — ה־API המרכזי @tracio/sdk שעליו נבנים ה־stores
• טיפול בשגיאות — קודי שגיאה ואסטרטגיות ניסיון חוזר
• סקירת SDKs — כל חבילת framework במבט אחד