@laravel/stream-vue 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# Laravel Stream for Vue
+
+<p align="left">
+<a href="https://github.com/laravel/stream/actions/workflows/tests.yml"><img src="https://github.com/laravel/stream/actions/workflows/tests.yml/badge.svg" alt="Build Status"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-vue"><img src="https://img.shields.io/npm/dt/@laravel/stream-vue" alt="Total Downloads"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-vue"><img src="https://img.shields.io/npm/v/@laravel/stream-vue" alt="Latest Stable Version"></a>
+<a href="https://www.npmjs.com/package/@laravel/stream-vue"><img src="https://img.shields.io/npm/l/@laravel/stream-vue" alt="License"></a>
+</p>
+
+Easily consume [Server-Sent Events (SSE)](https://laravel.com/docs/responses#event-streams) in your Vue application.
+
+## Installation
+
+```bash
+npm install @laravel/stream-vue
+```
+
+## Usage
+
+Provide your stream URL and the hook will automatically update the `message` with the concatenated response as messages are returned from your server:
+
+```vue
+<script setup lang="ts">
+import { useStream } from "@laravel/stream-vue";
+
+const { message } = useStream("/stream");
+</script>
+
+<template>
+  <div>{{ message }}</div>
+</template>
+```
+
+You also have access to the array of message parts:
+
+```vue
+<script setup lang="ts">
+import { useStream } from "@laravel/stream-vue";
+
+const { messageParts } = useStream("/stream");
+</script>
+
+<template>
+  <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):
+
+```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: () => {
+    //
+  },
+});
+</script>
+```
+
+## License
+
+Laravel Stream is open-sourced software licensed under the [MIT license](LICENSE.md).

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { Ref } from 'vue';
+
+declare type Options = {
+    eventName?: string;
+    endSignal?: string;
+    glue?: string;
+    onMessage?: (event: MessageEvent) => void;
+    onComplete?: () => void;
+    onError?: (error: Event) => void;
+};
+
+declare type StreamResult = {
+    message: Readonly<Ref<string>>;
+    messageParts: Readonly<Ref<readonly string[]>>;
+    close: (resetMessage?: boolean) => void;
+    clearMessage: () => void;
+};
+
+/**
+ * Composable for handling server-sent events (SSE) streams
+ *
+ * @param url - The URL to connect to for the EventSource
+ * @param options - Options for the stream
+ *
+ * @link https://laravel.com/docs/responses#event-streams
+ *
+ * @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 { }

package/dist/index.es.js

@@ -0,0 +1,47 @@
+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
+} = {}) => {
+  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();
+      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();
+  }, m = () => {
+    r(), e = new EventSource(l), e.addEventListener(d, i), e.addEventListener("error", c);
+  };
+  return M(() => {
+    m();
+  }), P(() => {
+    s();
+  }), w(
+    () => l,
+    (t, L) => {
+      t !== L && (s(), m());
+    }
+  ), {
+    message: f(n),
+    messageParts: f(a),
+    close: s,
+    clearMessage: r
+  };
+};
+export {
+  C as useStream
+};

package/dist/index.umd.js

@@ -0,0 +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"})});

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@laravel/stream-vue",
+  "version": "0.1.0",
+  "description": "The Laravel useStream hook for Vue",
+  "keywords": [
+    "laravel",
+    "stream",
+    "use-stream",
+    "server-sent-events",
+    "sse",
+    "vue",
+    "composables"
+  ],
+  "homepage": "https://github.com/laravel/stream/tree/main/packages/vue#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/laravel/stream.git"
+  },
+  "bugs": {
+    "url": "https://github.com/laravel/stream/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Taylor Otwell"
+  },
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.3.0",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint --config eslint.config.mjs \"src/**/*.ts\"",
+    "prepublish": "pnpm run build",
+    "release": "vitest --run && git push --follow-tags && pnpm publish",
+    "test": "vitest",
+    "format": "prettier --write ."
+  }
+}