@tracio/svelte 包对核心的 @tracio/sdk 进行了封装,并提供符合 Svelte 惯用法的原语:一次性的 init 调用,以及为你提供访客 ID 和识别结果的 readable store。
npm install @tracio/svelte @tracio/sdksvelte(5)是一个 peer dependency,默认你的应用中已经安装了它。
在应用根部附近调用一次 Tracio.init({ publicKey })——在 SvelteKit 中放在 +layout.svelte 里——并用 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 状态以 Svelte readable store 的形式暴露。每个 store 的值都是一个携带 data、isLoading 和 error 的 QueryState。使用 $ 前缀来消费 store:$visitor.data、$visitor.isLoading、$visitor.error。
从 React 迁移过来? Svelte 的
QueryState省略了 React hooks 的isFetched标志,而且useVisitorId()不暴露命令式的抓取方法——只有useTracioResult()才带有getData()。
返回一个 { data, isLoading, error } 的 readable store,其中 data 是稳定的访客标识符(string | undefined)。
<script> import { useVisitorId } from "@tracio/svelte" const visitor = useVisitorId()</script>{$visitor.data}返回一个 { data, isLoading, error } 的 readable store,持有完整的 TracioResult(访客 ID 加上机器人检测)。返回的 store 还带有一个 getData() 方法(它扩展了 Readable),用于命令式地(重新)抓取。opts.immediate 默认为 true;传入 { immediate: false } 可将抓取推迟到你调用 getData() 时——例如放在同意(consent)门控之后。
<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>一个逃生舱口(escape hatch),返回底层的 TracioInstance(当 Tracio.init() 尚未针对当前树运行时返回 undefined),供高级用途使用。它直接返回实例——没有可供解构的 store 或包装对象。
<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}@tracio/sdk API