@laravel/stream-react 0.3.0 → 0.3.1

package/README.md

@@ -144,6 +144,41 @@ function StreamStatus({ id }) {
 }
 ```
 
+The `useJsonStream` hook is identical to the `useStream` hook except that it will attempt to parse the data as JSON once it has finished streaming:
+
+```tsx
+import { useJsonStream } from "@laravel/stream-react";
+
+type User = {
+    id: number;
+    name: string;
+    email: string;
+};
+
+function App() {
+    const { data, send } = useJsonStream<{ users: User[] }>("users");
+
+    const loadUsers = () => {
+        send({
+            query: "taylor",
+        });
+    };
+
+    return (
+        <div>
+            <ul>
+                {data?.users.map((user) => (
+                    <li>
+                        {user.id}: {user.name}
+                    </li>
+                ))}
+            </ul>
+            <button onClick={loadUsers}>Load Users</button>
+        </div>
+    );
+}
+```
+
 ## Event Streams (SSE)
 
 The `useEventStream` hook allows you to seamlessly consume [Server-Sent Events (SSE)](https://laravel.com/docs/responses#event-streams) in your React application.

package/dist/index.d.ts

@@ -20,6 +20,7 @@ declare type StreamOptions = {
     initialInput?: Record<string, any>;
     headers?: Record<string, string>;
     csrfToken?: string;
+    json?: boolean;
     onResponse?: (response: Response) => void;
     onData?: (data: string) => void;
     onCancel?: () => void;
@@ -39,13 +40,26 @@ declare type StreamOptions = {
  */
 export declare const useEventStream: (url: string, { eventName, endSignal, glue, replace, onMessage, onComplete, onError, }?: EventStreamOptions) => EventStreamResult;
 
-export declare const useStream: (url: string, options?: StreamOptions) => {
+export declare const useJsonStream: <TJsonData = null>(url: string, options?: Omit<StreamOptions, "json">) => {
+    isFetching: boolean;
+    isStreaming: boolean;
+    id: string;
+    send: (body: Record<string, any>) => void;
+    cancel: () => void;
+    clearData: () => void;
+    data: TJsonData | null;
+    rawData: string;
+};
+
+export declare const useStream: <TJsonData = null>(url: string, options?: StreamOptions) => {
     data: string;
+    jsonData: TJsonData | null;
     isFetching: boolean;
     isStreaming: boolean;
     id: string;
     send: (body: Record<string, any>) => void;
     cancel: () => void;
+    clearData: () => void;
 };
 
 export { }

package/dist/index.es.js

@@ -1,169 +1,202 @@
-import { useRef as b, useMemo as x, useState as y, useCallback as d, useEffect as C } from "react";
-const I = "data: ", J = (r, {
+import { useRef as j, useMemo as V, useState as y, useCallback as o, useEffect as M } from "react";
+const I = "data: ", Q = (r, {
   eventName: e = "update",
-  endSignal: c = "</stream>",
-  glue: o = " ",
-  replace: k = !1,
-  onMessage: v = () => null,
-  onComplete: D = () => null,
-  onError: w = () => null
+  endSignal: n = "</stream>",
+  glue: c = " ",
+  replace: b = !1,
+  onMessage: T = () => null,
+  onComplete: k = () => null,
+  onError: P = () => null
 } = {}) => {
-  const l = b(null), f = b([]), m = x(
+  const i = j(null), g = j([]), w = V(
     () => Array.isArray(e) ? e : [e],
     Array.isArray(e) ? e : [e]
-  ), [i, g] = y(""), [A, R] = y([]), h = d(() => {
-    f.current = [], g(""), R([]);
-  }, []), n = d(
+  ), [D, A] = y(""), [d, f] = y([]), h = o(() => {
+    g.current = [], A(""), f([]);
+  }, []), E = o(
     (t) => {
-      if ([c, `${I}${c}`].includes(t.data)) {
-        a(), D();
+      if ([n, `${I}${n}`].includes(t.data)) {
+        S(), k();
         return;
       }
-      k && h(), f.current.push(
+      b && h(), g.current.push(
         t.data.startsWith(I) ? t.data.substring(I.length) : t.data
-      ), g(f.current.join(o)), R(f.current), v(t);
+      ), A(g.current.join(c)), f(g.current), T(t);
     },
-    [m, o]
-  ), s = d((t) => {
-    w(t), a();
-  }, []), a = d((t = !1) => {
-    var u, S;
-    m.forEach((L) => {
-      var E;
-      (E = l.current) == null || E.removeEventListener(L, n);
-    }), (u = l.current) == null || u.removeEventListener("error", s), (S = l.current) == null || S.close(), l.current = null, t && h();
+    [w, c]
+  ), F = o((t) => {
+    P(t), S();
+  }, []), S = o((t = !1) => {
+    var a, s;
+    w.forEach((u) => {
+      var l;
+      (l = i.current) == null || l.removeEventListener(u, E);
+    }), (a = i.current) == null || a.removeEventListener("error", F), (s = i.current) == null || s.close(), i.current = null, t && h();
   }, []);
-  return C(() => (h(), l.current = new EventSource(r), m.forEach((t) => {
-    var u;
-    (u = l.current) == null || u.addEventListener(t, n);
-  }), l.current.addEventListener("error", s), a), [r, m, n, s, h]), {
-    message: i,
-    messageParts: A,
-    close: a,
+  return M(() => (h(), i.current = new EventSource(r), w.forEach((t) => {
+    var a;
+    (a = i.current) == null || a.addEventListener(t, E);
+  }), i.current.addEventListener("error", F), S), [r, w, E, F, h]), {
+    message: D,
+    messageParts: d,
+    close: S,
     clearMessage: h
   };
-}, O = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let j = (r = 21) => {
-  let e = "", c = crypto.getRandomValues(new Uint8Array(r |= 0));
+}, W = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+let $ = (r = 21) => {
+  let e = "", n = crypto.getRandomValues(new Uint8Array(r |= 0));
   for (; r--; )
-    e += O[c[r] & 63];
+    e += W[n[r] & 63];
   return e;
 };
-const T = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map(), M = (r) => {
-  const e = T.get(r);
-  return e || (T.set(r, {
+const C = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), R = (r) => {
+  const e = C.get(r);
+  if (e)
+    return e;
+  const n = {
     controller: new AbortController(),
     data: "",
     isFetching: !1,
-    isStreaming: !1
-  }), T.get(r));
-}, P = (r) => (F.has(r) || F.set(r, []), F.get(r)), q = (r, e) => (P(r).push(e), () => {
-  F.set(
+    isStreaming: !1,
+    jsonData: null
+  };
+  return C.set(r, n), n;
+}, q = (r) => (m.has(r) || m.set(r, []), m.get(r)), X = (r) => {
+  var e;
+  return m.has(r) && ((e = m.get(r)) == null ? void 0 : e.length);
+}, B = (r, e) => (q(r).push(e), () => {
+  m.set(
     r,
-    P(r).filter((c) => c !== e)
-  );
-}), K = (r, e = {}) => {
-  const c = b(e.id ?? j()), o = b(M(c.current)), k = b(
+    q(r).filter((n) => n !== e)
+  ), X(r) || (C.delete(r), m.delete(r));
+}), G = (r, e = {}) => {
+  const n = j(e.id ?? $()), c = j(R(n.current)), b = j(
     (() => {
-      var a;
-      const n = {
+      var s;
+      const t = {
         "Content-Type": "application/json",
-        "X-STREAM-ID": c.current
-      }, s = e.csrfToken ?? ((a = document.querySelector('meta[name="csrf-token"]')) == null ? void 0 : a.getAttribute("content"));
-      return s && (n["X-CSRF-TOKEN"] = s), n;
+        "X-STREAM-ID": n.current
+      }, a = e.csrfToken ?? ((s = document.querySelector('meta[name="csrf-token"]')) == null ? void 0 : s.getAttribute("content"));
+      return a && (t["X-CSRF-TOKEN"] = a), t;
     })()
-  ), [v, D] = y(o.current.data), [w, l] = y(o.current.isFetching), [f, m] = y(o.current.isStreaming), i = d((n) => {
-    var a;
-    T.set(c.current, {
-      ...M(c.current),
-      ...n
-    });
-    const s = M(c.current);
-    (a = F.get(c.current)) == null || a.forEach((t) => t(s));
-  }, []), g = d(() => {
-    var n;
-    o.current.controller.abort(), (w || f) && ((n = e.onCancel) == null || n.call(e)), i({
+  ), [T, k] = y(c.current.data), [P, i] = y(
+    c.current.jsonData
+  ), [g, w] = y(c.current.isFetching), [D, A] = y(c.current.isStreaming), d = o(
+    (t) => {
+      var s;
+      C.set(n.current, {
+        ...R(n.current),
+        ...t
+      });
+      const a = R(n.current);
+      (s = m.get(n.current)) == null || s.forEach((u) => u(a));
+    },
+    []
+  ), f = o(() => {
+    var t;
+    c.current.controller.abort(), (g || D) && ((t = e.onCancel) == null || t.call(e)), d({
       isFetching: !1,
       isStreaming: !1
     });
-  }, [w, f]), A = d(
-    (n = {}) => {
-      const s = new AbortController();
-      i({
+  }, [g, D]), h = o(() => {
+    d({
+      data: "",
+      jsonData: null
+    });
+  }, []), E = o(
+    (t = {}) => {
+      const a = new AbortController();
+      d({
         isFetching: !0,
-        controller: s
+        controller: a
       }), fetch(r, {
         method: "POST",
-        signal: s.signal,
+        signal: a.signal,
         headers: {
-          ...k.current,
+          ...b.current,
           ...e.headers ?? {}
         },
-        body: JSON.stringify(n)
-      }).then(async (a) => {
-        var t;
-        if (!a.ok) {
-          const u = await a.text();
-          throw new Error(u);
+        body: JSON.stringify(t)
+      }).then(async (s) => {
+        var u;
+        if (!s.ok) {
+          const l = await s.text();
+          throw new Error(l);
         }
-        if (!a.body)
+        if (!s.body)
           throw new Error(
             "ReadableStream not yet supported in this browser."
           );
-        return (t = e.onResponse) == null || t.call(e, a), i({
+        return (u = e.onResponse) == null || u.call(e, s), d({
           isFetching: !1,
           isStreaming: !0
-        }), h(a.body.getReader());
-      }).catch((a) => {
-        var t, u;
-        i({
+        }), S(s.body.getReader());
+      }).catch((s) => {
+        var u, l;
+        d({
           isFetching: !1,
           isStreaming: !1
-        }), (t = e.onError) == null || t.call(e, a), (u = e.onFinish) == null || u.call(e);
+        }), (u = e.onError) == null || u.call(e, s), (l = e.onFinish) == null || l.call(e);
       });
     },
     [r]
-  ), R = d((n) => {
-    g(), A(n), i({
-      data: ""
-    });
-  }, []), h = d(
-    (n, s = "") => n.read().then(({ done: a, value: t }) => {
-      var L, E;
-      const u = new TextDecoder("utf-8").decode(t), S = s + u;
-      return (L = e.onData) == null || L.call(e, u), a ? (i({
-        data: S,
-        isStreaming: !1
-      }), (E = e.onFinish) == null || E.call(e), "") : (i({
-        data: S
-      }), h(n, S));
+  ), F = o((t) => {
+    f(), E(t), h();
+  }, []), S = o(
+    (t, a = "") => t.read().then(({ done: s, value: u }) => {
+      var x, J, O;
+      const l = new TextDecoder("utf-8").decode(u), v = a + l;
+      (x = e.onData) == null || x.call(e, l);
+      const L = {
+        data: v
+      };
+      if (!s)
+        return d(L), S(t, v);
+      if (L.isStreaming = !1, e.json)
+        try {
+          L.jsonData = JSON.parse(
+            v
+          );
+        } catch (K) {
+          (J = e.onError) == null || J.call(e, K);
+        }
+      return d(L), (O = e.onFinish) == null || O.call(e), "";
     }),
     []
   );
-  return C(() => {
-    const n = q(
-      c.current,
-      (s) => {
-        o.current = M(c.current), l(s.isFetching), m(s.isStreaming), D(s.data);
+  return M(() => {
+    const t = B(
+      n.current,
+      (a) => {
+        c.current = R(n.current), w(a.isFetching), A(a.isStreaming), k(a.data), i(a.jsonData);
       }
     );
     return () => {
-      n();
+      t(), X(n.current) || f();
     };
-  }, []), C(() => (window.addEventListener("beforeunload", g), () => {
-    window.removeEventListener("beforeunload", g);
-  }), [g]), C(() => {
-    e.initialInput && A(e.initialInput);
+  }, []), M(() => (window.addEventListener("beforeunload", f), () => {
+    window.removeEventListener("beforeunload", f);
+  }), [f]), M(() => {
+    e.initialInput && E(e.initialInput);
   }, []), {
-    data: v,
-    isFetching: w,
-    isStreaming: f,
-    id: c.current,
-    send: R,
-    cancel: g
+    data: T,
+    jsonData: P,
+    isFetching: g,
+    isStreaming: D,
+    id: n.current,
+    send: F,
+    cancel: f,
+    clearData: h
   };
+}, Y = (r, e = {}) => {
+  const { jsonData: n, data: c, ...b } = G(r, {
+    ...e,
+    json: !0
+  });
+  return { data: n, rawData: c, ...b };
 };
 export {
-  J as useEventStream,
-  K as useStream
+  Q as useEventStream,
+  Y as useJsonStream,
+  G as useStream
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.LaravelStreamReact={},d.React))})(this,function(d,t){"use strict";const L="data: ",D=(r,{eventName:e="update",endSignal:c="</stream>",glue:o=" ",replace:M=!1,onMessage:T=()=>null,onComplete:v=()=>null,onError:w=()=>null}={})=>{const i=t.useRef(null),g=t.useRef([]),S=t.useMemo(()=>Array.isArray(e)?e:[e],Array.isArray(e)?e:[e]),[f,h]=t.useState(""),[k,F]=t.useState([]),m=t.useCallback(()=>{g.current=[],h(""),F([])},[]),s=t.useCallback(n=>{if([c,`${L}${c}`].includes(n.data)){a(),v();return}M&&m(),g.current.push(n.data.startsWith(L)?n.data.substring(L.length):n.data),h(g.current.join(o)),F(g.current),T(n)},[S,o]),u=t.useCallback(n=>{w(n),a()},[]),a=t.useCallback((n=!1)=>{var l,b;S.forEach(A=>{var y;(y=i.current)==null||y.removeEventListener(A,s)}),(l=i.current)==null||l.removeEventListener("error",u),(b=i.current)==null||b.close(),i.current=null,n&&m()},[]);return t.useEffect(()=>(m(),i.current=new EventSource(r),S.forEach(n=>{var l;(l=i.current)==null||l.addEventListener(n,s)}),i.current.addEventListener("error",u),a),[r,S,s,u,m]),{message:f,messageParts:k,close:a,clearMessage:m}},I="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let j=(r=21)=>{let e="",c=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)e+=I[c[r]&63];return e};const R=new Map,E=new Map,C=r=>{const e=R.get(r);return e||(R.set(r,{controller:new AbortController,data:"",isFetching:!1,isStreaming:!1}),R.get(r))},P=r=>(E.has(r)||E.set(r,[]),E.get(r)),x=(r,e)=>(P(r).push(e),()=>{E.set(r,P(r).filter(c=>c!==e))}),O=(r,e={})=>{const c=t.useRef(e.id??j()),o=t.useRef(C(c.current)),M=t.useRef((()=>{var a;const s={"Content-Type":"application/json","X-STREAM-ID":c.current},u=e.csrfToken??((a=document.querySelector('meta[name="csrf-token"]'))==null?void 0:a.getAttribute("content"));return u&&(s["X-CSRF-TOKEN"]=u),s})()),[T,v]=t.useState(o.current.data),[w,i]=t.useState(o.current.isFetching),[g,S]=t.useState(o.current.isStreaming),f=t.useCallback(s=>{var a;R.set(c.current,{...C(c.current),...s});const u=C(c.current);(a=E.get(c.current))==null||a.forEach(n=>n(u))},[]),h=t.useCallback(()=>{var s;o.current.controller.abort(),(w||g)&&((s=e.onCancel)==null||s.call(e)),f({isFetching:!1,isStreaming:!1})},[w,g]),k=t.useCallback((s={})=>{const u=new AbortController;f({isFetching:!0,controller:u}),fetch(r,{method:"POST",signal:u.signal,headers:{...M.current,...e.headers??{}},body:JSON.stringify(s)}).then(async a=>{var n;if(!a.ok){const l=await a.text();throw new Error(l)}if(!a.body)throw new Error("ReadableStream not yet supported in this browser.");return(n=e.onResponse)==null||n.call(e,a),f({isFetching:!1,isStreaming:!0}),m(a.body.getReader())}).catch(a=>{var n,l;f({isFetching:!1,isStreaming:!1}),(n=e.onError)==null||n.call(e,a),(l=e.onFinish)==null||l.call(e)})},[r]),F=t.useCallback(s=>{h(),k(s),f({data:""})},[]),m=t.useCallback((s,u="")=>s.read().then(({done:a,value:n})=>{var A,y;const l=new TextDecoder("utf-8").decode(n),b=u+l;return(A=e.onData)==null||A.call(e,l),a?(f({data:b,isStreaming:!1}),(y=e.onFinish)==null||y.call(e),""):(f({data:b}),m(s,b))}),[]);return t.useEffect(()=>{const s=x(c.current,u=>{o.current=C(c.current),i(u.isFetching),S(u.isStreaming),v(u.data)});return()=>{s()}},[]),t.useEffect(()=>(window.addEventListener("beforeunload",h),()=>{window.removeEventListener("beforeunload",h)}),[h]),t.useEffect(()=>{e.initialInput&&k(e.initialInput)},[]),{data:T,isFetching:w,isStreaming:g,id:c.current,send:F,cancel:h}};d.useEventStream=D,d.useStream=O,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.LaravelStreamReact={},i.React))})(this,function(i,t){"use strict";const L="data: ",X=(r,{eventName:e="update",endSignal:s="</stream>",glue:c=" ",replace:y=!1,onMessage:A=()=>null,onComplete:M=()=>null,onError:T=()=>null}={})=>{const o=t.useRef(null),m=t.useRef([]),E=t.useMemo(()=>Array.isArray(e)?e:[e],Array.isArray(e)?e:[e]),[C,j]=t.useState(""),[d,h]=t.useState([]),S=t.useCallback(()=>{m.current=[],j(""),h([])},[]),w=t.useCallback(n=>{if([s,`${L}${s}`].includes(n.data)){b(),M();return}y&&S(),m.current.push(n.data.startsWith(L)?n.data.substring(L.length):n.data),j(m.current.join(c)),h(m.current),A(n)},[E,c]),R=t.useCallback(n=>{T(n),b()},[]),b=t.useCallback((n=!1)=>{var a,u;E.forEach(l=>{var f;(f=o.current)==null||f.removeEventListener(l,w)}),(a=o.current)==null||a.removeEventListener("error",R),(u=o.current)==null||u.close(),o.current=null,n&&S()},[]);return t.useEffect(()=>(S(),o.current=new EventSource(r),E.forEach(n=>{var a;(a=o.current)==null||a.addEventListener(n,w)}),o.current.addEventListener("error",R),b),[r,E,w,R,S]),{message:C,messageParts:d,close:b,clearMessage:S}},K="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let V=(r=21)=>{let e="",s=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)e+=K[s[r]&63];return e};const k=new Map,g=new Map,D=r=>{const e=k.get(r);if(e)return e;const s={controller:new AbortController,data:"",isFetching:!1,isStreaming:!1,jsonData:null};return k.set(r,s),s},P=r=>(g.has(r)||g.set(r,[]),g.get(r)),I=r=>{var e;return g.has(r)&&((e=g.get(r))==null?void 0:e.length)},W=(r,e)=>(P(r).push(e),()=>{g.set(r,P(r).filter(s=>s!==e)),I(r)||(k.delete(r),g.delete(r))}),J=(r,e={})=>{const s=t.useRef(e.id??V()),c=t.useRef(D(s.current)),y=t.useRef((()=>{var u;const n={"Content-Type":"application/json","X-STREAM-ID":s.current},a=e.csrfToken??((u=document.querySelector('meta[name="csrf-token"]'))==null?void 0:u.getAttribute("content"));return a&&(n["X-CSRF-TOKEN"]=a),n})()),[A,M]=t.useState(c.current.data),[T,o]=t.useState(c.current.jsonData),[m,E]=t.useState(c.current.isFetching),[C,j]=t.useState(c.current.isStreaming),d=t.useCallback(n=>{var u;k.set(s.current,{...D(s.current),...n});const a=D(s.current);(u=g.get(s.current))==null||u.forEach(l=>l(a))},[]),h=t.useCallback(()=>{var n;c.current.controller.abort(),(m||C)&&((n=e.onCancel)==null||n.call(e)),d({isFetching:!1,isStreaming:!1})},[m,C]),S=t.useCallback(()=>{d({data:"",jsonData:null})},[]),w=t.useCallback((n={})=>{const a=new AbortController;d({isFetching:!0,controller:a}),fetch(r,{method:"POST",signal:a.signal,headers:{...y.current,...e.headers??{}},body:JSON.stringify(n)}).then(async u=>{var l;if(!u.ok){const f=await u.text();throw new Error(f)}if(!u.body)throw new Error("ReadableStream not yet supported in this browser.");return(l=e.onResponse)==null||l.call(e,u),d({isFetching:!1,isStreaming:!0}),b(u.body.getReader())}).catch(u=>{var l,f;d({isFetching:!1,isStreaming:!1}),(l=e.onError)==null||l.call(e,u),(f=e.onFinish)==null||f.call(e)})},[r]),R=t.useCallback(n=>{h(),w(n),S()},[]),b=t.useCallback((n,a="")=>n.read().then(({done:u,value:l})=>{var O,q,x;const f=new TextDecoder("utf-8").decode(l),v=a+f;(O=e.onData)==null||O.call(e,f);const F={data:v};if(!u)return d(F),b(n,v);if(F.isStreaming=!1,e.json)try{F.jsonData=JSON.parse(v)}catch(B){(q=e.onError)==null||q.call(e,B)}return d(F),(x=e.onFinish)==null||x.call(e),""}),[]);return t.useEffect(()=>{const n=W(s.current,a=>{c.current=D(s.current),E(a.isFetching),j(a.isStreaming),M(a.data),o(a.jsonData)});return()=>{n(),I(s.current)||h()}},[]),t.useEffect(()=>(window.addEventListener("beforeunload",h),()=>{window.removeEventListener("beforeunload",h)}),[h]),t.useEffect(()=>{e.initialInput&&w(e.initialInput)},[]),{data:A,jsonData:T,isFetching:m,isStreaming:C,id:s.current,send:R,cancel:h,clearData:S}},$=(r,e={})=>{const{jsonData:s,data:c,...y}=J(r,{...e,json:!0});return{data:s,rawData:c,...y}};i.useEventStream=X,i.useJsonStream=$,i.useStream=J,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laravel/stream-react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Laravel streaming hooks for React",
   "keywords": [
     "laravel",