Skip to documentation
Documentation navigation

Documentation navigation

Documentation / guides

Svelte 5

Use the Svelte 5 stores as lifecycle-aware reactive wrappers around the core journal join and transport surface.

developer

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.

← back to documentation