hx-stream 0.0.2 → 0.0.4

package/dist/client.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 (function () {
     let binding;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -32,32 +23,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         }
     });
     const decoder = new TextDecoder("utf8");
-    function Process(method, url, headers, formData, target) {
-        return __awaiter(this, void 0, void 0, function* () {
-            target.classList.add("htmx-request");
-            const req = yield fetch(url, { method, headers, body: formData });
-            if (!req.ok) {
-                console.error(yield req.text());
-                target.classList.remove("htmx-request");
-                return;
-            }
-            if (!req.body) {
-                console.error("hx-stream response is missing body");
-                target.classList.remove("htmx-request");
-                return;
-            }
-            const reader = req.body.getReader();
-            // eslint-disable-next-line no-constant-condition
-            while (true) {
-                const { done, value: buffer } = yield reader.read();
-                if (done)
-                    break;
-                const html = decoder.decode(buffer).trim();
-                if (html === "")
-                    continue; // ignore keepalive byte
-                binding.swap(target, html, { swapStyle: "beforeend" });
-            }
+    async function Process(method, url, headers, formData, target) {
+        target.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");
-        });
+            return;
+        }
+        if (!req.body) {
+            console.error("hx-stream response is missing body");
+            target.classList.remove("htmx-request");
+            return;
+        }
+        const reader = req.body.getReader();
+        // 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" });
+        }
+        target.classList.remove("htmx-request");
     }
 })();

package/dist/client.min.js

@@ -1 +1 @@
-"use strict";var __awaiter=this&&this.__awaiter||function(e,t,r,n){return new(r||(r=Promise))((function(o,i){function s(e){try{c(n.next(e))}catch(e){i(e)}}function a(e){try{c(n.throw(e))}catch(e){i(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(s,a)}c((n=n.apply(e,t||[])).next())}))};!function(){let e;globalThis.htmx.defineExtension("hx-stream",{init:t=>{e=t},onEvent:(r,n)=>{if("htmx:beforeRequest"!==r);else{const r=n.detail.elt;if("on"!==e.getAttributeValue(r,"hx-stream"))return;n.preventDefault();const o=n.detail.requestConfig.formData,i=n.detail.requestConfig.headers,s=n.detail.requestConfig.path;(function(r,n,o,i,s){return __awaiter(this,void 0,void 0,(function*(){s.classList.add("htmx-request");const a=yield fetch(n,{method:r,headers:o,body:i});if(!a.ok)return console.error(yield a.text()),void s.classList.remove("htmx-request");if(!a.body)return console.error("hx-stream response is missing body"),void s.classList.remove("htmx-request");const c=a.body.getReader();for(;;){const{done:r,value:n}=yield c.read();if(r)break;const o=t.decode(n).trim();""!==o&&e.swap(s,o,{swapStyle:"beforeend"})}s.classList.remove("htmx-request")}))})(n.detail.requestConfig.verb,s,i,o,n.detail.target).catch(console.error)}}});const t=new TextDecoder("utf8")}();
+"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")}();

package/dist/server.d.ts

@@ -8,7 +8,7 @@ type RenderOptions = {
 type HasRender<O> = O extends {
     render: (jsx: JSX.Element) => string;
 } ? true : false;
-export declare class StreamResponse<O extends Options<boolean>, T extends boolean = HasRender<O>> {
+export declare class StreamResponse<JsxEnabled extends boolean> {
     #private;
     readonly response: Response;
     readonly withCredentials: boolean;
@@ -17,11 +17,13 @@ export declare class StreamResponse<O extends Options<boolean>, T extends boolea
     static CONNECTING: number;
     static OPEN: number;
     static CLOSED: number;
-    constructor(request: Request, options: O);
+    constructor(request: Request, options: Options<JsxEnabled>);
+    bind(controller: ReadableByteStreamController): void;
     private sendBytes;
     private sendText;
     private keepAlive;
-    send(target: string, swap: string, html: T extends true ? (JSX.Element | string) : string): boolean;
+    send(target: string, swap: string, html: JsxEnabled extends true ? (JSX.Element | string) : string): boolean;
     close(): boolean;
 }
+export declare function MakeStream<O extends (DefaultOptions | RenderOptions)>(request: Request, options: O): StreamResponse<HasRender<O>>;
 export {};

package/dist/server.js

@@ -0,0 +1,93 @@
+const encoder = new TextEncoder();
+const headers = {
+    // Chunked encoding with immediate forwarding by proxies (i.e. nginx)
+    "X-Accel-Buffering": "no",
+    "Transfer-Encoding": "chunked",
+    "Content-Type": "text/html",
+    // the maximum keep alive chrome shouldn't ignore
+    "Keep-Alive": "timeout=60",
+    "Connection": "keep-alive",
+};
+export class StreamResponse {
+    #controller;
+    #timer;
+    #state;
+    #render;
+    response;
+    // just to make it polyfill
+    withCredentials;
+    url;
+    get readyState() { return this.#state; }
+    static CONNECTING = 0;
+    static OPEN = 1;
+    static CLOSED = 2;
+    constructor(request, options) {
+        this.#controller = null;
+        this.#state = StreamResponse.CONNECTING;
+        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 });
+        this.response = new Response(stream, { headers });
+        this.#timer = setInterval(() => this.keepAlive(), options.keepAlive || 30_000);
+    }
+    bind(controller) {
+        this.#controller = controller;
+    }
+    sendBytes(chunk) {
+        if (!this.#controller)
+            return false;
+        try {
+            this.#controller.enqueue(chunk);
+            return true;
+        }
+        catch (e) {
+            console.error(e);
+            this.close(); // unbind on failure
+            return false;
+        }
+    }
+    sendText(chunk) {
+        return this.sendBytes(encoder.encode(chunk));
+    }
+    keepAlive() { return this.sendText(" "); }
+    send(target, swap, html) {
+        if (this.#state === StreamResponse.CLOSED) {
+            const err = new Error(`Warn: Attempted to send data on closed stream for: ${this.url}`);
+            console.warn(err);
+        }
+        if (typeof html !== "string") {
+            if (!this.#render)
+                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>`);
+    }
+    close() {
+        if (this.#state === StreamResponse.CLOSED) {
+            this.#controller = null;
+            return false;
+        }
+        if (this.#controller) {
+            try {
+                this.#controller.close();
+            }
+            catch (e) {
+                console.error(e);
+            }
+            this.#controller = null;
+        }
+        // Cleanup
+        if (this.#timer)
+            clearInterval(this.#timer);
+        // Mark closed
+        this.#state = StreamResponse.CLOSED;
+        return true;
+    }
+}
+export function MakeStream(request, options) {
+    return new StreamResponse(request, options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hx-stream",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "keep htmx client state across page refreshes",
 	"keywords": [ "htmx", "streaming" ],
 	"homepage": "https://hx-stream.ajanibilby.com",
@@ -14,7 +14,7 @@
 	"scripts": {
 		"build": "npm run build:client & npm run build:server",
 		"build:client": "tsc --project tsconfig.client.json",
-		"build:server": "tsc --project tsconfig.server.json",
+		"build:server": "tsc --project tsconfig.json",
 		"minify": "npm run minify:client",
 		"minify:client": "terser dist/client.js --compress --mangle --output dist/client.min.js"
 	},