Svelte SDK

@tracio/svelteパッケージはコアの@tracio/sdkをラップし、Svelteらしいプリミティブを提供します。1回限りのinit呼び出しと、訪問者IDと識別結果を渡すreadable storeです。

インストール

npm install @tracio/svelte @tracio/sdk

svelte（5）はpeer dependencyであり、アプリにすでにインストールされていることが前提です。

セットアップ

アプリのルート付近でTracio.init({ publicKey })を1回だけ呼び出します（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 />

Store

TRACIOの状態はSvelteのreadable storeとして公開されます。各storeの値はdata、isLoading、errorを持つQueryStateです。$プレフィックスを付けてstoreを利用します: $visitor.data、$visitor.isLoading、$visitor.error。

Reactから移行しますか？ SvelteのQueryStateはReactフックのisFetchedフラグを省略しており、useVisitorId()は命令的な取得メソッドを公開しません。getData()を持つのはuseTracioResult()のみです。

useVisitorId()

{ data, isLoading, error }のreadable storeを返します。dataは安定した訪問者識別子（string | undefined）です。

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

useTracioResult(opts?)

完全なTracioResult（訪問者IDとボット検知）を保持する{ data, isLoading, error }のreadable storeを返します。返されるstoreは命令的な（再）取得のための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()

高度な用途のために、基盤となる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}

次のステップ

• JavaScript SDK Reference — storeが構築される基盤となるコアの@tracio/sdk API
• Error Handling — エラーコードと再試行戦略
• SDKs overview — すべてのフレームワークパッケージを一覧で