Svelte SDK

O pacote @tracio/svelte encapsula o núcleo @tracio/sdk e expõe primitivas idiomáticas do Svelte: uma chamada init única e stores readable que entregam a você o ID de visitante e o resultado de identificação.

Instalação

npm install @tracio/svelte @tracio/sdk

svelte (5) é uma peer dependency e espera-se que já esteja instalado no seu app.

Configuração

Chame Tracio.init({ publicKey }) uma vez, perto da raiz do seu app — em +layout.svelte no SvelteKit — protegido por browser para que nunca rode durante a renderização no servidor.

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

O estado do TRACIO é exposto como stores readable do Svelte. Cada valor de store é um QueryState que carrega data, isLoading e error. Consuma o store com o prefixo $: $visitor.data, $visitor.isLoading, $visitor.error.

Vindo do React? O QueryState do Svelte omite a flag isFetched dos hooks do React, e useVisitorId() não expõe um método de busca imperativa — apenas useTracioResult() carrega um getData().

useVisitorId()

Retorna um store readable de { data, isLoading, error }, onde data é o identificador estável de visitante (string | undefined).

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

useTracioResult(opts?)

Retorna um store readable de { data, isLoading, error } contendo o TracioResult completo (ID de visitante mais detecção de bots). O store retornado também carrega um método getData() (ele estende Readable) para (re)busca imperativa. opts.immediate tem true como padrão; passe { immediate: false } para adiar a busca até que você chame getData() — por exemplo, atrás de um gate de consentimento.

<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 que retorna o TracioInstance subjacente (ou undefined quando Tracio.init() não rodou para a árvore atual) para uso avançado. Ele retorna a instância diretamente — não há store nem objeto wrapper para desestruturar.

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

Exemplo completo

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

Próximos passos

• JavaScript SDK Reference — a API central @tracio/sdk sobre a qual os stores são construídos
• Error Handling — códigos de erro e estratégias de retry
• SDKs overview — cada pacote de framework em um relance