preact-signals.tsx

import { render } from "preact";
import { signal } from "@preact/signals";

function createEventSource(url: string) {
  const source = new EventSource(url);
  const status = signal(source.readyState);

  function updateStatus() {
    status.value = source.readyState;
  }

  source.addEventListener("open", updateStatus);
  source.addEventListener("error", updateStatus);

  return {
    get status() {
      return status.value;
    },
    close() {
      source.close();
      updateStatus();
    },
  };
}

const source = createEventSource("/stream");

function App() {
  return (
    <span>
      {source.status === EventSource.CONNECTING
        ? "🟠"
        : source.status === EventSource.OPEN
          ? "🟢"
          : source.status === EventSource.CLOSED
            ? "🔴"
            : "⚪️"}
    </span>
  );
}