Svelte SDK

Пакет @tracio/svelte обгортає базовий @tracio/sdk і надає ідіоматичні примітиви Svelte: одноразовий виклик init та readable-стори, які повертають вам ID відвідувача й результат ідентифікації.

Встановлення

npm install @tracio/svelte @tracio/sdk

svelte (5) є peer-залежністю, і передбачається, що він уже встановлений у вашому застосунку.

Налаштування

Викличте 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 />

Стори

Стан TRACIO надається як readable-стори Svelte. Значення кожного стора — це QueryState, що містить data, isLoading та error. Споживайте стор із префіксом $: $visitor.data, $visitor.isLoading, $visitor.error.

Переходите з React? QueryState у Svelte не має прапорця isFetched, що є в React-хуках, а useVisitorId() не надає імперативного методу вибірки — лише useTracioResult() містить getData().

useVisitorId()

Повертає readable-стор { data, isLoading, error }, де data — це стабільний ідентифікатор відвідувача (string | undefined).

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

useTracioResult(opts?)

Повертає readable-стор { data, isLoading, error }, що містить повний TracioResult (ID відвідувача плюс виявлення ботів). Повернутий стор також містить метод getData() (він розширює Readable) для імперативної (повторної) вибірки. opts.immediate за замовчуванням true; передайте { immediate: false }, щоб відкласти вибірку до виклику getData() — наприклад, за гейтом згоди.

<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() не було виконано для поточного дерева) для просунутого використання. Він повертає екземпляр безпосередньо — немає ані стора, ані обгорткового об'єкта для деструктуризації.

<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, на якому побудовані стори
• Обробка помилок — коди помилок і стратегії повторних спроб
• Огляд SDK — усі пакети для фреймворків з першого погляду