SSE Ext #2225: reinstantiate EventSource listeners upon reconnection logic (#2272)

* fix(sse): reinstantiate EventSource listeners
upon reconnection logic

refs #2225

* improve initialization logic of SSE on nested elements

---------

Co-authored-by: Denis Palashevskii <palash.denis@outlook.com>

2 files changed, 24 insertions, 14 deletions

diff --git a/src/ext/sse.js b/src/ext/sse.js
index 88e23d51..473f23da 100644
--- a/src/ext/sse.js
+++ b/src/ext/sse.js
@@ -51,7 +51,6 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 				// Try to create EventSources when elements are processed
 				case "htmx:afterProcessNode":
 					ensureEventSourceOnElement(evt.target);
-					registerSSE(evt.target);
 			}
 		}
 	});
@@ -112,19 +111,18 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	 * @param {HTMLElement} elt
 	 */
 	function registerSSE(elt) {
-		// Find closest existing event source
-		var sourceElement = api.getClosestMatch(elt, hasEventSource);
-		if (sourceElement == null) {
-			// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
-			return null; // no eventsource in parentage, orphaned element
-		}
-
-		// Set internalData and source
-		var internalData = api.getInternalData(sourceElement);
-		var source = internalData.sseEventSource;
-
 		// Add message handlers for every `sse-swap` attribute
-		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
+		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
+			// Find closest existing event source
+			var sourceElement = api.getClosestMatch(child, hasEventSource);
+			if (sourceElement == null) {
+				// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
+				return null; // no eventsource in parentage, orphaned element
+			}
+
+			// Set internalData and source
+			var internalData = api.getInternalData(sourceElement);
+			var source = internalData.sseEventSource;
 
 			var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
 			if (sseSwapAttr) {
@@ -164,6 +162,16 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 
 		// Add message handlers for every `hx-trigger="sse:*"` attribute
 		queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) {
+			// Find closest existing event source
+			var sourceElement = api.getClosestMatch(child, hasEventSource);
+			if (sourceElement == null) {
+				// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
+				return null; // no eventsource in parentage, orphaned element
+			}
+
+			// Set internalData and source
+			var internalData = api.getInternalData(sourceElement);
+			var source = internalData.sseEventSource;
 
 			var sseEventName = api.getAttributeValue(child, "hx-trigger");
 			if (sseEventName == null) {
@@ -224,6 +232,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 			ensureEventSource(child, sseURL, retryCount);
 		});
 
+		registerSSE(elt);
 	}
 
 	function ensureEventSource(elt, url, retryCount) {
diff --git a/test/ext/sse.js b/test/ext/sse.js
index 119a627b..ce406019 100644
--- a/test/ext/sse.js
+++ b/test/ext/sse.js
@@ -201,7 +201,8 @@ describe("sse extension", function() {
             '<div id="d1" sse-connect="/event_stream" sse-swap="e1">div1</div>\n' +
             '</div>\n'
         )
-        this.eventSource.url = "/event_stream"
+        this.eventSource.sendEvent("e1", "Event 1")
+        byId("d1").innerText.should.equal("Event 1")
     })
 
     it('only adds sseEventSource to elements with sse-connect', function() {