@laravel/stream-vue 0.3.0 → 0.3.2

package/README.md

@@ -155,6 +155,39 @@ const { isFetching, isStreaming } = useStream("chat", { id: props.id });
 </template>
 ```
 
+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:
+
+```vue
+<script setup lang="ts">
+import { useJsonStream } from "@laravel/stream-vue";
+
+type User = {
+    id: number;
+    name: string;
+    email: string;
+};
+
+const { data, send } = useJsonStream<{ users: User[] }>("users");
+
+const loadUsers = () => {
+    send({
+        query: "taylor",
+    });
+};
+</script>
+
+<template>
+    <div>
+        <ul>
+            <li v-for="user in data?.users" :key="user.id">
+                {{ user.id }}: {{ user.name }}
+            </li>
+        </ul>
+        <button @click="loadUsers">Load Users</button>
+    </div>
+</template>
+```
+
 ## Event Streams (SSE)
 
 The `useEventStream` hook allows you to seamlessly consume [Server-Sent Events (SSE)](https://laravel.com/docs/responses#event-streams) in your Vue application.

package/dist/index.d.ts

@@ -22,6 +22,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;
@@ -41,13 +42,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) => {
-    data: Readonly<Ref<string, string>>;
-    isFetching: Readonly<Ref<boolean, boolean>>;
-    isStreaming: Readonly<Ref<boolean, boolean>>;
+export declare const useJsonStream: <TJsonData = null>(url: string, options?: Omit<StreamOptions, "json">) => {
+    isFetching: Readonly<Ref<boolean>>;
+    isStreaming: Readonly<Ref<boolean>>;
     id: string;
     send: (body: Record<string, any>) => void;
     cancel: () => void;
+    clearData: () => void;
+    data: Readonly<TJsonData | null>;
+    strData: Readonly<Ref<string, string>>;
+};
+
+export declare const useStream: <TJsonData = null>(url: string, options?: StreamOptions) => {
+    data: Readonly<Ref<string>>;
+    jsonData: Readonly<TJsonData | null>;
+    isFetching: Readonly<Ref<boolean>>;
+    isStreaming: Readonly<Ref<boolean>>;
+    id: string;
+    send: (body: Record<string, any>) => void;
+    cancel: () => void;
+    clearData: () => void;
 };
 
 export { }

package/dist/index.es.js

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

package/dist/index.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laravel/stream-vue",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Laravel streaming hooks for Vue",
   "keywords": [
     "laravel",