@laravel/stream-react 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# Laravel Stream for React
+
+<p align="left">
+<a href="https://github.com/laravel/stream/actions/workflows/tests.yml"><img src="https://github.com/laravel/stream/actions/workflows/tests.yml/badge.svg" alt="Build Status"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-react"><img src="https://img.shields.io/npm/dt/@laravel/stream-react" alt="Total Downloads"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-react"><img src="https://img.shields.io/npm/v/@laravel/stream-react" alt="Latest Stable Version"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-react"><img src="https://img.shields.io/npm/l/@laravel/stream-react" alt="License"></a>
+</p>
+
+Easily consume [Server-Sent Events (SSE)](https://laravel.com/docs/responses#event-streams) in your React application.
+
+## Installation
+
+```bash
+npm install @laravel/stream-react
+```
+
+## Usage
+
+Provide your stream URL and the hook will automatically update the `message` with the concatenated response as messages are returned from your server:
+
+```tsx
+import { useStream } from "@laravel/stream-react";
+
+function App() {
+  const { message } = useStream("/stream");
+
+  return <div>{message}</div>;
+}
+```
+
+You also have access to the array of message parts:
+
+```tsx
+import { useStream } from "@laravel/stream-react";
+
+function App() {
+  const { messageParts } = useStream("/stream");
+
+  return (
+    <ul>
+      {messageParts.forEach((message) => (
+        <li>{message}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+The second parameter is options object, all properties are optional (defaults are shown here):
+
+```tsx
+import { useStream } from "@laravel/stream-react";
+
+function App() {
+  const { message } = useStream("/stream", {
+    event: "update",
+    endSignal: "</stream>",
+    glue: " ",
+    onMessage: (message) => {
+      //
+    },
+    onError: (error) => {
+      //
+    },
+    onComplete: () => {
+      //
+    },
+  });
+
+  return <div>{message}</div>;
+}
+```
+
+## License
+
+Laravel Stream is open-sourced software licensed under the [MIT license](LICENSE.md).

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+declare type Options = {
+    eventName?: string;
+    endSignal?: string;
+    glue?: string;
+    onMessage?: (event: MessageEvent) => void;
+    onComplete?: () => void;
+    onError?: (error: Event) => void;
+};
+
+declare type StreamResult = {
+    message: string;
+    messageParts: string[];
+    close: (resetMessage?: boolean) => void;
+    clearMessage: () => void;
+};
+
+/**
+ * Hook for handling server-sent event (SSE) streams
+ *
+ * @param url - The URL to connect to for the EventSource
+ * @param options - Options for the stream
+ *
+ * @link https://laravel.com/docs/responses#event-streams
+ *
+ * @returns StreamResult object containing the accumulated response, close, and reset functions
+ */
+export declare const useStream: (url: string, { eventName, endSignal, glue, onMessage, onComplete, onError, }?: Options) => StreamResult;
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,38 @@
+import { useRef as p, useState as L, useCallback as c, useEffect as C } from "react";
+const l = "data: ", j = (d, {
+  eventName: t = "update",
+  endSignal: i = "</stream>",
+  glue: f = " ",
+  onMessage: P = () => null,
+  onComplete: R = () => null,
+  onError: S = () => null
+} = {}) => {
+  const r = p(null), s = p([]), [b, g] = L(""), [x, E] = L([]), n = c(() => {
+    s.current = [], g(""), E([]);
+  }, []), u = c(
+    (e) => {
+      if ([i, `${l}${i}`].includes(e.data)) {
+        a(), R();
+        return;
+      }
+      s.current.push(
+        e.data.startsWith(l) ? e.data.substring(l.length) : e.data
+      ), g(s.current.join(f)), E(s.current), P(e);
+    },
+    [t, f]
+  ), o = c((e) => {
+    S(e), a();
+  }, []), a = c((e = !1) => {
+    var m, h, M;
+    (m = r.current) == null || m.removeEventListener(t, u), (h = r.current) == null || h.removeEventListener("error", o), (M = r.current) == null || M.close(), r.current = null, e && n();
+  }, []);
+  return C(() => (n(), r.current = new EventSource(d), r.current.addEventListener(t, u), r.current.addEventListener("error", o), a), [d, t, u, o, n]), {
+    message: b,
+    messageParts: x,
+    close: a,
+    clearMessage: n
+  };
+};
+export {
+  j as useStream
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.LaravelStreamReact={},t.React))})(this,function(t,e){"use strict";const c="data: ",E=(d,{eventName:n="update",endSignal:f="</stream>",glue:g=" ",onMessage:M=()=>null,onComplete:R=()=>null,onError:C=()=>null}={})=>{const r=e.useRef(null),u=e.useRef([]),[L,m]=e.useState(""),[P,p]=e.useState([]),a=e.useCallback(()=>{u.current=[],m(""),p([])},[]),l=e.useCallback(s=>{if([f,`${c}${f}`].includes(s.data)){o(),R();return}u.current.push(s.data.startsWith(c)?s.data.substring(c.length):s.data),m(u.current.join(g)),p(u.current),M(s)},[n,g]),i=e.useCallback(s=>{C(s),o()},[]),o=e.useCallback((s=!1)=>{var h,S,b;(h=r.current)==null||h.removeEventListener(n,l),(S=r.current)==null||S.removeEventListener("error",i),(b=r.current)==null||b.close(),r.current=null,s&&a()},[]);return e.useEffect(()=>(a(),r.current=new EventSource(d),r.current.addEventListener(n,l),r.current.addEventListener("error",i),o),[d,n,l,i,a]),{message:L,messageParts:P,close:o,clearMessage:a}};t.useStream=E,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@laravel/stream-react",
+  "version": "0.1.0",
+  "description": "The Laravel useStream hook for React",
+  "keywords": [
+    "laravel",
+    "stream",
+    "use-stream",
+    "server-sent-events",
+    "sse",
+    "react",
+    "hooks"
+  ],
+  "homepage": "https://github.com/laravel/stream/tree/main/packages/react#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/laravel/stream.git"
+  },
+  "bugs": {
+    "url": "https://github.com/laravel/stream/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Taylor Otwell"
+  },
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.3.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vite": "^5.1.0",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint --config eslint.config.mjs \"src/**/*.ts\"",
+    "prepublish": "pnpm run build",
+    "release": "vitest --run && git push --follow-tags && pnpm publish",
+    "test": "vitest",
+    "format": "prettier --write ."
+  }
+}