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

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

@ -5,7 +5,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
*/
(function () {
(function() {
/** @type {import("../htmx").HtmxInternalApi} */
var api;
@ -18,7 +18,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
* @param {import("../htmx").HtmxInternalApi} api
* @returns void
*/
init: function (apiRef) {
init: function(apiRef) {
// store a reference to the internal API.
api = apiRef;
@ -35,12 +35,13 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
* @param {Event} evt
* @returns void
*/
onEvent: function (name, evt) {
onEvent: function(name, evt) {
var parent = evt.target || evt.detail.elt;
switch (name) {
case "htmx:beforeCleanupElement":
var internalData = api.getInternalData(evt.target)
var internalData = api.getInternalData(parent)
// Try to remove remove an EventSource when elements are removed
if (internalData.sseEventSource) {
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
case "htmx:afterProcessNode":
ensureEventSourceOnElement(evt.target);
registerSSE(evt.target);
ensureEventSourceOnElement(parent);
}
}
});
@ -112,8 +112,10 @@ 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
queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
// Find closest existing event source
var sourceElement = api.getClosestMatch(elt, hasEventSource);
var sourceElement = api.getClosestMatch(child, hasEventSource);
if (sourceElement == null) {
// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
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 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");
if (sseSwapAttr) {
var sseEventNames = sseSwapAttr.split(",");
@ -135,7 +134,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
for (var i = 0; i < sseEventNames.length; i++) {
var sseEventName = sseEventNames[i].trim();
var listener = function (event) {
var listener = function(event) {
// If the source is missing then close SSE
if (maybeCloseSSESource(sourceElement)) {
@ -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 (!api.bodyContains(child)) {
source.removeEventListener(sseEventName, listener);
return;
}
// swap the response into the DOM and trigger a notification
if(!api.triggerEvent(elt, "htmx:sseBeforeMessage", event)) {
return;
}
swap(child, event.data);
api.triggerEvent(elt, "htmx:sseMessage", event);
};
@ -159,7 +162,17 @@ 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) {
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) {
@ -174,7 +187,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
// remove the sse: prefix from here on out
sseEventName = sseEventName.substr(4);
var listener = function () {
var listener = function() {
if (maybeCloseSSESource(sourceElement)) {
return
}
@ -201,7 +214,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
}
// handle extension source creation attribute
queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function (child) {
queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function(child) {
var sseURL = api.getAttributeValue(child, "sse-connect");
if (sseURL == null) {
return;
@ -211,7 +224,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
});
// handle legacy sse, remove for HTMX2
queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function (child) {
queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function(child) {
var sseURL = getLegacySSEURL(child);
if (sseURL == null) {
return;
@ -220,12 +233,13 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
ensureEventSource(child, sseURL, retryCount);
});
registerSSE(elt);
}
function ensureEventSource(elt, url, retryCount) {
var source = htmx.createEventSource(url);
source.onerror = function (err) {
source.onerror = function(err) {
// Log an error event
api.triggerErrorEvent(elt, "htmx:sseError", { error: err, source: source });
@ -239,13 +253,13 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
if (source.readyState === EventSource.CLOSED) {
retryCount = retryCount || 0;
var timeout = Math.random() * (2 ^ retryCount) * 500;
window.setTimeout(function () {
window.setTimeout(function() {
ensureEventSourceOnElement(elt, Math.min(7, retryCount + 1));
}, timeout);
}
};
source.onopen = function (evt) {
source.onopen = function(evt) {
api.triggerEvent(elt, "htmx:sseOpen", { source: source });
}
@ -287,7 +301,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
}
// Search all child nodes that match the requested attribute
elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function (node) {
elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) {
result.push(node);
});
@ -300,7 +314,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
*/
function swap(elt, content) {
api.withExtensions(elt, function (extension) {
api.withExtensions(elt, function(extension) {
content = extension.transformResponse(content, null, elt);
});
@ -310,7 +324,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo);
settleInfo.elts.forEach(function (elt) {
settleInfo.elts.forEach(function(elt) {
if (elt.classList) {
elt.classList.add(htmx.config.settlingClass);
}
@ -334,12 +348,12 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
*/
function doSettle(settleInfo) {
return function () {
settleInfo.tasks.forEach(function (task) {
return function() {
settleInfo.tasks.forEach(function(task) {
task.call();
});
settleInfo.elts.forEach(function (elt) {
settleInfo.elts.forEach(function(elt) {
if (elt.classList) {
elt.classList.remove(htmx.config.settlingClass);
}

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
*/
onEvent: function (name, evt) {
var parent = evt.target || evt.detail.elt;
switch (name) {
// Try to close the socket when elements are removed
case "htmx:beforeCleanupElement":
var internalData = api.getInternalData(evt.target)
var internalData = api.getInternalData(parent)
if (internalData.webSocket) {
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
case "htmx:beforeProcessNode":
var parent = evt.target;
forEach(queryAttributeOnThisOrChildren(parent, "ws-connect"), function (child) {
ensureWebSocket(child)
});