atridad/goth.stack
Template
1
0
Fork 0
Code Activity

Updated HTMX

Browse source
This commit is contained in:
Atridad Lahiji 2024-03-18 13:55:39 -06:00
parent 43050b4c3b
commit ecb83a96c6
No known key found for this signature in database
3 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/js/htmx.base.js vendored
View file

File diff suppressed because one or more lines are too long

28
public/js/htmx.sse.js vendored
View file

@ -37,10 +37,11 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
*/ */
onEvent: function(name, evt) { onEvent: function(name, evt) {
var parent = evt.target || evt.detail.elt;
switch (name) { switch (name) {
case "htmx:beforeCleanupElement": case "htmx:beforeCleanupElement":
var internalData = api.getInternalData(evt.target) var internalData = api.getInternalData(parent)
// Try to remove remove an EventSource when elements are removed // Try to remove remove an EventSource when elements are removed
if (internalData.sseEventSource) { if (internalData.sseEventSource) {
internalData.sseEventSource.close(); internalData.sseEventSource.close();
@ -50,8 +51,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// Try to create EventSources when elements are processed // Try to create EventSources when elements are processed
case "htmx:afterProcessNode": case "htmx:afterProcessNode":
ensureEventSourceOnElement(evt.target); ensureEventSourceOnElement(parent);
registerSSE(evt.target);
} }
} }
}); });
@ -112,8 +112,10 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
* @param {HTMLElement} elt * @param {HTMLElement} elt
*/ */
function registerSSE(elt) { function registerSSE(elt) {
// Add message handlers for every `sse-swap` attribute
queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
// Find closest existing event source // Find closest existing event source
var sourceElement = api.getClosestMatch(elt, hasEventSource); var sourceElement = api.getClosestMatch(child, hasEventSource);
if (sourceElement == null) { if (sourceElement == null) {
// api.triggerErrorEvent(elt, "htmx:noSSESourceError") // api.triggerErrorEvent(elt, "htmx:noSSESourceError")
return null; // no eventsource in parentage, orphaned element return null; // no eventsource in parentage, orphaned element
@ -123,9 +125,6 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
var internalData = api.getInternalData(sourceElement); var internalData = api.getInternalData(sourceElement);
var source = internalData.sseEventSource; var source = internalData.sseEventSource;
// Add message handlers for every `sse-swap` attribute
queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
var sseSwapAttr = api.getAttributeValue(child, "sse-swap"); var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
if (sseSwapAttr) { if (sseSwapAttr) {
var sseEventNames = sseSwapAttr.split(","); var sseEventNames = sseSwapAttr.split(",");
@ -145,9 +144,13 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// If the body no longer contains the element, remove the listener // If the body no longer contains the element, remove the listener
if (!api.bodyContains(child)) { if (!api.bodyContains(child)) {
source.removeEventListener(sseEventName, listener); source.removeEventListener(sseEventName, listener);
return;
} }
// swap the response into the DOM and trigger a notification // swap the response into the DOM and trigger a notification
if(!api.triggerEvent(elt, "htmx:sseBeforeMessage", event)) {
return;
}
swap(child, event.data); swap(child, event.data);
api.triggerEvent(elt, "htmx:sseMessage", event); api.triggerEvent(elt, "htmx:sseMessage", event);
}; };
@ -160,6 +163,16 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// Add message handlers for every `hx-trigger="sse:*"` attribute // Add message handlers for every `hx-trigger="sse:*"` attribute
queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) { 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"); var sseEventName = api.getAttributeValue(child, "hx-trigger");
if (sseEventName == null) { if (sseEventName == null) {
@ -220,6 +233,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
ensureEventSource(child, sseURL, retryCount); ensureEventSource(child, sseURL, retryCount);
}); });
registerSSE(elt);
} }
function ensureEventSource(elt, url, retryCount) { function ensureEventSource(elt, url, retryCount) {

5
public/js/htmx.ws.js vendored
View file

@ -38,13 +38,14 @@ This extension adds support for WebSockets to htmx. See /www/extensions/ws.md f
* @param {Event} evt * @param {Event} evt
*/ */
onEvent: function (name, evt) { onEvent: function (name, evt) {
var parent = evt.target || evt.detail.elt;
switch (name) { switch (name) {
// Try to close the socket when elements are removed // Try to close the socket when elements are removed
case "htmx:beforeCleanupElement": case "htmx:beforeCleanupElement":
var internalData = api.getInternalData(evt.target) var internalData = api.getInternalData(parent)
if (internalData.webSocket) { if (internalData.webSocket) {
internalData.webSocket.close(); internalData.webSocket.close();
@ -53,8 +54,6 @@ This extension adds support for WebSockets to htmx. See /www/extensions/ws.md f
// Try to create websockets when elements are processed // Try to create websockets when elements are processed
case "htmx:beforeProcessNode": case "htmx:beforeProcessNode":
var parent = evt.target;
forEach(queryAttributeOnThisOrChildren(parent, "ws-connect"), function (child) { forEach(queryAttributeOnThisOrChildren(parent, "ws-connect"), function (child) {
ensureWebSocket(child) ensureWebSocket(child)
}); });