hx-stream 0.1.1 → 0.2.0

package/dist/client.js

@@ -26,7 +26,7 @@
     const decoder = new TextDecoder("utf8");
     async function Process(method, url, headers, formData, source) {
         source.classList.add("htmx-request");
-        const req = await fetch(url, { method, headers, body: formData });
+        const req = await fetch(url, { method, headers, body: formData, duplex: "half" });
         if (!req.ok) {
             console.error(await req.text());
             source.classList.remove("htmx-request");

package/dist/client.min.js

@@ -1 +1 @@
-"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 d=c.headers.get("X-Chunk-Boundary");if(!d)return console.error("hx-stream response is chunk boundary header"),void a.classList.remove("htmx-request");const l=`<${d}>`,h=`</${d}>`,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(l,c);if(-1===r)return console.error("hx-stream received invalid chunk");r+=l.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(),d=f.slice(n+1,c);let u;switch(o){case"this":u=a;break;case"body":u=document.body;break;default:u=t.find(a,o)}u?e.swap(u,d,{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")}();
+"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,duplex:"half"});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);let u;switch(o){case"this":u=a;break;case"body":u=document.body;break;default: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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hx-stream",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "keep htmx client state across page refreshes",
 	"keywords": [ "htmx", "streaming" ],
 	"homepage": "https://hx-stream.ajanibilby.com",
@@ -16,12 +16,12 @@
 		"build:client": "tsc --project tsconfig.client.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"
+		"minify:client": "terser client.js --compress --mangle --output client.min.js"
 	},
 	"license": "MIT",
 	"author": "Ajani Bilby",
 	"type": "module",
-	"main": "dist/client.min.js",
+	"main": "client.min.js",
 	"devDependencies": {
 		"terser": "^5.39.0",
 		"typescript": "^5.8.3"

package/dist/server.d.ts

@@ -1,31 +0,0 @@
-type Options<T extends boolean> = T extends true ? RenderOptions : DefaultOptions;
-type DefaultOptions = {
-    keepAlive?: number;
-    highWaterMark?: number;
-};
-type RenderOptions = {
-    render: (jsx: JSX.Element) => string;
-} & DefaultOptions;
-type HasRender<O> = O extends {
-    render: (jsx: JSX.Element) => string;
-} ? true : false;
-export declare class StreamResponse<JsxEnabled extends boolean> {
-    #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, options: Options<JsxEnabled>);
-    bind(controller: ReadableByteStreamController): void;
-    private sendBytes;
-    private sendText;
-    private keepAlive;
-    send(target: string, swap: string, html: JsxEnabled extends true ? (JSX.Element | string) : string): boolean;
-    close(): boolean;
-}
-export declare function MakeRawStream<O extends (DefaultOptions | RenderOptions)>(request: Request, options: O): StreamResponse<HasRender<O>>;
-export declare function MakeStream<T extends Partial<RenderOptions>>(request: Request, props: T, cb: (stream: StreamResponse<HasRender<T>>, props: T) => Promise<void> | void): Response;
-export {};

package/dist/server.js

@@ -1,116 +0,0 @@
-const encoder = new TextEncoder();
-const headers = {
-    // Chunked encoding with immediate forwarding by proxies (i.e. nginx)
-    "X-Content-Type-Options": "nosniff",
-    "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",
-};
-const SCALE = 36 ** 6;
-function MakeBoundary() {
-    return "hx-" + Math.floor(Math.random() * SCALE).toString(36);
-}
-export class StreamResponse {
-    #controller;
-    #signal;
-    #timer;
-    #state;
-    #boundary;
-    #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.#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.removeEventListener("abort", cancel); };
-        request.signal.addEventListener('abort', cancel);
-        this.#signal = request.signal;
-        const start = (c) => { this.#controller = c; this.#state = StreamResponse.OPEN; };
-        const stream = new ReadableStream({ start, cancel }, { highWaterMark: options.highWaterMark });
-        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) {
-        this.#controller = controller;
-    }
-    sendBytes(chunk) {
-        if (this.#state === StreamResponse.CLOSED) {
-            const err = new Error(`Warn: Attempted to send data on closed stream for: ${this.url}`);
-            console.warn(err);
-        }
-        if (this.#signal.aborted) {
-            this.close();
-            return false;
-        }
-        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 (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(`<${this.#boundary}>${target}|${swap}|${html}</${this.#boundary}>\n`);
-    }
-    close() {
-        if (this.#controller) {
-            try {
-                this.#controller.close();
-            }
-            catch (e) {
-                console.error(e);
-            }
-            this.#controller = null;
-        }
-        // Cleanup
-        if (this.#timer)
-            clearInterval(this.#timer);
-        // was already closed
-        if (this.#state === EventSource.CLOSED)
-            return false;
-        // Mark closed
-        this.#state = StreamResponse.CLOSED;
-        return true;
-    }
-}
-export function MakeRawStream(request, options) {
-    return new StreamResponse(request, options);
-}
-export function MakeStream(request, props, cb) {
-    const stream = MakeRawStream(request, props);
-    queueMicrotask(() => {
-        const p = cb(stream, props);
-        if (p instanceof Promise)
-            p.catch(console.error);
-    });
-    return stream.response;
-}