static/vendor/htmx-sse.js

@@ -39,19 +39,17 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 
 			switch (name) {
 
+			// Try to remove remove an EventSource when elements are removed
 			case "htmx:beforeCleanupElement":
 				var internalData = api.getInternalData(evt.target)
-					// Try to remove remove an EventSource when elements are removed
 				if (internalData.sseEventSource) {
 					internalData.sseEventSource.close();
 				}
-
 				return;
 
 			// Try to create EventSources when elements are processed
 			case "htmx:afterProcessNode":
-					ensureEventSourceOnElement(evt.target);
-					registerSSE(evt.target);
+				createEventSourceOnElement(evt.target);
 			}
 		}
 	});
@@ -92,7 +90,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	function getLegacySSESwaps(elt) {
 		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
 		var returnArr = [];
-		if (legacySSEValue != null) {
+		if (legacySSEValue) {
 			var values = splitOnWhitespace(legacySSEValue);
 			for (var i = 0; i < values.length; i++) {
 				var value = values[i].split(/:(.+)/);
@@ -105,23 +103,62 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	}
 
 	/**
-	 * registerSSE looks for attributes that can contain sse events, right 
-	 * now hx-trigger and sse-swap and adds listeners based on these attributes too
-	 * the closest event source
-	 *
+	 * createEventSourceOnElement creates a new EventSource connection on the provided element.
+	 * If a usable EventSource already exists, then it is returned.  If not, then a new EventSource
+	 * is created and stored in the element's internalData.
 	 * @param {HTMLElement} elt
+	 * @param {number} retryCount
+	 * @returns {EventSource | null}
 	 */
-	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
+	function createEventSourceOnElement(elt, retryCount) {
+
+		if (elt == null) {
+			return null;
 		}
 
-		// Set internalData and source
-		var internalData = api.getInternalData(sourceElement);
-		var source = internalData.sseEventSource;
+		var internalData = api.getInternalData(elt);
+
+		// get URL from element's attribute
+		var sseURL = api.getAttributeValue(elt, "sse-connect");
+
+
+		if (sseURL == undefined) {
+			var legacyURL = getLegacySSEURL(elt)
+			if (legacyURL) {
+				sseURL = legacyURL;
+			} else {
+				return null;
+			}
+		}
+
+		// Connect to the EventSource
+		var source = htmx.createEventSource(sseURL);
+		internalData.sseEventSource = source;
+
+		// Create event handlers
+		source.onerror = function (err) {
+
+			// Log an error event
+			api.triggerErrorEvent(elt, "htmx:sseError", {error:err, source:source});
+
+			// If parent no longer exists in the document, then clean up this EventSource
+			if (maybeCloseSSESource(elt)) {
+				return;
+			}
+
+			// Otherwise, try to reconnect the EventSource
+			if (source.readyState === EventSource.CLOSED) {
+				retryCount = retryCount || 0;
+				var timeout = Math.random() * (2 ^ retryCount) * 500;
+				window.setTimeout(function() {
+					createEventSourceOnElement(elt, Math.min(7, retryCount+1));
+				}, timeout);
+			}			
+		};
+
+		source.onopen = function (evt) {
+			api.triggerEvent(elt, "htmx::sseOpen", {source: source});
+		}
 		
 		// Add message handlers for every `sse-swap` attribute
 		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
@@ -137,14 +174,10 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 				var sseEventName = sseEventNames[i].trim();
 				var listener = function(event) {
 
-					// If the source is missing then close SSE
-					if (maybeCloseSSESource(sourceElement)) {
-						return;
-					}
-
-					// If the body no longer contains the element, remove the listener
-					if (!api.bodyContains(child)) {
+					// If the parent is missing then close SSE and remove listener
+					if (maybeCloseSSESource(elt)) {
 						source.removeEventListener(sseEventName, listener);
+						return;
 					}
 
 					// swap the response into the DOM and trigger a notification
@@ -153,7 +186,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 				};
 
 				// Register the new listener
-				api.getInternalData(child).sseEventListener = listener;
+				api.getInternalData(elt).sseEventListener = listener;
 				source.addEventListener(sseEventName, listener);
 			}
 		});
@@ -171,85 +204,23 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 				return;
 			}
 
-			// remove the sse: prefix from here on out
-			sseEventName = sseEventName.substr(4);
+			var listener = function(event) {
 
-			var listener = function() {
-				if (maybeCloseSSESource(sourceElement)) {
-					return
-				}
-
-				if (!api.bodyContains(child)) {
-					source.removeEventListener(sseEventName, listener);
-				}
-			}
-		});
-	}
-
-	/**
-	 * ensureEventSourceOnElement creates a new EventSource connection on the provided element.
-	 * If a usable EventSource already exists, then it is returned.  If not, then a new EventSource
-	 * is created and stored in the element's internalData.
-	 * @param {HTMLElement} elt
-	 * @param {number} retryCount
-	 * @returns {EventSource | null}
-	 */
-	function ensureEventSourceOnElement(elt, retryCount) {
-
-		if (elt == null) {
-			return null;
-		}
-
-		// handle extension source creation attribute
-		queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function(child) {
-			var sseURL = api.getAttributeValue(child, "sse-connect");
-			if (sseURL == null) {
-				return;
-			}
-
-			ensureEventSource(child, sseURL, retryCount);
-		});
-
-		// handle legacy sse, remove for HTMX2
-		queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function(child) {
-			var sseURL = getLegacySSEURL(child);
-			if (sseURL == null) {
-				return;
-			}
-
-			ensureEventSource(child, sseURL, retryCount);
-		});
-
-	}
-
-	function ensureEventSource(elt, url, retryCount) {
-		var source = htmx.createEventSource(url);
-
-		source.onerror = function(err) {
-
-			// Log an error event
-			api.triggerErrorEvent(elt, "htmx:sseError", { error: err, source: source });
-
-			// If parent no longer exists in the document, then clean up this EventSource
+				// If parent is missing, then close SSE and remove listener
 				if (maybeCloseSSESource(elt)) {
+					source.removeEventListener(sseEventName, listener);
 					return;
 				}
 
-			// Otherwise, try to reconnect the EventSource
-			if (source.readyState === EventSource.CLOSED) {
-				retryCount = retryCount || 0;
-				var timeout = Math.random() * (2 ^ retryCount) * 500;
-				window.setTimeout(function() {
-					ensureEventSourceOnElement(elt, Math.min(7, retryCount + 1));
-				}, timeout);
-			}
-		};
-
-		source.onopen = function(evt) {
-			api.triggerEvent(elt, "htmx:sseOpen", { source: source });
+				// Trigger events to be handled by the rest of htmx
+				htmx.trigger(child, sseEventName, event);
+				htmx.trigger(child, "htmx:sseMessage", event);
 			}
 
-		api.getInternalData(elt).sseEventSource = source;
+			// Register the new listener
+			api.getInternalData(elt).sseEventListener = listener;
+			source.addEventListener(sseEventName.slice(4), listener);
+		});
 	}
 
 	/**
@@ -282,12 +253,12 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 		var result = [];
 
 		// If the parent element also contains the requested attribute, then add it to the results too.
-		if (api.hasAttribute(elt, attributeName)) {
+		if (api.hasAttribute(elt, attributeName) || api.hasAttribute(elt, "hx-sse")) {
 			result.push(elt);
 		}
 
 		// Search all child nodes that match the requested attribute
-		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) {
+		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "], [hx-sse], [data-hx-sse]").forEach(function(node) {
 			result.push(node);
 		});
 
@@ -348,8 +319,4 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 		}
 	}
 
-	function hasEventSource(node) {
-		return api.getInternalData(node).sseEventSource != null;
-	}
-
 })();

templates/queue.html

@@ -30,15 +30,15 @@
 </ul>
 
 <script>
-htmx.onLoad(() => {
 const scrollCurrentSongIntoView = () => {
   const hoveredSong = document.querySelector(".queue li:hover");
   if (hoveredSong === null) {
     const currentSong = document.querySelector(".queue li.playing");
-      currentSong?.scrollIntoView({ block: "nearest" });
+    currentSong.scrollIntoView({ block: "nearest" });
   }
 }
 
+htmx.onLoad(() => {
   const isReduced = window
     .matchMedia("(prefers-reduced-motion: reduce)")
     .matches;