@laravel/stream-vue 0.2.0 → 0.2.1

package/README.md

@@ -27,7 +27,7 @@ const { message } = useEventStream("/stream");
 </script>
 
 <template>
-  <div>{{ message }}</div>
+    <div>{{ message }}</div>
 </template>
 ```
 
@@ -41,14 +41,33 @@ const { messageParts } = useEventStream("/stream");
 </script>
 
 <template>
-  <ul>
-    <li v-for="message in messageParts">
-      {{ message }}
-    </li>
-  </ul>
+    <ul>
+        <li v-for="message in messageParts">
+            {{ message }}
+        </li>
+    </ul>
 </template>
 ```
 
+If you'd like to listen to multiple events:
+
+```vue
+<script setup lang="ts">
+import { useEventStream } from "@laravel/stream-vue";
+
+useEventStream("/stream", {
+    eventName: ["update", "create"],
+    onMessage: (event) => {
+        if (event.type === "update") {
+            // Handle update
+        } else {
+            // Handle create
+        }
+    },
+});
+</script>
+```
+
 The second parameter is an options object where all properties are optional (defaults are shown below):
 
 ```vue
@@ -56,18 +75,19 @@ The second parameter is an options object where all properties are optional (def
 import { useEventStream } from "@laravel/stream-vue";
 
 const { message } = useEventStream("/stream", {
-  event: "update",
-  onMessage: (message) => {
-    //
-  },
-  onError: (error) => {
-    //
-  },
-  onComplete: () => {
-    //
-  },
-  endSignal: "</stream>",
-  glue: " ",
+    event: "update",
+    onMessage: (message) => {
+        //
+    },
+    onError: (error) => {
+        //
+    },
+    onComplete: () => {
+        //
+    },
+    endSignal: "</stream>",
+    glue: " ",
+    replace: false,
 });
 </script>
 ```
@@ -82,14 +102,14 @@ import { onMounted } from "vue";
 const { message, close } = useEventStream("/stream");
 
 onMounted(() => {
-  setTimeout(() => {
-    close();
-  }, 3000);
+    setTimeout(() => {
+        close();
+    }, 3000);
 });
 </script>
 
 <template>
