Documentation / guides
Svelte 5
Use the Svelte 5 stores as lifecycle-aware reactive wrappers around the core journal join and transport surface.
Live session store
LiveSessionViewStore republishes the core joinSessionView stream as Svelte 5 $state: view, active, error, and lastFoldError. Its constructor receives a narrow journal reader, a session id, a live frame source, and optional join options. A LooprigTransport already satisfies the journal reader shape.
import { LiveSessionViewStore } from "@looprig/svelte";
import { createBFFClient, createFetchLiveFrameSource } from "@looprig/client";
const transport = createBFFClient();
const live = new LiveSessionViewStore(
transport,
sessionId,
createFetchLiveFrameSource(sessionId),
{ autoReconnect: true },
);
live.start();
The store defaults autoReconnect to true, clears stale errors at a new start, and resets the view to its initial state. Calling start while active is a no-op.
Start and stop lifecycle
stop synchronously aborts the store controller and directly cancels the active live iterator. That direct cancellation matters when the join is waiting for a frame: calling only the async generator’s return can sit behind a pending next. The store also uses a generation guard so an older pump cannot commit state after a newer start or stop.
<script lang="ts">
import { onDestroy } from "svelte";
export let live: LiveSessionViewStore;
live.start();
onDestroy(() => live.stop());
</script>
{#if live.error}
<p role="alert">{live.error.message}</p>
{:else}
<output>{live.view.content.map((chunk) => chunk.chunkType === "text" ? chunk.text : "").join("")}</output>
{/if}
The package also provides cold read stores with refresh methods and last-started-wins guards. Keep protocol parsing and folding in @looprig/client; use the Svelte layer for reactivity and component ownership. The Client SDK remains the framework-neutral contract.
Source
The live reactive wrapper, cancellation cascade, generation guard, and $state fields are in sdk/svelte/src/live-session.svelte.ts. Browser-level lifecycle cases are covered in sdk/svelte/test/live-session.test.ts.
Proof
The tests cover idempotent start, updates, fold errors, reconnect behavior, and stop during an idle live wait. The wrapper deliberately delegates to the core client and leaves the transport, parser, and fold contracts unchanged.