@x33025/sveltekit-sse

SSE utilities for Svelte 5 / SvelteKit with both low-level clients and rune-based helpers.

Install

npm i @x33025/sveltekit-sse

Exports

• createSSEClient
• createSSEPool
• createDebouncedTrigger
• createSSEClientStores
• useSSEClient (.svelte.ts)
• useSSEPool (.svelte.ts)
• useSSEInvalidator (.svelte.ts)

Quick Start

Single stream

// in a .svelte.ts helper or component script
import { useSSEClient } from '@x33025/sveltekit-sse';

const sse = useSSEClient({
  url: '/api/events/project/123',
  events: {
    'kwr.metrics.updated': () => {
      // react to update
    }
  }
});

// sse.status, sse.connected, sse.lastEvent, sse.lastError

Multiple streams

import { useSSEPool } from '@x33025/sveltekit-sse';

const pool = useSSEPool({
  getStreams: () => [
    {
      key: 'project:123',
      options: { url: '/api/events/project/123' },
      events: {
        'kwr.metrics.updated': () => console.log('project metrics updated')
      }
    },
    {
      key: 'workflow:abc',
      options: { url: '/api/events/workflow/abc' },
      events: {
        'workflow.updated': () => console.log('workflow updated')
      }
    }
  ]
});

Invalidate-on-event pattern

import { invalidateAll } from '$app/navigation';
import { useSSEInvalidator } from '@x33025/sveltekit-sse';

useSSEInvalidator({
  debounceMs: 250,
  invalidate: () => void invalidateAll(),
  getStreams: () => [
    {
      key: 'project:123',
      options: { url: '/api/events/project/123' },
      events: ['kwr.metrics.updated']
    },
    {
      key: 'workflow:abc',
      options: { url: '/api/events/workflow/abc' },
      events: ['workflow.updated']
    }
  ]
});

Notes

• Uses browser EventSource by default.
• Supports reconnect with backoff + jitter.
• For non-browser/test environments, pass a custom eventSourceFactory.