use-next-sse 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# use-next-sse
+
+use-next-sse is a lightweight and easy-to-use React hook library for implementing Server-Sent Events (SSE) in Next.js applications, enabling real-time, unidirectional data streaming from server to client.
+
+## Installation
+
+\`\`\`bash
+npm install use-next-sse
+\`\`\`
+
+## Quick Start
+
+### Server-Side (Next.js API Route)
+
+Create a new file `app/api/sse/route.ts` with the following content:
+
+\`\`\`typescript
+import { createSSEHandler } from 'use-next-sse';
+
+export const GET = createSSEHandler(async (sse) => {
+  let count = 0;
+  const interval = setInterval(() => {
+    sse.send({ count: count++ }, 'counter');
+    if (count > 10) {
+      clearInterval(interval);
+      sse.close();
+    }
+  }, 1000);
+});
+\`\`\`
+
+### Client-Side (React Component)
+
+Create a new file `app/components/Counter.tsx` with the following content:
+
+\`\`\`typescript
+'use client'
+
+import { useSSE } from 'use-next-sse';
+
+export default function Counter() {
+  const { data, error } = useSSE('/api/sse', '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
+import Counter from './components/Counter';
+
+export default function Home() {
+  return (
+    <main>
+      <h1>SSE Counter Example</h1>
+      <Counter />
+    </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/use-sse.d.ts

@@ -0,0 +1,11 @@
+export interface SSEOptions {
+    onMessage?: (event: MessageEvent) => void;
+    onError?: (error: Error) => void;
+    reconnectInterval?: number;
+    maxReconnectAttempts?: number;
+}
+export declare function useSSE(url: string, eventName?: string, options?: SSEOptions): {
+    data: any;
+    error: Error | null;
+    close: () => void;
+};

package/dist/client/use-sse.js

@@ -0,0 +1,68 @@
+import { useState, useEffect, useRef } from 'react';
+export function useSSE(url, eventName, options = {}) {
+    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;
+    useEffect(() => {
+        let timeoutId;
+        const messageHandler = (event) => {
+            var _a, _b;
+            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;
+            }
+            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);
+            }
+        };
+        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;
+        };
+        connect();
+        return () => {
+            if (eventSourceRef.current) {
+                if (eventName) {
+                    eventSourceRef.current.removeEventListener(eventName, messageHandler);
+                }
+                eventSourceRef.current.close();
+            }
+            window.clearTimeout(timeoutId);
+        };
+    }, [url, eventName, options, reconnectInterval, maxReconnectAttempts]);
+    const close = () => {
+        if (eventSourceRef.current) {
+            eventSourceRef.current.close();
+            eventSourceRef.current = null;
+        }
+    };
+    return { data, error, close };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+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/index.js

@@ -0,0 +1,4 @@
+// Server-side exports
+export { createSSEHandler } from './server/sse-server';
+// Client-side exports
+export { useSSE } from './client/use-sse';

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

@@ -0,0 +1,18 @@
+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>>;

package/dist/server/sse-server.js

@@ -0,0 +1,62 @@
+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() {
+        const stream = new ReadableStream({
+            start: (controller) => {
+                this.controller = controller;
+                if (this.resolveInitialize) {
+                    this.resolveInitialize();
+                    this.resolveInitialize = null;
+                }
+            },
+        });
+        return new NextResponse(stream, {
+            headers: {
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                '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

@@ -0,0 +1,48 @@
+{
+  "name": "use-next-sse",
+  "version": "0.0.0",
+  "description": "A lightweight Server-Sent Events (SSE) library for Next.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "nextjs",
+    "sse",
+    "server-sent-events",
+    "react"
+  ],
+  "author": "Alexander Kasten",
+  "license": "MIT",
+  "peerDependencies": {
+    "next": ">13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.1.0",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^14.0.0",
+    "@types/react": "^18.0.0",
+    "jest": "^29.5.0",
+    "prettier": "^3.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^4.5.0"
+  },
+  "config": {
+    "sse": {
+      "reconnectInterval": 1000,
+      "maxReconnectAttempts": 5
+    }
+  }
+}