Svelte SDK

@tracio/svelte पैकेज कोर @tracio/sdk को रैप करता है और idiomatic Svelte primitives उपलब्ध कराता है: एक बार का init कॉल, और readable स्टोर जो आपको visitor ID और identification परिणाम सौंपते हैं।

Installation

npm install @tracio/svelte @tracio/sdk

svelte (5) एक peer dependency है और यह मान लिया जाता है कि यह पहले से ही आपकी ऐप में इंस्टॉल है।

Setup

Tracio.init({ publicKey }) को अपनी ऐप की root के पास एक बार कॉल करें — SvelteKit में +layout.svelte में — और इसे browser से सुरक्षित रखें, ताकि यह 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

TRACIO state को Svelte readable स्टोर के रूप में उपलब्ध कराया जाता है। प्रत्येक स्टोर मान एक QueryState होता है जो data, isLoading और error रखता है। स्टोर का उपयोग $ उपसर्ग के साथ करें: $visitor.data, $visitor.isLoading, $visitor.error।

React से आ रहे हैं? Svelte का QueryState React hooks के isFetched फ़्लैग को छोड़ देता है, और useVisitorId() कोई imperative fetch मेथड उपलब्ध नहीं कराता — केवल useTracioResult() में getData() होता है।

useVisitorId()

{ data, isLoading, error } का एक readable स्टोर लौटाता है, जहाँ data स्थिर visitor identifier होता है (string | undefined)।

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

useTracioResult(opts?)

{ data, isLoading, error } का एक readable स्टोर लौटाता है जो पूर्ण TracioResult (visitor ID के साथ bot detection) रखता है। लौटाया गया स्टोर imperative (पुनः) fetch के लिए एक getData() मेथड भी रखता है (यह Readable को extend करता है)। opts.immediate का डिफ़ॉल्ट true है; fetch को तब तक टालने के लिए { 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 जब वर्तमान tree के लिए Tracio.init() नहीं चला हो)। यह instance को सीधे लौटाता है — destructure करने के लिए कोई स्टोर या wrapper ऑब्जेक्ट नहीं होता।

<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 — कोर @tracio/sdk API जिस पर स्टोर आधारित हैं
• Error Handling — error codes और retry रणनीतियाँ
• SDKs overview — हर framework पैकेज एक नज़र में