use-sse-vue 0.0.1 → 0.1.0

package/README.md

@@ -27,8 +27,18 @@ const { data, status, error, connect, disconnect } = useSse('http://localhost:30
   <div>
     <p>Status: {{ status }}</p>
     <div v-if="data">Received: {{ data }}</div>
-    <button @click="connect" :disabled="status !== 'closed'">Connect</button>
-    <button @click="disconnect" :disabled="status === 'closed'">Disconnect</button>
+    <button
+      @click="connect"
+      :disabled="status !== 'closed'"
+    >
+      Connect
+    </button>
+    <button
+      @click="disconnect"
+      :disabled="status === 'closed'"
+    >
+      Disconnect
+    </button>
   </div>
 </template>
 ```
@@ -44,6 +54,9 @@ const { data, status, error, connect, disconnect } = useSse('http://localhost:30
   - `autoConnect` (`boolean`, default: `true`): Automatically initiate connection on component mount.
   - `reconnectDelay` (`number`, default: `3000`): Time to wait (in ms) before attempting a reconnect.
   - `maxReconnectAttempts` (`number`, default: `5`): Maximum consecutive reconnect attempts.
+  - `events` (`string[]`, optional): Custom event names to listen to (e.g. `['update', 'delete']`).
+  - `eventSourceClass` (`any`, optional): Custom EventSource constructor (e.g. `EventSourcePolyfill` for custom headers).
+  - `eventSourceInitDict` (`any`, optional): Init dictionary passed to EventSource (e.g. `{ headers: { Authorization: 'Bearer token' } }`).
   - `onMessage` (`(data: any, event: MessageEvent) => void`): Callback when a message is received.
   - `onOpen` (`(event: Event) => void`): Callback when connection opens.
   - `onError` (`(event: Event) => void`): Callback when connection errors occur.

package/dist/index.d.ts

@@ -1 +1 @@
-export { useSse, type UseSseOptions } from './useSse';
+export { useSse, type UseSseOptions, type UseSseReturn } from './useSse';

package/dist/index.js

@@ -1,7 +1,16 @@
-import { onUnmounted, ref, watch } from "vue-demi";
+import { getCurrentScope, onScopeDispose, ref, watch } from "vue-demi";
 //#region src/useSse.ts
+/**
+* Vue and Nuxt composable for managing Server-Sent Events (SSE) connections.
+* Fully compatible with Vue 2 and Vue 3, featuring auto-reconnect, JSON parsing,
+* dynamic url reactivity, custom events.
+*
+* @param url - The SSE endpoint URL. Can be a static string, a getter function, or a Vue Ref.
+* @param options - Configuration options for the connection.
+* @returns An object containing reactive states and connection controls.
+*/
 function useSse(url, options = {}) {
-	const { autoConnect = true, reconnectDelay = 3e3, maxReconnectAttempts = 5, onMessage, onError, onOpen } = options;
+	const { autoConnect = true, reconnectDelay = 3e3, maxReconnectAttempts = 5, events = [], eventSourceClass, eventSourceInitDict, onMessage, onError, onOpen } = options;
 	const data = ref(null);
 	const status = ref("closed");
 	const error = ref(null);
@@ -9,33 +18,38 @@ function useSse(url, options = {}) {
 	let reconnectCount = 0;
 	let reconnectTimer = null;
 	const isSSR = typeof window === "undefined";
+	const handleMessage = (event) => {
+		try {
+			const parsed = JSON.parse(event.data);
+			data.value = parsed;
+			onMessage?.(parsed, event);
+		} catch {
+			data.value = event.data;
+			onMessage?.(event.data, event);
+		}
+	};
 	const connect = () => {
 		if (isSSR || eventSource) return;
 		const targetUrl = typeof url === "function" ? url() : typeof url === "object" && "value" in url ? url.value : url;
 		status.value = "connecting";
 		error.value = null;
 		try {
-			eventSource = new EventSource(targetUrl);
-			eventSource.onopen = (event) => {
+			const es = new (eventSourceClass || EventSource)(targetUrl, eventSourceInitDict);
+			es.onopen = (event) => {
 				status.value = "open";
 				reconnectCount = 0;
 				onOpen?.(event);
 			};
-			eventSource.onmessage = (event) => {
-				try {
-					const parsed = JSON.parse(event.data);
-					data.value = parsed;
-					onMessage?.(parsed, event);
-				} catch {
-					data.value = event.data;
-					onMessage?.(event.data, event);
-				}
-			};
-			eventSource.onerror = (event) => {
+			es.onmessage = handleMessage;
+			events.forEach((eventName) => {
+				es.addEventListener(eventName, handleMessage);
+			});
+			es.onerror = (event) => {
 				error.value = event;
 				onError?.(event);
 				tryReconnect();
 			};
+			eventSource = es;
 		} catch (err) {
 			status.value = "closed";
 			error.value = err;
@@ -48,6 +62,9 @@ function useSse(url, options = {}) {
 			reconnectTimer = null;
 		}
 		if (eventSource) {
+			events.forEach((eventName) => {
+				if (eventSource) eventSource.removeEventListener(eventName, handleMessage);
+			});
 			eventSource.close();
 			eventSource = null;
 		}
@@ -68,7 +85,7 @@ function useSse(url, options = {}) {
 		}
 	});
 	if (autoConnect) connect();
-	onUnmounted(() => {
+	if (getCurrentScope()) onScopeDispose(() => {
 		disconnect();
 	});
 	return {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/useSse.ts"],"sourcesContent":["import { ref, onUnmounted, watch, type Ref } from 'vue-demi'\n\nexport interface UseSseOptions<T = any> {\n  autoConnect?: boolean\n  reconnectDelay?: number\n  maxReconnectAttempts?: number\n  onMessage?: (data: T, event: MessageEvent) => void\n  onError?: (event: Event) => void\n  onOpen?: (event: Event) => void\n}\n\nexport function useSse<T = any>(\n  url: string | (() => string) | Ref<string>,\n  options: UseSseOptions<T> = {}\n) {\n  const {\n    autoConnect = true,\n    reconnectDelay = 3000,\n    maxReconnectAttempts = 5,\n    onMessage,\n    onError,\n    onOpen\n  } = options\n\n  const data = ref<T | null>(null) as Ref<T | null>\n  const status = ref<'connecting' | 'open' | 'closed'>('closed')\n  const error = ref<Event | null>(null)\n\n  let eventSource: EventSource | null = null\n  let reconnectCount = 0\n  let reconnectTimer: any = null\n\n  // Environment check\n  const isSSR = typeof window === 'undefined'\n\n  const connect = () => {\n    if (isSSR || eventSource) return\n\n    // Extract target URL from string, ref, or getter function\n    const targetUrl =\n      typeof url === 'function'\n        ? url()\n        : typeof url === 'object' && 'value' in url\n          ? url.value\n          : url\n\n    status.value = 'connecting'\n    error.value = null\n\n    try {\n      eventSource = new EventSource(targetUrl)\n\n      eventSource.onopen = (event) => {\n        status.value = 'open'\n        reconnectCount = 0\n        onOpen?.(event)\n      }\n\n      eventSource.onmessage = (event: MessageEvent) => {\n        // Attempt to parse JSON, fallback to raw string if it fails\n        try {\n          const parsed = JSON.parse(event.data)\n          data.value = parsed\n          onMessage?.(parsed, event)\n        } catch {\n          data.value = event.data as any\n          onMessage?.(event.data, event)\n        }\n      }\n\n      eventSource.onerror = (event) => {\n        error.value = event\n        onError?.(event)\n\n        // Trigger reconnection\n        tryReconnect()\n      }\n    } catch (err) {\n      status.value = 'closed'\n      error.value = err as any\n      tryReconnect()\n    }\n  }\n\n  const disconnect = () => {\n    if (reconnectTimer) {\n      clearTimeout(reconnectTimer)\n      reconnectTimer = null\n    }\n    if (eventSource) {\n      eventSource.close()\n      eventSource = null\n    }\n    status.value = 'closed'\n  }\n\n  const tryReconnect = () => {\n    disconnect()\n\n    if (reconnectCount < maxReconnectAttempts) {\n      status.value = 'connecting'\n      reconnectCount++\n      reconnectTimer = setTimeout(connect, reconnectDelay)\n    } else {\n      status.value = 'closed'\n    }\n  }\n\n  // Monitor URL change if it is reactive\n  if (typeof url === 'function' || (typeof url === 'object' && 'value' in url)) {\n    watch(url, () => {\n      if (status.value !== 'closed') {\n        disconnect()\n        connect()\n      }\n    })\n  }\n\n  if (autoConnect) {\n    connect()\n  }\n\n  onUnmounted(() => {\n    disconnect()\n  })\n\n  return {\n    data,\n    status,\n    error,\n    connect,\n    disconnect\n  }\n}\n"],"mappings":";;AAWA,SAAgB,OACd,KACA,UAA4B,CAAC,GAC7B;CACA,MAAM,EACJ,cAAc,MACd,iBAAiB,KACjB,uBAAuB,GACvB,WACA,SACA,WACE;CAEJ,MAAM,OAAO,IAAc,IAAI;CAC/B,MAAM,SAAS,IAAsC,QAAQ;CAC7D,MAAM,QAAQ,IAAkB,IAAI;CAEpC,IAAI,cAAkC;CACtC,IAAI,iBAAiB;CACrB,IAAI,iBAAsB;CAG1B,MAAM,QAAQ,OAAO,WAAW;CAEhC,MAAM,gBAAgB;EACpB,IAAI,SAAS,aAAa;EAG1B,MAAM,YACJ,OAAO,QAAQ,aACX,IAAI,IACJ,OAAO,QAAQ,YAAY,WAAW,MACpC,IAAI,QACJ;EAER,OAAO,QAAQ;EACf,MAAM,QAAQ;EAEd,IAAI;GACF,cAAc,IAAI,YAAY,SAAS;GAEvC,YAAY,UAAU,UAAU;IAC9B,OAAO,QAAQ;IACf,iBAAiB;IACjB,SAAS,KAAK;GAChB;GAEA,YAAY,aAAa,UAAwB;IAE/C,IAAI;KACF,MAAM,SAAS,KAAK,MAAM,MAAM,IAAI;KACpC,KAAK,QAAQ;KACb,YAAY,QAAQ,KAAK;IAC3B,QAAQ;KACN,KAAK,QAAQ,MAAM;KACnB,YAAY,MAAM,MAAM,KAAK;IAC/B;GACF;GAEA,YAAY,WAAW,UAAU;IAC/B,MAAM,QAAQ;IACd,UAAU,KAAK;IAGf,aAAa;GACf;EACF,SAAS,KAAK;GACZ,OAAO,QAAQ;GACf,MAAM,QAAQ;GACd,aAAa;EACf;CACF;CAEA,MAAM,mBAAmB;EACvB,IAAI,gBAAgB;GAClB,aAAa,cAAc;GAC3B,iBAAiB;EACnB;EACA,IAAI,aAAa;GACf,YAAY,MAAM;GAClB,cAAc;EAChB;EACA,OAAO,QAAQ;CACjB;CAEA,MAAM,qBAAqB;EACzB,WAAW;EAEX,IAAI,iBAAiB,sBAAsB;GACzC,OAAO,QAAQ;GACf;GACA,iBAAiB,WAAW,SAAS,cAAc;EACrD,OACE,OAAO,QAAQ;CAEnB;CAGA,IAAI,OAAO,QAAQ,cAAe,OAAO,QAAQ,YAAY,WAAW,KACtE,MAAM,WAAW;EACf,IAAI,OAAO,UAAU,UAAU;GAC7B,WAAW;GACX,QAAQ;EACV;CACF,CAAC;CAGH,IAAI,aACF,QAAQ;CAGV,kBAAkB;EAChB,WAAW;CACb,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/useSse.ts"],"sourcesContent":["import { ref, getCurrentScope, onScopeDispose, watch, type Ref } from 'vue-demi'\n\n/**\n * Minimal representation of an EventSource interface.\n * Ensures maximum compatibility with custom EventSource polyfills (e.g. event-source-polyfill).\n */\nexport interface MinimalEventSource {\n  onopen: ((this: MinimalEventSource, ev: Event) => any) | null\n  onmessage: ((this: MinimalEventSource, ev: MessageEvent) => any) | null\n  onerror: ((this: MinimalEventSource, ev: Event) => any) | null\n  close(): void\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void\n}\n\n/**\n * Options configuration for the `useSse` composable.\n */\nexport interface UseSseOptions<T = any> {\n  /**\n   * Whether to automatically connect to the SSE endpoint when the composable is initialized.\n   * @default true\n   */\n  autoConnect?: boolean\n\n  /**\n   * Delay (in milliseconds) before attempting to reconnect after a connection loss.\n   * @default 3000\n   */\n  reconnectDelay?: number\n\n  /**\n   * Maximum number of consecutive reconnection attempts before giving up.\n   * @default 5\n   */\n  maxReconnectAttempts?: number\n\n  /**\n   * Custom event names to listen to (e.g. `['update', 'delete']`).\n   * By default, the composable only listens to the default 'message' event.\n   */\n  events?: string[]\n\n  /**\n   * Custom `EventSource` class constructor.\n   * Useful for using libraries like `event-source-polyfill` to support custom authorization headers.\n   */\n  eventSourceClass?: new (url: string, eventSourceInitDict?: any) => MinimalEventSource\n\n  /**\n   * Optional configuration object passed directly to the `EventSource` constructor.\n   * e.g., `{ headers: { Authorization: 'Bearer token' } }` when using a polyfill.\n   */\n  eventSourceInitDict?: any\n\n  /**\n   * Callback function triggered when a new message is received.\n   * @param data - The parsed message data (JSON-parsed if valid, otherwise raw string).\n   * @param event - The raw MessageEvent object.\n   */\n  onMessage?: (data: T, event: MessageEvent) => void\n\n  /**\n   * Callback function triggered when a connection error occurs.\n   * @param event - The raw error Event object.\n   */\n  onError?: (event: Event) => void\n\n  /**\n   * Callback function triggered when the connection is successfully opened.\n   * @param event - The raw open Event object.\n   */\n  onOpen?: (event: Event) => void\n}\n\n/**\n * Return signature of the `useSse` composable.\n */\nexport interface UseSseReturn<T = any> {\n  /**\n   * Reactive data holding the last received event message.\n   * Automatically parses JSON payloads if valid; falls back to raw string otherwise.\n   */\n  data: Ref<T | null>\n\n  /**\n   * Reactive connection status:\n   * - `'connecting'`: currently establishing the connection.\n   * - `'open'`: connected and listening for events.\n   * - `'closed'`: disconnected or failed to connect.\n   */\n  status: Ref<'connecting' | 'open' | 'closed'>\n\n  /**\n   * Reactive reference containing the latest connection error Event, if any occurred.\n   */\n  error: Ref<Event | null>\n\n  /**\n   * Manually opens the SSE connection.\n   */\n  connect: () => void\n\n  /**\n   * Manually closes the SSE connection and clears any pending reconnection timers.\n   */\n  disconnect: () => void\n}\n\n/**\n * Vue and Nuxt composable for managing Server-Sent Events (SSE) connections.\n * Fully compatible with Vue 2 and Vue 3, featuring auto-reconnect, JSON parsing,\n * dynamic url reactivity, custom events.\n *\n * @param url - The SSE endpoint URL. Can be a static string, a getter function, or a Vue Ref.\n * @param options - Configuration options for the connection.\n * @returns An object containing reactive states and connection controls.\n */\nexport function useSse<T = any>(\n  url: string | (() => string) | Ref<string>,\n  options: UseSseOptions<T> = {}\n): UseSseReturn<T> {\n  const {\n    autoConnect = true,\n    reconnectDelay = 3000,\n    maxReconnectAttempts = 5,\n    events = [],\n    eventSourceClass,\n    eventSourceInitDict,\n    onMessage,\n    onError,\n    onOpen\n  } = options\n\n  const data = ref<T | null>(null) as Ref<T | null>\n  const status = ref<'connecting' | 'open' | 'closed'>('closed')\n  const error = ref<Event | null>(null)\n\n  let eventSource: MinimalEventSource | EventSource | null = null\n  let reconnectCount = 0\n  let reconnectTimer: any = null\n\n  // Environment check for Server-Side Rendering (Nuxt safety)\n  const isSSR = typeof window === 'undefined'\n\n  // Helper to attach message parser and triggers\n  const handleMessage = (event: MessageEvent) => {\n    try {\n      // Attempt to parse JSON; fallback to raw string if it fails\n      const parsed = JSON.parse(event.data)\n      data.value = parsed\n      onMessage?.(parsed, event)\n    } catch {\n      data.value = event.data as any\n      onMessage?.(event.data, event)\n    }\n  }\n\n  const connect = () => {\n    if (isSSR || eventSource) return\n\n    // Extract target URL from string, ref, or getter function\n    const targetUrl =\n      typeof url === 'function'\n        ? url()\n        : typeof url === 'object' && 'value' in url\n          ? url.value\n          : url\n\n    status.value = 'connecting'\n    error.value = null\n\n    try {\n      // Use custom EventSource Ctor if provided (useful for auth headers via polyfill)\n      const EventSourceCtor = eventSourceClass || EventSource\n      const es = new EventSourceCtor(targetUrl, eventSourceInitDict)\n\n      es.onopen = (event: Event) => {\n        status.value = 'open'\n        reconnectCount = 0 // Reset reconnect attempt counter on successful connection\n        onOpen?.(event)\n      }\n\n      // Always listen to default 'message' event\n      es.onmessage = handleMessage\n\n      // Listen to custom events if specified\n      events.forEach((eventName) => {\n        es.addEventListener(eventName, handleMessage as EventListener)\n      })\n\n      es.onerror = (event: Event) => {\n        error.value = event\n        onError?.(event)\n\n        // Trigger automatic reconnection\n        tryReconnect()\n      }\n\n      eventSource = es\n    } catch (err) {\n      status.value = 'closed'\n      error.value = err as any\n      tryReconnect()\n    }\n  }\n\n  const disconnect = () => {\n    if (reconnectTimer) {\n      clearTimeout(reconnectTimer)\n      reconnectTimer = null\n    }\n    if (eventSource) {\n      // Clean up custom event listeners\n      events.forEach((eventName) => {\n        if (eventSource) {\n          eventSource.removeEventListener(eventName, handleMessage as EventListener)\n        }\n      })\n      eventSource.close()\n      eventSource = null\n    }\n    status.value = 'closed'\n  }\n\n  const tryReconnect = () => {\n    disconnect()\n\n    if (reconnectCount < maxReconnectAttempts) {\n      status.value = 'connecting'\n      reconnectCount++\n      reconnectTimer = setTimeout(connect, reconnectDelay)\n    } else {\n      status.value = 'closed'\n    }\n  }\n\n  // Monitor URL change if it is reactive (function or ref)\n  if (typeof url === 'function' || (typeof url === 'object' && 'value' in url)) {\n    watch(url, () => {\n      if (status.value !== 'closed') {\n        disconnect()\n        connect()\n      }\n    })\n  }\n\n  if (autoConnect) {\n    connect()\n  }\n\n  // Advanced composable lifecycle: clean up scope on dispose (Nuxt / Pinia safe)\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disconnect()\n    })\n  }\n\n  return {\n    data,\n    status,\n    error,\n    connect,\n    disconnect\n  }\n}\n"],"mappings":";;;;;;;;;;;AA8HA,SAAgB,OACd,KACA,UAA4B,CAAC,GACZ;CACjB,MAAM,EACJ,cAAc,MACd,iBAAiB,KACjB,uBAAuB,GACvB,SAAS,CAAC,GACV,kBACA,qBACA,WACA,SACA,WACE;CAEJ,MAAM,OAAO,IAAc,IAAI;CAC/B,MAAM,SAAS,IAAsC,QAAQ;CAC7D,MAAM,QAAQ,IAAkB,IAAI;CAEpC,IAAI,cAAuD;CAC3D,IAAI,iBAAiB;CACrB,IAAI,iBAAsB;CAG1B,MAAM,QAAQ,OAAO,WAAW;CAGhC,MAAM,iBAAiB,UAAwB;EAC7C,IAAI;GAEF,MAAM,SAAS,KAAK,MAAM,MAAM,IAAI;GACpC,KAAK,QAAQ;GACb,YAAY,QAAQ,KAAK;EAC3B,QAAQ;GACN,KAAK,QAAQ,MAAM;GACnB,YAAY,MAAM,MAAM,KAAK;EAC/B;CACF;CAEA,MAAM,gBAAgB;EACpB,IAAI,SAAS,aAAa;EAG1B,MAAM,YACJ,OAAO,QAAQ,aACX,IAAI,IACJ,OAAO,QAAQ,YAAY,WAAW,MACpC,IAAI,QACJ;EAER,OAAO,QAAQ;EACf,MAAM,QAAQ;EAEd,IAAI;GAGF,MAAM,KAAK,KADa,oBAAoB,aACb,WAAW,mBAAmB;GAE7D,GAAG,UAAU,UAAiB;IAC5B,OAAO,QAAQ;IACf,iBAAiB;IACjB,SAAS,KAAK;GAChB;GAGA,GAAG,YAAY;GAGf,OAAO,SAAS,cAAc;IAC5B,GAAG,iBAAiB,WAAW,aAA8B;GAC/D,CAAC;GAED,GAAG,WAAW,UAAiB;IAC7B,MAAM,QAAQ;IACd,UAAU,KAAK;IAGf,aAAa;GACf;GAEA,cAAc;EAChB,SAAS,KAAK;GACZ,OAAO,QAAQ;GACf,MAAM,QAAQ;GACd,aAAa;EACf;CACF;CAEA,MAAM,mBAAmB;EACvB,IAAI,gBAAgB;GAClB,aAAa,cAAc;GAC3B,iBAAiB;EACnB;EACA,IAAI,aAAa;GAEf,OAAO,SAAS,cAAc;IAC5B,IAAI,aACF,YAAY,oBAAoB,WAAW,aAA8B;GAE7E,CAAC;GACD,YAAY,MAAM;GAClB,cAAc;EAChB;EACA,OAAO,QAAQ;CACjB;CAEA,MAAM,qBAAqB;EACzB,WAAW;EAEX,IAAI,iBAAiB,sBAAsB;GACzC,OAAO,QAAQ;GACf;GACA,iBAAiB,WAAW,SAAS,cAAc;EACrD,OACE,OAAO,QAAQ;CAEnB;CAGA,IAAI,OAAO,QAAQ,cAAe,OAAO,QAAQ,YAAY,WAAW,KACtE,MAAM,WAAW;EACf,IAAI,OAAO,UAAU,UAAU;GAC7B,WAAW;GACX,QAAQ;EACV;CACF,CAAC;CAGH,IAAI,aACF,QAAQ;CAIV,IAAI,gBAAgB,GAClB,qBAAqB;EACnB,WAAW;CACb,CAAC;CAGH,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/index.umd.cjs

@@ -1,10 +1,19 @@
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue-demi")) : typeof define === "function" && define.amd ? define(["exports", "vue-demi"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["use-sse-vue"] = {}, global.VueDemi));
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue-demi")) : typeof define === "function" && define.amd ? define(["exports", "vue-demi"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.VueSse = {}, global.VueDemi));
 })(this, function(exports, vue_demi) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/useSse.ts
+	/**
+	* Vue and Nuxt composable for managing Server-Sent Events (SSE) connections.
+	* Fully compatible with Vue 2 and Vue 3, featuring auto-reconnect, JSON parsing,
+	* dynamic url reactivity, custom events.
+	*
+	* @param url - The SSE endpoint URL. Can be a static string, a getter function, or a Vue Ref.
+	* @param options - Configuration options for the connection.
+	* @returns An object containing reactive states and connection controls.
+	*/
 	function useSse(url, options = {}) {
-		const { autoConnect = true, reconnectDelay = 3e3, maxReconnectAttempts = 5, onMessage, onError, onOpen } = options;
+		const { autoConnect = true, reconnectDelay = 3e3, maxReconnectAttempts = 5, events = [], eventSourceClass, eventSourceInitDict, onMessage, onError, onOpen } = options;
 		const data = (0, vue_demi.ref)(null);
 		const status = (0, vue_demi.ref)("closed");
 		const error = (0, vue_demi.ref)(null);
@@ -12,33 +21,38 @@
 		let reconnectCount = 0;
 		let reconnectTimer = null;
 		const isSSR = typeof window === "undefined";
+		const handleMessage = (event) => {
+			try {
+				const parsed = JSON.parse(event.data);
+				data.value = parsed;
+				onMessage?.(parsed, event);
+			} catch {
+				data.value = event.data;
+				onMessage?.(event.data, event);
+			}
+		};
 		const connect = () => {
 			if (isSSR || eventSource) return;
 			const targetUrl = typeof url === "function" ? url() : typeof url === "object" && "value" in url ? url.value : url;
 			status.value = "connecting";
 			error.value = null;
 			try {
-				eventSource = new EventSource(targetUrl);
-				eventSource.onopen = (event) => {
+				const es = new (eventSourceClass || EventSource)(targetUrl, eventSourceInitDict);
+				es.onopen = (event) => {
 					status.value = "open";
 					reconnectCount = 0;
 					onOpen?.(event);
 				};
-				eventSource.onmessage = (event) => {
-					try {
-						const parsed = JSON.parse(event.data);
-						data.value = parsed;
-						onMessage?.(parsed, event);
-					} catch {
-						data.value = event.data;
-						onMessage?.(event.data, event);
-					}
-				};
-				eventSource.onerror = (event) => {
+				es.onmessage = handleMessage;
+				events.forEach((eventName) => {
+					es.addEventListener(eventName, handleMessage);
+				});
+				es.onerror = (event) => {
 					error.value = event;
 					onError?.(event);
 					tryReconnect();
 				};
+				eventSource = es;
 			} catch (err) {
 				status.value = "closed";
 				error.value = err;
@@ -51,6 +65,9 @@
 				reconnectTimer = null;
 			}
 			if (eventSource) {
+				events.forEach((eventName) => {
+					if (eventSource) eventSource.removeEventListener(eventName, handleMessage);
+				});
 				eventSource.close();
 				eventSource = null;
 			}
@@ -71,7 +88,7 @@
 			}
 		});
 		if (autoConnect) connect();
-		(0, vue_demi.onUnmounted)(() => {
+		if ((0, vue_demi.getCurrentScope)()) (0, vue_demi.onScopeDispose)(() => {
 			disconnect();
 		});
 		return {

package/dist/index.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.cjs","names":[],"sources":["../src/useSse.ts"],"sourcesContent":["import { ref, onUnmounted, watch, type Ref } from 'vue-demi'\n\nexport interface UseSseOptions<T = any> {\n  autoConnect?: boolean\n  reconnectDelay?: number\n  maxReconnectAttempts?: number\n  onMessage?: (data: T, event: MessageEvent) => void\n  onError?: (event: Event) => void\n  onOpen?: (event: Event) => void\n}\n\nexport function useSse<T = any>(\n  url: string | (() => string) | Ref<string>,\n  options: UseSseOptions<T> = {}\n) {\n  const {\n    autoConnect = true,\n    reconnectDelay = 3000,\n    maxReconnectAttempts = 5,\n    onMessage,\n    onError,\n    onOpen\n  } = options\n\n  const data = ref<T | null>(null) as Ref<T | null>\n  const status = ref<'connecting' | 'open' | 'closed'>('closed')\n  const error = ref<Event | null>(null)\n\n  let eventSource: EventSource | null = null\n  let reconnectCount = 0\n  let reconnectTimer: any = null\n\n  // Environment check\n  const isSSR = typeof window === 'undefined'\n\n  const connect = () => {\n    if (isSSR || eventSource) return\n\n    // Extract target URL from string, ref, or getter function\n    const targetUrl =\n      typeof url === 'function'\n        ? url()\n        : typeof url === 'object' && 'value' in url\n          ? url.value\n          : url\n\n    status.value = 'connecting'\n    error.value = null\n\n    try {\n      eventSource = new EventSource(targetUrl)\n\n      eventSource.onopen = (event) => {\n        status.value = 'open'\n        reconnectCount = 0\n        onOpen?.(event)\n      }\n\n      eventSource.onmessage = (event: MessageEvent) => {\n        // Attempt to parse JSON, fallback to raw string if it fails\n        try {\n          const parsed = JSON.parse(event.data)\n          data.value = parsed\n          onMessage?.(parsed, event)\n        } catch {\n          data.value = event.data as any\n          onMessage?.(event.data, event)\n        }\n      }\n\n      eventSource.onerror = (event) => {\n        error.value = event\n        onError?.(event)\n\n        // Trigger reconnection\n        tryReconnect()\n      }\n    } catch (err) {\n      status.value = 'closed'\n      error.value = err as any\n      tryReconnect()\n    }\n  }\n\n  const disconnect = () => {\n    if (reconnectTimer) {\n      clearTimeout(reconnectTimer)\n      reconnectTimer = null\n    }\n    if (eventSource) {\n      eventSource.close()\n      eventSource = null\n    }\n    status.value = 'closed'\n  }\n\n  const tryReconnect = () => {\n    disconnect()\n\n    if (reconnectCount < maxReconnectAttempts) {\n      status.value = 'connecting'\n      reconnectCount++\n      reconnectTimer = setTimeout(connect, reconnectDelay)\n    } else {\n      status.value = 'closed'\n    }\n  }\n\n  // Monitor URL change if it is reactive\n  if (typeof url === 'function' || (typeof url === 'object' && 'value' in url)) {\n    watch(url, () => {\n      if (status.value !== 'closed') {\n        disconnect()\n        connect()\n      }\n    })\n  }\n\n  if (autoConnect) {\n    connect()\n  }\n\n  onUnmounted(() => {\n    disconnect()\n  })\n\n  return {\n    data,\n    status,\n    error,\n    connect,\n    disconnect\n  }\n}\n"],"mappings":";;;;;CAWA,SAAgB,OACd,KACA,UAA4B,CAAC,GAC7B;EACA,MAAM,EACJ,cAAc,MACd,iBAAiB,KACjB,uBAAuB,GACvB,WACA,SACA,WACE;EAEJ,MAAM,QAAA,GAAA,SAAA,IAAA,CAAqB,IAAI;EAC/B,MAAM,UAAA,GAAA,SAAA,IAAA,CAA+C,QAAQ;EAC7D,MAAM,SAAA,GAAA,SAAA,IAAA,CAA0B,IAAI;EAEpC,IAAI,cAAkC;EACtC,IAAI,iBAAiB;EACrB,IAAI,iBAAsB;EAG1B,MAAM,QAAQ,OAAO,WAAW;EAEhC,MAAM,gBAAgB;GACpB,IAAI,SAAS,aAAa;GAG1B,MAAM,YACJ,OAAO,QAAQ,aACX,IAAI,IACJ,OAAO,QAAQ,YAAY,WAAW,MACpC,IAAI,QACJ;GAER,OAAO,QAAQ;GACf,MAAM,QAAQ;GAEd,IAAI;IACF,cAAc,IAAI,YAAY,SAAS;IAEvC,YAAY,UAAU,UAAU;KAC9B,OAAO,QAAQ;KACf,iBAAiB;KACjB,SAAS,KAAK;IAChB;IAEA,YAAY,aAAa,UAAwB;KAE/C,IAAI;MACF,MAAM,SAAS,KAAK,MAAM,MAAM,IAAI;MACpC,KAAK,QAAQ;MACb,YAAY,QAAQ,KAAK;KAC3B,QAAQ;MACN,KAAK,QAAQ,MAAM;MACnB,YAAY,MAAM,MAAM,KAAK;KAC/B;IACF;IAEA,YAAY,WAAW,UAAU;KAC/B,MAAM,QAAQ;KACd,UAAU,KAAK;KAGf,aAAa;IACf;GACF,SAAS,KAAK;IACZ,OAAO,QAAQ;IACf,MAAM,QAAQ;IACd,aAAa;GACf;EACF;EAEA,MAAM,mBAAmB;GACvB,IAAI,gBAAgB;IAClB,aAAa,cAAc;IAC3B,iBAAiB;GACnB;GACA,IAAI,aAAa;IACf,YAAY,MAAM;IAClB,cAAc;GAChB;GACA,OAAO,QAAQ;EACjB;EAEA,MAAM,qBAAqB;GACzB,WAAW;GAEX,IAAI,iBAAiB,sBAAsB;IACzC,OAAO,QAAQ;IACf;IACA,iBAAiB,WAAW,SAAS,cAAc;GACrD,OACE,OAAO,QAAQ;EAEnB;EAGA,IAAI,OAAO,QAAQ,cAAe,OAAO,QAAQ,YAAY,WAAW,KACtE,CAAA,GAAA,SAAA,MAAA,CAAM,WAAW;GACf,IAAI,OAAO,UAAU,UAAU;IAC7B,WAAW;IACX,QAAQ;GACV;EACF,CAAC;EAGH,IAAI,aACF,QAAQ;EAGV,CAAA,GAAA,SAAA,YAAA,OAAkB;GAChB,WAAW;EACb,CAAC;EAED,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;CACF"}
+{"version":3,"file":"index.umd.cjs","names":[],"sources":["../src/useSse.ts"],"sourcesContent":["import { ref, getCurrentScope, onScopeDispose, watch, type Ref } from 'vue-demi'\n\n/**\n * Minimal representation of an EventSource interface.\n * Ensures maximum compatibility with custom EventSource polyfills (e.g. event-source-polyfill).\n */\nexport interface MinimalEventSource {\n  onopen: ((this: MinimalEventSource, ev: Event) => any) | null\n  onmessage: ((this: MinimalEventSource, ev: MessageEvent) => any) | null\n  onerror: ((this: MinimalEventSource, ev: Event) => any) | null\n  close(): void\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void\n}\n\n/**\n * Options configuration for the `useSse` composable.\n */\nexport interface UseSseOptions<T = any> {\n  /**\n   * Whether to automatically connect to the SSE endpoint when the composable is initialized.\n   * @default true\n   */\n  autoConnect?: boolean\n\n  /**\n   * Delay (in milliseconds) before attempting to reconnect after a connection loss.\n   * @default 3000\n   */\n  reconnectDelay?: number\n\n  /**\n   * Maximum number of consecutive reconnection attempts before giving up.\n   * @default 5\n   */\n  maxReconnectAttempts?: number\n\n  /**\n   * Custom event names to listen to (e.g. `['update', 'delete']`).\n   * By default, the composable only listens to the default 'message' event.\n   */\n  events?: string[]\n\n  /**\n   * Custom `EventSource` class constructor.\n   * Useful for using libraries like `event-source-polyfill` to support custom authorization headers.\n   */\n  eventSourceClass?: new (url: string, eventSourceInitDict?: any) => MinimalEventSource\n\n  /**\n   * Optional configuration object passed directly to the `EventSource` constructor.\n   * e.g., `{ headers: { Authorization: 'Bearer token' } }` when using a polyfill.\n   */\n  eventSourceInitDict?: any\n\n  /**\n   * Callback function triggered when a new message is received.\n   * @param data - The parsed message data (JSON-parsed if valid, otherwise raw string).\n   * @param event - The raw MessageEvent object.\n   */\n  onMessage?: (data: T, event: MessageEvent) => void\n\n  /**\n   * Callback function triggered when a connection error occurs.\n   * @param event - The raw error Event object.\n   */\n  onError?: (event: Event) => void\n\n  /**\n   * Callback function triggered when the connection is successfully opened.\n   * @param event - The raw open Event object.\n   */\n  onOpen?: (event: Event) => void\n}\n\n/**\n * Return signature of the `useSse` composable.\n */\nexport interface UseSseReturn<T = any> {\n  /**\n   * Reactive data holding the last received event message.\n   * Automatically parses JSON payloads if valid; falls back to raw string otherwise.\n   */\n  data: Ref<T | null>\n\n  /**\n   * Reactive connection status:\n   * - `'connecting'`: currently establishing the connection.\n   * - `'open'`: connected and listening for events.\n   * - `'closed'`: disconnected or failed to connect.\n   */\n  status: Ref<'connecting' | 'open' | 'closed'>\n\n  /**\n   * Reactive reference containing the latest connection error Event, if any occurred.\n   */\n  error: Ref<Event | null>\n\n  /**\n   * Manually opens the SSE connection.\n   */\n  connect: () => void\n\n  /**\n   * Manually closes the SSE connection and clears any pending reconnection timers.\n   */\n  disconnect: () => void\n}\n\n/**\n * Vue and Nuxt composable for managing Server-Sent Events (SSE) connections.\n * Fully compatible with Vue 2 and Vue 3, featuring auto-reconnect, JSON parsing,\n * dynamic url reactivity, custom events.\n *\n * @param url - The SSE endpoint URL. Can be a static string, a getter function, or a Vue Ref.\n * @param options - Configuration options for the connection.\n * @returns An object containing reactive states and connection controls.\n */\nexport function useSse<T = any>(\n  url: string | (() => string) | Ref<string>,\n  options: UseSseOptions<T> = {}\n): UseSseReturn<T> {\n  const {\n    autoConnect = true,\n    reconnectDelay = 3000,\n    maxReconnectAttempts = 5,\n    events = [],\n    eventSourceClass,\n    eventSourceInitDict,\n    onMessage,\n    onError,\n    onOpen\n  } = options\n\n  const data = ref<T | null>(null) as Ref<T | null>\n  const status = ref<'connecting' | 'open' | 'closed'>('closed')\n  const error = ref<Event | null>(null)\n\n  let eventSource: MinimalEventSource | EventSource | null = null\n  let reconnectCount = 0\n  let reconnectTimer: any = null\n\n  // Environment check for Server-Side Rendering (Nuxt safety)\n  const isSSR = typeof window === 'undefined'\n\n  // Helper to attach message parser and triggers\n  const handleMessage = (event: MessageEvent) => {\n    try {\n      // Attempt to parse JSON; fallback to raw string if it fails\n      const parsed = JSON.parse(event.data)\n      data.value = parsed\n      onMessage?.(parsed, event)\n    } catch {\n      data.value = event.data as any\n      onMessage?.(event.data, event)\n    }\n  }\n\n  const connect = () => {\n    if (isSSR || eventSource) return\n\n    // Extract target URL from string, ref, or getter function\n    const targetUrl =\n      typeof url === 'function'\n        ? url()\n        : typeof url === 'object' && 'value' in url\n          ? url.value\n          : url\n\n    status.value = 'connecting'\n    error.value = null\n\n    try {\n      // Use custom EventSource Ctor if provided (useful for auth headers via polyfill)\n      const EventSourceCtor = eventSourceClass || EventSource\n      const es = new EventSourceCtor(targetUrl, eventSourceInitDict)\n\n      es.onopen = (event: Event) => {\n        status.value = 'open'\n        reconnectCount = 0 // Reset reconnect attempt counter on successful connection\n        onOpen?.(event)\n      }\n\n      // Always listen to default 'message' event\n      es.onmessage = handleMessage\n\n      // Listen to custom events if specified\n      events.forEach((eventName) => {\n        es.addEventListener(eventName, handleMessage as EventListener)\n      })\n\n      es.onerror = (event: Event) => {\n        error.value = event\n        onError?.(event)\n\n        // Trigger automatic reconnection\n        tryReconnect()\n      }\n\n      eventSource = es\n    } catch (err) {\n      status.value = 'closed'\n      error.value = err as any\n      tryReconnect()\n    }\n  }\n\n  const disconnect = () => {\n    if (reconnectTimer) {\n      clearTimeout(reconnectTimer)\n      reconnectTimer = null\n    }\n    if (eventSource) {\n      // Clean up custom event listeners\n      events.forEach((eventName) => {\n        if (eventSource) {\n          eventSource.removeEventListener(eventName, handleMessage as EventListener)\n        }\n      })\n      eventSource.close()\n      eventSource = null\n    }\n    status.value = 'closed'\n  }\n\n  const tryReconnect = () => {\n    disconnect()\n\n    if (reconnectCount < maxReconnectAttempts) {\n      status.value = 'connecting'\n      reconnectCount++\n      reconnectTimer = setTimeout(connect, reconnectDelay)\n    } else {\n      status.value = 'closed'\n    }\n  }\n\n  // Monitor URL change if it is reactive (function or ref)\n  if (typeof url === 'function' || (typeof url === 'object' && 'value' in url)) {\n    watch(url, () => {\n      if (status.value !== 'closed') {\n        disconnect()\n        connect()\n      }\n    })\n  }\n\n  if (autoConnect) {\n    connect()\n  }\n\n  // Advanced composable lifecycle: clean up scope on dispose (Nuxt / Pinia safe)\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disconnect()\n    })\n  }\n\n  return {\n    data,\n    status,\n    error,\n    connect,\n    disconnect\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;CA8HA,SAAgB,OACd,KACA,UAA4B,CAAC,GACZ;EACjB,MAAM,EACJ,cAAc,MACd,iBAAiB,KACjB,uBAAuB,GACvB,SAAS,CAAC,GACV,kBACA,qBACA,WACA,SACA,WACE;EAEJ,MAAM,QAAA,GAAA,SAAA,IAAA,CAAqB,IAAI;EAC/B,MAAM,UAAA,GAAA,SAAA,IAAA,CAA+C,QAAQ;EAC7D,MAAM,SAAA,GAAA,SAAA,IAAA,CAA0B,IAAI;EAEpC,IAAI,cAAuD;EAC3D,IAAI,iBAAiB;EACrB,IAAI,iBAAsB;EAG1B,MAAM,QAAQ,OAAO,WAAW;EAGhC,MAAM,iBAAiB,UAAwB;GAC7C,IAAI;IAEF,MAAM,SAAS,KAAK,MAAM,MAAM,IAAI;IACpC,KAAK,QAAQ;IACb,YAAY,QAAQ,KAAK;GAC3B,QAAQ;IACN,KAAK,QAAQ,MAAM;IACnB,YAAY,MAAM,MAAM,KAAK;GAC/B;EACF;EAEA,MAAM,gBAAgB;GACpB,IAAI,SAAS,aAAa;GAG1B,MAAM,YACJ,OAAO,QAAQ,aACX,IAAI,IACJ,OAAO,QAAQ,YAAY,WAAW,MACpC,IAAI,QACJ;GAER,OAAO,QAAQ;GACf,MAAM,QAAQ;GAEd,IAAI;IAGF,MAAM,KAAK,KADa,oBAAoB,aACb,WAAW,mBAAmB;IAE7D,GAAG,UAAU,UAAiB;KAC5B,OAAO,QAAQ;KACf,iBAAiB;KACjB,SAAS,KAAK;IAChB;IAGA,GAAG,YAAY;IAGf,OAAO,SAAS,cAAc;KAC5B,GAAG,iBAAiB,WAAW,aAA8B;IAC/D,CAAC;IAED,GAAG,WAAW,UAAiB;KAC7B,MAAM,QAAQ;KACd,UAAU,KAAK;KAGf,aAAa;IACf;IAEA,cAAc;GAChB,SAAS,KAAK;IACZ,OAAO,QAAQ;IACf,MAAM,QAAQ;IACd,aAAa;GACf;EACF;EAEA,MAAM,mBAAmB;GACvB,IAAI,gBAAgB;IAClB,aAAa,cAAc;IAC3B,iBAAiB;GACnB;GACA,IAAI,aAAa;IAEf,OAAO,SAAS,cAAc;KAC5B,IAAI,aACF,YAAY,oBAAoB,WAAW,aAA8B;IAE7E,CAAC;IACD,YAAY,MAAM;IAClB,cAAc;GAChB;GACA,OAAO,QAAQ;EACjB;EAEA,MAAM,qBAAqB;GACzB,WAAW;GAEX,IAAI,iBAAiB,sBAAsB;IACzC,OAAO,QAAQ;IACf;IACA,iBAAiB,WAAW,SAAS,cAAc;GACrD,OACE,OAAO,QAAQ;EAEnB;EAGA,IAAI,OAAO,QAAQ,cAAe,OAAO,QAAQ,YAAY,WAAW,KACtE,CAAA,GAAA,SAAA,MAAA,CAAM,WAAW;GACf,IAAI,OAAO,UAAU,UAAU;IAC7B,WAAW;IACX,QAAQ;GACV;EACF,CAAC;EAGH,IAAI,aACF,QAAQ;EAIV,KAAA,GAAA,SAAA,gBAAA,CAAoB,GAClB,CAAA,GAAA,SAAA,eAAA,OAAqB;GACnB,WAAW;EACb,CAAC;EAGH,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;CACF"}

package/dist/useSse.d.ts

@@ -1,51 +1,103 @@
 import { type Ref } from 'vue-demi';
+/**
+ * Minimal representation of an EventSource interface.
+ * Ensures maximum compatibility with custom EventSource polyfills (e.g. event-source-polyfill).
+ */
+export interface MinimalEventSource {
+    onopen: ((this: MinimalEventSource, ev: Event) => any) | null;
+    onmessage: ((this: MinimalEventSource, ev: MessageEvent) => any) | null;
+    onerror: ((this: MinimalEventSource, ev: Event) => any) | null;
+    close(): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+/**
+ * Options configuration for the `useSse` composable.
+ */
 export interface UseSseOptions<T = any> {
+    /**
+     * Whether to automatically connect to the SSE endpoint when the composable is initialized.
+     * @default true
+     */
     autoConnect?: boolean;
+    /**
+     * Delay (in milliseconds) before attempting to reconnect after a connection loss.
+     * @default 3000
+     */
     reconnectDelay?: number;
+    /**
+     * Maximum number of consecutive reconnection attempts before giving up.
+     * @default 5
+     */
     maxReconnectAttempts?: number;
+    /**
+     * Custom event names to listen to (e.g. `['update', 'delete']`).
+     * By default, the composable only listens to the default 'message' event.
+     */
+    events?: string[];
+    /**
+     * Custom `EventSource` class constructor.
+     * Useful for using libraries like `event-source-polyfill` to support custom authorization headers.
+     */
+    eventSourceClass?: new (url: string, eventSourceInitDict?: any) => MinimalEventSource;
+    /**
+     * Optional configuration object passed directly to the `EventSource` constructor.
+     * e.g., `{ headers: { Authorization: 'Bearer token' } }` when using a polyfill.
+     */
+    eventSourceInitDict?: any;
+    /**
+     * Callback function triggered when a new message is received.
+     * @param data - The parsed message data (JSON-parsed if valid, otherwise raw string).
+     * @param event - The raw MessageEvent object.
+     */
     onMessage?: (data: T, event: MessageEvent) => void;
+    /**
+     * Callback function triggered when a connection error occurs.
+     * @param event - The raw error Event object.
+     */
     onError?: (event: Event) => void;
+    /**
+     * Callback function triggered when the connection is successfully opened.
+     * @param event - The raw open Event object.
+     */
     onOpen?: (event: Event) => void;
 }
-export declare function useSse<T = any>(url: string | (() => string) | Ref<string>, options?: UseSseOptions<T>): {
+/**
+ * Return signature of the `useSse` composable.
+ */
+export interface UseSseReturn<T = any> {
+    /**
+     * Reactive data holding the last received event message.
+     * Automatically parses JSON payloads if valid; falls back to raw string otherwise.
+     */
     data: Ref<T | null>;
-    status: Ref<"connecting" | "open" | "closed">;
-    error: Ref<{
-        readonly bubbles: boolean;
-        cancelBubble: boolean;
-        readonly cancelable: boolean;
-        readonly composed: boolean;
-        readonly currentTarget: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
-        } | null;
-        readonly defaultPrevented: boolean;
-        readonly eventPhase: number;
-        readonly isTrusted: boolean;
-        returnValue: boolean;
-        readonly srcElement: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
-        } | null;
-        readonly target: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean) => void;
-        } | null;
-        readonly timeStamp: DOMHighResTimeStamp;
-        readonly type: string;
-        composedPath: () => EventTarget[];
-        initEvent: (type: string, bubbles?: boolean, cancelable?: boolean) => void;
-        preventDefault: () => void;
-        stopImmediatePropagation: () => void;
-        stopPropagation: () => void;
-        readonly NONE: 0;
-        readonly CAPTURING_PHASE: 1;
-        readonly AT_TARGET: 2;
-        readonly BUBBLING_PHASE: 3;
-    } | null>;
+    /**
+     * Reactive connection status:
+     * - `'connecting'`: currently establishing the connection.
+     * - `'open'`: connected and listening for events.
+     * - `'closed'`: disconnected or failed to connect.
+     */
+    status: Ref<'connecting' | 'open' | 'closed'>;
+    /**
+     * Reactive reference containing the latest connection error Event, if any occurred.
+     */
+    error: Ref<Event | null>;
+    /**
+     * Manually opens the SSE connection.
+     */
     connect: () => void;
+    /**
+     * Manually closes the SSE connection and clears any pending reconnection timers.
+     */
     disconnect: () => void;
-};
+}
+/**
+ * Vue and Nuxt composable for managing Server-Sent Events (SSE) connections.
+ * Fully compatible with Vue 2 and Vue 3, featuring auto-reconnect, JSON parsing,
+ * dynamic url reactivity, custom events.
+ *
+ * @param url - The SSE endpoint URL. Can be a static string, a getter function, or a Vue Ref.
+ * @param options - Configuration options for the connection.
+ * @returns An object containing reactive states and connection controls.
+ */
+export declare function useSse<T = any>(url: string | (() => string) | Ref<string>, options?: UseSseOptions<T>): UseSseReturn<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "use-sse-vue",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A lightweight, robust Vue and Nuxt composable for managing Server-Sent Events (SSE) connections with auto-reconnect, JSON parsing, and SSR safety",
   "type": "module",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "dist"
   ],
   "scripts": {
-    "dev": "node playground/server.js & vite playground --config vite.config.ts",
+    "dev": "node --env-file=playground/.env playground/server.js & vite playground --config vite.config.ts",
     "playground": "vite playground --config vite.config.ts",
-    "server": "node playground/server.js",
+    "server": "node --env-file=playground/.env playground/server.js",
     "build": "vite build && vue-tsc",
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit && vue-tsc -p playground/tsconfig.json",
@@ -59,6 +59,7 @@
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.7.0",
     "prettier": "^3.8.5",
+    "rollup-plugin-visualizer": "^7.0.1",
     "tailwindcss": "^4.3.1",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.62.0",