hx-stream 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ajani Bilby
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/client.js

@@ -0,0 +1,65 @@
+"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
+    globalThis.htmx.defineExtension("hx-stream", {
+        init: (config) => { binding = config; },
+        onEvent: (name, event) => {
+            switch (name) {
+                case "htmx:beforeRequest": {
+                    const source = event.detail.elt;
+                    if (binding.getAttributeValue(source, "hx-stream") !== "on")
+                        return;
+                    event.preventDefault();
+                    const formData = event.detail.requestConfig.formData;
+                    const headers = event.detail.requestConfig.headers;
+                    const url = event.detail.requestConfig.path;
+                    const method = event.detail.requestConfig.verb;
+                    const target = event.detail.target;
+                    Process(method, url, headers, formData, target).catch(console.error);
+                    return;
+                }
+            }
+        }
+    });
+    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");
+            console.log(formData === null || formData === void 0 ? void 0 : formData.getAll("shipmentID"));
+            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);
+                if (html === " ")
+                    continue; // ignore keepalive byte
+                console.log(html);
+                binding.swap(target, html, { swapStyle: "beforeend" });
+            }
+            target.classList.remove("htmx-request");
+        });
+    }
+})();

package/dist/client.min.js

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

package/dist/server.d.ts

@@ -0,0 +1,16 @@
+export declare class StreamResponse {
+    #private;
+    readonly response: Response;
+    readonly withCredentials: boolean;
+    readonly url: string;
+    get readyState(): number;
+    static CONNECTING: number;
+    static OPEN: number;
+    static CLOSED: number;
+    constructor(request: Request, keepAlive?: number);
+    private sendBytes;
+    private sendText;
+    private keepAlive;
+    send(target: string, swap: string, html: string): boolean;
+    close(): boolean;
+}

package/dist/server.js

@@ -0,0 +1,94 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _StreamResponse_controller, _StreamResponse_timer, _StreamResponse_state;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamResponse = void 0;
+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",
+};
+class StreamResponse {
+    get readyState() { return __classPrivateFieldGet(this, _StreamResponse_state, "f"); }
+    constructor(request, keepAlive = 30000) {
+        _StreamResponse_controller.set(this, void 0);
+        _StreamResponse_timer.set(this, void 0);
+        _StreamResponse_state.set(this, void 0);
+        __classPrivateFieldSet(this, _StreamResponse_controller, null, "f");
+        __classPrivateFieldSet(this, _StreamResponse_state, StreamResponse.CONNECTING, "f");
+        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) => { __classPrivateFieldSet(this, _StreamResponse_controller, c, "f"); __classPrivateFieldSet(this, _StreamResponse_state, StreamResponse.OPEN, "f"); };
+        const stream = new ReadableStream({ start, cancel }, { highWaterMark: 0 });
+        this.response = new Response(stream, { headers });
+        __classPrivateFieldSet(this, _StreamResponse_timer, setInterval(() => this.keepAlive(), keepAlive), "f");
+    }
+    sendBytes(chunk) {
+        if (!__classPrivateFieldGet(this, _StreamResponse_controller, "f"))
+            return false;
+        try {
+            __classPrivateFieldGet(this, _StreamResponse_controller, "f").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 (__classPrivateFieldGet(this, _StreamResponse_state, "f") === StreamResponse.CLOSED) {
+            const err = new Error(`Warn: Attempted to send data on closed stream for: ${this.url}`);
+            console.warn(err);
+        }
+        return this.sendText(`<div hx-swap-oob="${swap}:${target}">${html}</div>`);
+    }
+    close() {
+        if (__classPrivateFieldGet(this, _StreamResponse_state, "f") === StreamResponse.CLOSED) {
+            __classPrivateFieldSet(this, _StreamResponse_controller, null, "f");
+            return false;
+        }
+        if (__classPrivateFieldGet(this, _StreamResponse_controller, "f")) {
+            try {
+                __classPrivateFieldGet(this, _StreamResponse_controller, "f").close();
+            }
+            catch (e) {
+                console.error(e);
+            }
+            __classPrivateFieldSet(this, _StreamResponse_controller, null, "f");
+        }
+        // Cleanup
+        if (__classPrivateFieldGet(this, _StreamResponse_timer, "f"))
+            clearInterval(__classPrivateFieldGet(this, _StreamResponse_timer, "f"));
+        // Mark closed
+        __classPrivateFieldSet(this, _StreamResponse_state, StreamResponse.CLOSED, "f");
+        return true;
+    }
+}
+exports.StreamResponse = StreamResponse;
+_StreamResponse_controller = new WeakMap(), _StreamResponse_timer = new WeakMap(), _StreamResponse_state = new WeakMap();
+StreamResponse.CONNECTING = 0;
+StreamResponse.OPEN = 1;
+StreamResponse.CLOSED = 2;

package/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "hx-stream",
+	"version": "0.0.0",
+	"description": "keep htmx client state across page refreshes",
+	"keywords": [ "htmx", "streaming" ],
+	"homepage": "https://hx-stream.ajanibilby.com",
+	"bugs": {
+		"url": "https://github.com/AjaniBilby/hx-stream/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/AjaniBilby/hx-stream.git"
+	},
+	"scripts": {
+		"build": "npm run build:client & npm run build:server",
+		"build:client": "tsc --project tsconfig.client.json & terser dist/client.js --compress --mangle --output dist/client.min.js",
+		"build:server": "tsc --project tsconfig.server.json"
+	},
+	"license": "MIT",
+	"author": "Ajani Bilby",
+	"type": "commonjs",
+	"main": "dist/client.min.js",
+	"devDependencies": {
+		"terser": "^5.39.0",
+		"typescript": "^5.8.3"
+	}
+}