use-next-sse 0.0.0 → 0.1.0

package/README.md

@@ -4,9 +4,9 @@ use-next-sse is a lightweight and easy-to-use React hook library for implementin
 
 ## Installation
 
-\`\`\`bash
+```bash
 npm install use-next-sse
-\`\`\`
+```
 
 ## Quick Start
 
@@ -14,45 +14,45 @@ npm install use-next-sse
 
 Create a new file `app/api/sse/route.ts` with the following content:
 
-\`\`\`typescript
+```typescript
 import { createSSEHandler } from 'use-next-sse';
-
-export const GET = createSSEHandler(async (sse) => {
+export const dynamic = 'force-dynamic';
+export const GET = createSSEHandler(async (send, close) => {
   let count = 0;
   const interval = setInterval(() => {
-    sse.send({ count: count++ }, 'counter');
+    send({ count: count++ }, 'counter');
     if (count > 10) {
       clearInterval(interval);
-      sse.close();
+      close();
     }
   }, 1000);
 });
-\`\`\`
+```
 
 ### Client-Side (React Component)
 
 Create a new file `app/components/Counter.tsx` with the following content:
 
-\`\`\`typescript
+```typescript
 'use client'
 
 import { useSSE } from 'use-next-sse';
 
 export default function Counter() {
-  const { data, error } = useSSE('/api/sse', 'counter');
+  const { data, error } = useSSE({url: '/api/sse', eventName: 'counter'});
 
   if (error) return <div>Error: {error.message}</div>;
   if (!data) return <div>Loading...</div>;
 
   return <div>Count: {data.count}</div>;
 }
-\`\`\`
+```
 
 ### Usage in a Page
 
 Use the `Counter` component in a page, for example in `app/page.tsx`:
 
-\`\`\`typescript
+```typescript
 import Counter from './components/Counter';
 
 export default function Home() {
@@ -63,6 +63,6 @@ export default function Home() {
     </main>
   );
 }
-\`\`\`
+```
 
 This example demonstrates a simple counter that updates every second using Server-Sent Events. The server sends updates for 10 seconds before closing the connection.

package/dist/client/sse-manager.d.ts

@@ -0,0 +1,10 @@
+type Listener = (event: MessageEvent) => void;
+declare class SSEManager {
+    private connections;
+    getConnection(url: string): EventSource;
+    releaseConnection(url: string): void;
+    addEventListener(url: string, eventName: string, listener: Listener): void;
+    removeEventListener(url: string, eventName: string, listener: Listener): void;
+}
+export declare const sseManager: SSEManager;
+export {};

package/dist/client/sse-manager.js

@@ -0,0 +1,51 @@
+class SSEManager {
+    constructor() {
+        this.connections = new Map();
+    }
+    getConnection(url) {
+        let connection = this.connections.get(url);
+        if (!connection) {
+            const source = new EventSource(url);
+            connection = { source, refCount: 0, listeners: new Map() };
+            this.connections.set(url, connection);
+        }
+        connection.refCount++;
+        return connection.source;
+    }
+    releaseConnection(url) {
+        const connection = this.connections.get(url);
+        if (connection) {
+            connection.refCount--;
+            if (connection.refCount === 0) {
+                connection.source.close();
+                this.connections.delete(url);
+            }
+        }
+    }
+    addEventListener(url, eventName, listener) {
+        const connection = this.connections.get(url);
+        if (connection) {
+            if (!connection.listeners.has(eventName)) {
+                connection.listeners.set(eventName, new Set());
+                connection.source.addEventListener(eventName, (event) => {
+                    const listeners = connection.listeners.get(eventName);
+                    listeners === null || listeners === void 0 ? void 0 : listeners.forEach(listener => listener(event));
+                });
+            }
+            connection.listeners.get(eventName).add(listener);
+        }
+    }
+    removeEventListener(url, eventName, listener) {
+        const connection = this.connections.get(url);
+        if (connection) {
+            const listeners = connection.listeners.get(eventName);
+            if (listeners) {
+                listeners.delete(listener);
+                if (listeners.size === 0) {
+                    connection.listeners.delete(eventName);
+                }
+            }
+        }
+    }
+}
+export const sseManager = new SSEManager();

package/dist/client/use-sse.d.ts

@@ -1,11 +1,30 @@
 export interface SSEOptions {
-    onMessage?: (event: MessageEvent) => void;
-    onError?: (error: Error) => void;
-    reconnectInterval?: number;
-    maxReconnectAttempts?: number;
+    url: string;
+    eventName?: string;
 }
-export declare function useSSE(url: string, eventName?: string, options?: SSEOptions): {
-    data: any;
+interface SSEResult<T> {
+    data: T | null;
     error: Error | null;
+    lastEventId: string | null;
     close: () => void;
-};
+}
+/**
+ * Hook to manage Server-Sent Events (SSE) connections.
+ *
+ * @template T - The type of the data expected from the SSE.
+ * @param {SSEOptions} options - The options for the SSE connection.
+ * @param {string} options.url - The URL to connect to for SSE.
+ * @param {string} [options.eventName='message'] - The name of the event to listen for.
+ * @returns {SSEResult<T>} The result of the SSE connection, including data, error, last event ID, and a close function.
+ *
+ * @example
+ * const { data, error, lastEventId, close } = useSSE<{ message: string }>({ url: 'https://example.com/sse' });
+ *
+ * useEffect(() => {
+ *   if (data) {
+ *     console.log(data.message);
+ *   }
+ * }, [data]);
+ */
+export declare function useSSE<T = any>({ url, eventName }: SSEOptions): SSEResult<T>;
+export {};

package/dist/client/use-sse.js

@@ -1,68 +1,54 @@
-import { useState, useEffect, useRef } from 'react';
-export function useSSE(url, eventName, options = {}) {
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import { sseManager } from './sse-manager';
+/**
+ * Hook to manage Server-Sent Events (SSE) connections.
+ *
+ * @template T - The type of the data expected from the SSE.
+ * @param {SSEOptions} options - The options for the SSE connection.
+ * @param {string} options.url - The URL to connect to for SSE.
+ * @param {string} [options.eventName='message'] - The name of the event to listen for.
+ * @returns {SSEResult<T>} The result of the SSE connection, including data, error, last event ID, and a close function.
+ *
+ * @example
+ * const { data, error, lastEventId, close } = useSSE<{ message: string }>({ url: 'https://example.com/sse' });
+ *
+ * useEffect(() => {
+ *   if (data) {
+ *     console.log(data.message);
+ *   }
+ * }, [data]);
+ */
+export function useSSE({ url, eventName = 'message' }) {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
-    const eventSourceRef = useRef(null);
-    const reconnectAttemptsRef = useRef(0);
-    const reconnectInterval = options.reconnectInterval || 1000;
-    const maxReconnectAttempts = options.maxReconnectAttempts || 5;
+    const [lastEventId, setLastEventId] = useState(null);
+    const close = useCallback(() => {
+        sseManager.releaseConnection(url);
+    }, [url]);
     useEffect(() => {
-        let timeoutId;
-        const messageHandler = (event) => {
-            var _a, _b;
+        const source = sseManager.getConnection(url);
+        const handleMessage = (event) => {
             try {
                 const parsedData = JSON.parse(event.data);
                 setData(parsedData);
-                (_a = options.onMessage) === null || _a === void 0 ? void 0 : _a.call(options, event);
-                reconnectAttemptsRef.current = 0;
+                setLastEventId(event.lastEventId);
+                setError(null);
             }
             catch (err) {
-                const parseError = new Error(`Failed to parse SSE data: ${err.message}`);
-                setError(parseError);
-                (_b = options.onError) === null || _b === void 0 ? void 0 : _b.call(options, parseError);
+                setError(new Error('Failed to parse event data'));
             }
         };
-        const connect = () => {
-            const eventSource = new EventSource(url);
-            if (eventName) {
-                eventSource.addEventListener(eventName, messageHandler);
-            }
-            else {
-                eventSource.onmessage = messageHandler;
-            }
-            eventSource.onerror = (event) => {
-                var _a;
-                const sseError = new Error('SSE connection error');
-                setError(sseError);
-                (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, sseError);
-                eventSource.close();
-                if (reconnectAttemptsRef.current < maxReconnectAttempts) {
-                    reconnectAttemptsRef.current++;
-                    console.log(`Reconnecting... Attempt ${reconnectAttemptsRef.current} of ${maxReconnectAttempts}`);
-                    timeoutId = window.setTimeout(connect, reconnectInterval);
-                }
-                else {
-                    console.error('Max reconnect attempts reached. Giving up.');
-                }
-            };
-            eventSourceRef.current = eventSource;
+        sseManager.addEventListener(url, eventName, handleMessage);
+        const handleError = (event) => {
+            setError(new Error('EventSource failed'));
         };
-        connect();
+        source.addEventListener('error', handleError);
         return () => {
-            if (eventSourceRef.current) {
-                if (eventName) {
-                    eventSourceRef.current.removeEventListener(eventName, messageHandler);
-                }
-                eventSourceRef.current.close();
-            }
-            window.clearTimeout(timeoutId);
+            sseManager.removeEventListener(url, eventName, handleMessage);
+            source.removeEventListener('error', handleError);
+            sseManager.releaseConnection(url);
         };
-    }, [url, eventName, options, reconnectInterval, maxReconnectAttempts]);
-    const close = () => {
-        if (eventSourceRef.current) {
-            eventSourceRef.current.close();
-            eventSourceRef.current = null;
-        }
-    };
-    return { data, error, close };
+    }, [url, eventName]);
+    return { data, error, lastEventId, close };
 }

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { createSSEHandler } from './server/sse-server';
-export type { SSEConnection, SSEConfig } from './server/sse-server';
 export { useSSE } from './client/use-sse';
 export type { SSEOptions } from './client/use-sse';

package/dist/server/sse-server.d.ts

@@ -1,18 +1,25 @@
-import { NextResponse } from 'next/server';
-export type SSEConfig = {
-    reconnectInterval?: number;
-    maxReconnectAttempts?: number;
-};
-export declare class SSEConnection {
-    private encoder;
-    private controller;
-    private initializePromise;
-    private resolveInitialize;
-    private config;
-    constructor(config?: SSEConfig);
-    initialize(): Promise<void>;
-    send(data: any, event?: string): void;
-    close(): void;
-    getResponse(): NextResponse<unknown>;
-}
-export declare function createSSEHandler(handler: (sse: SSEConnection) => Promise<void>, config?: SSEConfig): () => Promise<NextResponse<unknown>>;
+import { NextRequest } from 'next/server';
+type SendFunction = (data: any, eventName?: string) => void;
+type SSECallback = (send: SendFunction, close: () => void) => void | Promise<void> | (() => void);
+/**
+ * Creates a Server-Sent Events (SSE) handler for Next.js.
+ *
+ * @param callback - A function that takes two arguments:
+ *   - `send`: A function to send data to the client. It accepts two parameters:
+ *     - `data`: The data to send to the client.
+ *     - `eventName` (optional): The name of the event.
+ *   - `close`: A function to close the SSE connection.
+ *   The callback can return a cleanup function that will be called when the connection is closed.
+ *
+ * @returns A function that handles the SSE request. This function takes a `NextRequest` object as an argument.
+ *
+ * The returned function creates a `ReadableStream` to handle the SSE connection. It sets up the `send` and `close` functions,
+ * and listens for the `abort` event on the request signal to close the connection.
+ *
+ * The response is returned with the appropriate headers for SSE:
+ * - `Content-Type`: `text/event-stream`
+ * - `Cache-Control`: `no-cache, no-transform`
+ * - `Connection`: `keep-alive`
+ */
+export declare function createSSEHandler(callback: SSECallback): (request: NextRequest) => Promise<Response>;
+export {};

package/dist/server/sse-server.js

@@ -1,62 +1,66 @@
-import { NextResponse } from 'next/server';
-export class SSEConnection {
-    constructor(config = {}) {
-        this.resolveInitialize = null;
-        this.encoder = new TextEncoder();
-        this.initializePromise = new Promise((resolve) => {
-            this.resolveInitialize = resolve;
-        });
-        this.config = {
-            reconnectInterval: config.reconnectInterval || 1000,
-            maxReconnectAttempts: config.maxReconnectAttempts || 5,
-        };
-    }
-    async initialize() {
-        await this.initializePromise;
-    }
-    send(data, event) {
-        if (!this.controller) {
-            throw new Error('SSEConnection not initialized. Call initialize() first.');
-        }
-        const message = `data: ${JSON.stringify(data)}\n${event ? `event: ${event}\n` : ''}id: ${Date.now()}\n\n`;
-        this.controller.enqueue(this.encoder.encode(message));
-    }
-    close() {
-        if (!this.controller) {
-            throw new Error('SSEConnection not initialized. Call initialize() first.');
-        }
-        this.controller.close();
-    }
-    getResponse() {
+/**
+ * Creates a Server-Sent Events (SSE) handler for Next.js.
+ *
+ * @param callback - A function that takes two arguments:
+ *   - `send`: A function to send data to the client. It accepts two parameters:
+ *     - `data`: The data to send to the client.
+ *     - `eventName` (optional): The name of the event.
+ *   - `close`: A function to close the SSE connection.
+ *   The callback can return a cleanup function that will be called when the connection is closed.
+ *
+ * @returns A function that handles the SSE request. This function takes a `NextRequest` object as an argument.
+ *
+ * The returned function creates a `ReadableStream` to handle the SSE connection. It sets up the `send` and `close` functions,
+ * and listens for the `abort` event on the request signal to close the connection.
+ *
+ * The response is returned with the appropriate headers for SSE:
+ * - `Content-Type`: `text/event-stream`
+ * - `Cache-Control`: `no-cache, no-transform`
+ * - `Connection`: `keep-alive`
+ */
+export function createSSEHandler(callback) {
+    return async function (request) {
+        const encoder = new TextEncoder();
+        let isClosed = false;
+        let cleanup;
+        let messageId = 0;
         const stream = new ReadableStream({
-            start: (controller) => {
-                this.controller = controller;
-                if (this.resolveInitialize) {
-                    this.resolveInitialize();
-                    this.resolveInitialize = null;
+            start(controller) {
+                const send = (data, eventName) => {
+                    if (!isClosed) {
+                        let message = `id: ${messageId}\n`;
+                        if (eventName) {
+                            message += `event: ${eventName}\n`;
+                        }
+                        message += `data: ${JSON.stringify(data)}\n\n`;
+                        controller.enqueue(encoder.encode(message));
+                        messageId++;
+                    }
+                };
+                function close() {
+                    if (!isClosed) {
+                        isClosed = true;
+                        controller.close();
+                        if (typeof cleanup === 'function') {
+                            cleanup();
+                        }
+                    }
                 }
-            },
+                const result = callback(send, close);
+                if (typeof result === 'function') {
+                    cleanup = result;
+                }
+                request.signal.addEventListener('abort', () => {
+                    close();
+                });
+            }
         });
-        return new NextResponse(stream, {
+        return new Response(stream, {
             headers: {
                 'Content-Type': 'text/event-stream',
-                'Cache-Control': 'no-cache',
+                'Cache-Control': 'no-cache, no-transform',
                 'Connection': 'keep-alive',
-                'X-Accel-Buffering': 'no',
-                'retry': this.config.reconnectInterval.toString(),
             },
         });
-    }
-}
-export function createSSEHandler(handler, config) {
-    return async () => {
-        const sse = new SSEConnection(config);
-        const response = sse.getResponse();
-        await sse.initialize();
-        handler(sse).catch((error) => {
-            console.error('SSE Handler Error:', error);
-            sse.close();
-        });
-        return response;
     };
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "use-next-sse",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "A lightweight Server-Sent Events (SSE) library for Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
+    "watch": "tsc -w",
     "test": "jest",
     "prepublishOnly": "npm run build"
   },
@@ -33,7 +34,8 @@
     "@types/node": "^14.0.0",
     "@types/react": "^18.0.0",
     "jest": "^29.5.0",
-    "prettier": "^3.4.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-jest": "^29.1.0",
@@ -44,5 +46,13 @@
       "reconnectInterval": 1000,
       "maxReconnectAttempts": 5
     }
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/alexanderkasten/use-next-sse.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alexanderkasten/use-next-sse/issues"
+  },
+  "homepage": "https://github.com/alexanderkasten/use-next-sse#readme"
 }