Collapsed class into the primitive

Author: davedbase

packages/sse/README.md

@@ -395,9 +395,10 @@ const { data } = createSSE("https://api.example.com/events", {
 
 `makeSSEWorker(target)` returns an `SSESourceFn`, the same factory interface that `createSSE` uses internally. When `createSSE` opens a connection it calls this factory instead of the default `makeSSE`, which:
 
-1. Creates a `WorkerEventSource` — an `EventTarget` that posts a `connect` message to the Worker and re-dispatches `open` / `message` / `error` events received back from it.
-2. The Worker script (`worker-handler`) receives the `connect` message, creates a real `EventSource` there, and posts events back via `postMessage`.
-3. `createSSE`'s reactive machinery — signals, reconnect timer, URL tracking, `onCleanup` — runs on the main thread as normal; it just talks to a `WorkerEventSource` instead of a real `EventSource`.
+1. Creates a plain `EventTarget` with a `readyState` property and a `close()` method, satisfying the `SSESourceHandle` interface without needing a real `EventSource`.
+2. Posts a `connect` message to the Worker. The Worker script (`worker-handler`) creates a real `EventSource` there and posts `open` / `message` / `error` events back via `postMessage`.
+3. The message listener on the main thread forwards those events to `createSSE`'s callbacks and dispatches them on the `EventTarget` so any direct `addEventListener` calls also work.
+4. `createSSE`'s reactive machinery — signals, reconnect timer, URL tracking, `onCleanup` — runs on the main thread as normal; it just receives events via `postMessage` instead of directly from a real `EventSource`.
 
 ### Type reference
 

packages/sse/src/worker.ts

@@ -21,62 +21,6 @@ export type SSEWorkerTarget = {
   removeEventListener(type: "message", listener: (e: MessageEvent<SSEWorkerMessage>) => void): void;
 };
 
-// ─── WorkerEventSource ────────────────────────────────────────────────────────
-
-/**
- * An `EventTarget` facade that tunnels SSE events through a Worker.
- * Not exported — consumers use `makeSSEWorker` to obtain instances.
- */
-class WorkerEventSource extends EventTarget {
-  private _readyState: SSEReadyStateValue = SSEReadyState.CONNECTING;
-
-  get readyState(): SSEReadyStateValue {
-    return this._readyState;
-  }
-
-  private readonly _id: string;
-  private readonly _target: SSEWorkerTarget;
-  private readonly _listener: (e: MessageEvent<SSEWorkerMessage>) => void;
-
-  constructor(target: SSEWorkerTarget, url: string, options: SSEOptions) {
-    super();
-
-    this._id = Math.random().toString(36).slice(2, 11);
-    this._target = target;
-
-    this._listener = (e: MessageEvent<SSEWorkerMessage>) => {
-      const msg = e.data;
-      if (msg.id !== this._id) return;
-
-      if (msg.type === "open") {
-        this._readyState = SSEReadyState.OPEN;
-        this.dispatchEvent(new Event("open"));
-      } else if (msg.type === "message") {
-        this.dispatchEvent(new MessageEvent(msg.eventType, { data: msg.data }));
-      } else if (msg.type === "error") {
-        this._readyState = msg.readyState;
-        this.dispatchEvent(new Event("error"));
-      }
-    };
-
-    target.addEventListener("message", this._listener);
-
-    target.postMessage({
-      type: "connect",
-      id: this._id,
-      url,
-      withCredentials: options.withCredentials,
-      events: options.events ? Object.keys(options.events) : undefined,
-    });
-  }
-
-  close() {
-    this._readyState = SSEReadyState.CLOSED;
-    this._target.postMessage({ type: "disconnect", id: this._id });
-    this._target.removeEventListener("message", this._listener);
-  }
-}
-
 // ─── makeSSEWorker ────────────────────────────────────────────────────────────
 
 /**
@@ -100,28 +44,59 @@ class WorkerEventSource extends EventTarget {
  */
 export function makeSSEWorker(target: SSEWorkerTarget): SSESourceFn {
   return (url: string, options: SSEOptions) => {
-    const source = new WorkerEventSource(target, url, options);
+    const id = Math.random().toString(36).slice(2, 11);
+    let readyState: SSEReadyStateValue = SSEReadyState.CONNECTING;
+
+    // SSESourceHandle requires EventTarget & { readyState, close }.
+    // We keep EventTarget so callers can use addEventListener directly on the source.
+    const source = new EventTarget() as EventTarget & {
+      readyState: SSEReadyStateValue;
+      close(): void;
+    };
 
-    if (options.onOpen) source.addEventListener("open", options.onOpen);
-    if (options.onMessage) source.addEventListener("message", options.onMessage as EventListener);
-    if (options.onError) source.addEventListener("error", options.onError);
-    if (options.events) {
-      for (const [name, handler] of Object.entries(options.events))
-        source.addEventListener(name, handler as EventListener);
-    }
+    Object.defineProperty(source, "readyState", { get: () => readyState });
 
-    const cleanup = () => {
-      source.close();
-      if (options.onOpen) source.removeEventListener("open", options.onOpen);
-      if (options.onMessage)
-        source.removeEventListener("message", options.onMessage as EventListener);
-      if (options.onError) source.removeEventListener("error", options.onError);
-      if (options.events) {
-        for (const [name, handler] of Object.entries(options.events))
-          source.removeEventListener(name, handler as EventListener);
+    const listener = (e: MessageEvent<SSEWorkerMessage>) => {
+      const msg = e.data;
+      if (msg.id !== id) return;
+
+      if (msg.type === "open") {
+        readyState = SSEReadyState.OPEN;
+        const ev = new Event("open");
+        source.dispatchEvent(ev);
+        options.onOpen?.(ev);
+      } else if (msg.type === "message") {
+        const ev = new MessageEvent(msg.eventType, { data: msg.data });
+        source.dispatchEvent(ev);
+        if (msg.eventType === "message") {
+          options.onMessage?.(ev);
+        } else {
+          options.events?.[msg.eventType]?.(ev);
+        }
+      } else if (msg.type === "error") {
+        readyState = msg.readyState;
+        const ev = new Event("error");
+        source.dispatchEvent(ev);
+        options.onError?.(ev);
       }
     };
 
-    return [source, cleanup];
+    source.close = () => {
+      readyState = SSEReadyState.CLOSED;
+      target.postMessage({ type: "disconnect", id });
+      target.removeEventListener("message", listener);
+    };
+
+    target.addEventListener("message", listener);
+
+    target.postMessage({
+      type: "connect",
+      id,
+      url,
+      withCredentials: options.withCredentials,
+      events: options.events ? Object.keys(options.events) : undefined,
+    });
+
+    return [source, () => source.close()];
   };
 }