-  <div>{{ message }}</div>
+    <div>{{ message }}</div>
 </template>
 ```
 
@@ -103,14 +123,14 @@ import { onMounted } from "vue";
 const { message, clearMessage } = useEventStream("/stream");
 
 onMounted(() => {
-  setTimeout(() => {
-    clearMessage();
-  }, 3000);
+    setTimeout(() => {
+        clearMessage();
+    }, 3000);
 });
 </script>
 
 <template>
-  <div>{{ message }}</div>
+    <div>{{ message }}</div>
 </template>
 ```
 

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { Ref } from 'vue';
 
 declare type Options = {
-    eventName?: string;
+    eventName?: string | string[];
     endSignal?: string;
     glue?: string;
+    replace?: boolean;
     onMessage?: (event: MessageEvent) => void;
     onComplete?: () => void;
     onError?: (error: Event) => void;
@@ -26,6 +27,6 @@ declare type StreamResult = {
  *
  * @returns StreamResult object containing the accumulated response, close, and reset functions
  */
-export declare const useEventStream: (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,45 +1,50 @@
-import { ref as g, onMounted as M, onUnmounted as P, watch as w, readonly as v } from "vue";
-const o = "data: ", C = (l, {
-  eventName: d = "update",
-  endSignal: u = "</stream>",
-  glue: f = " ",
-  onMessage: E = () => null,
-  onComplete: h = () => null,
-  onError: p = () => null
+import { ref as g, onMounted as P, onUnmounted as w, watch as x, readonly as h } from "vue";
+const c = "data: ", C = (u, {
+  eventName: r = "update",
+  endSignal: d = "</stream>",
+  glue: E = " ",
+  replace: v = !1,
+  onMessage: p = () => null,
+  onComplete: M = () => null,
+  onError: y = () => null
 } = {}) => {
-  const a = g(""), s = g([]);
-  let e = null;
-  const r = () => {
-    a.value = "", s.value = [];
-  }, n = (t = !1) => {
-    e == null || e.removeEventListener(d, i), e == null || e.removeEventListener("error", c), e == null || e.close(), e = null, t && r();
-  }, i = (t) => {
-    if ([u, `${o}${u}`].includes(t.data)) {
-      n(), h();
+  const o = g(""), a = g([]), i = Array.isArray(r) ? r : [r];
+  let s = null;
+  const n = () => {
+    o.value = "", a.value = [];
+  }, t = (e = !1) => {
+    i.forEach((l) => {
+      s == null || s.removeEventListener(l, f);
+    }), s == null || s.close(), s = null, e && n();
+  }, f = (e) => {
+    if ([d, `${c}${d}`].includes(e.data)) {
+      t(), M();
       return;
     }
-    s.value.push(
-      t.data.startsWith(o) ? t.data.substring(o.length) : t.data
-    ), a.value = s.value.join(f), E(t);
-  }, c = (t) => {
-    p(t), n();
+    v && n(), a.value.push(
+      e.data.startsWith(c) ? e.data.substring(c.length) : e.data
+    ), o.value = a.value.join(E), p(e);
+  }, L = (e) => {
+    y(e), t();
   }, m = () => {
-    r(), e = new EventSource(l), e.addEventListener(d, i), e.addEventListener("error", c);
+    n(), s = new EventSource(u), i.forEach((e) => {
+      s.addEventListener(e, f);
+    }), s.addEventListener("error", L);
   };
-  return M(() => {
+  return P(() => {
     m();
-  }), P(() => {
-    n();
-  }), w(
-    () => l,
-    (t, L) => {
-      t !== L && (n(), m());
+  }), w(() => {
+    t();
+  }), x(
+    () => u,
+    (e, l) => {
+      e !== l && (t(), m());
     }
   ), {
-    message: v(a),
-    messageParts: v(s),
-    close: n,
-    clearMessage: r
+    message: h(o),
+    messageParts: h(a),
+    close: t,
+    clearMessage: n
   };
 };
 export {

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.LaravelStreamVue={},s.Vue))})(this,function(s,t){"use strict";const r="data: ",g=(i,{eventName:u="update",endSignal:f="</stream>",glue:h=" ",onMessage:E=()=>null,onComplete:v=()=>null,onError:y=()=>null}={})=>{const l=t.ref(""),o=t.ref([]);let e=null;const d=()=>{l.value="",o.value=[]},a=(n=!1)=>{e==null||e.removeEventListener(u,c),e==null||e.removeEventListener("error",m),e==null||e.close(),e=null,n&&d()},c=n=>{if([f,`${r}${f}`].includes(n.data)){a(),v();return}o.value.push(n.data.startsWith(r)?n.data.substring(r.length):n.data),l.value=o.value.join(h),E(n)},m=n=>{y(n),a()},p=()=>{d(),e=new EventSource(i),e.addEventListener(u,c),e.addEventListener("error",m)};return t.onMounted(()=>{p()}),t.onUnmounted(()=>{a()}),t.watch(()=>i,(n,S)=>{n!==S&&(a(),p())}),{message:t.readonly(l),messageParts:t.readonly(o),close:a,clearMessage:d}};s.useEventStream=g,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.LaravelStreamVue={},s.Vue))})(this,function(s,t){"use strict";const l="data: ",g=(f,{eventName:i="update",endSignal:c="</stream>",glue:E=" ",replace:y=!1,onMessage:S=()=>null,onComplete:v=()=>null,onError:M=()=>null}={})=>{const d=t.ref(""),o=t.ref([]),m=Array.isArray(i)?i:[i];let n=null;const r=()=>{d.value="",o.value=[]},a=(e=!1)=>{m.forEach(u=>{n==null||n.removeEventListener(u,h)}),n==null||n.close(),n=null,e&&r()},h=e=>{if([c,`${l}${c}`].includes(e.data)){a(),v();return}y&&r(),o.value.push(e.data.startsWith(l)?e.data.substring(l.length):e.data),d.value=o.value.join(E),S(e)},L=e=>{M(e),a()},p=()=>{r(),n=new EventSource(f),m.forEach(e=>{n.addEventListener(e,h)}),n.addEventListener("error",L)};return t.onMounted(()=>{p()}),t.onUnmounted(()=>{a()}),t.watch(()=>f,(e,u)=>{e!==u&&(a(),p())}),{message:t.readonly(d),messageParts:t.readonly(o),close:a,clearMessage:r}};s.useEventStream=g,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

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