@laravel/stream-vue 0.1.0 → 0.2.0

package/README.md

@@ -21,9 +21,9 @@ 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>
@@ -35,9 +35,9 @@ 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>
@@ -49,16 +49,14 @@ const { messageParts } = useStream("/stream");
 </template>
 ```
 
-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):
 
 ```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", {
   event: "update",
-  endSignal: "</stream>",
-  glue: " ",
   onMessage: (message) => {
     //
   },
@@ -68,8 +66,52 @@ const { message } = useStream("/stream", {
   onComplete: () => {
     //
   },
+  endSignal: "</stream>",
+  glue: " ",
+});
+</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

package/dist/index.d.ts

@@ -26,6 +26,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

@@ -1,47 +1,47 @@
-import { ref as g, onMounted as M, onUnmounted as P, watch as w, readonly as f } from "vue";
+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: v = " ",
-  onMessage: h = () => null,
-  onComplete: E = () => null,
+  glue: f = " ",
+  onMessage: E = () => null,
+  onComplete: h = () => null,
   onError: p = () => null
 } = {}) => {
-  const n = g(""), a = g([]);
+  const a = g(""), s = g([]);
   let e = null;
   const r = () => {
-    n.value = "", a.value = [];
-  }, s = (t = !1) => {
+    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)) {
-      s(), E();
+      n(), h();
       return;
     }
-    a.value.push(
+    s.value.push(
       t.data.startsWith(o) ? t.data.substring(o.length) : t.data
-    ), n.value = a.value.join(v), h(t);
+    ), a.value = s.value.join(f), E(t);
   }, c = (t) => {
-    p(t), s();
+    p(t), n();
   }, m = () => {
     r(), e = new EventSource(l), e.addEventListener(d, i), e.addEventListener("error", c);
   };
   return M(() => {
     m();
   }), P(() => {
-    s();
+    n();
   }), w(
     () => l,
     (t, L) => {
-      t !== L && (s(), m());
+      t !== L && (n(), m());
     }
   ), {
-    message: f(n),
-    messageParts: f(a),
-    close: s,
+    message: v(a),
+    messageParts: v(s),
+    close: n,
     clearMessage: r
   };
 };
 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 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"})});

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.0",
+  "description": "Laravel streaming hooks for Vue",
   "keywords": [
     "laravel",
     "stream",