SDK de Svelte

El paquete @tracio/svelte envuelve el núcleo @tracio/sdk y expone primitivas idiomáticas de Svelte: una llamada única a init y stores de lectura que le entregan el ID de visitante y el resultado de identificación.

Instalación

npm install @tracio/svelte @tracio/sdk

svelte (5) es una peer dependency y se espera que ya esté instalada en su app.

Configuración

Llame a Tracio.init({ publicKey }) una vez, cerca de la raíz de su app —en +layout.svelte para SvelteKit—, protegida por browser para que nunca se ejecute durante el renderizado del lado del 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

El estado de TRACIO se expone como stores de lectura de Svelte. El valor de cada store es un QueryState que lleva data, isLoading y error. Consuma el store con el prefijo $: $visitor.data, $visitor.isLoading, $visitor.error.

¿Viene de React? El QueryState de Svelte omite el flag isFetched de los hooks de React, y useVisitorId() no expone un método de obtención imperativo; solo useTracioResult() lleva un getData().

useVisitorId()

Devuelve un store de lectura de { data, isLoading, error }, donde data es el identificador de visitante estable (string | undefined).

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

useTracioResult(opts?)

Devuelve un store de lectura de { data, isLoading, error } que contiene el TracioResult completo (ID de visitante más detección de bots). El store devuelto también lleva un método getData() (extiende Readable) para (re)obtener de forma imperativa. opts.immediate es true por defecto; pase { immediate: false } para diferir la obtención hasta que llame a getData(), por ejemplo detrás de una barrera de consentimiento.

<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()

Vía de escape que devuelve la instancia TracioInstance subyacente (o undefined cuando Tracio.init() no se ha ejecutado para el árbol actual) para usos avanzados. Devuelve la instancia directamente; no hay ningún store ni objeto envoltorio que desestructurar.

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

Ejemplo 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 pasos

• Referencia del SDK de JavaScript — la API del núcleo @tracio/sdk sobre la que se construyen los stores
• Manejo de errores — códigos de error y estrategias de reintento
• Resumen de los SDKs — todos los paquetes de framework de un vistazo