Recognize HTTP/2 streaming (#193)

Author: RasmusN

index.test.ts

@@ -65,6 +65,8 @@ describe("chunked-transfer extension", () => {
       const mockXhr = {
         getResponseHeader: (header: string) => {
           if (header === "Transfer-Encoding") return null;
+          // Non-chunked responses have Content-Length
+          if (header === "Content-Length") return "22";
           return null;
         },
         response: "<p>Normal response</p>",
@@ -87,6 +89,34 @@ describe("chunked-transfer extension", () => {
       expect(target.innerHTML).toBe("");
     });
 
+    test("processes HTTP/2 streaming responses (no Transfer-Encoding or Content-Length)", () => {
+      const element = document.createElement("div");
+      const mockXhr = {
+        getResponseHeader: (header: string) => {
+          // HTTP/2 streaming: no Transfer-Encoding, no Content-Length
+          return null;
+        },
+        response: "<p>HTTP/2 streamed content</p>",
+        onprogress: null as any,
+      };
+
+      const event = {
+        target: element,
+        detail: { xhr: mockXhr },
+      };
+
+      registeredExtension.onEvent("htmx:beforeRequest", event);
+
+      // Verify onprogress handler was set
+      expect(mockXhr.onprogress).toBeDefined();
+
+      // Simulate progress event
+      mockXhr.onprogress!();
+
+      // Verify content was swapped
+      expect(target.innerHTML).toBe("<p>HTTP/2 streamed content</p>");
+    });
+
     test("ignores events other than beforeRequest", () => {
       const element = document.createElement("div");
       const mockXhr = {
@@ -576,7 +606,8 @@ describe("chunked-transfer extension", () => {
 
       const mockXhr = {
         getResponseHeader: (header: string) => {
-          // NOT chunked
+          // NOT chunked - has Content-Length
+          if (header === "Content-Length") return "15";
           return null;
         },
         response: "<p>Final</p>",

index.ts

@@ -12,6 +12,15 @@ declare const htmx: typeof htmxType;
 (function () {
   let api: HtmxApi;
 
+  // Helper function to detect chunked transfer (HTTP/1.1) or streaming (HTTP/2)
+  function isChunkedTransfer(xhr: XMLHttpRequest): boolean {
+    const te = xhr.getResponseHeader("Transfer-Encoding");
+    const cl = xhr.getResponseHeader("Content-Length");
+    const isHttp1Chunked = te === "chunked";
+    const isStreamingWithoutLength = !te && !cl; // typical HTTP/2 streaming
+    return isHttp1Chunked || isStreamingWithoutLength;
+  }
+
   htmx.defineExtension("chunked-transfer", {
     init: function (apiRef: HtmxApi) {
       api = apiRef;
@@ -27,10 +36,10 @@ declare const htmx: typeof htmxType;
         (xhr as any)._chunkedLastLen = 0;
 
         xhr.onprogress = function () {
-          const is_chunked =
-            xhr.getResponseHeader("Transfer-Encoding") === "chunked";
+          if (!isChunkedTransfer(xhr)) return;
 
-          if (!is_chunked) return;
+          const swapSpec = api.getSwapSpecification(elt);
+          if (swapSpec.swapStyle !== "innerHTML") return;
 
           const mode = (xhr as any)._chunkedMode || "append";
           const full = (xhr.response as string) ?? "";
@@ -55,7 +64,6 @@ declare const htmx: typeof htmxType;
             response = extension.transformResponse(response, xhr, elt);
           });
 
-          const swapSpec = api.getSwapSpecification(elt);
           const settleInfo = api.makeSettleInfo(elt);
 
           if (api.swap) {
@@ -85,9 +93,7 @@ declare const htmx: typeof htmxType;
         const mode = (xhr as any)._chunkedMode;
         if (mode !== "swap") return;
 
-        const is_chunked =
-          xhr.getResponseHeader("Transfer-Encoding") === "chunked";
-        if (!is_chunked) return;
+        if (!isChunkedTransfer(xhr)) return;
 
         detail.shouldSwap = false;
       }
@@ -134,13 +140,13 @@ interface SwapSpec {
 }
 
 interface SwapOptions {
-  select: string;
-  selectOOB: string;
-  eventInfo: Object;
-  anchor: Element;
-  contextElement: Element;
-  afterSwapCallback: () => void;
-  afterSettleCallback: () => void;
+  select?: string;
+  selectOOB?: string;
+  eventInfo?: Object;
+  anchor?: Element;
+  contextElement?: Element;
+  afterSwapCallback?: () => void;
+  afterSettleCallback?: () => void;
 }
 
 interface SettleInfo {