hx-stream 0.0.6 → 0.0.8

package/dist/client.js

@@ -2,7 +2,8 @@
 (function () {
     let binding;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    globalThis.htmx.defineExtension("hx-stream", {
+    const htmx = globalThis.htmx;
+    htmx.defineExtension("hx-stream", {
         init: (config) => { binding = config; },
         onEvent: (name, event) => {
             switch (name) {
@@ -23,30 +24,61 @@
         }
     });
     const decoder = new TextDecoder("utf8");
-    async function Process(method, url, headers, formData, target) {
-        target.classList.add("htmx-request");
+    async function Process(method, url, headers, formData, source) {
+        source.classList.add("htmx-request");
         const req = await fetch(url, { method, headers, body: formData });
         if (!req.ok) {
             console.error(await req.text());
-            target.classList.remove("htmx-request");
+            source.classList.remove("htmx-request");
             return;
         }
         if (!req.body) {
             console.error("hx-stream response is missing body");
-            target.classList.remove("htmx-request");
+            source.classList.remove("htmx-request");
             return;
         }
+        const boundary = req.headers.get("X-Chunk-Boundary");
+        if (!boundary) {
+            console.error("hx-stream response is chunk boundary header");
+            source.classList.remove("htmx-request");
+            return;
+        }
+        const open = `<${boundary}>`;
+        const close = `</${boundary}>`;
         const reader = req.body.getReader();
+        let buffer = "";
         // eslint-disable-next-line no-constant-condition
         while (true) {
             const { done, value } = await reader.read();
             if (done)
                 break;
-            const html = decoder.decode(value).trim();
-            if (html === "")
-                continue; // ignore keepalive byte
-            binding.swap(target, html, { swapStyle: "beforeend" });
+            const html = decoder.decode(value);
+            const search = Math.max(0, buffer.length - close.length);
+            buffer += html;
+            let idx = buffer.indexOf(close, search);
+            while (idx !== -1) {
+                let a = buffer.lastIndexOf(open, idx);
+                if (a === -1)
+                    return console.error("hx-stream received invalid chunk");
+                a += open.length;
+                const b = buffer.indexOf("|", a);
+                if (b === -1)
+                    return console.error("hx-stream received invalid chunk");
+                const c = buffer.indexOf("|", b + 1);
+                if (c === -1)
+                    return console.error("hx-stream received invalid chunk");
+                const retarget = buffer.slice(a, b).trim();
+                const swap = buffer.slice(b + 1, c).trim();
+                const html = buffer.slice(c + 1, idx);
+                const target = htmx.find(source, retarget);
+                if (target)
+                    binding.swap(target, html, { swapStyle: swap });
+                else
+                    console.warn(`hx-stream unable to find target ${retarget}`);
+                buffer = buffer.slice(idx + close.length);
+                idx = buffer.indexOf(close);
+            }
         }
-        target.classList.remove("htmx-request");
+        source.classList.remove("htmx-request");
     }
 })();

package/dist/client.min.js

@@ -1 +1 @@
-"use strict";!function(){let e;globalThis.htmx.defineExtension("hx-stream",{init:t=>{e=t},onEvent:(s,r)=>{if("htmx:beforeRequest"!==s);else{const s=r.detail.elt;if("on"!==e.getAttributeValue(s,"hx-stream"))return;r.preventDefault();const o=r.detail.requestConfig.formData,a=r.detail.requestConfig.headers,i=r.detail.requestConfig.path;(async function(s,r,o,a,i){i.classList.add("htmx-request");const n=await fetch(r,{method:s,headers:o,body:a});if(!n.ok)return console.error(await n.text()),void i.classList.remove("htmx-request");if(!n.body)return console.error("hx-stream response is missing body"),void i.classList.remove("htmx-request");const d=n.body.getReader();for(;;){const{done:s,value:r}=await d.read();if(s)break;const o=t.decode(r).trim();""!==o&&e.swap(i,o,{swapStyle:"beforeend"})}i.classList.remove("htmx-request")})(r.detail.requestConfig.verb,i,a,o,r.detail.target).catch(console.error)}}});const t=new TextDecoder("utf8")}();
+"use strict";!function(){let e;const t=globalThis.htmx;t.defineExtension("hx-stream",{init:t=>{e=t},onEvent:(s,n)=>{if("htmx:beforeRequest"!==s);else{const s=n.detail.elt;if("on"!==e.getAttributeValue(s,"hx-stream"))return;n.preventDefault();const o=n.detail.requestConfig.formData,i=n.detail.requestConfig.headers,a=n.detail.requestConfig.path;(async function(s,n,o,i,a){a.classList.add("htmx-request");const c=await fetch(n,{method:s,headers:o,body:i});if(!c.ok)return console.error(await c.text()),void a.classList.remove("htmx-request");if(!c.body)return console.error("hx-stream response is missing body"),void a.classList.remove("htmx-request");const l=c.headers.get("X-Chunk-Boundary");if(!l)return console.error("hx-stream response is chunk boundary header"),void a.classList.remove("htmx-request");const d=`<${l}>`,h=`</${l}>`,u=c.body.getReader();let f="";for(;;){const{done:s,value:n}=await u.read();if(s)break;const o=r.decode(n),i=Math.max(0,f.length-h.length);f+=o;let c=f.indexOf(h,i);for(;-1!==c;){let r=f.lastIndexOf(d,c);if(-1===r)return console.error("hx-stream received invalid chunk");r+=d.length;const s=f.indexOf("|",r);if(-1===s)return console.error("hx-stream received invalid chunk");const n=f.indexOf("|",s+1);if(-1===n)return console.error("hx-stream received invalid chunk");const o=f.slice(r,s).trim(),i=f.slice(s+1,n).trim(),l=f.slice(n+1,c),u=t.find(a,o);u?e.swap(u,l,{swapStyle:i}):console.warn(`hx-stream unable to find target ${o}`),f=f.slice(c+h.length),c=f.indexOf(h)}}a.classList.remove("htmx-request")})(n.detail.requestConfig.verb,a,i,o,n.detail.target).catch(console.error)}}});const r=new TextDecoder("utf8")}();

package/dist/server.d.ts

@@ -1,6 +1,7 @@
 type Options<T extends boolean> = T extends true ? RenderOptions : DefaultOptions;
 type DefaultOptions = {
     keepAlive?: number;
+    highWaterMark?: number;
 };
 type RenderOptions = {
     render: (jsx: JSX.Element) => string;

package/dist/server.js

@@ -8,10 +8,15 @@ const headers = {
     "Keep-Alive": "timeout=60",
     "Connection": "keep-alive",
 };
+const SCALE = 36 ** 6;
+function MakeBoundary() {
+    return "hx-" + Math.floor(Math.random() * SCALE).toString(36);
+}
 export class StreamResponse {
     #controller;
     #timer;
     #state;
+    #boundary;
     #render;
     response;
     // just to make it polyfill
@@ -25,14 +30,16 @@ export class StreamResponse {
         this.#controller = null;
         this.#state = StreamResponse.CONNECTING;
         this.#render = options.render;
+        this.#boundary = MakeBoundary();
         this.withCredentials = request.mode === "cors";
         this.url = request.url;
         // immediate prepare for abortion
         const cancel = () => { this.close(); };
         request.signal.addEventListener('abort', cancel);
         const start = (c) => { this.#controller = c; this.#state = StreamResponse.OPEN; };
-        const stream = new ReadableStream({ start, cancel }, { highWaterMark: 0 });
+        const stream = new ReadableStream({ start, cancel }, { highWaterMark: options.highWaterMark || 0 });
         this.response = new Response(stream, { headers });
+        this.response.headers.set("X-Chunk-Boundary", this.#boundary);
         this.#timer = setInterval(() => this.keepAlive(), options.keepAlive || 30_000);
     }
     bind(controller) {
@@ -65,7 +72,7 @@ export class StreamResponse {
                 throw new Error(`Cannot render to JSX when no renderer provided during class initialization`);
             html = this.#render(html);
         }
-        return this.sendText(`<div hx-swap-oob="${swap}:${target}">${html}</div>`);
+        return this.sendText(`<${this.#boundary}>${target}|${swap}|${html}</${this.#boundary}>\n`);
     }
     close() {
         if (this.#state === StreamResponse.CLOSED) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hx-stream",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "keep htmx client state across page refreshes",
 	"keywords": [ "htmx", "streaming" ],
 	"homepage": "https://hx-stream.ajanibilby.com",