@laravel/stream-react 0.1.0 → 0.2.1

package/README.md

@@ -20,55 +20,115 @@ npm install @laravel/stream-react
 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";
+import { useEventStream } from "@laravel/stream-react";
 
 function App() {
-  const { message } = useStream("/stream");
+    const { message } = useEventStream("/stream");
 
-  return <div>{message}</div>;
+    return <div>{message}</div>;
 }
 ```
 
 You also have access to the array of message parts:
 
 ```tsx
-import { useStream } from "@laravel/stream-react";
+import { useEventStream } from "@laravel/stream-react";
 
 function App() {
-  const { messageParts } = useStream("/stream");
-
-  return (
-    <ul>
-      {messageParts.forEach((message) => (
-        <li>{message}</li>
-      ))}
-    </ul>
-  );
+    const { messageParts } = useEventStream("/stream");
+
+    return (
+        <ul>
+            {messageParts.forEach((message) => (
+                <li>{message}</li>
+            ))}
+        </ul>
+    );
 }
 ```
 
-The second parameter is options object, all properties are optional (defaults are shown here):
+If you'd like to listen to multiple events:
 
 ```tsx
-import { useStream } from "@laravel/stream-react";
+import { useEventStream } from "@laravel/stream-react";
 
 function App() {
-  const { message } = useStream("/stream", {
-    event: "update",
-    endSignal: "</stream>",
-    glue: " ",
-    onMessage: (message) => {
-      //
-    },
-    onError: (error) => {
-      //
-    },
-    onComplete: () => {
-      //
-    },
-  });
-
-  return <div>{message}</div>;
+    useEventStream("/stream", {
+        eventName: ["update", "create"],
+        onMessage: (event) => {
+            if (event.type === "update") {
+                // Handle update
+            } else {
+                // Handle create
+            }
+        },
+    });
+
+    return null;
+}
+```
+
+The second parameter is an options object where all properties are optional (defaults are shown below):
+
+```tsx
+import { useEventStream } from "@laravel/stream-react";
+
+function App() {
+    const { message } = useEventStream("/stream", {
+        event: "update",
+        onMessage: (message) => {
+            //
+        },
+        onError: (error) => {
+            //
+        },
+        onComplete: () => {
+            //
+        },
+        endSignal: "</stream>",
+        glue: " ",
+        replace: false,
+    });
+
+    return <div>{message}</div>;
+}
+```
+
+You can close the connection manually by using the returned `close` function:
+
+```tsx
+import { useEventStream } from "@laravel/stream-react";
+import { useEffect } from "react";
+
+function App() {
+    const { message, close } = useEventStream("/stream");
+
+    useEffect(() => {
+        setTimeout(() => {
+            close();
+        }, 3000);
+    }, []);
+
+    return <div>{message}</div>;
+}
+```
+
+The `clearMessage` function may be used to clear the message content that has been received so far:
+
+```tsx
+import { useEventStream } from "@laravel/stream-react";
+import { useEffect } from "react";
+
+function App() {
+    const { message, clearMessage } = useEventStream("/stream");
+
+    useEffect(() => {
+        setTimeout(() => {
+            clearMessage();
+        }, 3000);
+    }, []);
+
+    return <div>{message}</div>;
 }
 ```
 

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 declare type Options = {
-    eventName?: string;
+    eventName?: string | string[];
     endSignal?: string;
     glue?: string;
+    replace?: boolean;
     onMessage?: (event: MessageEvent) => void;
     onComplete?: () => void;
     onError?: (error: Event) => void;
@@ -24,6 +25,6 @@ declare type StreamResult = {
  *
  * @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 declare const useEventStream: (url: string, { eventName, endSignal, glue, replace, onMessage, onComplete, onError, }?: Options) => StreamResult;
 
 export { }

package/dist/index.es.js

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

package/dist/index.umd.js

@@ -1 +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"})});
+(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 l="data: ",b=(E,{eventName:n="update",endSignal:h="</stream>",glue:g=" ",replace:M=!1,onMessage:R=()=>null,onComplete:C=()=>null,onError:L=()=>null}={})=>{const r=e.useRef(null),o=e.useRef([]),c=e.useMemo(()=>Array.isArray(n)?n:[n],Array.isArray(n)?n:[n]),[P,m]=e.useState(""),[k,p]=e.useState([]),a=e.useCallback(()=>{o.current=[],m(""),p([])},[]),f=e.useCallback(s=>{if([h,`${l}${h}`].includes(s.data)){i(),C();return}M&&a(),o.current.push(s.data.startsWith(l)?s.data.substring(l.length):s.data),m(o.current.join(g)),p(o.current),R(s)},[c,g]),d=e.useCallback(s=>{L(s),i()},[]),i=e.useCallback((s=!1)=>{var u,y;c.forEach(A=>{var S;(S=r.current)==null||S.removeEventListener(A,f)}),(u=r.current)==null||u.removeEventListener("error",d),(y=r.current)==null||y.close(),r.current=null,s&&a()},[]);return e.useEffect(()=>(a(),r.current=new EventSource(E),c.forEach(s=>{var u;(u=r.current)==null||u.addEventListener(s,f)}),r.current.addEventListener("error",d),i),[E,c,f,d,a]),{message:P,messageParts:k,close:i,clearMessage:a}};t.useEventStream=b,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@laravel/stream-react",
-  "version": "0.1.0",
-  "description": "The Laravel useStream hook for React",
+  "version": "0.2.1",
+  "description": "Laravel streaming hooks for React",
   "keywords": [
     "laravel",
     "stream",