@laravel/stream-react 0.1.0 → 0.2.0

package/README.md

@@ -20,10 +20,10 @@ 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>;
 }
@@ -32,10 +32,10 @@ function App() {
 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");
+  const { messageParts } = useEventStream("/stream");
 
   return (
     <ul>
@@ -47,16 +47,14 @@ function App() {
 }
 ```
 
-The second parameter is options object, all properties are optional (defaults are shown here):
+The second parameter is an options object where all properties are optional (defaults are shown below):
 
 ```tsx
-import { useStream } from "@laravel/stream-react";
+import { useEventStream } from "@laravel/stream-react";
 
 function App() {
-  const { message } = useStream("/stream", {
+  const { message } = useEventStream("/stream", {
     event: "update",
-    endSignal: "</stream>",
-    glue: " ",
     onMessage: (message) => {
       //
     },
@@ -66,12 +64,52 @@ function App() {
     onComplete: () => {
       //
     },
+    endSignal: "</stream>",
+    glue: " ",
   });
 
   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>;
+}
+```
+
 ## License
 
 Laravel Stream is open-sourced software licensed under the [MIT license](LICENSE.md).

package/dist/index.d.ts

@@ -24,6 +24,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, onMessage, onComplete, onError, }?: Options) => StreamResult;
 
 export { }

package/dist/index.es.js

@@ -34,5 +34,5 @@ const l = "data: ", j = (d, {
   };
 };
 export {
-  j as useStream
+  j 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(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.LaravelStreamReact={},s.React))})(this,function(s,e){"use strict";const c="data: ",b=(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(t=>{if([f,`${c}${f}`].includes(t.data)){o(),R();return}u.current.push(t.data.startsWith(c)?t.data.substring(c.length):t.data),m(u.current.join(g)),p(u.current),M(t)},[n,g]),i=e.useCallback(t=>{C(t),o()},[]),o=e.useCallback((t=!1)=>{var E,h,S;(E=r.current)==null||E.removeEventListener(n,l),(h=r.current)==null||h.removeEventListener("error",i),(S=r.current)==null||S.close(),r.current=null,t&&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}};s.useEventStream=b,Object.defineProperty(s,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.0",
+  "description": "Laravel streaming hooks for React",
   "keywords": [
     "laravel",
     "stream",