diff --git a/src/sse/sse.js b/src/sse/sse.js index 886e3f9..00b0936 100644 --- a/src/sse/sse.js +++ b/src/sse/sse.js @@ -85,20 +85,31 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions * @param {HTMLElement} elt */ function registerSSE(elt) { - // Add message handlers for every `sse-swap` attribute - if (api.getAttributeValue(elt, 'sse-swap')) { + var sseSwapAttr = api.getAttributeValue(elt, 'sse-swap'); + var sseConnectAttr = api.getAttributeValue(elt, 'sse-connect'); + + var hasSseSwap = sseSwapAttr !== null; + var hasSseConnect = sseConnectAttr !== null; + var hasNestedSseSwap = elt.querySelector('[sse-swap], [data-sse-swap]') !== null; + + if (hasSseConnect && !(hasSseSwap || hasNestedSseSwap)) { + // Default `sse-swap` to `message` + sseSwapAttr = 'message'; + } + + // Add message handlers for every `sse-swap` attribute + if (sseSwapAttr) { // 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 + // 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(elt, 'sse-swap') var sseEventNames = sseSwapAttr.split(',') for (var i = 0; i < sseEventNames.length; i++) { diff --git a/src/sse/test/ext/sse.js b/src/sse/test/ext/sse.js index 3a20bfe..84c4372 100644 --- a/src/sse/test/ext/sse.js +++ b/src/sse/test/ext/sse.js @@ -702,4 +702,45 @@ describe('sse extension', function() { byId('d1').innerHTML.should.equal('div1 updated') byId('d2').innerHTML.should.equal('div2 updated') }) + + it('defaults to message event if sse-swap is not specified', function() { + var div = make('
'); + this.clock.tick(1); + byId('d1').innerText.should.equal(''); + this.eventSource.sendEvent('message', 'Event 1'); + byId('d1').innerText.should.equal('Event 1'); + }); + + it('does not default to message when parent has nested sse-swap elements', function() { + var div = make('