@laravel/stream-vue 0.1.0 → 0.2.1

package/README.md

@@ -21,13 +21,13 @@ Provide your stream URL and the hook will automatically update the `message` wit
 
 ```vue
 <script setup lang="ts">
-import { useStream } from "@laravel/stream-vue";
+import { useEventStream } from "@laravel/stream-vue";
 
-const { message } = useStream("/stream");
+const { message } = useEventStream("/stream");
 </script>
 
 <template>
-  <div>{{ message }}</div>
+    <div>{{ message }}</div>
 </template>
 ```
 
@@ -35,43 +35,105 @@ You also have access to the array of message parts:
 
 ```vue
 <script setup lang="ts">
-import { useStream } from "@laravel/stream-vue";
+import { useEventStream } from "@laravel/stream-vue";
 
-const { messageParts } = useStream("/stream");
+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>
 ```
 
-The second parameter is options object, all properties are optional (defaults are shown here):
+If you'd like to listen to multiple events:
 
 ```vue
 <script setup lang="ts">
-import { useStream } from "@laravel/stream-vue";
-
-const { message } = useStream("/stream", {
-  event: "update",
-  endSignal: "</stream>",
-  glue: " ",
-  onMessage: (message) => {
-    //
-  },
-  onError: (error) => {
-    //
-  },
-  onComplete: () => {
-    //
-  },
+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
+<script setup lang="ts">
+import { useEventStream } from "@laravel/stream-vue";
+
+const { message } = useEventStream("/stream", {
+    event: "update",
+    onMessage: (message) => {
+        //
+    },
+    onError: (error) => {
+        //
+    },
+    onComplete: () => {
+        //
+    },
+    endSignal: "</stream>",
+    glue: " ",
+    replace: false,
+});
+</script>
+```
+
+You can close the connection manually by using the returned `close` function:
+
+```vue
+<script setup lang="ts">
+import { useEventStream } from "@laravel/stream-vue";
+import { onMounted } from "vue";
+
+const { message, close } = useEventStream("/stream");
+
+onMounted(() => {
+    setTimeout(() => {
+        close();
+    }, 3000);
+});
+</script>
+
+<template>
+    <div>{{ message }}</div>
+</template>
+```
+
+The `clearMessage` function may be used to clear the message content that has been received so far:
+
+```vue
+<script setup lang="ts">
+import { useEventStream } from "@laravel/stream-vue";
+import { onMounted } from "vue";
+
+const { message, clearMessage } = useEventStream("/stream");
+
+onMounted(() => {
+    setTimeout(() => {
+        clearMessage();
+    }, 3000);
+});
+</script>
+
+<template>
+    <div>{{ message }}</div>
+</template>
+```
+
 ## License
 
 Laravel Stream is open-sourced software licensed under the [MIT license](LICENSE.md).

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 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,47 +1,52 @@
-import { ref as g, onMounted as M, onUnmounted as P, watch as w, readonly as f } from "vue";
-const o = "data: ", C = (l, {
-  eventName: d = "update",
-  endSignal: u = "</stream>",
-  glue: v = " ",
-  onMessage: h = () => null,
-  onComplete: E = () => 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 n = g(""), a = g([]);
-  let e = null;
-  const r = () => {
-    n.value = "", a.value = [];
-  }, s = (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)) {
-      s(), E();
+  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;
     }
-    a.value.push(
-      t.data.startsWith(o) ? t.data.substring(o.length) : t.data
-    ), n.value = a.value.join(v), h(t);
-  }, c = (t) => {
-    p(t), s();
+    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(() => {
-    s();
-  }), w(
-    () => l,
-    (t, L) => {
-      t !== L && (s(), m());
+  }), w(() => {
+    t();
+  }), x(
+    () => u,
+    (e, l) => {
+      e !== l && (t(), m());
     }
   ), {
-    message: f(n),
-    messageParts: f(a),
-    close: s,
-    clearMessage: r
+    message: h(o),
+    messageParts: h(a),
+    close: t,
+    clearMessage: n
   };
 };
 export {
-  C as useStream
+  C as useEventStream
 };

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:y=()=>null,onComplete:E=()=>null,onError:S=()=>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(),E();return}o.value.push(n.data.startsWith(r)?n.data.substring(r.length):n.data),l.value=o.value.join(h),y(n)},m=n=>{S(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,v)=>{n!==v&&(a(),p())}),{message:t.readonly(l),messageParts:t.readonly(o),close:a,clearMessage:d}};s.useStream=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,7 +1,7 @@
 {
   "name": "@laravel/stream-vue",
-  "version": "0.1.0",
-  "description": "The Laravel useStream hook for Vue",
+  "version": "0.2.1",
+  "description": "Laravel streaming hooks for Vue",
   "keywords": [
     "laravel",
     "stream",