Typed Server-Sent Events (SSE) integration for SvelteKit, providing strongly-typed clientβserver communication, custom event channels, and a robust protocol-level control layer.
This library is designed for TypeScript-first, production-grade SSE usage in SvelteKit applications.
App.Eventsevent: supportnpm install @sourceregistry/sveltekit-eventsource
Peer dependency:
svelte@^5Events are defined centrally using SvelteKitβs App.Events interface:
// src/app.d.ts
declare global {
namespace App {
interface Events {
status: {
heartbeat: number;
};
}
}
}
export {};
This single definition drives:
emit() typingon() typing//File: src/routes/sse/+server.ts
import type { RequestHandler } from "./$types";
import { EventSource } from "@sourceregistry/sveltekit-eventsource/server";
export const GET: RequestHandler = () => {
const sse = new EventSource("status", { debug: true });
const timer = setInterval(() => {
sse.emit("heartbeat", Date.now());
}, 2000);
sse.once("close", () => {
clearInterval(timer);
});
// Ask client to close after 5s
setTimeout(() => {
sse.stop();
}, 5000);
return sse.response();
};
emit(event, payload)stop() β protocol-level server-initiated closeresponse() β returns Response with text/event-streamunsafe.events β lifecycle hooks (open, close, ping)<script lang="ts">
import { onMount, onDestroy } from "svelte";
import { EventSource } from "@sourceregistry/sveltekit-eventsource/client";
const events = $state<number[]>([]);
let state = $state<"open" | "closed">("closed");
let es: EventSource<"status">;
onMount(() => {
es = new EventSource("status", { debug: true });
es.onOpen(() => (state = "open"));
es.onClose(() => (state = "closed"));
es.on("heartbeat", (n) => {
events.push(n);
});
});
onDestroy(() => {
es?.close();
});
</script>
<h2>Connection: {state === "open" ? "π’" : "π΄"}</h2>
<ul>
{#each events as e}
<li>{e}</li>
{/each}
</ul>
on(event, handler)once(event, handler)off(event, handler)onOpen, onClose, onError, onMessageclose() β client-initiated closeAll handlers are fully typed.
This library implements a protocol-level control channel for SSE, independent of user serialization.
User serializers (JSON, base64, msgpack, etc.) must never break control messages like server-requested close.
event: __MAGIC_EVENT__
data: {"v":1,"op":"close"}
v)Full specification:
π docs/sse-magic-protocol.md
Protocol compatibility tests are included using Vitest.
npm test
Tests cover:
This project is fully documented using TSDoc.
Generate API documentation:
npm run docs:build
Output:
/docs
import { EventSource } from "@sourceregistry/sveltekit-eventsource/client";
import { EventSource } from "@sourceregistry/sveltekit-eventsource/server";
| Path | Purpose |
|---|---|
./client |
Browser client SSE |
./server |
SvelteKit server SSE |
Apache-2.0 Β© A.P.A. Slaa
A.P.A. Slaa π§ [email protected] π https://github.com/SourceRegistry
Issues and pull requests are welcome. Please follow conventional commits for releases.