📡 Event Source Component

The <event-source></event-source> Component provides a declarative interface to Server-Sent Events (SSE).

Usage

<event-source src="/amnesia/sse/diff" class="diff"></event-source>

One-shot streams

For one-shot streams that should not reconnect when finished, use the no-reconnect attribute:

<event-source src="/api/quantum-20-questions" no-reconnect></event-source>

The no-reconnect attribute prevents automatic reconnection in all scenarios:

• When a stream completes naturally (server closes connection)
• When network errors occur during streaming
• When the browser's network reconnects (online event)

This is essential for finite streams like game APIs or one-time data fetches where reconnection would trigger unnecessary API calls.

Features

• Lazy connection opening (connects on first consumer subscription)
• Automatic connection teardown with debounced reconnect handling
• Optional no-reconnect attribute for one-shot streams to prevent automatic reconnection
• ReadableStream interface for async iteration:

for await (const chunk of this.closest("event-source")) {
  console.log(chunk);
}

• CustomEvent dispatching for incoming messages
• Support for src, class, and no-reconnect attributes

Demo