hx-stream 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client.js +25 -12
- package/dist/client.min.js +1 -1
- package/dist/server.d.ts +1 -0
- package/dist/server.js +4 -4
- package/package.json +1 -1
package/dist/client.js
CHANGED
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
source.classList.remove("htmx-request");
|
|
44
44
|
return;
|
|
45
45
|
}
|
|
46
|
+
const open = `<${boundary}>`;
|
|
47
|
+
const close = `</${boundary}>`;
|
|
46
48
|
const reader = req.body.getReader();
|
|
47
49
|
let buffer = "";
|
|
48
50
|
// eslint-disable-next-line no-constant-condition
|
|
@@ -51,29 +53,40 @@
|
|
|
51
53
|
if (done)
|
|
52
54
|
break;
|
|
53
55
|
const html = decoder.decode(value);
|
|
54
|
-
const search = Math.max(0, buffer.length -
|
|
56
|
+
const search = Math.max(0, buffer.length - close.length);
|
|
55
57
|
buffer += html;
|
|
56
|
-
let idx = buffer.indexOf(
|
|
58
|
+
let idx = buffer.indexOf(close, search);
|
|
57
59
|
while (idx !== -1) {
|
|
58
|
-
|
|
59
|
-
const a = chunk.indexOf("|");
|
|
60
|
+
let a = buffer.lastIndexOf(open, idx);
|
|
60
61
|
if (a === -1)
|
|
61
62
|
return console.error("hx-stream received invalid chunk");
|
|
62
|
-
|
|
63
|
+
a += open.length;
|
|
64
|
+
const b = buffer.indexOf("|", a);
|
|
63
65
|
if (b === -1)
|
|
64
66
|
return console.error("hx-stream received invalid chunk");
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
const
|
|
67
|
+
const c = buffer.indexOf("|", b + 1);
|
|
68
|
+
if (c === -1)
|
|
69
|
+
return console.error("hx-stream received invalid chunk");
|
|
70
|
+
const retarget = buffer.slice(a, b).trim();
|
|
71
|
+
const swap = buffer.slice(b + 1, c).trim();
|
|
72
|
+
const html = buffer.slice(c + 1, idx);
|
|
73
|
+
let target;
|
|
74
|
+
switch (retarget) {
|
|
75
|
+
case "this":
|
|
76
|
+
target = source;
|
|
77
|
+
break;
|
|
78
|
+
case "body":
|
|
79
|
+
target = document.body;
|
|
80
|
+
break;
|
|
81
|
+
default: target = htmx.find(source, retarget);
|
|
82
|
+
}
|
|
69
83
|
if (target)
|
|
70
84
|
binding.swap(target, html, { swapStyle: swap });
|
|
71
85
|
else
|
|
72
86
|
console.warn(`hx-stream unable to find target ${retarget}`);
|
|
73
|
-
buffer = buffer.slice(idx +
|
|
74
|
-
idx = buffer.indexOf(
|
|
87
|
+
buffer = buffer.slice(idx + close.length);
|
|
88
|
+
idx = buffer.indexOf(close);
|
|
75
89
|
}
|
|
76
|
-
// binding.swap(target, html, { swapStyle: "beforeend" });
|
|
77
90
|
}
|
|
78
91
|
source.classList.remove("htmx-request");
|
|
79
92
|
}
|
package/dist/client.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";!function(){let e;const t=globalThis.htmx;t.defineExtension("hx-stream",{init:t=>{e=t},onEvent:(s,
|
|
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")}();
|
package/dist/server.d.ts
CHANGED
package/dist/server.js
CHANGED
|
@@ -8,9 +8,9 @@ const headers = {
|
|
|
8
8
|
"Keep-Alive": "timeout=60",
|
|
9
9
|
"Connection": "keep-alive",
|
|
10
10
|
};
|
|
11
|
-
const SCALE = 36 **
|
|
11
|
+
const SCALE = 36 ** 6;
|
|
12
12
|
function MakeBoundary() {
|
|
13
|
-
return "
|
|
13
|
+
return "hx-" + Math.floor(Math.random() * SCALE).toString(36);
|
|
14
14
|
}
|
|
15
15
|
export class StreamResponse {
|
|
16
16
|
#controller;
|
|
@@ -37,7 +37,7 @@ export class StreamResponse {
|
|
|
37
37
|
const cancel = () => { this.close(); };
|
|
38
38
|
request.signal.addEventListener('abort', cancel);
|
|
39
39
|
const start = (c) => { this.#controller = c; this.#state = StreamResponse.OPEN; };
|
|
40
|
-
const stream = new ReadableStream({ start, cancel }, { highWaterMark: 0 });
|
|
40
|
+
const stream = new ReadableStream({ start, cancel }, { highWaterMark: options.highWaterMark || 0 });
|
|
41
41
|
this.response = new Response(stream, { headers });
|
|
42
42
|
this.response.headers.set("X-Chunk-Boundary", this.#boundary);
|
|
43
43
|
this.#timer = setInterval(() => this.keepAlive(), options.keepAlive || 30_000);
|
|
@@ -72,7 +72,7 @@ export class StreamResponse {
|
|
|
72
72
|
throw new Error(`Cannot render to JSX when no renderer provided during class initialization`);
|
|
73
73
|
html = this.#render(html);
|
|
74
74
|
}
|
|
75
|
-
return this.sendText(
|
|
75
|
+
return this.sendText(`<${this.#boundary}>${target}|${swap}|${html}</${this.#boundary}>\n`);
|
|
76
76
|
}
|
|
77
77
|
close() {
|
|
78
78
|
if (this.#state === StreamResponse.CLOSED) {
|