From 6b5792046fe6b72320f6c37933a63d7313896a38 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sun, 7 Jul 2024 08:56:27 -0400
Subject: [PATCH 01/26] Working POC on
\Drupal\config\Form\ConfigSingleExportForm
---
core/assets/vendor/htmx/debug.js | 11 +
core/assets/vendor/htmx/htmx.min.js | 1 +
core/core.libraries.yml | 32 +
core/core.services.yml | 8 +
.../Ajax/HtmxResponseAttachmentsProcessor.php | 102 +++
.../HtmxResponseSubscriber.php | 61 ++
core/lib/Drupal/Core/Form/FormBase.php | 22 +
core/lib/Drupal/Core/Form/FormBuilder.php | 61 +-
.../Core/Render/Element/RenderElementBase.php | 37 +-
.../lib/Drupal/Core/Render/Element/Select.php | 1 +
.../Drupal/Core/Render/Element/Textarea.php | 1 +
core/lib/Drupal/Core/Template/Attribute.php | 90 +--
.../Drupal/Core/Template/AttributeHelper.php | 20 +-
.../Drupal/Core/Template/AttributeJson.php | 32 +
.../Drupal/Core/Template/AttributeString.php | 4 +-
.../Core/Template/AttributeValueBase.php | 11 +-
.../Core/Template/ComponentsTwigExtension.php | 2 +-
.../Core/Template/HtmlAttributeInterface.php | 42 +
.../Core/Template/HtmlAttributeTrait.php | 68 ++
.../Drupal/Core/Template/HtmxAttribute.php | 762 ++++++++++++++++++
.../Drupal/Core/Template/TwigExtension.php | 12 +-
core/lib/Drupal/Core/Theme/ThemeManager.php | 3 +-
core/misc/htmx.js | 211 +++++
.../src/Form/ConfigSingleExportForm.php | 103 ++-
.../FieldFormatter/FileMediaFormatterBase.php | 3 +-
core/modules/views/views.theme.inc | 3 +-
core/scripts/js/vendor-update.js | 9 +
.../Core/Template/HtmxAttributeTest.php | 409 ++++++++++
.../Tests/Core/Template/AttributeTest.php | 1 +
core/themes/claro/claro.theme | 5 +-
core/themes/olivero/olivero.theme | 2 +-
31 files changed, 1988 insertions(+), 141 deletions(-)
create mode 100644 core/assets/vendor/htmx/debug.js
create mode 100644 core/assets/vendor/htmx/htmx.min.js
create mode 100644 core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
create mode 100644 core/lib/Drupal/Core/EventSubscriber/HtmxResponseSubscriber.php
create mode 100644 core/lib/Drupal/Core/Template/AttributeJson.php
create mode 100644 core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
create mode 100644 core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
create mode 100644 core/lib/Drupal/Core/Template/HtmxAttribute.php
create mode 100644 core/misc/htmx.js
create mode 100644 core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
diff --git a/core/assets/vendor/htmx/debug.js b/core/assets/vendor/htmx/debug.js
new file mode 100644
index 000000000000..15378ccc0777
--- /dev/null
+++ b/core/assets/vendor/htmx/debug.js
@@ -0,0 +1,11 @@
+htmx.defineExtension('debug', {
+ onEvent: function(name, evt) {
+ if (console.debug) {
+ console.debug(name, evt)
+ } else if (console) {
+ console.log('DEBUG:', name, evt)
+ } else {
+ throw new Error('NO CONSOLE SUPPORTED')
+ }
+ }
+})
diff --git a/core/assets/vendor/htmx/htmx.min.js b/core/assets/vendor/htmx/htmx.min.js
new file mode 100644
index 000000000000..6eeb64f51ea9
--- /dev/null
+++ b/core/assets/vendor/htmx/htmx.min.js
@@ -0,0 +1 @@
+var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=cn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",inlineStyleNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0.1"};Q.onLoad=$;Q.process=kt;Q.on=be;Q.off=we;Q.trigger=he;Q.ajax=Hn;Q.find=r;Q.findAll=p;Q.closest=g;Q.remove=K;Q.addClass=Y;Q.removeClass=o;Q.toggleClass=W;Q.takeClass=ge;Q.swap=ze;Q.defineExtension=Un;Q.removeExtension=Bn;Q.logAll=z;Q.logNone=J;Q.parseInterval=d;Q._=_;const n={addTriggerHandler:Et,bodyContains:le,canAccessLocalStorage:j,findThisElement:Ee,filterValues:dn,swap:ze,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:T,getExpressionVars:Cn,getHeaders:hn,getInputValues:cn,getInternalData:ie,getSwapSpecification:pn,getTriggerSpecs:lt,getTarget:Ce,makeFragment:k,mergeObjects:ue,makeSettleInfo:xn,oobSwap:Te,querySelectorExt:fe,settleImmediately:Gt,shouldCancel:dt,triggerEvent:he,triggerErrorEvent:ae,withExtensions:Ut};const v=["get","post","put","delete","patch"];const R=v.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");const O=e("head");function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function H(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function T(e,t){while(e&&!t(e)){e=u(e)}return e||null}function q(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;T(t,function(e){return!!(r=q(t,ce(e),n))});if(r!=="unset"){return r}}function a(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function L(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function N(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function A(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function I(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function P(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function D(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(P(e)){const t=I(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){w(e)}finally{e.remove()}}})}function k(e){const t=e.replace(O,"");const n=L(t);let r;if(n==="html"){r=new DocumentFragment;const i=N(e);A(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=N(t);A(r,i.body);r.title=i.title}else{const i=N('<body><template class="internal-htmx-wrapper">'+t+"</template></body>");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){D(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function M(e){return typeof e==="function"}function X(e){return t(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function F(t){const n=[];if(t){for(let e=0;e<t.length;e++){n.push(t[e])}}return n}function se(t,n){if(t){for(let e=0;e<t.length;e++){n(t[e])}}}function U(e){const t=e.getBoundingClientRect();const n=t.top;const r=t.bottom;return n<window.innerHeight&&r>=0}function le(e){const t=e.getRootNode&&e.getRootNode();if(t&&t instanceof window.ShadowRoot){return ne().body.contains(t.host)}else{return ne().body.contains(e)}}function B(e){return e.trim().split(/\s+/)}function ue(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function S(e){try{return JSON.parse(e)}catch(e){w(e);return null}}function j(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function V(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function _(e){return vn(ne().body,function(){return eval(e)})}function $(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function z(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function J(){Q.logger=null}function r(e,t){if(typeof e!=="string"){return e.querySelector(t)}else{return r(ne(),e)}}function p(e,t){if(typeof e!=="string"){return e.querySelectorAll(t)}else{return p(ne(),e)}}function E(){return window}function K(e,t){e=y(e);if(t){E().setTimeout(function(){K(e);e=null},t)}else{u(e).removeChild(e)}}function ce(e){return e instanceof Element?e:null}function G(e){return e instanceof HTMLElement?e:null}function Z(e){return typeof e==="string"?e:null}function h(e){return e instanceof Element||e instanceof Document||e instanceof DocumentFragment?e:null}function Y(e,t,n){e=ce(y(e));if(!e){return}if(n){E().setTimeout(function(){Y(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function o(e,t,n){let r=ce(y(e));if(!r){return}if(n){E().setTimeout(function(){o(r,t);r=null},n)}else{if(r.classList){r.classList.remove(t);if(r.classList.length===0){r.removeAttribute("class")}}}}function W(e,t){e=y(e);e.classList.toggle(t)}function ge(e,t){e=y(e);se(e.parentElement.children,function(e){o(e,t)});Y(ce(e),t)}function g(e,t){e=ce(y(e));if(e&&e.closest){return e.closest(t)}else{do{if(e==null||a(e,t)){return e}}while(e=e&&ce(u(e)));return null}}function l(e,t){return e.substring(0,t.length)===t}function pe(e,t){return e.substring(e.length-t.length)===t}function i(e){const t=e.trim();if(l(t,"<")&&pe(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function m(e,t,n){e=y(e);if(t.indexOf("closest ")===0){return[g(ce(e),i(t.substr(8)))]}else if(t.indexOf("find ")===0){return[r(h(e),i(t.substr(5)))]}else if(t==="next"){return[ce(e).nextElementSibling]}else if(t.indexOf("next ")===0){return[me(e,i(t.substr(5)),!!n)]}else if(t==="previous"){return[ce(e).previousElementSibling]}else if(t.indexOf("previous ")===0){return[ye(e,i(t.substr(9)),!!n)]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else if(t==="root"){return[H(e,!!n)]}else if(t.indexOf("global ")===0){return m(e,t.slice(7),true)}else{return F(h(H(e,!!n)).querySelectorAll(i(t)))}}var me=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=0;e<r.length;e++){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_PRECEDING){return o}}};var ye=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=r.length-1;e>=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function fe(e,t){if(typeof e!=="string"){return m(e,t)[0]}else{return m(ne().body,e)[0]}}function y(e,t){if(typeof e==="string"){return r(h(t)||document,e)}else{return e}}function xe(e,t,n){if(M(t)){return{target:ne().body,event:Z(e),listener:t}}else{return{target:y(e),event:Z(t),listener:n}}}function be(t,n,r){_n(function(){const e=xe(t,n,r);e.target.addEventListener(e.event,e.listener)});const e=M(n);return e?n:r}function we(t,n,r){_n(function(){const e=xe(t,n,r);e.target.removeEventListener(e.event,e.listener)});return M(n)?n:r}const ve=ne().createElement("output");function Se(e,t){const n=re(e,t);if(n){if(n==="this"){return[Ee(e,t)]}else{const r=m(e,n);if(r.length===0){w('The selector "'+n+'" on '+t+" returned no matches!");return[ve]}else{return r}}}}function Ee(e,t){return ce(T(e,function(e){return te(ce(e),t)!=null}))}function Ce(e){const t=re(e,"hx-target");if(t){if(t==="this"){return Ee(e,"hx-target")}else{return fe(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Re(t){const n=Q.config.attributesToSettle;for(let e=0;e<n.length;e++){if(t===n[e]){return true}}return false}function Oe(t,n){se(t.attributes,function(e){if(!n.hasAttribute(e.name)&&Re(e.name)){t.removeAttribute(e.name)}});se(n.attributes,function(e){if(Re(e.name)){t.setAttribute(e.name,e.value)}})}function He(t,e){const n=jn(e);for(let e=0;e<n.length;e++){const r=n[e];try{if(r.isInlineSwap(t)){return true}}catch(e){w(e)}}return t==="outerHTML"}function Te(e,o,i){let t="#"+ee(o,"id");let s="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){s=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{s=e}const n=ne().querySelectorAll(t);if(n){se(n,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!He(s,e)){t=h(n)}const r={shouldSwap:true,target:e,fragment:t};if(!he(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){_e(s,e,e,t,i)}se(i.elts,function(e){he(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);ae(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function qe(e){se(p(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){e.parentNode.replaceChild(n,e)}})}function Le(l,e,u){se(e.querySelectorAll("[id]"),function(t){const n=ee(t,"id");if(n&&n.length>0){const r=n.replace("'","\\'");const o=t.tagName.replace(":","\\:");const e=h(l);const i=e&&e.querySelector(o+"[id='"+r+"']");if(i&&i!==e){const s=t.cloneNode();Oe(t,i);u.tasks.push(function(){Oe(t,s)})}}})}function Ne(e){return function(){o(e,Q.config.addedClass);kt(ce(e));Ae(h(e));he(e,"htmx:load")}}function Ae(e){const t="[autofocus]";const n=G(a(e,t)?e:e.querySelector(t));if(n!=null){n.focus()}}function c(e,t,n,r){Le(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;Y(ce(o),Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Ne(o))}}}function Ie(e,t){let n=0;while(n<e.length){t=(t<<5)-t+e.charCodeAt(n++)|0}return t}function Pe(t){let n=0;if(t.attributes){for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e];if(r.value){n=Ie(r.name,n);n=Ie(r.value,n)}}}return n}function De(t){const n=ie(t);if(n.onHandlers){for(let e=0;e<n.onHandlers.length;e++){const r=n.onHandlers[e];we(t,r.event,r.listener)}delete n.onHandlers}}function ke(e){const t=ie(e);if(t.timeout){clearTimeout(t.timeout)}if(t.listenerInfos){se(t.listenerInfos,function(e){if(e.on){we(e.on,e.trigger,e.listener)}})}De(e);se(Object.keys(t),function(e){delete t[e]})}function f(e){he(e,"htmx:beforeCleanupElement");ke(e);if(e.children){se(e.children,function(e){f(e)})}}function Me(t,e,n){if(t instanceof Element&&t.tagName==="BODY"){return Ve(t,e,n)}let r;const o=t.previousSibling;c(u(t),t,e,n);if(o==null){r=u(t).firstChild}else{r=o.nextSibling}n.elts=n.elts.filter(function(e){return e!==t});while(r&&r!==t){if(r instanceof Element){n.elts.push(r);r=r.nextElementSibling}else{r=null}}f(t);if(t instanceof Element){t.remove()}else{t.parentNode.removeChild(t)}}function Xe(e,t,n){return c(e,e.firstChild,t,n)}function Fe(e,t,n){return c(u(e),e,t,n)}function Ue(e,t,n){return c(e,null,t,n)}function Be(e,t,n){return c(u(e),e.nextSibling,t,n)}function je(e){f(e);return u(e).removeChild(e)}function Ve(e,t,n){const r=e.firstChild;c(e,r,t,n);if(r){while(r.nextSibling){f(r.nextSibling);e.removeChild(r.nextSibling)}f(r);e.removeChild(r)}}function _e(t,e,n,r,o){switch(t){case"none":return;case"outerHTML":Me(n,r,o);return;case"afterbegin":Xe(n,r,o);return;case"beforebegin":Fe(n,r,o);return;case"beforeend":Ue(n,r,o);return;case"afterend":Be(n,r,o);return;case"delete":je(n);return;default:var i=jn(e);for(let e=0;e<i.length;e++){const s=i[e];try{const l=s.handleSwap(t,n,r,o);if(l){if(typeof l.length!=="undefined"){for(let e=0;e<l.length;e++){const u=l[e];if(u.nodeType!==Node.TEXT_NODE&&u.nodeType!==Node.COMMENT_NODE){o.tasks.push(Ne(u))}}}return}}catch(e){w(e)}}if(t==="innerHTML"){Ve(n,r,o)}else{_e(Q.config.defaultSwapStyle,e,n,r,o)}}}function $e(e,n){se(p(e,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){if(Q.config.allowNestedOobSwaps||e.parentElement===null){const t=te(e,"hx-swap-oob");if(t!=null){Te(t,e,n)}}else{e.removeAttribute("hx-swap-oob");e.removeAttribute("data-hx-swap-oob")}})}function ze(e,t,r,o){if(!o){o={}}e=y(e);const n=document.activeElement;let i={};try{i={elt:n,start:n?n.selectionStart:null,end:n?n.selectionEnd:null}}catch(e){}const s=xn(e);if(r.swapStyle==="textContent"){e.textContent=t}else{let n=k(t);s.title=n.title;if(o.selectOOB){const u=o.selectOOB.split(",");for(let t=0;t<u.length;t++){const c=u[t].split(":",2);let e=c[0].trim();if(e.indexOf("#")===0){e=e.substring(1)}const f=c[1]||"true";const a=n.querySelector("#"+e);if(a){Te(f,a,s)}}}$e(n,s);se(p(n,"template"),function(e){$e(e.content,s);if(e.content.childElementCount===0&&e.content.textContent.trim()===""){e.remove()}});if(o.select){const h=ne().createDocumentFragment();se(n.querySelectorAll(o.select),function(e){h.appendChild(e)});n=h}qe(n);_e(r.swapStyle,o.contextElement,e,n,s)}if(i.elt&&!le(i.elt)&&ee(i.elt,"id")){const d=document.getElementById(ee(i.elt,"id"));const g={preventScroll:r.focusScroll!==undefined?!r.focusScroll:!Q.config.defaultFocusScroll};if(d){if(i.start&&d.setSelectionRange){try{d.setSelectionRange(i.start,i.end)}catch(e){}}d.focus(g)}}e.classList.remove(Q.config.swappingClass);se(s.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}he(e,"htmx:afterSwap",o.eventInfo)});if(o.afterSwapCallback){o.afterSwapCallback()}if(!r.ignoreTitle){kn(s.title)}const l=function(){se(s.tasks,function(e){e.call()});se(s.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}he(e,"htmx:afterSettle",o.eventInfo)});if(o.anchor){const e=ce(y("#"+o.anchor));if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}bn(s.elts,r);if(o.afterSettleCallback){o.afterSettleCallback()}};if(r.settleDelay>0){E().setTimeout(l,r.settleDelay)}else{l()}}function Je(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=S(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(!X(e)){e={value:e}}he(n,i,e)}}}else{const s=r.split(",");for(let e=0;e<s.length;e++){he(n,s[e].trim(),[])}}}const Ke=/\s/;const x=/[\s,]/;const Ge=/[_$a-zA-Z]/;const Ze=/[_$a-zA-Z0-9]/;const Ye=['"',"'","/"];const We=/[^\s]/;const Qe=/[{(]/;const et=/[})]/;function tt(e){const t=[];let n=0;while(n<e.length){if(Ge.exec(e.charAt(n))){var r=n;while(Ze.exec(e.charAt(n+1))){n++}t.push(e.substr(r,n-r+1))}else if(Ye.indexOf(e.charAt(n))!==-1){const o=e.charAt(n);var r=n;n++;while(n<e.length&&e.charAt(n)!==o){if(e.charAt(n)==="\\"){n++}n++}t.push(e.substr(r,n-r+1))}else{const i=e.charAt(n);t.push(i)}n++}return t}function nt(e,t,n){return Ge.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==n&&t!=="."}function rt(r,o,i){if(o[0]==="["){o.shift();let e=1;let t=" return (function("+i+"){ return (";let n=null;while(o.length>0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=vn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){ae(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(nt(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function b(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function ot(e){let t;if(e.length>0&&Qe.test(e[0])){e.shift();t=b(e,et).trim();e.shift()}else{t=b(e,x)}return t}const it="input, textarea, select";function st(e,t,n){const r=[];const o=tt(t);do{b(o,We);const l=o.length;const u=b(o,/[,\[\s]/);if(u!==""){if(u==="every"){const c={trigger:"every"};b(o,We);c.pollInterval=d(b(o,/[,\[\s]/));b(o,We);var i=rt(e,o,"event");if(i){c.eventFilter=i}r.push(c)}else{const f={trigger:u};var i=rt(e,o,"event");if(i){f.eventFilter=i}while(o.length>0&&o[0]!==","){b(o,We);const a=o.shift();if(a==="changed"){f.changed=true}else if(a==="once"){f.once=true}else if(a==="consume"){f.consume=true}else if(a==="delay"&&o[0]===":"){o.shift();f.delay=d(b(o,x))}else if(a==="from"&&o[0]===":"){o.shift();if(Qe.test(o[0])){var s=ot(o)}else{var s=b(o,x);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=ot(o);if(h.length>0){s+=" "+h}}}f.from=s}else if(a==="target"&&o[0]===":"){o.shift();f.target=ot(o)}else if(a==="throttle"&&o[0]===":"){o.shift();f.throttle=d(b(o,x))}else if(a==="queue"&&o[0]===":"){o.shift();f.queue=b(o,x)}else if(a==="root"&&o[0]===":"){o.shift();f[a]=ot(o)}else if(a==="threshold"&&o[0]===":"){o.shift();f[a]=b(o,x)}else{ae(e,"htmx:syntax:error",{token:o.shift()})}}r.push(f)}}if(o.length===l){ae(e,"htmx:syntax:error",{token:o.shift()})}b(o,We)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function lt(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||st(e,t,r)}if(n.length>0){return n}else if(a(e,"form")){return[{trigger:"submit"}]}else if(a(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(a(e,it)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function ut(e){ie(e).cancelled=true}function ct(e,t,n){const r=ie(e);r.timeout=E().setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!pt(n,e,Xt("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}ct(e,t,n)}},n.pollInterval)}function ft(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function at(e){return g(e,Q.config.disableSelector)}function ht(t,n,e){if(t instanceof HTMLAnchorElement&&ft(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){n.boosted=true;let r,o;if(t.tagName==="A"){r="get";o=ee(t,"href")}else{const i=ee(t,"method");r=i?i.toLowerCase():"get";if(r==="get"){}o=ee(t,"action")}e.forEach(function(e){mt(t,function(e,t){const n=ce(e);if(at(n)){f(n);return}de(r,o,n,t)},n,e,true)})}}function dt(e,t){const n=ce(t);if(!n){return false}if(e.type==="submit"||e.type==="click"){if(n.tagName==="FORM"){return true}if(a(n,'input[type="submit"], button')&&g(n,"form")!==null){return true}if(n instanceof HTMLAnchorElement&&n.href&&(n.getAttribute("href")==="#"||n.getAttribute("href").indexOf("#")!==0)){return true}}return false}function gt(e,t){return ie(e).boosted&&e instanceof HTMLAnchorElement&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function pt(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){const o=r.source;ae(ne().body,"htmx:eventFilter:error",{error:e,source:o});return true}}return false}function mt(s,l,e,u,c){const f=ie(s);let t;if(u.from){t=m(s,u.from)}else{t=[s]}if(u.changed){t.forEach(function(e){const t=ie(e);t.lastValue=e.value})}se(t,function(o){const i=function(e){if(!le(s)){o.removeEventListener(u.trigger,i);return}if(gt(s,e)){return}if(c||dt(e,s)){e.preventDefault()}if(pt(u,s,e)){return}const t=ie(e);t.triggerSpec=u;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(s)<0){t.handledFor.push(s);if(u.consume){e.stopPropagation()}if(u.target&&e.target){if(!a(ce(e.target),u.target)){return}}if(u.once){if(f.triggeredOnce){return}else{f.triggeredOnce=true}}if(u.changed){const n=ie(o);const r=o.value;if(n.lastValue===r){return}n.lastValue=r}if(f.delayed){clearTimeout(f.delayed)}if(f.throttle){return}if(u.throttle>0){if(!f.throttle){l(s,e);f.throttle=E().setTimeout(function(){f.throttle=null},u.throttle)}}else if(u.delay>0){f.delayed=E().setTimeout(function(){l(s,e)},u.delay)}else{he(s,"htmx:trigger");l(s,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:u.trigger,listener:i,on:o});o.addEventListener(u.trigger,i)})}let yt=false;let xt=null;function bt(){if(!xt){xt=function(){yt=true};window.addEventListener("scroll",xt);setInterval(function(){if(yt){yt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){wt(e)})}},200)}}function wt(e){if(!s(e,"data-hx-revealed")&&U(e)){e.setAttribute("data-hx-revealed","true");const t=ie(e);if(t.initHash){he(e,"revealed")}else{e.addEventListener("htmx:afterProcessNode",function(){he(e,"revealed")},{once:true})}}}function vt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;t(e)}};if(r>0){E().setTimeout(o,r)}else{o()}}function St(t,n,e){let i=false;se(v,function(r){if(s(t,"hx-"+r)){const o=te(t,"hx-"+r);i=true;n.path=o;n.verb=r;e.forEach(function(e){Et(t,e,n,function(e,t){const n=ce(e);if(g(n,Q.config.disableSelector)){f(n);return}de(r,o,n,t)})})}});return i}function Et(r,e,t,n){if(e.trigger==="revealed"){bt();mt(r,n,t,e);wt(ce(r))}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=fe(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e<t.length;e++){const n=t[e];if(n.isIntersecting){he(r,"intersect");break}}},o);i.observe(ce(r));mt(ce(r),n,t,e)}else if(e.trigger==="load"){if(!pt(e,r,Xt("load",{elt:r}))){vt(ce(r),n,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ct(ce(r),n,e)}else{mt(r,n,t,e)}}function Ct(e){const t=ce(e);if(!t){return false}const n=t.attributes;for(let e=0;e<n.length;e++){const r=n[e].name;if(l(r,"hx-on:")||l(r,"data-hx-on:")||l(r,"hx-on-")||l(r,"data-hx-on-")){return true}}return false}const Rt=(new XPathEvaluator).createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]');function Ot(e,t){if(Ct(e)){t.push(ce(e))}const n=Rt.evaluate(e);let r=null;while(r=n.iterateNext())t.push(ce(r))}function Ht(e){const t=[];if(e instanceof DocumentFragment){for(const n of e.childNodes){Ot(n,t)}}else{Ot(e,t)}return t}function Tt(e){if(e.querySelectorAll){const n=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";const r=[];for(const i in Xn){const s=Xn[i];if(s.getSelectors){var t=s.getSelectors();if(t){r.push(t)}}}const o=e.querySelectorAll(R+n+", form, [type='submit'],"+" [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]"+r.flat().map(e=>", "+e).join(""));return o}else{return[]}}function qt(e){const t=g(ce(e.target),"button, input[type='submit']");const n=Nt(e);if(n){n.lastButtonClicked=t}}function Lt(e){const t=Nt(e);if(t){t.lastButtonClicked=null}}function Nt(e){const t=g(ce(e.target),"button, input[type='submit']");if(!t){return}const n=y("#"+ee(t,"form"),t.getRootNode())||g(t,"form");if(!n){return}return ie(n)}function At(e){e.addEventListener("click",qt);e.addEventListener("focusin",qt);e.addEventListener("focusout",Lt)}function It(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){vn(t,function(){if(at(t)){return}if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function Pt(t){De(t);for(let e=0;e<t.attributes.length;e++){const n=t.attributes[e].name;const r=t.attributes[e].value;if(l(n,"hx-on")||l(n,"data-hx-on")){const o=n.indexOf("-on")+3;const i=n.slice(o,o+1);if(i==="-"||i===":"){let e=n.slice(o+1);if(l(e,":")){e="htmx"+e}else if(l(e,"-")){e="htmx:"+e.slice(1)}else if(l(e,"htmx-")){e="htmx:"+e.slice(5)}It(t,e,r)}}}}function Dt(t){if(g(t,Q.config.disableSelector)){f(t);return}const n=ie(t);if(n.initHash!==Pe(t)){ke(t);n.initHash=Pe(t);he(t,"htmx:beforeProcessNode");if(t.value){n.lastValue=t.value}const e=lt(t);const r=St(t,n,e);if(!r){if(re(t,"hx-boost")==="true"){ht(t,n,e)}else if(s(t,"hx-trigger")){e.forEach(function(e){Et(t,e,n,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&s(t,"form")){At(t)}he(t,"htmx:afterProcessNode")}}function kt(e){e=y(e);if(g(e,Q.config.disableSelector)){f(e);return}Dt(e);se(Tt(e),function(e){Dt(e)});se(Ht(e),Pt)}function Mt(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function Xt(e,t){let n;if(window.CustomEvent&&typeof window.CustomEvent==="function"){n=new CustomEvent(e,{bubbles:true,cancelable:true,composed:true,detail:t})}else{n=ne().createEvent("CustomEvent");n.initCustomEvent(e,true,true,t)}return n}function ae(e,t,n){he(e,t,ue({error:t},n))}function Ft(e){return e==="htmx:afterProcessNode"}function Ut(e,t){se(jn(e),function(e){try{t(e)}catch(e){w(e)}})}function w(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function he(e,t,n){e=y(e);if(n==null){n={}}n.elt=e;const r=Xt(t,n);if(Q.logger&&!Ft(t)){Q.logger(e,t,n)}if(n.error){w(n.error);he(e,"htmx:error",{errorInfo:n})}let o=e.dispatchEvent(r);const i=Mt(t);if(o&&i!==t){const s=Xt(i,r.detail);o=o&&e.dispatchEvent(s)}Ut(ce(e),function(e){o=o&&(e.onEvent(t,r)!==false&&!r.defaultPrevented)});return o}let Bt=location.pathname+location.search;function jt(){const e=ne().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||ne().body}function Vt(t,e){if(!j()){return}const n=$t(e);const r=ne().title;const o=window.scrollY;if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}t=V(t);const i=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<i.length;e++){if(i[e].url===t){i.splice(e,1);break}}const s={url:t,content:n,title:r,scroll:o};he(ne().body,"htmx:historyItemCreated",{item:s,cache:i});i.push(s);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){ae(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function _t(t){if(!j()){return null}t=V(t);const n=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<n.length;e++){if(n[e].url===t){return n[e]}}return null}function $t(e){const t=Q.config.requestClass;const n=e.cloneNode(true);se(p(n,"."+t),function(e){o(e,t)});return n.innerHTML}function zt(){const e=jt();const t=Bt||location.pathname+location.search;let n;try{n=ne().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){n=ne().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!n){he(ne().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Vt(t,e)}if(Q.config.historyEnabled)history.replaceState({htmx:true},ne().title,window.location.href)}function Jt(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(pe(e,"&")||pe(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Bt=e}function Kt(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Bt=e}function Gt(e){se(e,function(e){e.call(undefined)})}function Zt(o){const e=new XMLHttpRequest;const i={path:o,xhr:e};he(ne().body,"htmx:historyCacheMiss",i);e.open("GET",o,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",ne().location.href);e.onload=function(){if(this.status>=200&&this.status<400){he(ne().body,"htmx:historyCacheMissLoad",i);const e=k(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=jt();const r=xn(n);kn(e.title);Ve(n,t,r);Gt(r.tasks);Bt=o;he(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{ae(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Yt(e){zt();e=e||location.pathname+location.search;const t=_t(e);if(t){const n=k(t.content);const r=jt();const o=xn(r);kn(n.title);Ve(r,n,o);Gt(o.tasks);E().setTimeout(function(){window.scrollTo(0,t.scroll)},0);Bt=e;he(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{Zt(e)}}}function Wt(e){let t=Se(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Qt(e){let t=Se(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function en(e,t){se(e,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function tn(t,n){for(let e=0;e<t.length;e++){const r=t[e];if(r.isSameNode(n)){return true}}return false}function nn(e){const t=e;if(t.name===""||t.name==null||t.disabled||g(t,"fieldset[disabled]")){return false}if(t.type==="button"||t.type==="submit"||t.tagName==="image"||t.tagName==="reset"||t.tagName==="file"){return false}if(t.type==="checkbox"||t.type==="radio"){return t.checked}return true}function rn(t,e,n){if(t!=null&&e!=null){if(Array.isArray(e)){e.forEach(function(e){n.append(t,e)})}else{n.append(t,e)}}}function on(t,n,r){if(t!=null&&n!=null){let e=r.getAll(t);if(Array.isArray(n)){e=e.filter(e=>n.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function sn(t,n,r,o,i){if(o==null||tn(t,o)){return}else{t.push(o)}if(nn(o)){const s=ee(o,"name");let e=o.value;if(o instanceof HTMLSelectElement&&o.multiple){e=F(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o instanceof HTMLInputElement&&o.files){e=F(o.files)}rn(s,e,n);if(i){ln(o,r)}}if(o instanceof HTMLFormElement){se(o.elements,function(e){if(t.indexOf(e)>=0){on(e.name,e.value,n)}else{t.push(e)}if(i){ln(e,r)}});new FormData(o).forEach(function(e,t){if(e instanceof File&&e.name===""){return}rn(t,e,n)})}}function ln(e,t){const n=e;if(n.willValidate){he(n,"htmx:validation:validate");if(!n.checkValidity()){t.push({elt:n,message:n.validationMessage,validity:n.validity});he(n,"htmx:validation:failed",{message:n.validationMessage,validity:n.validity})}}}function un(t,e){for(const n of e.keys()){t.delete(n);e.getAll(n).forEach(function(e){t.append(n,e)})}return t}function cn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=e instanceof HTMLFormElement&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){sn(n,o,i,g(e,"form"),l)}sn(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const c=s.lastButtonClicked||e;const f=ee(c,"name");rn(f,c.value,o)}const u=Se(e,"hx-include");se(u,function(e){sn(n,r,i,ce(e),l);if(!a(e,"form")){se(h(e).querySelectorAll(it),function(e){sn(n,r,i,e,l)})}});un(r,o);return{errors:i,formData:r,values:An(r)}}function fn(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function an(e){e=Ln(e);let n="";e.forEach(function(e,t){n=fn(n,t,e)});return n}function hn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};wn(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function dn(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.substr(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function gn(e){return!!ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function pn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!gn(e)){r.show="top"}if(n){const s=B(n);if(s.length>0){for(let e=0;e<s.length;e++){const l=s[e];if(l.indexOf("swap:")===0){r.swapDelay=d(l.substr(5))}else if(l.indexOf("settle:")===0){r.settleDelay=d(l.substr(7))}else if(l.indexOf("transition:")===0){r.transition=l.substr(11)==="true"}else if(l.indexOf("ignoreTitle:")===0){r.ignoreTitle=l.substr(12)==="true"}else if(l.indexOf("scroll:")===0){const u=l.substr(7);var o=u.split(":");const c=o.pop();var i=o.length>0?o.join(":"):null;r.scroll=c;r.scrollTarget=i}else if(l.indexOf("show:")===0){const f=l.substr(5);var o=f.split(":");const a=o.pop();var i=o.length>0?o.join(":"):null;r.show=a;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.substr("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{w("Unknown modifier in hx-swap: "+l)}}}}return r}function mn(e){return re(e,"hx-encoding")==="multipart/form-data"||a(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function yn(t,n,r){let o=null;Ut(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(mn(n)){return un(new FormData,Ln(r))}else{return an(r)}}}function xn(e){return{tasks:[],elts:[e]}}function bn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ce(fe(n,t.scrollTarget))}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ce(fe(n,e))}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function wn(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.substr(11);t=true}else if(e.indexOf("js:")===0){e=e.substr(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=vn(r,function(){return Function("return ("+e+")")()},{})}else{n=S(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return wn(ce(u(r)),e,o,i)}function vn(e,t,n){if(Q.config.allowEval){return t()}else{ae(e,"htmx:evalDisallowedError");return n}}function Sn(e,t){return wn(e,"hx-vars",true,t)}function En(e,t){return wn(e,"hx-vals",false,t)}function Cn(e){return ue(Sn(e),En(e))}function Rn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function On(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){ae(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function C(e,t){return t.test(e.getAllResponseHeaders())}function Hn(e,t,n){e=e.toLowerCase();if(n){if(n instanceof Element||typeof n==="string"){return de(e,t,null,null,{targetOverride:y(n),returnPromise:true})}else{return de(e,t,y(n.source),n.event,{handler:n.handler,headers:n.headers,values:n.values,targetOverride:y(n.target),swapOverride:n.swap,select:n.select,returnPromise:true})}}else{return de(e,t,null,null,{returnPromise:true})}}function Tn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function qn(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return he(e,"htmx:validateUrl",ue({url:o,sameHost:r},n))}function Ln(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function Nn(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function An(r){return new Proxy(r,{get:function(e,t){if(typeof t==="symbol"){return Reflect.get(e,t)}if(t==="toJSON"){return()=>Object.fromEntries(r)}if(t in e){if(typeof e[t]==="function"){return function(){return r[t].apply(r,arguments)}}else{return e[t]}}const n=r.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return Nn(e,t,n)}},set:function(t,n,e){if(typeof n!=="string"){return false}t.delete(n);if(typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else{t.append(n,e)}return true},deleteProperty:function(e,t){if(typeof t==="string"){e.delete(t)}return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,k){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const M=i.handler||Mn;const X=i.select||null;if(!le(r)){oe(s);return e}const u=i.targetOverride||ce(Ce(r));if(u==null||u==ve){ae(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let c=ie(r);const f=c.lastButtonClicked;if(f){const L=ee(f,"formaction");if(L!=null){n=L}const N=ee(f,"formmethod");if(N!=null){if(N.toLowerCase()!=="dialog"){t=N}}}const a=re(r,"hx-confirm");if(k===undefined){const K=function(e){return de(t,n,r,o,i,!!e)};const G={target:u,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:K,question:a};if(he(r,"htmx:confirm",G)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const A=d.split(":");const I=A[0].trim();if(I==="this"){h=Ee(r,"hx-sync")}else{h=ce(fe(r,I))}d=(A[1]||"drop").trim();c=ie(h);if(d==="drop"&&c.xhr&&c.abortable!==true){oe(s);return e}else if(d==="abort"){if(c.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){he(h,"htmx:abort")}else if(d.indexOf("queue")===0){const Z=d.split(" ");g=(Z[1]||"last").trim()}}if(c.xhr){if(c.abortable){he(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(c.queuedRequests==null){c.queuedRequests=[]}if(g==="first"&&c.queuedRequests.length===0){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){c.queuedRequests=[];c.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;c.xhr=p;c.abortable=F;const m=function(){c.xhr=null;c.abortable=false;if(c.queuedRequests!=null&&c.queuedRequests.length>0){const e=c.queuedRequests.shift();e()}};const U=re(r,"hx-prompt");if(U){var y=prompt(U);if(y===null||!he(r,"htmx:prompt",{prompt:y,target:u})){oe(s);m();return e}}if(a&&!k){if(!confirm(a)){oe(s);m();return e}}let x=hn(r,u,y);if(t!=="get"&&!mn(r)){x["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){x=ue(x,i.headers)}const B=cn(r,t);let b=B.errors;const j=B.formData;if(i.values){un(j,Ln(i.values))}const V=Ln(Cn(r));const w=un(j,V);let v=dn(w,r);if(Q.config.getCacheBusterParam&&t==="get"){v.set("org.htmx.cache-buster",ee(u,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=wn(r,"hx-request");const _=ie(r).boosted;let E=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const C={boosted:_,useUrlParams:E,formData:v,parameters:An(v),unfilteredFormData:w,unfilteredParameters:An(w),headers:x,target:u,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!he(r,"htmx:configRequest",C)){oe(s);m();return e}n=C.path;t=C.verb;x=C.headers;v=Ln(C.parameters);b=C.errors;E=C.useUrlParams;if(b&&b.length>0){he(r,"htmx:validation:halted",C);oe(s);m();return e}const $=n.split("#");const z=$[0];const R=$[1];let O=n;if(E){O=z;const Y=!v.keys().next().done;if(Y){if(O.indexOf("?")<0){O+="?"}else{O+="&"}O+=an(v);if(R){O+="#"+R}}}if(!qn(r,O,C)){ae(r,"htmx:invalidPath",C);oe(l);return e}p.open(t.toUpperCase(),O,true);p.overrideMimeType("text/html");p.withCredentials=C.withCredentials;p.timeout=C.timeout;if(S.noHeaders){}else{for(const D in x){if(x.hasOwnProperty(D)){const W=x[D];Rn(p,D,W)}}}const H={xhr:p,target:u,requestConfig:C,etc:i,boosted:_,select:X,pathInfo:{requestPath:n,finalRequestPath:O,responsePath:null,anchor:R}};p.onload=function(){try{const t=Tn(r);H.pathInfo.responsePath=On(p);M(r,H);en(T,q);he(r,"htmx:afterRequest",H);he(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){he(e,"htmx:afterRequest",H);he(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){ae(r,"htmx:onLoadError",ue({error:e},H));throw e}};p.onerror=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:timeout",H);oe(l);m()};if(!he(r,"htmx:beforeRequest",H)){oe(s);m();return e}var T=Wt(r);var q=Qt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){he(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});he(r,"htmx:beforeSend",H);const J=E?null:yn(p,r,v);p.send(J);return e}function In(e,t){const n=t.xhr;let r=null;let o=null;if(C(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(C(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(C(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const u=re(e,"hx-replace-url");const c=ie(e).boosted;let f=null;let a=null;if(l){f="push";a=l}else if(u){f="replace";a=u}else if(c){f="push";a=s||i}if(a){if(a==="false"){return{}}if(a==="true"){a=s||i}if(t.pathInfo.anchor&&a.indexOf("#")===-1){a=a+"#"+t.pathInfo.anchor}return{type:f,path:a}}else{return{}}}function Pn(e,t){var n=new RegExp(e.code);return n.test(t.toString(10))}function Dn(e){for(var t=0;t<Q.config.responseHandling.length;t++){var n=Q.config.responseHandling[t];if(Pn(n,e.status)){return n}}return{swap:false}}function kn(e){if(e){const t=r("title");if(t){t.innerHTML=e}else{window.document.title=e}}}function Mn(o,i){const s=i.xhr;let l=i.target;const e=i.etc;const u=i.select;if(!he(o,"htmx:beforeOnLoad",i))return;if(C(s,/HX-Trigger:/i)){Je(s,"HX-Trigger",o)}if(C(s,/HX-Location:/i)){zt();let e=s.getResponseHeader("HX-Location");var t;if(e.indexOf("{")===0){t=S(e);e=t.path;delete t.path}Hn("get",e,t).then(function(){Jt(e)});return}const n=C(s,/HX-Refresh:/i)&&s.getResponseHeader("HX-Refresh")==="true";if(C(s,/HX-Redirect:/i)){location.href=s.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}const c=In(o,i);const r=Dn(s);const f=r.swap;let a=!!r.error;let h=Q.config.ignoreTitle||r.ignoreTitle;let d=r.select;if(r.target){i.target=ce(fe(o,r.target))}var g=e.swapOverride;if(g==null&&r.swapOverride){g=r.swapOverride}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var p=s.response;var m=ue({shouldSwap:f,serverResponse:p,isError:a,ignoreTitle:h,selectOverride:d},i);if(r.event&&!he(l,r.event,m))return;if(!he(l,"htmx:beforeSwap",m))return;l=m.target;p=m.serverResponse;a=m.isError;h=m.ignoreTitle;d=m.selectOverride;i.target=l;i.failed=a;i.successful=!a;if(m.shouldSwap){if(s.status===286){ut(o)}Ut(o,function(e){p=e.transformResponse(p,s,o)});if(c.type){zt()}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var y=pn(o,g);if(!y.hasOwnProperty("ignoreTitle")){y.ignoreTitle=h}l.classList.add(Q.config.swappingClass);let n=null;let r=null;if(u){d=u}if(C(s,/HX-Reselect:/i)){d=s.getResponseHeader("HX-Reselect")}const x=re(o,"hx-select-oob");const b=re(o,"hx-select");let e=function(){try{if(c.type){he(ne().body,"htmx:beforeHistoryUpdate",ue({history:c},i));if(c.type==="push"){Jt(c.path);he(ne().body,"htmx:pushedIntoHistory",{path:c.path})}else{Kt(c.path);he(ne().body,"htmx:replacedInHistory",{path:c.path})}}ze(l,p,y,{select:d||b,selectOOB:x,eventInfo:i,anchor:i.pathInfo.anchor,contextElement:o,afterSwapCallback:function(){if(C(s,/HX-Trigger-After-Swap:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Swap",e)}},afterSettleCallback:function(){if(C(s,/HX-Trigger-After-Settle:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Settle",e)}oe(n)}})}catch(e){ae(o,"htmx:swapError",i);oe(r);throw e}};let t=Q.config.globalViewTransitions;if(y.hasOwnProperty("transition")){t=y.transition}if(t&&he(o,"htmx:beforeTransition",i)&&typeof Promise!=="undefined"&&document.startViewTransition){const w=new Promise(function(e,t){n=e;r=t});const v=e;e=function(){document.startViewTransition(function(){v();return w})}}if(y.swapDelay>0){E().setTimeout(e,y.swapDelay)}else{e()}}if(a){ae(o,"htmx:responseError",ue({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const Xn={};function Fn(){return{init:function(e){return null},getSelectors:function(){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function Un(e,t){if(t.init){t.init(n)}Xn[e]=ue(Fn(),t)}function Bn(e){delete Xn[e]}function jn(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=Xn[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return jn(ce(u(e)),n,r)}var Vn=false;ne().addEventListener("DOMContentLoaded",function(){Vn=true});function _n(e){if(Vn||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function $n(){if(Q.config.includeIndicatorStyles!==false){const e=Q.config.inlineStyleNonce?` nonce="${Q.config.inlineStyleNonce}"`:"";ne().head.insertAdjacentHTML("beforeend","<style"+e+"> ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} </style>")}}function zn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function Jn(){const e=zn();if(e){Q.config=ue(Q.config,e)}}_n(function(){Jn();$n();let e=ne().body;kt(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Yt();se(t,function(e){he(e,"htmx:restored",{document:ne(),triggerEvent:he})})}else{if(n){n(e)}}};E().setTimeout(function(){he(e,"htmx:load",{});e=null},0)});return Q}();
\ No newline at end of file
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index cf74707b51e4..adf9f6c51e49 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -614,6 +614,16 @@ drupal.form:
- core/drupal.debounce
- core/once
+drupal.htmx:
+ version: VERSION
+ js:
+ misc/htmx.js: {}
+ dependencies:
+ - core/drupal
+ - core/drupalSettings
+ - core/htmx
+ - core/loadjs
+
drupal.machine-name:
version: VERSION
js:
@@ -782,6 +792,28 @@ drupal.vertical-tabs:
- core/drupalSettings
- core/drupal.form
+htmx:
+ remote: https://github.com/bigskysoftware/htmx
+ version: "2.0.1"
+ license:
+ name: Zero-Clause BSD
+ url: https://github.com/bigskysoftware/htmx/blob/master/LICENSE
+ gpl-compatible: true
+ js:
+ assets/vendor/htmx/htmx.min.js: { minified: true }
+
+htmx.debug:
+ remote: https://github.com/bigskysoftware/htmx-extensions
+ version: "2.0.1"
+ license:
+ name: Zero-Clause BSD
+ url: https://github.com/bigskysoftware/htmx-extensions/blob/dev/src/debug/LICENSE
+ gpl-compatible: true
+ js:
+ assets/vendor/htmx/debug.js: {}
+ dependencies:
+ - core/htmx
+
internal.floating-ui:
remote: https://github.com/floating-ui/floating-ui
version: "1.6.12"
diff --git a/core/core.services.yml b/core/core.services.yml
index 4372e6512c3e..491d9d7d997e 100644
--- a/core/core.services.yml
+++ b/core/core.services.yml
@@ -1400,6 +1400,14 @@ services:
html_response.subscriber:
class: Drupal\Core\EventSubscriber\HtmlResponseSubscriber
arguments: ['@html_response.attachments_processor']
+ htmx_response.attachments_processor:
+ class: Drupal\Core\Ajax\HtmxResponseAttachmentsProcessor
+ arguments: [ '@asset.resolver', '@config.factory', '@asset.css.collection_renderer', '@asset.js.collection_renderer', '@request_stack', '@renderer', '@module_handler', '@language_manager' ]
+ htmx.response_subscriber:
+ class: Drupal\Core\EventSubscriber\HtmxResponseSubscriber
+ arguments: [ '@request_stack', '@htmx_response.attachments_processor' ]
+ tags:
+ - { name: event_subscriber }
finish_response_subscriber:
class: Drupal\Core\EventSubscriber\FinishResponseSubscriber
arguments: ['@language_manager', '@config.factory', '@page_cache_request_policy', '@page_cache_response_policy', '@cache_contexts_manager', '@datetime.time', '%http.response.debug_cacheability_headers%']
diff --git a/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php b/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
new file mode 100644
index 000000000000..76ca1f67197e
--- /dev/null
+++ b/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace Drupal\Core\Ajax;
+
+use Drupal\Component\Serialization\Json;
+use Drupal\Core\Asset\AttachedAssetsInterface;
+use Drupal\Core\Render\AttachmentsInterface;
+use Drupal\Core\Render\HtmlResponse;
+use Drupal\Core\Render\HtmlResponseAttachmentsProcessor;
+
+/**
+ * Prepares attachment for HTMX powered responses.
+ *
+ * Extends the HTML response processor encode attachment data.
+ *
+ * @see \Drupal\Core\EventSubscriber\HtmxResponseSubscriber
+ * @see \Drupal\Core\Render\HtmlResponseAttachmentsProcessor::processAttachments
+ * @see core/misc/htmx.js
+ */
+class HtmxResponseAttachmentsProcessor extends HtmlResponseAttachmentsProcessor {
+
+ /**
+ * Json encoded string of event name and assets to be attached.
+ */
+ protected string $preparedAssetInfo;
+
+ /**
+ * {@inheritdoc}
+ */
+ public function processAttachments(AttachmentsInterface $response): HtmlResponse {
+ $processed = parent::processAttachments($response);
+ if (!($processed instanceof HtmlResponse)) {
+ // Something has gone wrong. We sent an HtmlResponse that also
+ // implemented AttachmentInterface and should have received the same back.
+ throw new \TypeError("HtmlResponseAttachmentsProcessor::processAttachments should return an HtmlResponse.");
+ }
+ $processed->headers->set('HX-Trigger-After-Swap', $this->preparedAssetInfo);
+ return $processed;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function processAssetLibraries(AttachedAssetsInterface $assets, array $placeholders) {
+ $settings = [];
+ $variables = [];
+ $maintenance_mode = defined('MAINTENANCE_MODE') || \Drupal::state()->get('system.maintenance_mode');
+
+ // Print styles - if present.
+ if (isset($placeholders['styles'])) {
+ // Optimize CSS if necessary, but only during normal site operation.
+ $optimize_css = !$maintenance_mode && $this->config->get('css.preprocess');
+ $variables['styles'] = $this->cssCollectionRenderer->render($this->assetResolver->getCssAssets($assets, $optimize_css, $this->languageManager->getCurrentLanguage()));
+ }
+
+ // Copy and adjust parent::processAssetLibraries to adjust and
+ // remove drupalSettings in line with
+ // AjaxResponseAttachmentsProcessor::buildAttachmentsCommands
+ // Print scripts - if any are present.
+ if (isset($placeholders['scripts']) || isset($placeholders['scripts_bottom'])) {
+ // Optimize JS if necessary, but only during normal site operation.
+ $optimize_js = !$maintenance_mode && $this->config->get('js.preprocess');
+ [$js_assets_header, $js_assets_footer] = $this->assetResolver
+ ->getJsAssets($assets, $optimize_js, $this->languageManager->getCurrentLanguage());
+ $settingsHeader = $js_assets_header['drupalSettings'] ?? NULL;
+ $settingsFooter = $js_assets_footer['drupalSettings'] ?? NULL;
+ if (is_array($settingsHeader)) {
+ $settings = $js_assets_header['drupalSettings']['data'];
+ unset($js_assets_header['drupalSettings']);
+ }
+ if (is_array($settingsFooter)) {
+ $settings = $js_assets_footer['drupalSettings']['data'];
+ unset($js_assets_footer['drupalSettings']);
+ }
+ if (empty($settings)) {
+ $settings = $assets->getSettings();
+ }
+ $variables['scripts'] = $this->jsCollectionRenderer->render($js_assets_header);
+ $variables['scripts_bottom'] = $this->jsCollectionRenderer->render($js_assets_footer);
+ unset($settings['path']);
+ $variables['settings'] = $settings;
+ }
+ // Store the prepared asset data so that it can be added to the response.
+ $data = [
+ 'htmxDrupalAssetsAttached' => [
+ 'assets' => $variables,
+ ],
+ ];
+ $this->preparedAssetInfo = Json::encode($data);
+ // Restore assets for a standard page so that HTML state is preserved.
+ if (is_array($settingsHeader)) {
+ $js_assets_header['drupalSettings'] = $settingsHeader;
+ $variables['scripts'] = $this->jsCollectionRenderer->render($js_assets_header);
+ }
+ if (is_array($settingsFooter)) {
+ $js_assets_footer['drupalSettings'] = $settingsFooter;
+ $variables['scripts_bottom'] = $this->jsCollectionRenderer->render($js_assets_footer);
+ }
+ return $variables;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/EventSubscriber/HtmxResponseSubscriber.php b/core/lib/Drupal/Core/EventSubscriber/HtmxResponseSubscriber.php
new file mode 100644
index 000000000000..1a0fa2170317
--- /dev/null
+++ b/core/lib/Drupal/Core/EventSubscriber/HtmxResponseSubscriber.php
@@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Core\EventSubscriber;
+
+use Drupal\Core\Render\AttachmentsResponseProcessorInterface;
+use Drupal\Core\Render\HtmlResponse;
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\HttpKernel\Event\ResponseEvent;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+/**
+ * Adds assets to a header value on responses to HTMX requests.
+ *
+ * Process all attachments before the attachments are rendered in
+ * HtmlResponseSubscriber.
+ *
+ * @see \Drupal\Core\Ajax\HtmxResponseAttachmentsProcessor
+ */
+final class HtmxResponseSubscriber implements EventSubscriberInterface {
+
+ /**
+ * Constructs a HtmxResponseSubscriber object.
+ */
+ public function __construct(
+ private readonly RequestStack $requestStack,
+ private readonly AttachmentsResponseProcessorInterface $attachmentsProcessor,
+ ) {}
+
+ /**
+ * Add assemble and attachments add HTMX attributes.
+ *
+ * @see \Drupal\Core\EventSubscriber\HtmlResponseSubscriber::onRespond
+ */
+ public function onRespond(ResponseEvent $event): void {
+ $response = $event->getResponse();
+ $requestHeaders = $this->requestStack->getCurrentRequest()->headers;
+ if (!($response instanceof HtmlResponse && $requestHeaders->has('HX-Request'))) {
+ // Only operate on HTML responses from an HTMX request.
+ return;
+ }
+ $processedResponse = $this->attachmentsProcessor->processAttachments($response);
+ if (!($processedResponse instanceof HtmlResponse)) {
+ throw new \TypeError("ResponseEvent::setResponse() requires an HtmlResponse object");
+ }
+ $event->setResponse($processedResponse);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public static function getSubscribedEvents(): array {
+ return [
+ // Our method needs to run before the HtmlResponseSubscriber(weight 0).
+ KernelEvents::RESPONSE => ['onRespond', 100],
+ ];
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Form/FormBase.php b/core/lib/Drupal/Core/Form/FormBase.php
index d88810943acd..4892e20cdf5e 100644
--- a/core/lib/Drupal/Core/Form/FormBase.php
+++ b/core/lib/Drupal/Core/Form/FormBase.php
@@ -194,6 +194,28 @@ protected function currentUser() {
return \Drupal::currentUser();
}
+ /**
+ * True if the HX-Request header was present on the request.
+ *
+ * @return bool
+ * Is this an HTMX request?
+ */
+ public function isHtmxRequest(): bool {
+ $request = $this->getRequest();
+ return $request->headers->has('HX-Request');
+ }
+
+ /**
+ * Returns the HTMX trigger value stored from the request.
+ *
+ * @return string
+ * The trigger name or empty string if the header is not present.
+ */
+ public function getHtmxTrigger(): string {
+ $request = $this->getRequest();
+ return $request->headers->get('HX-Trigger', '');
+ }
+
/**
* Returns a redirect response object for the specified route.
*
diff --git a/core/lib/Drupal/Core/Form/FormBuilder.php b/core/lib/Drupal/Core/Form/FormBuilder.php
index ee3e4893feca..cccb28ca406b 100644
--- a/core/lib/Drupal/Core/Form/FormBuilder.php
+++ b/core/lib/Drupal/Core/Form/FormBuilder.php
@@ -16,7 +16,9 @@
use Drupal\Core\Render\Element;
use Drupal\Core\Render\ElementInfoManagerInterface;
use Drupal\Core\Security\TrustedCallbackInterface;
+use Drupal\Core\Template\HtmxAttribute;
use Drupal\Core\Theme\ThemeManagerInterface;
+use Symfony\Component\HttpFoundation\Request;
use Symfony\Contracts\EventDispatcher\EventDispatcherInterface;
use Symfony\Component\HttpFoundation\FileBag;
use Symfony\Component\HttpFoundation\InputBag;
@@ -302,8 +304,10 @@ public function buildForm($form_arg, FormStateInterface &$form_state) {
}
}
- // If this form is an AJAX request, disable all form redirects.
- if ($ajax_form_request = $request->query->has(static::AJAX_FORM_REQUEST)) {
+ // If this form is a jQuery AJAX request, or an HTMX request disable all
+ // form redirects.
+ $ajax_form_request = $request->query->has(static::AJAX_FORM_REQUEST);
+ if ($ajax_form_request || $this->isHtmxRequest($request)) {
$form_state->disableRedirect();
}
@@ -602,6 +606,19 @@ public function processForm($form_id, &$form, FormStateInterface &$form_state) {
return;
}
+ // If a form from an HTMX request is still processing at this point it
+ // was not submitted. The form_build_id value needs to be restored if
+ // the form rebuilds.
+ // @see \Drupal\Core\Form\EventSubscriber\FormAjaxSubscriber::onException
+ // @see Drupal.AjaxCommands.update_build_id
+ if ($this->isHtmxRequest()) {
+ // Restore the build id that was sent with the request. It will be used
+ // after the rebuild to cache the rebuilt form.
+ $form_state->addRebuildInfo('copy', ['#build_id' => TRUE]);
+ $input = $form_state->getUserInput();
+ $form['#build_id'] = $input['form_build_id'];
+ }
+
// If $form_state->isRebuilding() has been set and input has been
// processed without validation errors, we are in a multi-step workflow
// that is not yet complete. A new $form needs to be constructed based on
@@ -1299,7 +1316,7 @@ protected function handleInputElement($form_id, &$element, FormStateInterface &$
// \Drupal\Core\Form\FormState::cleanValues(). Enforce the same input
// processing restrictions as above.
if ($process_input) {
- // Detect if the element triggered the submission via Ajax.
+ // Detect if the element triggered the submission via Ajax or HTMX.
if ($this->elementTriggeredScriptedSubmission($element, $form_state)) {
$form_state->setTriggeringElement($element);
}
@@ -1342,6 +1359,12 @@ protected function handleInputElement($form_id, &$element, FormStateInterface &$
*/
protected function elementTriggeredScriptedSubmission($element, FormStateInterface &$form_state) {
$input = $form_state->getUserInput();
+ if ($this->isHtmxRequest()) {
+ if (isset($element['#attributes']['data-drupal-selector']) && $element['#attributes']['data-drupal-selector'] === $this->getHtmxTrigger()) {
+ // @see htmxDrupalData() in core/misc/htmx.js.
+ return TRUE;
+ }
+ }
if (!empty($input['_triggering_element_name']) && $element['#name'] == $input['_triggering_element_name']) {
if (empty($input['_triggering_element_value']) || $input['_triggering_element_value'] == $element['#value']) {
return TRUE;
@@ -1419,6 +1442,38 @@ protected function currentUser() {
return $this->currentUser;
}
+ /**
+ * True if the HX-Request header was present on the request.
+ *
+ * @param \Symfony\Component\HttpFoundation\Request|null $request
+ * A Request to use. If omitted, the current request on the stack is used.
+ *
+ * @return bool
+ * Is this an HTMX request?
+ */
+ public function isHtmxRequest(?Request $request = NULL): bool {
+ if (!($request instanceof Request)) {
+ $request = $this->requestStack->getCurrentRequest();
+ }
+ return $request->headers->has('HX-Request');
+ }
+
+ /**
+ * Returns the HTMX trigger value stored from the request.
+ *
+ * @param \Symfony\Component\HttpFoundation\Request|null $request
+ * A Request to use. If omitted, the current request on the stack is used.
+ *
+ * @return string
+ * The trigger name or empty string if the header is not present.
+ */
+ public function getHtmxTrigger(?Request $request = NULL): string {
+ if (!($request instanceof Request)) {
+ $request = $this->requestStack->getCurrentRequest();
+ }
+ return $request->headers->get('HX-Trigger', '');
+ }
+
/**
* {@inheritdoc}
*/
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index 451df8a0e369..29d4fb707edb 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -7,6 +7,7 @@
use Drupal\Core\Plugin\PluginBase;
use Drupal\Core\Render\BubbleableMetadata;
use Drupal\Core\Render\Element;
+use Drupal\Core\Template\AttributeHelper;
use Drupal\Core\Url;
/**
@@ -49,8 +50,8 @@
* See the "Attaching libraries in render arrays" section of the
* @link theme_render Render API topic @endlink for an overview, and
* \Drupal\Core\Render\AttachmentsResponseProcessorInterface::processAttachments
- * for a list of what this can contain. Besides this list, it may also contain
- * a 'placeholders' element; see the Placeholders section of the
+ * for a list of what this can contain. Besides this list, it may also
+ * contain a 'placeholders' element; see the Placeholders section of the
* @link theme_render Render API topic @endlink for an overview.
* - #attributes: (array) HTML attributes for the element. The first-level
* keys are the attribute names, such as 'class', and the attributes are
@@ -434,6 +435,38 @@ public static function preRenderAjaxForm($element) {
return $element;
}
+ /**
+ * @param mixed[] $element
+ * The render array for the element.
+ *
+ * @return mixed[]
+ * The modified array with HTMX library attachments, if appropriate.
+ */
+ public static function preProcessHtmxElement(array $element): array {
+ $processed = $element['#htmx_processed'] ?? FALSE;
+ // Skip already processed elements.
+ if ($processed) {
+ return $element;
+ }
+ // Initialize #htmx_processed, so we do not process this element again.
+ $element['#htmx_processed'] = FALSE;
+
+ // Nothing to do if there are no Ajax settings.
+ if (empty($element['#htmx'])) {
+ return $element;
+ }
+
+ // Attach HTMX and integration javascript.
+ $element['#attached']['library'][] = 'core/drupal.htmx';
+ $element['#attributes'] = $element['#attributes'] ?? [];
+ $element['#attributes'] = AttributeHelper::mergeCollections($element['#attributes'], $element['#htmx']);
+
+
+ // Indicate that HTMX processing was successful.
+ $element['#htmx_processed'] = TRUE;
+ return $element;
+ }
+
/**
* Arranges elements into groups.
*
diff --git a/core/lib/Drupal/Core/Render/Element/Select.php b/core/lib/Drupal/Core/Render/Element/Select.php
index 094b963212bd..bae2ffe8ac9d 100644
--- a/core/lib/Drupal/Core/Render/Element/Select.php
+++ b/core/lib/Drupal/Core/Render/Element/Select.php
@@ -98,6 +98,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processSelect'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preProcessHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderSelect'],
diff --git a/core/lib/Drupal/Core/Render/Element/Textarea.php b/core/lib/Drupal/Core/Render/Element/Textarea.php
index c3fc60219244..698c6ceaf18c 100644
--- a/core/lib/Drupal/Core/Render/Element/Textarea.php
+++ b/core/lib/Drupal/Core/Render/Element/Textarea.php
@@ -41,6 +41,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAjaxForm'],
[static::class, 'processGroup'],
+ [static::class, 'preProcessHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderGroup'],
diff --git a/core/lib/Drupal/Core/Template/Attribute.php b/core/lib/Drupal/Core/Template/Attribute.php
index 77a56689219d..104464dba835 100644
--- a/core/lib/Drupal/Core/Template/Attribute.php
+++ b/core/lib/Drupal/Core/Template/Attribute.php
@@ -4,8 +4,6 @@
use Drupal\Component\Render\PlainTextOutput;
use Drupal\Component\Render\MarkupInterface;
-use Drupal\Component\Utility\NestedArray;
-use Drupal\Core\Serialization\Attribute\JsonSchema;
/**
* Collects, sanitizes, and renders HTML attributes.
@@ -67,14 +65,16 @@
* @see \Drupal\Component\Render\PlainTextOutput::renderFromHtml()
* @see \Drupal\Component\Utility\UrlHelper::stripDangerousProtocols()
*/
-class Attribute implements \ArrayAccess, \IteratorAggregate, MarkupInterface {
+class Attribute implements HtmlAttributeInterface, \ArrayAccess {
+
+ use HtmlAttributeTrait;
/**
* Stores the attribute data.
*
* @var \Drupal\Core\Template\AttributeValueBase[]
*/
- protected $storage = [];
+ protected array $storage = [];
/**
* Constructs a \Drupal\Core\Template\Attribute object.
@@ -91,7 +91,7 @@ public function __construct($attributes = []) {
/**
* {@inheritdoc}
*/
- public function offsetGet($name): mixed {
+ public function offsetGet($name): ?AttributeValueBase {
if (isset($this->storage[$name])) {
return $this->storage[$name];
}
@@ -123,7 +123,7 @@ public function offsetSet($name, $value): void {
* @return \Drupal\Core\Template\AttributeValueBase
* An AttributeValueBase representation of the attribute's value.
*/
- protected function createAttributeValue($name, $value) {
+ protected function createAttributeValue($name, $value): AttributeValueBase {
// If the value is already an AttributeValueBase object,
// return a new instance of the same class, but with the new name.
if ($value instanceof AttributeValueBase) {
@@ -180,7 +180,7 @@ public function offsetExists($name): bool {
*
* @return $this
*/
- public function addClass(...$args) {
+ public function addClass(...$args): self {
if ($args) {
$classes = [];
foreach ($args as $arg) {
@@ -215,7 +215,7 @@ public function addClass(...$args) {
*
* @return $this
*/
- public function setAttribute($attribute, $value) {
+ public function setAttribute($attribute, $value): self {
$this->offsetSet($attribute, $value);
return $this;
@@ -230,7 +230,7 @@ public function setAttribute($attribute, $value) {
* @return bool
* Returns TRUE if the attribute exists, or FALSE otherwise.
*/
- public function hasAttribute($name) {
+ public function hasAttribute($name): bool {
return array_key_exists($name, $this->storage);
}
@@ -242,7 +242,7 @@ public function hasAttribute($name) {
*
* @return $this
*/
- public function removeAttribute(...$args) {
+ public function removeAttribute(...$args): self {
foreach ($args as $arg) {
// Support arrays or multiple arguments.
if (is_array($arg)) {
@@ -266,7 +266,7 @@ public function removeAttribute(...$args) {
*
* @return $this
*/
- public function removeClass(...$args) {
+ public function removeClass(...$args): self {
// With no class attribute, there is no need to remove.
if (isset($this->storage['class']) && $this->storage['class'] instanceof AttributeArray) {
$classes = [];
@@ -291,12 +291,12 @@ public function removeClass(...$args) {
*
* This method is implemented to take precedence over hasClass() for Twig 2.0.
*
- * @return \Drupal\Core\Template\AttributeValueBase
+ * @return \Drupal\Core\Template\AttributeArray
* The class attribute value if set.
*
* @see twig_get_attribute()
*/
- public function getClass() {
+ public function getClass(): AttributeArray {
return $this->offsetGet('class');
}
@@ -309,7 +309,7 @@ public function getClass() {
* @return bool
* Returns TRUE if the class exists, or FALSE otherwise.
*/
- public function hasClass($class) {
+ public function hasClass($class): bool {
if (isset($this->storage['class']) && $this->storage['class'] instanceof AttributeArray) {
return in_array($class, $this->storage['class']->value());
}
@@ -318,37 +318,6 @@ public function hasClass($class) {
}
}
- /**
- * Implements the magic __toString() method.
- */
- #[JsonSchema(['type' => 'string', 'description' => 'Rendered HTML element attributes'])]
- public function __toString() {
- $return = '';
- /** @var \Drupal\Core\Template\AttributeValueBase $value */
- foreach ($this->storage as $value) {
- $rendered = $value->render();
- if ($rendered) {
- $return .= ' ' . $rendered;
- }
- }
- return $return;
- }
-
- /**
- * Returns all storage elements as an array.
- *
- * @return array
- * An associative array of attributes.
- */
- public function toArray() {
- $return = [];
- foreach ($this->storage as $name => $value) {
- $return[$name] = $value->value();
- }
-
- return $return;
- }
-
/**
* Implements the magic __clone() method.
*/
@@ -366,36 +335,17 @@ public function getIterator(): \ArrayIterator {
}
/**
- * Returns the whole array.
- */
- public function storage() {
- return $this->storage;
- }
-
- /**
- * Returns a representation of the object for use in JSON serialization.
- *
- * @return string
- * The safe string content.
+ * {@inheritdoc}
*/
- public function jsonSerialize(): string {
- return (string) $this;
+ public function count(): int {
+ return count($this->storage);
}
/**
- * Merges an Attribute object into the current storage.
- *
- * @param \Drupal\Core\Template\Attribute $collection
- * The Attribute object to merge.
- *
- * @return $this
+ * Returns the whole array.
*/
- public function merge(Attribute $collection) {
- $merged_attributes = NestedArray::mergeDeep($this->toArray(), $collection->toArray());
- foreach ($merged_attributes as $name => $value) {
- $this->storage[$name] = $this->createAttributeValue($name, $value);
- }
- return $this;
+ public function storage(): array {
+ return $this->storage;
}
}
diff --git a/core/lib/Drupal/Core/Template/AttributeHelper.php b/core/lib/Drupal/Core/Template/AttributeHelper.php
index c4b0fbfa1e54..96501020e68a 100644
--- a/core/lib/Drupal/Core/Template/AttributeHelper.php
+++ b/core/lib/Drupal/Core/Template/AttributeHelper.php
@@ -2,6 +2,7 @@
namespace Drupal\Core\Template;
+use Drupal\Component\Plugin\Attribute\AttributeInterface;
use Drupal\Component\Utility\NestedArray;
/**
@@ -22,7 +23,7 @@ private function __construct() {
*
* @param string $name
* The name of the attribute to check for.
- * @param \Drupal\Core\Template\Attribute|array $collection
+ * @param HtmlAttributeInterface|array $collection
* An Attribute object or an array of attributes.
*
* @return bool
@@ -32,7 +33,7 @@ private function __construct() {
* When the input $collection is neither an Attribute object nor an array.
*/
public static function attributeExists($name, $collection) {
- if ($collection instanceof Attribute) {
+ if ($collection instanceof HtmlAttributeInterface) {
return $collection->hasAttribute($name);
}
elseif (is_array($collection)) {
@@ -44,32 +45,33 @@ public static function attributeExists($name, $collection) {
/**
* Merges two attribute collections.
*
- * @param \Drupal\Core\Template\Attribute|array $a
+ * @param HtmlAttributeInterface|array $a
* First Attribute object or array to merge. The returned value type will
* be the same as the type of this argument.
- * @param \Drupal\Core\Template\Attribute|array $b
+ * @param HtmlAttributeInterface|array $b
* Second Attribute object or array to merge.
*
- * @return \Drupal\Core\Template\Attribute|array
- * The merged attributes, as an Attribute object or an array.
+ * @return \Drupal\Core\Template\Attribute
+ * The merged attributes, as an Attribute object.
*
* @throws \InvalidArgumentException
* If at least one collection argument is neither an Attribute object nor an
* array.
*/
public static function mergeCollections($a, $b) {
- if (!($a instanceof Attribute || is_array($a)) || !($b instanceof Attribute || is_array($b))) {
+ if (!($a instanceof HtmlAttributeInterface || is_array($a)) || !($b instanceof HtmlAttributeInterface || is_array($b))) {
throw new \InvalidArgumentException('Invalid collection argument');
}
// If both collections are arrays, just merge them.
if (is_array($a) && is_array($b)) {
return NestedArray::mergeDeep($a, $b);
}
- // If at least one collections is an Attribute object, merge through
- // Attribute::merge.
+ // Merge through Attribute::merge.
$merge_a = $a instanceof Attribute ? $a : new Attribute($a);
$merge_b = $b instanceof Attribute ? $b : new Attribute($b);
$merge_a->merge($merge_b);
+ // If we started with an Attribute, return an Attribute.
+ // If we started with an array, return an array.
return $a instanceof Attribute ? $merge_a : $merge_a->toArray();
}
diff --git a/core/lib/Drupal/Core/Template/AttributeJson.php b/core/lib/Drupal/Core/Template/AttributeJson.php
new file mode 100644
index 000000000000..61f24ef7fda8
--- /dev/null
+++ b/core/lib/Drupal/Core/Template/AttributeJson.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Drupal\Core\Template;
+
+use Drupal\Component\Utility\Xss;
+
+/**
+ * Represents an attribute containing JSON formatted data.
+ */
+class AttributeJson extends AttributeValueBase {
+
+ const RENDER_EMPTY_ATTRIBUTE = FALSE;
+
+ /**
+ * Encode the array as JSON.
+ *
+ * @return string
+ * The JSON encoded array or empty string on failure.
+ */
+ public function __toString() {
+ $value = $this->value();
+ $value = is_array($value) ? $value : [$value];
+ // Escape the values.
+ $data = [];
+ foreach ($value as $key => $item) {
+ $data[Xss::filter($key)] = is_string($item) ? Xss::filter($item) : $item;
+ }
+ $string = json_encode($data, JSON_FORCE_OBJECT | JSON_NUMERIC_CHECK);
+ return $string ? $string : '';
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Template/AttributeString.php b/core/lib/Drupal/Core/Template/AttributeString.php
index bce832e374a0..27f6cfc0d7c1 100644
--- a/core/lib/Drupal/Core/Template/AttributeString.php
+++ b/core/lib/Drupal/Core/Template/AttributeString.php
@@ -2,7 +2,7 @@
namespace Drupal\Core\Template;
-use Drupal\Component\Utility\Html;
+use Drupal\Component\Utility\Xss;
/**
* A class that represents most standard HTML attributes.
@@ -25,7 +25,7 @@ class AttributeString extends AttributeValueBase {
* Implements the magic __toString() method.
*/
public function __toString() {
- return Html::escape((string) $this->value);
+ return Xss::filter((string) $this->value);
}
}
diff --git a/core/lib/Drupal/Core/Template/AttributeValueBase.php b/core/lib/Drupal/Core/Template/AttributeValueBase.php
index 35ef176b1456..f33455092f97 100644
--- a/core/lib/Drupal/Core/Template/AttributeValueBase.php
+++ b/core/lib/Drupal/Core/Template/AttributeValueBase.php
@@ -7,6 +7,7 @@
/**
* Defines the base class for an attribute type.
*
+ * @see https://html.spec.whatwg.org/#attributes-2
* @see \Drupal\Core\Template\Attribute
*/
abstract class AttributeValueBase {
@@ -46,15 +47,19 @@ public function __construct($name, $value) {
* While __toString only returns the value in a string form, render()
* contains the name of the attribute as well.
*
- * @return string|null
+ * @return string
* The string representation of the attribute.
*/
public function render() {
$value = (string) $this;
+ $singleQuote = str_contains($value, '"');
if (isset($this->value) && static::RENDER_EMPTY_ATTRIBUTE || !empty($value)) {
- return Html::escape($this->name) . '="' . $value . '"';
+ // Flips the attribute quotes between single and double-quoted syntax.
+ $rendered = Html::escape($this->name);
+ $rendered .= $singleQuote ? "='" . $value . "'" : '="' . $value . '"';
+ return $rendered;
}
- return NULL;
+ return '';
}
/**
diff --git a/core/lib/Drupal/Core/Template/ComponentsTwigExtension.php b/core/lib/Drupal/Core/Template/ComponentsTwigExtension.php
index 5ff5c7e94b6b..88269ada8670 100644
--- a/core/lib/Drupal/Core/Template/ComponentsTwigExtension.php
+++ b/core/lib/Drupal/Core/Template/ComponentsTwigExtension.php
@@ -83,7 +83,7 @@ protected function mergeAdditionalRenderContext(Component $component, array $con
}
// If there is an "attributes" property, merge the additional attributes
// into it if possible.
- elseif ($context['attributes'] instanceof Attribute) {
+ elseif ($context['attributes'] instanceof HtmlAttributeInterface) {
$context['attributes']->merge(new Attribute($component_attributes));
}
return $context;
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
new file mode 100644
index 000000000000..518eddfd0ab9
--- /dev/null
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Drupal\Core\Template;
+
+
+use Drupal\Component\Render\MarkupInterface;
+
+/**
+ * An interface for classes that manage HTML Attributes.
+ */
+interface HtmlAttributeInterface extends \Countable, \IteratorAggregate, MarkupInterface {
+
+ /**
+ * Checks if the storage has an attribute with the given name.
+ *
+ * @param string $name
+ * The name of the attribute to check for.
+ *
+ * @return bool
+ * Returns TRUE if the attribute exists, or FALSE otherwise.
+ */
+ public function hasAttribute($name): bool;
+
+ /**
+ * Returns all storage elements as an array.
+ *
+ * @return mixed[]
+ * An associative array of attributes.
+ */
+ public function toArray(): array;
+
+ /**
+ * Merges an Attribute object into the current storage.
+ *
+ * @param HtmlAttributeInterface $collection
+ * The Attribute object to merge.
+ *
+ * @return $this
+ */
+ public function merge(HtmlAttributeInterface $collection): HtmlAttributeInterface;
+
+}
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
new file mode 100644
index 000000000000..f9a841c88743
--- /dev/null
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace Drupal\Core\Template;
+
+use Drupal\Component\Utility\NestedArray;
+
+/**
+ * Provides a shared implementation of several HtmlAttribute methods.
+ *
+ * Methods that depend on the storage method are omitted and should be
+ * implemented directly.
+ */
+trait HtmlAttributeTrait {
+
+ /**
+ * Implements the magic __toString() method.
+ */
+ public function __toString() {
+ $return = '';
+ /** @var \Drupal\Core\Template\AttributeValueBase $value */
+ foreach ($this->storage as $value) {
+ $rendered = $value->render();
+ if ($rendered) {
+ $return .= ' ' . $rendered;
+ }
+ }
+ return $return;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function toArray(): array {
+ $return = [];
+ foreach ($this->storage as $name => $value) {
+ $return[$name] = $value->value();
+ }
+
+ return $return;
+ }
+
+ /**
+ * Returns a representation of the object for use in JSON serialization.
+ *
+ * @return string
+ * The safe string content.
+ */
+ public function jsonSerialize(): string {
+ return (string) $this;
+ }
+
+ /**
+ * Merges an Attribute object into the current storage.
+ *
+ * @param HtmlAttributeInterface $collection
+ * The Attribute object to merge.
+ *
+ * @return $this
+ */
+ public function merge(HtmlAttributeInterface $collection): self {
+ $merged_attributes = NestedArray::mergeDeep($this->toArray(), $collection->toArray());
+ foreach ($merged_attributes as $name => $value) {
+ $this->storage[$name] = $this->createAttributeValue($name, $value);
+ }
+ return $this;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Template/HtmxAttribute.php b/core/lib/Drupal/Core/Template/HtmxAttribute.php
new file mode 100644
index 000000000000..a5a0a23b1b73
--- /dev/null
+++ b/core/lib/Drupal/Core/Template/HtmxAttribute.php
@@ -0,0 +1,762 @@
+<?php
+
+namespace Drupal\Core\Template;
+
+use Drupal\Core\Url;
+use Symfony\Component\Serializer\NameConverter\CamelCaseToSnakeCaseNameConverter;
+
+/**
+ * Adds methods for creating HTMX attributes.
+ *
+ * References to HTMX attributes are given on each method.
+ *
+ * We hope to add an interface, AttributeInterface, to core and implement that
+ * rather than extend a class. For now, this is what we can do.
+ *
+ * @see https://htmx.org/reference/
+ */
+class HtmxAttribute Implements HtmlAttributeInterface {
+
+ use HtmlAttributeTrait;
+
+ /**
+ * Stores the attribute data.
+ *
+ * @var \Drupal\Core\Template\AttributeValueBase[]
+ */
+ protected array $storage = [];
+
+ /* ***** Internal utility methods ***** */
+
+ /**
+ * Utility method to transform camelCase strings to kebab-case strings.
+ *
+ * Passes kebab-case strings through without any transformation.
+ *
+ * @param string $identifier
+ * The string to verify or transform.
+ *
+ * @return string
+ * The original or transformed string.
+ */
+ protected function insureKebabCase(string $identifier): string {
+ // Check for existing kebab case.
+ $kebabParts = explode('-', $identifier);
+ // If the number of lower case parts matches the number of parts, then
+ // all the parts are lower case.
+ $isKebab = count($kebabParts) === count(array_filter($kebabParts, function ($part) {
+ return preg_match('#^[[:lower:]]+$#', $part) === 1;
+ }));
+ if ($isKebab) {
+ return $identifier;
+ }
+
+ $converter = new CamelCaseToSnakeCaseNameConverter();
+ $snakeCase = $converter->normalize($identifier);
+ return preg_replace('#[_:]#', '-', $snakeCase);
+ }
+
+ /**
+ * Utility method to create and store a string value as an attribute.
+ *
+ * @param string $id
+ * The HTMX attribute id.
+ * @param string $value
+ * The attribute value.
+ *
+ * @return void
+ */
+ protected function createStringAttribute(string $id, string $value): void {
+ $key = 'data-hx-' . $id;
+ $attribute = new AttributeString($key, $value);
+ $this->storage[$key] = $attribute;
+ }
+
+ /**
+ * Utility method to create and store a boolean value as an attribute.
+ *
+ * @param string $id
+ * The HTMX attribute id.
+ * @param bool $value
+ * The attribute value.
+ *
+ * @return void
+ */
+ protected function createBooleanAttribute(string $id, bool $value): void {
+ $key = 'data-hx-' . $id;
+ $attribute = new AttributeBoolean($key, $value);
+ $this->storage[$key] = $attribute;
+
+ }
+
+ /**
+ * Utility method to create and store an array as an attribute.
+ *
+ * @param string $id
+ * The HTMX attribute id.
+ * @param array{string, string} $value
+ * The attribute values.
+ *
+ * @return void
+ */
+ protected function createJsonAttribute(string $id, array $value): void {
+ $key = 'data-hx-' . $id;
+ $attribute = new AttributeJson($key, $value);
+ $this->storage[$key] = $attribute;
+ }
+
+ /* ***** HtmxAttribute methods ***** */
+
+ /**
+ * {@inheritdoc}
+ */
+ public function hasAttribute($name): bool {
+ return array_key_exists($name, $this->storage);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getIterator(): \ArrayIterator {
+ return new \ArrayIterator($this->storage);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function count(): int {
+ return count($this->storage);
+ }
+
+ /* ***** Request attributes ***** */
+
+ /**
+ * Issues a GET request to the specified URL.
+ *
+ * @param \Drupal\Core\Url $url
+ * The URL for the GET request.
+ *
+ * @return HtmxAttribute
+ * returns self so that attribute methods may be chained.
+ *
+ * @see https://htmx.org/attributes/hx-get/
+ */
+ public function get(Url $url): HtmxAttribute {
+ $this->createStringAttribute('get', $url->toString());
+ return $this;
+ }
+
+ /**
+ * Issues a POST request to the specified URL.
+ *
+ * @param \Drupal\Core\Url $url
+ * The URL for the POST request.
+ *
+ * @return HtmxAttribute
+ * returns self so that attribute methods may be chained.
+ *
+ * @see https://htmx.org/attributes/hx-post/
+ */
+ public function post(Url $url) {
+ $this->createStringAttribute('post', $url->toString());
+ return $this;
+ }
+
+ /**
+ * Issues a PUT request to the specified URL.
+ *
+ * @param \Drupal\Core\Url $url
+ * The URL for the PUT request.
+ *
+ * @return HtmxAttribute
+ * returns self so that attribute methods may be chained.
+ *
+ * @see https://htmx.org/attributes/hx-put/
+ */
+ public function put(Url $url) {
+ $this->createStringAttribute('put', $url->toString());
+ return $this;
+ }
+
+ /**
+ * Issues a PATCH request to the specified URL.
+ *
+ * @param \Drupal\Core\Url $url
+ * The URL for the PATCH request.
+ *
+ * @return HtmxAttribute
+ * returns self so that attribute methods may be chained.
+ *
+ * @see https://htmx.org/attributes/hx-patch/
+ */
+ public function patch(Url $url) {
+ $this->createStringAttribute('patch', $url->toString());
+ return $this;
+ }
+
+ /**
+ * Issues a DELETE request to the specified URL.
+ *
+ * @param \Drupal\Core\Url $url
+ * The URL for the DELETE request.
+ *
+ * @return HtmxAttribute
+ * returns self so that attribute methods may be chained.
+ *
+ * @see https://htmx.org/attributes/hx-delete/
+ */
+ public function delete(Url $url) {
+ $this->createStringAttribute('delete', $url->toString());
+ return $this;
+ }
+
+ /* ***** Remaining HTMX 'core' attributes ***** */
+
+ /**
+ * Handle events with inline scripts on elements.
+ *
+ * @param string $event
+ * An event in either camelCase or kebab-case.
+ * @param string $action
+ * The action to take when the event occurs.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-on/
+ */
+ public function on(string $event, string $action) {
+ // Special case: the `::EventName` shorthand for `htmx:EventName`.
+ // Remove one leading `:` so that our final attribute is
+ // `data-hx--event-name` rather than `data-hx---event-name`.
+ $event = preg_replace('#^::#', ':', $event);
+ $formattedEvent = 'on-' . $this->insureKebabCase($event);
+ $this->createStringAttribute($formattedEvent, $action);
+ return $this;
+ }
+
+ /**
+ * Control URLs in browser history.
+ *
+ * Use a boolean when this attribute is added along with ::get
+ * - true: pushes the fetched URL into history.
+ * - false: disables pushing the fetched URL if it would otherwise be pushed
+ * due to inheritance or hx-boost.
+ *
+ * Use a URL to cause a push into the location bar. This may be relative or
+ * absolute, as per history.pushState()
+ *
+ * @param bool|\Drupal\Core\Url $value
+ * Use a Url object or a boolean, depending on use case.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-push-url/
+ */
+ public function pushUrl(bool|Url $value) {
+ if ($value instanceof Url) {
+ $this->createStringAttribute('push-url', $value->toString());
+ }
+ else {
+ $this->createStringAttribute('push-url', $value ? 'true' : 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * Select content to swap in from a response.
+ *
+ * Uses the selector to select elements from the response.
+ *
+ * @param string $selector
+ * A CSS query selector.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-select/
+ */
+ public function select(string $selector) {
+ $this->createStringAttribute('select', $selector);
+ return $this;
+ }
+
+ /**
+ * Select content for an out-of-band swap from a response.
+ *
+ * Each value in the comma separated list of values can specify any valid
+ * hx-swap strategy by separating the selector and the swap strategy with a
+ * colon, such as #alert:afterbegin.
+ *
+ * @param string $selectors
+ * A comma separated list of elements to be swapped out of band.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-select-oob/
+ */
+ public function selectOob(string $selectors) {
+ $this->createStringAttribute('select-oob', $selectors);
+ return $this;
+ }
+
+ /**
+ * Controls how content will swap in.
+ *
+ * The hx-swap attribute allows you to specify how the response will be
+ * swapped in relative to the target of an AJAX request.
+ *
+ * @param string $strategy
+ * A comma separated list of elements to be swapped out of band.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-swap/
+ */
+ public function swap(string $strategy, bool $ignoreTitle = TRUE) {
+ // HTMX defaults this behavior to FALSE, that is it replaces page title.
+ // We believe our most common use case is to not change the title.
+ if ($ignoreTitle) {
+ $strategy .= ' ignoreTitle:true';
+ }
+ $this->createStringAttribute('swap', $strategy);
+ return $this;
+ }
+
+ /**
+ * Designate content in a response for an out-of-band swap.
+ *
+ * The hx-swap-oob attribute allows you to specify that some content in a
+ * response should be swapped into the DOM somewhere other than the target,
+ * that is “Out of Band”. This allows you to piggyback updates to other
+ * element updates on a response.
+ *
+ * @param string $value
+ * A comma separated list of elements to be swapped out of band.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-swap-oob/
+ */
+ public function swapOob(true|string $value) {
+ if ($value === TRUE) {
+ $this->createStringAttribute('swap-oob', 'true');
+ }
+ else {
+ $this->createStringAttribute('swap-oob', $value);
+ }
+ return $this;
+ }
+
+ /**
+ * Specifies the target element to receive the incoming markup.
+ *
+ * The hx-target attribute allows you to target a different element for
+ * swapping than the one issuing the AJAX request. There are a variety
+ * of target string syntaxes. See the URL below for details.
+ *
+ * @param string $target
+ * The target descriptor.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-target/
+ */
+ public function target(string $target) {
+ $this->createStringAttribute('target', $target);
+ return $this;
+ }
+
+ /**
+ * Specifies what triggers a request.
+ *
+ * Used with an HTMX request attribute. Allows:
+ * - An event name (e.g. “click” or “my-custom-event”) followed by an event
+ * filter and a set of event modifiers
+ * - A polling definition of the form every <timing declaration>
+ * - A comma-separated list of such events.
+ *
+ * @param string $triggerDefinition
+ * The trigger definition.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-trigger/
+ */
+ public function trigger(string $triggerDefinition) {
+ $this->createStringAttribute('trigger', $triggerDefinition);
+ return $this;
+ }
+
+ /**
+ * Add to the parameters that will be submitted with an HTMX request.
+ *
+ * The value of this attribute is a list of name-expression values
+ * which will be converted to JSON (JavaScript Object Notation) format.
+ *
+ * @param array<string, string> $values
+ * The values in an array of 'name' => 'value' pairs.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-trigger/
+ */
+ public function vals(array $values) {
+ $this->createJsonAttribute('vals', $values);
+ return $this;
+ }
+
+ /* ***** Remaining HTMX 'core' attributes ***** */
+
+ /**
+ * Add progressive enhancement for links and forms.
+ *
+ * The hx-boost attribute allows you to “boost” normal anchors and form tags
+ * to use AJAX instead. This has the nice fallback that, if the user does not
+ * have javascript enabled, the site will continue to work.
+ *
+ * @param bool $value
+ * Should the element and its descendants be "boosted"?
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-boost/
+ */
+ public function boost(bool $value) {
+ if ($value === TRUE) {
+ $this->createStringAttribute('boost', 'true');
+ }
+ else {
+ $this->createStringAttribute('boost', 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * Shows a confirm() dialog before issuing a request.
+ *
+ * @param string $message
+ * The user facing message.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-confirm/
+ */
+ public function confirm(string $message) {
+ $this->createStringAttribute('confirm', $message);
+ return $this;
+ }
+
+ /**
+ * Disables HTMX processing for the given node and any descendants.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-disable/
+ */
+ public function disable() {
+ $this->createBooleanAttribute('disable', TRUE);
+ return $this;
+ }
+
+ /**
+ * Adds the disabled attribute to the specified elements during a request.
+ *
+ * The descriptor syntax is the same as hx-target. See the documentation
+ * link below for more details.
+ *
+ * @param string $descriptor
+ * The attribute value.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-disabled-elt/
+ */
+ public function disabledElements(string $descriptor) {
+ $this->createStringAttribute('disabled-elt', $descriptor);
+ return $this;
+ }
+
+ /**
+ * Control and disable automatic HTMX attribute inheritance for child nodes.
+ *
+ * @param string $names
+ * The attribute names to disinherit or * for all.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-disinherit/
+ */
+ public function disinherit(string $names) {
+ $this->createStringAttribute('disinherit', $names);
+ return $this;
+ }
+
+ /**
+ * Changes the request encoding type.
+ *
+ * @param string $method
+ * The encoding method.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-encoding/
+ */
+ public function encoding(string $method = 'multipart/form-data') {
+ $this->createStringAttribute('encoding', $method);
+ return $this;
+ }
+
+ /**
+ * Enables HTMX extensions for an element and descendants.
+ *
+ * @param string $names
+ * An extension name, or a comma separated list of names.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-ext/
+ */
+ public function ext(string $names) {
+ $this->createStringAttribute('ext', $names);
+ return $this;
+ }
+
+ /**
+ * Add to the headers that will be submitted with an HTMX request.
+ *
+ * @param array<string, string> $headerValues
+ * The header values as name => value.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-headers/
+ */
+ public function headers(array $headerValues) {
+ $this->createJsonAttribute('headers', $headerValues);
+ return $this;
+ }
+
+ /**
+ * Prevent sensitive data being saved to the history cache.
+ *
+ * Set the hx-history attribute to false on any element in the current
+ * document, or any html fragment loaded into the current document by htmx,
+ * to prevent sensitive data being saved to the localStorage cache when htmx
+ * takes a snapshot of the page state.
+ *
+ * @param bool $value
+ * Sets the string value to 'true' or 'false'. Defaults to FALSE.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-history/
+ */
+ public function history(bool $value = FALSE) {
+ if ($value) {
+ $this->createStringAttribute('history', 'true');
+ }
+ else {
+ $this->createStringAttribute('history', 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * The element to snapshot and restore during history navigation.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-history-elt/
+ */
+ public function historyElement() {
+ $this->createBooleanAttribute('history-elt', TRUE);
+ return $this;
+ }
+
+ /**
+ * Include additional element values in HTMX requests.
+ *
+ * The descriptor syntax is the same as hx-target. See the documentation
+ * link below for more details.
+ *
+ * @param string $descriptors
+ * The element descriptors.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-include/
+ */
+ public function include(string $descriptors) {
+ $this->createStringAttribute('include', $descriptors);
+ return $this;
+ }
+
+ /**
+ * The element to put the htmx-request class on during the request.
+ *
+ * @param string $selector
+ * The element CSS selector value. Selector may be prefixed with `closest`.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-indicator/
+ */
+ public function indicator(string $selector) {
+ $this->createStringAttribute('indicator', $selector);
+ return $this;
+ }
+
+ /**
+ * Control automatic attribute inheritance for child nodes.
+ *
+ * HTMX evaluates attribute inheritance with hx-inherit in two ways when
+ * hx-inherit is set on a parent node:
+ * - data-hx-inherit="*"
+ * All attribute inheritance for this element will be enabled.
+ * - data-hx-hx-inherit="hx-select hx-get hx-target"
+ * Enable inheritance for only one or multiple specified attributes.
+ *
+ * @param string $attributes
+ * The attributes to inherit.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-inherit/
+ */
+ public function inherit(string $attributes) {
+ $this->createStringAttribute('inherit', $attributes);
+ return $this;
+ }
+
+ /**
+ * Filters the parameters that will be submitted with a request.
+ *
+ * @param string $filter
+ * The filter string. Multiple syntax options, see the link below.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-params/
+ */
+ public function params(string $filter) {
+ $this->createStringAttribute('params', $filter);
+ return $this;
+ }
+
+ /**
+ * Specifies elements to keep unchanged between requests.
+ *
+ * @param string $id
+ * The id attribute of the element to preserve.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-preserve/
+ */
+ public function preserve(string $id) {
+ $this->createStringAttribute('preserve', $id);
+ return $this;
+ }
+
+ /**
+ * Shows a prompt() before submitting a request.
+ *
+ * @param string $message
+ * The message to display in the prompt.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-prompt/
+ */
+ public function prompt(string $message) {
+ $this->createStringAttribute('prompt', $message);
+ return $this;
+ }
+
+ /**
+ * Control URLs in the browser location bar.
+ *
+ * Use a boolean when this attribute is added along with a request:
+ * - true: replaces the fetched URL in the browser navigation bar.
+ * - false: disables replacing the fetched URL if it would otherwise be
+ * replaced due to inheritance.
+ *
+ * Use a URL to replace the value in the location bar. This may be relative or
+ * absolute, as per history.replaceState().
+ *
+ * @param bool|\Drupal\Core\Url $value
+ * Use a Url object or a boolean, depending on use case.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-replace-url/
+ */
+ public function replaceUrl(bool|Url $value) {
+ if ($value instanceof Url) {
+ $this->createStringAttribute('replace-url', $value->toString());
+ }
+ else {
+ $this->createStringAttribute('replace-url', $value ? 'true' : 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * Configures various aspects of the request.
+ *
+ * The hx-request attribute supports the following configuration values:
+ * - timeout: (integer) the timeout for the request, in milliseconds.
+ * - credentials: (boolean) if the request will send credentials.
+ * - noHeaders: (boolean) strips all headers from the request.
+ *
+ * Dynamic javascript values are not supported for security and for
+ * simplicity. If you need calculated values you should do determine them
+ * here on the server-side
+ *
+ * @param array<string, int|bool> $configValues
+ * The configuration values as name => value.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-headers/
+ */
+ public function request(array $configValues) {
+ $this->createJsonAttribute('request', $configValues);
+ return $this;
+ }
+
+ /**
+ * Synchronize AJAX requests between multiple elements.
+ *
+ * @param string $selector
+ * A CSS selector followed by a strategy.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-sync/
+ */
+ public function sync(string $selector) {
+ $this->createStringAttribute('sync', $selector);
+ return $this;
+ }
+
+ /**
+ * Cause an element to validate itself before it submits a request.
+ *
+ * @param bool $value
+ * Should the element validate before the request.
+ *
+ * @return $this
+ *
+ * @see https://htmx.org/attributes/hx-validate/
+ */
+ public function validate(bool $value = TRUE) {
+ if ($value) {
+ $this->createStringAttribute('validate', 'true');
+ }
+ else {
+ $this->createStringAttribute('validate', 'false');
+ }
+ return $this;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Template/TwigExtension.php b/core/lib/Drupal/Core/Template/TwigExtension.php
index 5afa135d0268..dd6747a72ef5 100644
--- a/core/lib/Drupal/Core/Template/TwigExtension.php
+++ b/core/lib/Drupal/Core/Template/TwigExtension.php
@@ -254,7 +254,7 @@ public function getUrl($name, $parameters = [], $options = []) {
* The link text for the anchor tag as a translated string.
* @param \Drupal\Core\Url|string $url
* The URL object or string used for the link.
- * @param array|\Drupal\Core\Template\Attribute $attributes
+ * @param array|HtmlAttributeInterface $attributes
* An optional array or Attribute object of link attributes.
*
* @return array
@@ -262,7 +262,7 @@ public function getUrl($name, $parameters = [], $options = []) {
*/
public function getLink($text, $url, $attributes = []) {
assert(is_string($url) || $url instanceof Url, '$url must be a string or object of type \Drupal\Core\Url');
- assert(is_array($attributes) || $attributes instanceof Attribute, '$attributes, if set, must be an array or object of type \Drupal\Core\Template\Attribute');
+ assert(is_array($attributes) || $attributes instanceof HtmlAttributeInterface, '$attributes, if set, must be an array or object implementing HtmlAttributeInterface');
if (!$url instanceof Url) {
$url = Url::fromUri($url);
@@ -272,7 +272,7 @@ public function getLink($text, $url, $attributes = []) {
// @see https://www.drupal.org/node/2842399
$url = clone $url;
if ($attributes) {
- if ($attributes instanceof Attribute) {
+ if ($attributes instanceof HtmlAttributeInterface) {
$attributes = $attributes->toArray();
}
$url->mergeOptions(['attributes' => $attributes]);
@@ -621,14 +621,14 @@ public function safeJoin(Environment $env, $value, $glue = '') {
/**
* Creates an Attribute object.
*
- * @param Attribute|array $attributes
+ * @param HtmlAttributeInterface|array $attributes
* (optional) An existing attribute object or an associative array of
* key-value pairs to be converted to HTML attributes.
*
- * @return \Drupal\Core\Template\Attribute
+ * @return HtmlAttributeInterface
* An attributes object that has the given attributes.
*/
- public function createAttribute(Attribute|array $attributes = []) {
+ public function createAttribute(HtmlAttributeInterface|array $attributes = []) {
if (\is_array($attributes)) {
return new Attribute($attributes);
}
diff --git a/core/lib/Drupal/Core/Theme/ThemeManager.php b/core/lib/Drupal/Core/Theme/ThemeManager.php
index 8962896ee3ef..470b3fa8f79b 100644
--- a/core/lib/Drupal/Core/Theme/ThemeManager.php
+++ b/core/lib/Drupal/Core/Theme/ThemeManager.php
@@ -7,6 +7,7 @@
use Drupal\Core\Routing\StackedRouteMatchInterface;
use Drupal\Core\Extension\ModuleHandlerInterface;
use Drupal\Core\Template\Attribute;
+use Drupal\Core\Template\HtmlAttributeInterface;
use Drupal\Core\Template\AttributeHelper;
use Drupal\Core\Utility\CallableResolver;
@@ -340,7 +341,7 @@ public function render($hook, array $variables) {
$default_attributes = new Attribute();
}
foreach (['attributes', 'title_attributes', 'content_attributes'] as $key) {
- if (isset($variables[$key]) && !($variables[$key] instanceof Attribute)) {
+ if (isset($variables[$key]) && !($variables[$key] instanceof HtmlAttributeInterface)) {
if ($variables[$key]) {
$variables[$key] = new Attribute($variables[$key]);
}
diff --git a/core/misc/htmx.js b/core/misc/htmx.js
new file mode 100644
index 000000000000..94a77aa230fa
--- /dev/null
+++ b/core/misc/htmx.js
@@ -0,0 +1,211 @@
+/**
+ * @file
+ * Connect Drupal javascript to htmx inserted content.
+ */
+
+// Drupal core standard practice: wrap JS in an anonymous closure.
+(function (Drupal, drupalSettings, once, htmx, loadjs) {
+ // Enforce the declared dependency on HTMX.
+ if (typeof htmx !== 'object' || !htmx.hasOwnProperty('process')) {
+ return;
+ }
+
+ /**
+ * Attaches Drupal behaviors to markup inserted by HTMX.
+ *
+ * @param {Event} htmxLoadEvent
+ * Event returned from HTMX loading processes.
+ */
+ function htmxDrupalBehaviors(htmxLoadEvent) {
+ // The attachBehaviors method searches within the context.
+ // We need to go up one level so that the loaded content is processed
+ // completely.
+ Drupal.attachBehaviors(htmxLoadEvent.detail.elt?.parentElement, drupalSettings);
+ }
+
+
+ /**
+ * Includes Drupal data with HTMX requests.
+ *
+ * @param {Event} configRequestEvent
+ * The event passed from HTMX as it configures a request.
+ */
+ function htmxDrupalData(configRequestEvent) {
+ const url = new URL(configRequestEvent.detail.path, document.location.href);
+ const origin = document.location.origin;
+ const sameHost = origin === url.origin;
+ if (sameHost) {
+ // We only need to add this data for htmx requests back to the site.
+ configRequestEvent.detail.parameters['ajax_page_state[libraries]'] = drupalSettings.ajaxPageState.libraries;
+ // Swap in drupal data selectors as #id values are altered to be unique.
+ configRequestEvent.detail.headers['HX-Target'] = configRequestEvent.detail.target.dataset.drupalSelector;
+ configRequestEvent.detail.headers['HX-Trigger'] = configRequestEvent.detail.elt.dataset.drupalSelector;
+ }
+ }
+
+ /**
+ * Processes asset information from the response to an HTMX request.
+ *
+ * @param {Event} assetsAppendedEvent
+ * The event triggered by header from HtmxResponseAttachmentsProcessor.
+ */
+ function htmxDrupalAssetProcessor(assetsAppendedEvent) {
+
+ /**
+ * Local helper function to merge two objects recursively.
+ *
+ * @param current
+ * The object to receive the merged values.
+ * @param sources
+ * The objects to merge into current.
+ *
+ * @see https://youmightnotneedjquery.com/#deep_extend
+ */
+ function mergeSettings(current, ...sources) {
+ if (!current) {
+ return {};
+ }
+
+ for (const obj of sources) {
+ if (!obj) {
+ continue;
+ }
+
+ for (const [key, value] of Object.entries(obj)) {
+ switch (Object.prototype.toString.call(value)) {
+ case '[object Object]':
+ current[key] = current[key] || {};
+ current[key] = mergeSettings(current[key], value);
+ break;
+
+ case '[object Array]':
+ current[key] = mergeSettings(new Array(value.length), value);
+ break;
+
+ default:
+ current[key] = value;
+ }
+ }
+ }
+
+ return current;
+ }
+
+ // Find any inserted assets.
+ const assetsTag = oobSwapEvent.detail.target.querySelector('script[data-drupal-selector="drupal-htmx-assets"]');
+ if (!(assetsTag instanceof HTMLElement)) {
+ return;
+ }
+ // Parse assets and initialize container variables.
+ const assets = JSON.parse(assetsTag.textContent);
+ let cssItems = [];
+ let scriptItems = [];
+ let scriptBottomItems = [];
+ let paths = [];
+ if (assets.constructor.name === 'Object') {
+ // Variable assets should have properties 'styles', 'scripts,
+ // 'scripts_bottom', 'settings'. See
+ // HtmxResponseAttachmentsProcessor::processAssetLibraries
+ cssItems = new Map(assets['styles'].map((item) => [`css!${item['#attributes']['href']}`, item]));
+ scriptItems = new Map(assets['scripts'].map((item) => [item['#attributes']['src'], item]));
+ scriptBottomItems = new Map(assets['scripts_bottom'].map((item) => [item['#attributes']['src'], item]));
+ mergeSettings(drupalSettings, assets['settings']);
+ }
+ // Load CSS.
+ if (cssItems instanceof Map && cssItems.size > 0) {
+ // Fetch in parallel but load in sequence.
+ cssItems.forEach((value, key) => paths.push(key));
+ loadjs(paths, {
+ async: false,
+ before: function (path, linkElement) {
+ const item = cssItems.get(path);
+ for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
+ linkElement.setAttribute(attributeKey, attributeValue);
+ }
+ },
+ });
+ }
+ /* By default, loadjs appends the script to the head. When scripts
+ * are loaded via HTMX, their location has no impact on
+ * functionality. But, since Drupal loaded scripts can choose
+ * their parent element, we provide that option here for the sake of
+ * consistency.
+ */
+ if (scriptItems instanceof Map && scriptItems.size > 0) {
+ paths = [];
+ scriptItems.forEach((value, key) => paths.push(key));
+ // Load head JS.
+ // Fetch in parallel but load in sequence.
+ loadjs(paths, {
+ async: false,
+ before: function (path, scriptElement) {
+ const item = scriptItems.get(path);
+ for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
+ scriptElement.setAttribute(attributeKey, attributeValue);
+ }
+ },
+ });
+ }
+ if (scriptBottomItems instanceof Map && scriptBottomItems.size > 0) {
+ paths = [];
+ scriptBottomItems.forEach((value, key) => paths.push(key));
+ // Fetch in parallel but load in sequence.
+ loadjs(paths, {
+ async: false,
+ before: function (path, scriptElement) {
+ const item = scriptBottomItems.get(path);
+ for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
+ scriptElement.setAttribute(attributeKey, attributeValue);
+ }
+ document.body.appendChild(scriptElement);
+ // Return false to bypass loadjs' default DOM insertion
+ // mechanism.
+ return false;
+ },
+ });
+ }
+ // Any assets now processed. Remove the found asset tag.
+ htmx.remove(assetsTag);
+ }
+
+ /* Initialize listeners. */
+
+ /**
+ * Process new content through HTMX.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Process all new content in case any HTMX attributes are in that content.
+ */
+ Drupal.behaviors.htmxProcess = {
+ attach(context) {
+ htmx.process(context);
+ },
+ };
+
+ /**
+ * Set listeners for the HTMX events that power our integration.
+ *
+ * @type {{attach: Drupal.behaviors.htmxBehaviors.attach}}
+ */
+ Drupal.behaviors.htmxBehaviors = {
+ attach: () => {
+ // JS should use native methods to enforce a single instance of our event
+ // handlers since we used named functions. Use the `once` library to be
+ // consistent with the rest of core.
+ if (!once('htmxBehaviors', 'html').length) {
+ return;
+ }
+ // Fired by HTMX before a request is sent.
+ window.addEventListener('htmx:configRequest', htmxDrupalData);
+ // Fired by HTMX after an 'out of band' content swap, which we use to add
+ // asset info from the resonse.
+ window.addEventListener('htmx:oobAfterSwap', htmxDrupalAssetProcessor);
+ // Attach Drupal behaviors after a normal HTMC content swap.
+ window.addEventListener('htmx:load', htmxDrupalBehaviors);
+ // Attach Drupal behaviors after an HTMX 'out of band' content swap.
+ window.addEventListener('htmx:oobAfterSwap', htmxDrupalBehaviors);
+ },
+ };
+})(Drupal, drupalSettings, once, htmx, loadjs);
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 963a6a1d9d41..61e2088deece 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -2,15 +2,16 @@
namespace Drupal\config\Form;
+use Drupal\Component\Serialization\Yaml;
use Drupal\Core\Config\Entity\ConfigEntityInterface;
use Drupal\Core\Config\StorageInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Entity\EntityTypeInterface;
use Drupal\Core\Form\FormBase;
-use Drupal\Core\Form\FormState;
use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Serialization\Yaml;
use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Template\HtmxAttribute;
+use Drupal\Core\Url;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
@@ -74,7 +75,8 @@ public function getFormId() {
/**
* {@inheritdoc}
*/
- public function buildForm(array $form, FormStateInterface $form_state, $config_type = NULL, $config_name = NULL) {
+ public function buildForm(array $form, FormStateInterface $form_state, $config_type = '', $config_name = '') {
+ $trigger = $this->getHtmxTrigger();
$form['#prefix'] = '<div id="js-config-form-wrapper">';
$form['#suffix'] = '</div>';
foreach ($this->entityTypeManager->getDefinitions() as $entity_type => $definition) {
@@ -82,6 +84,7 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t
$this->definitions[$entity_type] = $definition;
}
}
+
$entity_types = array_map(function (EntityTypeInterface $definition) {
return $definition->getLabel();
}, $this->definitions);
@@ -90,53 +93,68 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t
$config_types = [
'system.simple' => $this->t('Simple configuration'),
] + $entity_types;
+
+ // Prepare an HtmxAttribute for each dynamic select.
+ $config_type_htmx = new HtmxAttribute();
+ $config_name_htmx = new HtmxAttribute();
+
+ $form_url = Url::fromRoute(
+ route_name: 'config.export_single',
+ route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
+ );
+
$form['config_type'] = [
'#title' => $this->t('Configuration type'),
'#type' => 'select',
'#options' => $config_types,
'#default_value' => $config_type,
- '#ajax' => [
- 'callback' => '::updateConfigurationType',
- 'wrapper' => 'js-config-form-wrapper',
- ],
+ /*
+ * - Send a POST request to the form URL.
+ * - Send the value of this select, and the hidden form builder values.
+ * Sending the whole form is both not needed and creates validation
+ * issues for the config_name value.
+ * - Select the config_name <select> element from the response.
+ * - Target the config_name <select> in the rendered form for replacement.
+ * - Replace using the outerHTML strategy: that is replace the whole tag.
+ * - Also select and replace the export value.
+ */
+ '#htmx' => $config_type_htmx
+ ->post($form_url)
+ ->select('select[data-drupal-selector="edit-config-name"]')
+ ->target('select[data-drupal-selector="edit-config-name"]')
+ ->swap('outerHTML'),
];
+
$default_type = $form_state->getValue('config_type', $config_type);
$form['config_name'] = [
'#title' => $this->t('Configuration name'),
'#type' => 'select',
- '#options' => $this->findConfiguration($default_type),
+ '#options' => $this->findConfiguration($default_type, $form_state),
+ '#empty_value' => '',
'#default_value' => $config_name,
- '#prefix' => '<div id="edit-config-type-wrapper">',
- '#suffix' => '</div>',
- '#ajax' => [
- 'callback' => '::updateExport',
- 'wrapper' => 'edit-export-wrapper',
- ],
+ '#htmx' => $config_name_htmx
+ ->post($form_url)
+ ->select('textarea[data-drupal-selector="edit-export"]')
+ ->target('textarea[data-drupal-selector="edit-export"]')
+ ->swap('outerHTML'),
];
$form['export'] = [
'#title' => $this->t('Here is your configuration:'),
'#type' => 'textarea',
'#rows' => 24,
- '#prefix' => '<div id="edit-export-wrapper">',
- '#suffix' => '</div>',
];
- if ($config_type && $config_name) {
- $fake_form_state = (new FormState())->setValues([
- 'config_type' => $config_type,
- 'config_name' => $config_name,
- ]);
- $form['export'] = $this->updateExport($form, $fake_form_state);
+ if ($trigger === 'edit-config-type') {
+ // Type has changed.
+ $form['export']['#value'] = NULL;
+ // Also replace the export element when the response is returned.
+ $export_htmx = new HtmxAttribute();
+ $form['export']['#htmx'] = $export_htmx->swapOob(TRUE);
+ }
+ elseif ($trigger === 'edit-config-name') {
+ // A name is selected.
+ $form['export'] = $this->updateExport($form, $form_state);
}
- return $form;
- }
-
- /**
- * Handles switching the configuration type selector.
- */
- public function updateConfigurationType($form, FormStateInterface $form_state) {
- $form['config_name']['#options'] = $this->findConfiguration($form_state->getValue('config_type'));
- $form['export']['#value'] = NULL;
return $form;
}
@@ -145,9 +163,11 @@ public function updateConfigurationType($form, FormStateInterface $form_state) {
*/
public function updateExport($form, FormStateInterface $form_state) {
// Determine the full config name for the selected config entity.
- if ($form_state->getValue('config_type') !== 'system.simple') {
- $definition = $this->entityTypeManager->getDefinition($form_state->getValue('config_type'));
- $name = $definition->getConfigPrefix() . '.' . $form_state->getValue('config_name');
+ $config_type = $form_state->getValue('config_type');
+ $config_name = $form_state->getValue('config_name');
+ if (!empty($config_type) && $config_type !== 'system.simple' && !empty($config_name)) {
+ $definition = $this->entityTypeManager->getDefinition($config_type);
+ $name = $definition->getConfigPrefix() . '.' . $config_name;
}
// The config name is used directly for simple configuration.
else {
@@ -162,13 +182,18 @@ public function updateExport($form, FormStateInterface $form_state) {
/**
* Handles switching the configuration type selector.
+ *
+ * @param $config_type
+ * The selected configuration type.
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ * The current form state.
+ *
+ * @return array
*/
- protected function findConfiguration($config_type) {
- $names = [
- '' => $this->t('- Select -'),
- ];
+ protected function findConfiguration($config_type, FormStateInterface $form_state) {
+ $names = [];
// For a given entity type, load all entities.
- if ($config_type && $config_type !== 'system.simple') {
+ if ($config_type !== 'system.simple' && !empty($config_type)) {
$entity_storage = $this->entityTypeManager->getStorage($config_type);
foreach ($entity_storage->loadMultiple() as $entity) {
$entity_id = $entity->id();
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
index c00f4aeb397b..ce29a2d81ebb 100644
--- a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
@@ -9,6 +9,7 @@
use Drupal\Core\File\MimeType\MimeTypeMapInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;
+use Drupal\Core\Template\HtmlAttributeInterface;
/**
* Base class for media file formatter.
@@ -146,7 +147,7 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
* Additional attributes to be applied to the HTML element. Attribute names
* will be used as key and value in the HTML element.
*
- * @return \Drupal\Core\Template\Attribute
+ * @return HtmlAttributeInterface
* Container with all the attributes for the HTML tag.
*/
protected function prepareAttributes(array $additional_attributes = []) {
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index 10c29c5dbf30..386ae320c41c 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -7,6 +7,7 @@
use Drupal\Component\Utility\Html;
use Drupal\Component\Utility\Xss;
use Drupal\Core\Template\Attribute;
+use Drupal\Core\Template\HtmlAttributeInterface;
use Drupal\Core\Url;
use Drupal\Core\Utility\TableSort;
@@ -557,7 +558,7 @@ function template_preprocess_views_view_table(&$variables): void {
if (!isset($column_reference['attributes'])) {
$column_reference['attributes'] = new Attribute();
}
- elseif (!($column_reference['attributes'] instanceof Attribute)) {
+ elseif (!($column_reference['attributes'] instanceof HtmlAttributeInterface)) {
$column_reference['attributes'] = new Attribute($column_reference['attributes']);
}
diff --git a/core/scripts/js/vendor-update.js b/core/scripts/js/vendor-update.js
index db7e8a36670b..68183a2aabde 100644
--- a/core/scripts/js/vendor-update.js
+++ b/core/scripts/js/vendor-update.js
@@ -79,6 +79,15 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
library: 'internal.backbone',
files: ['backbone.js', 'backbone-min.js', 'backbone-min.js.map'],
},
+ {
+ pack: 'htmx.org',
+ folder: 'htmx',
+ library: 'htmx',
+ files: [
+ { from: 'dist/htmx.min.js', to: 'htmx.min.js' },
+ { from: 'dist/ext/debug.js', to: 'debug.js' },
+ ],
+ },
{
pack: 'jquery',
files: [
diff --git a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
new file mode 100644
index 000000000000..8270a5a6fa84
--- /dev/null
+++ b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
@@ -0,0 +1,409 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\KernelTests\Core\Template;
+
+use Drupal\Core\Url;
+use Drupal\Core\Template\HtmxAttribute;
+use Drupal\KernelTests\KernelTestBase;
+
+/**
+ * Test description.
+ *
+ * @group htmx
+ *
+ * @coversDefaultClass \Drupal\Core\Template\HtmxAttribute
+ */
+final class HtmxAttributeTest extends KernelTestBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ protected static $modules = ['system'];
+
+ /**
+ * Class under test.
+ *
+ * @var \Drupal\Core\Template\HtmxAttribute
+ */
+ protected HtmxAttribute $htmxAttribute;
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp(): void {
+ parent::setUp();
+ $this->htmxAttribute = new HtmxAttribute();
+ }
+
+ /**
+ * Test get method.
+ *
+ * @covers ::get
+ */
+ public function testHxGet(): void {
+ $url = Url::fromRoute('system.404');
+ $this->htmxAttribute->get($url);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ $this->assertStringStartsWith(' data-hx-get="', $rendered);
+ $this->assertStringEndsWith('/system/404"', $rendered);
+ }
+
+ /**
+ * Test get method.
+ *
+ * @covers ::post
+ */
+ public function testHxPost(): void {
+ $url = Url::fromRoute('system.404');
+ $this->htmxAttribute->post($url);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ $this->assertStringStartsWith(' data-hx-post="', $rendered);
+ $this->assertStringEndsWith('/system/404"', $rendered);
+ }
+
+ /**
+ * Test get method.
+ *
+ * @covers ::put
+ */
+ public function testHxPut(): void {
+ $url = Url::fromRoute('system.404');
+ $this->htmxAttribute->put($url);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ $this->assertStringStartsWith(' data-hx-put="', $rendered);
+ $this->assertStringEndsWith('/system/404"', $rendered);
+ }
+
+ /**
+ * Test get method.
+ *
+ * @covers ::patch
+ */
+ public function testHxPatch(): void {
+ $url = Url::fromRoute('system.404');
+ $this->htmxAttribute->patch($url);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ $this->assertStringStartsWith(' data-hx-patch="', $rendered);
+ $this->assertStringEndsWith('/system/404"', $rendered);
+ }
+
+ /**
+ * Test get method.
+ *
+ * @covers ::delete
+ */
+ public function testHxDelete(): void {
+ $url = Url::fromRoute('system.404');
+ $this->htmxAttribute->delete($url);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ $this->assertStringStartsWith(' data-hx-delete="', $rendered);
+ $this->assertStringEndsWith('/system/404"', $rendered);
+ }
+
+ /**
+ * Test on method.
+ *
+ * @covers ::on
+ * @dataProvider hxOnDataProvider
+ */
+ public function testHxOn(string $event, string $expected): void {
+ $this->htmxAttribute->on($event, 'someAction');
+ $rendered = (string) $this->htmxAttribute;
+ $expected .= 'someAction"';
+ // The paths in GitLabCI include a subfolder.
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxOn.
+ *
+ * @return array<int, string[]>
+ * Array of event, expected.
+ */
+ public static function hxOnDataProvider(): array {
+ return [
+ ['alllowercase', ' data-hx-on-alllowercase="'],
+ ['already-kebab-case', ' data-hx-on-already-kebab-case="'],
+ ['snake_case', ' data-hx-on-snake-case="'],
+ ['camelCaseEvent', ' data-hx-on-camel-case-event="'],
+ ['htmx:beforeRequest', ' data-hx-on-htmx-before-request="'],
+ ['::beforeRequest', ' data-hx-on--before-request="'],
+ ];
+ }
+
+ /**
+ * Test pushUrl method.
+ *
+ * @covers ::pushUrl
+ * @dataProvider hxPushUrlDataProvider
+ */
+ public function testHxPushUrl(bool|Url $value, string $endsWith): void {
+ $startsWith = ' data-hx-push-url="';
+ $this->htmxAttribute->pushUrl($value);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ // So treat all the results as paths.
+ $this->assertStringStartsWith($startsWith, $rendered);
+ $this->assertStringEndsWith($endsWith, $rendered);
+ }
+
+ /**
+ * Test pushUrl method.
+ *
+ * @covers ::pushUrl
+ * @dataProvider hxPushUrlDataProvider
+ */
+ public function testHxReplaceUrl(bool|Url $value, string $endsWith): void {
+ $startsWith = ' data-hx-replace-url="';
+ $this->htmxAttribute->replaceUrl($value);
+ $rendered = (string) $this->htmxAttribute;
+ // The paths in GitLabCI include a subfolder.
+ // So treat all the results as paths.
+ $this->assertStringStartsWith($startsWith, $rendered);
+ $this->assertStringEndsWith($endsWith, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxPushUrl and :testHxReplaceUrl.
+ *
+ * @return array{bool|Url, string}[]
+ * Array of bool|Url, expected.
+ */
+ public static function hxPushUrlDataProvider(): array {
+ $url = Url::fromRoute('system.404');
+ return [
+ [TRUE, 'true"'],
+ [FALSE, 'false"'],
+ [$url, '/system/404"'],
+ ];
+ }
+
+ /**
+ * Test swapOob method.
+ *
+ * @covers ::swapOob
+ * @dataProvider hxSwapOobDataProvider
+ */
+ public function testHxSwapOob(true|string $value, string $expected): void {
+ $this->htmxAttribute->swapOob($value);
+ $rendered = (string) $this->htmxAttribute;
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxSwapOob.
+ *
+ * @return array{true|string, string}[]
+ * Array of true|string, expected.
+ */
+ public static function hxSwapOobDataProvider(): array {
+ return [
+ [TRUE, ' data-hx-swap-oob="true"'],
+ ['body:beforeend', ' data-hx-swap-oob="body:beforeend"'],
+ ];
+ }
+
+ /**
+ * Test vals method.
+ *
+ * @covers ::vals
+ */
+ public function testHxVals(): void {
+ $values = ['myValue' => 'My Value'];
+ $this->htmxAttribute->vals($values);
+ $rendered = (string) $this->htmxAttribute;
+ $expected = " data-hx-vals='" . '{"myValue":"My Value"}' . "'";
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Test swapOob method.
+ *
+ * @covers ::swapOob
+ * @dataProvider hxBoostDataProvider
+ */
+ public function testHxBoost(bool $value, string $expected): void {
+ $this->htmxAttribute->boost($value);
+ $rendered = (string) $this->htmxAttribute;
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxBoost.
+ *
+ * @return array{bool, string}[]
+ * Array of bool|string, expected.
+ */
+ public static function hxBoostDataProvider(): array {
+ return [
+ [TRUE, ' data-hx-boost="true"'],
+ [FALSE, ' data-hx-boost="false"'],
+ ];
+ }
+
+ /**
+ * Test headers method.
+ *
+ * @covers ::headers
+ */
+ public function testHxHeaders(): void {
+ $values = ['myValue' => 'My Value'];
+ $this->htmxAttribute->headers($values);
+ $rendered = (string) $this->htmxAttribute;
+ $expected = " data-hx-headers='" . '{"myValue":"My Value"}' . "'";
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Test history method.
+ *
+ * @covers ::history
+ * @dataProvider hxHistoryDataProvider
+ */
+ public function testHxHistory(?bool $value, string $expected): void {
+ if (is_null($value)) {
+ $this->htmxAttribute->history();
+ }
+ else {
+ $this->htmxAttribute->history($value);
+ }
+ $rendered = (string) $this->htmxAttribute;
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxHistory.
+ *
+ * @return array{?bool, string}[]
+ * Array of null|bool, string, expected.
+ */
+ public static function hxHistoryDataProvider(): array {
+ return [
+ [TRUE, ' data-hx-history="true"'],
+ [FALSE, ' data-hx-history="false"'],
+ [NULL, ' data-hx-history="false"'],
+ ];
+ }
+
+ /**
+ * Test request method.
+ *
+ * @covers ::request
+ */
+ public function testHxRequest(): void {
+ $values = ['timeout' => 100, 'credentials' => FALSE];
+ $this->htmxAttribute->request($values);
+ $rendered = (string) $this->htmxAttribute;
+ $expected = " data-hx-request='" . '{"timeout":100,"credentials":false}' . "'";
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Test swapOob method.
+ *
+ * @covers ::swapOob
+ * @dataProvider hxValidateDataProvider
+ */
+ public function testHxValidate(?bool $value, string $expected): void {
+ if (is_null($value)) {
+ $this->htmxAttribute->validate();
+ }
+ else {
+ $this->htmxAttribute->validate($value);
+ }
+ $rendered = (string) $this->htmxAttribute;
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxHistory.
+ *
+ * @return array{?bool, string}[]
+ * Array of null|bool, string, expected.
+ */
+ public static function hxValidateDataProvider(): array {
+ return [
+ [TRUE, ' data-hx-validate="true"'],
+ [FALSE, ' data-hx-validate="false"'],
+ [NULL, ' data-hx-validate="true"'],
+ ];
+ }
+
+ /**
+ * Test pushUrl method.
+ *
+ * @covers ::select
+ * @covers ::selectOob
+ * @covers ::swap
+ * @covers ::target
+ * @covers ::trigger
+ * @covers ::confirm
+ * @covers ::disable
+ * @covers ::disabledElt
+ * @covers ::disinherit
+ * @covers ::encoding
+ * @covers ::history
+ * @covers ::historyElement
+ * @covers ::include
+ * @covers ::indicator
+ * @covers ::inherit
+ * @covers ::params
+ * @covers ::preserve
+ * @covers ::prompt
+ * @covers ::sync
+ * @covers \Drupal\Core\Template\AttributeValueBase::render
+ * @dataProvider hxSimpleStringAttributesDataProvider
+ */
+ public function testHxSimpleStringAttributes(string $method, ?string $value, string $expected): void {
+ if (is_null($value)) {
+ $this->htmxAttribute->$method();
+ }
+ else {
+ $this->htmxAttribute->$method($value);
+ }
+ $rendered = (string) $this->htmxAttribute;
+ $this->assertEquals($expected, $rendered);
+ }
+
+ /**
+ * Provides data to ::testHxSimpleStringAttributes.
+ *
+ * @return array{string, string, string}[]
+ * Array of method, value, expected.
+ */
+ public static function hxSimpleStringAttributesDataProvider(): array {
+ $singleQuotedSyntax = 'info[data-drupal-selector="edit-select"]';
+ return [
+ ['select', '#info-details', ' data-hx-select="#info-details"'],
+ ['select', 'info[data-drupal-selector="edit-select"]', " data-hx-select='$singleQuotedSyntax'"],
+ ['selectOob', '#info-details', ' data-hx-select-oob="#info-details"'],
+ ['selectOob', '#info-details:afterbegin, #alert', ' data-hx-select-oob="#info-details:afterbegin, #alert"'],
+ ['swap', 'afterbegin', ' data-hx-swap="afterbegin"'],
+ ['target', 'descriptor', ' data-hx-target="descriptor"'],
+ ['trigger', 'event', ' data-hx-trigger="event"'],
+ ['confirm', 'A confirmation message', ' data-hx-confirm="A confirmation message"'],
+ ['disable', NULL, ' data-hx-disable'],
+ ['disabledElements', 'descriptor', ' data-hx-disabled-elt="descriptor"'],
+ ['disinherit', 'descriptor', ' data-hx-disinherit="descriptor"'],
+ ['encoding', NULL, ' data-hx-encoding="multipart/form-data"'],
+ ['encoding', 'application/x-www-form-urlencoded', ' data-hx-encoding="application/x-www-form-urlencoded"'],
+ ['ext', 'name, name', ' data-hx-ext="name, name"'],
+ ['historyElement', NULL, ' data-hx-history-elt'],
+ ['include', 'descriptor', ' data-hx-include="descriptor"'],
+ ['indicator', 'descriptor', ' data-hx-indicator="descriptor"'],
+ ['inherit', 'descriptor', ' data-hx-inherit="descriptor"'],
+ ['params', 'filter string', ' data-hx-params="filter string"'],
+ ['preserve', 'id', ' data-hx-preserve="id"'],
+ ['prompt', 'A prompt message', ' data-hx-prompt="A prompt message"'],
+ ['sync', 'closest form:abort', ' data-hx-sync="closest form:abort"'],
+ ];
+ }
+
+}
diff --git a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
index 8f011b46f662..ec0ff5887462 100644
--- a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
+++ b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
@@ -9,6 +9,7 @@
use Drupal\Core\Render\Markup;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Template\AttributeArray;
+use Drupal\Core\Template\HtmlAttributeInterface;
use Drupal\Core\Template\AttributeString;
use Drupal\Core\Template\Loader\StringLoader;
use Drupal\Tests\UnitTestCase;
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index c406fed47c22..05409f13e5ab 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -14,6 +14,7 @@
use Drupal\Core\Link;
use Drupal\Core\Render\Element;
use Drupal\Core\Template\Attribute;
+use Drupal\Core\Template\HtmlAttributeInterface;
use Drupal\Core\Url;
use Drupal\media\MediaForm;
use Drupal\file\FileInterface;
@@ -725,7 +726,7 @@ function claro_form_menu_link_content_form_alter(&$form, FormStateInterface $for
'#group' => 'advanced',
'#title' => t('Description'),
'#attributes' => ['class' => ['entity-meta__description']],
- '#tree' => FALSE,
+ '#tree' => TRUE,
'#accordion' => TRUE,
'description' => $form['description'],
];
@@ -1270,7 +1271,7 @@ function claro_preprocess_system_themes_page(&$variables): void {
// @todo Remove dependency on attributes after
// https://www.drupal.org/project/drupal/issues/2511548 has been
// resolved.
- if (isset($theme_card['screenshot']['#attributes']) && $theme_card['screenshot']['#attributes'] instanceof Attribute && $theme_card['screenshot']['#attributes']->hasClass('no-screenshot')) {
+ if (isset($theme_card['screenshot']['#attributes']) && $theme_card['screenshot']['#attributes'] instanceof HtmlAttributeInterface && $theme_card['screenshot']['#attributes']->hasClass('no-screenshot')) {
unset($theme_card['screenshot']);
}
diff --git a/core/themes/olivero/olivero.theme b/core/themes/olivero/olivero.theme
index d10ee7d155cd..35e1d59092e1 100644
--- a/core/themes/olivero/olivero.theme
+++ b/core/themes/olivero/olivero.theme
@@ -608,7 +608,7 @@ function olivero_preprocess_table(&$variables): void {
if (!empty($variables['rows'])) {
$draggable_row_found = FALSE;
foreach ($variables['rows'] as &$row) {
- /** @var \Drupal\Core\Template\Attribute $row['attributes'] */
+ /** @var \Drupal\Core\Template\Attribute $row ['attributes'] */
if (!empty($row['attributes']) && $row['attributes']->hasClass('draggable')) {
if (!$draggable_row_found) {
$variables['attributes']['class'][] = 'draggable-table';
--
GitLab
From 10e421348dd659c0278cc0b7be570f8b159cb51c Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sat, 9 Nov 2024 08:51:55 -0500
Subject: [PATCH 02/26] Missed a variable in refactoring
---
core/misc/htmx.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/core/misc/htmx.js b/core/misc/htmx.js
index 94a77aa230fa..6e2508465518 100644
--- a/core/misc/htmx.js
+++ b/core/misc/htmx.js
@@ -46,10 +46,10 @@
/**
* Processes asset information from the response to an HTMX request.
*
- * @param {Event} assetsAppendedEvent
- * The event triggered by header from HtmxResponseAttachmentsProcessor.
+ * @param {Event} oobSwapEvent
+ * The htmx:oobAfterSwap event triggered by HTMX.
*/
- function htmxDrupalAssetProcessor(assetsAppendedEvent) {
+ function htmxDrupalAssetProcessor(oobSwapEvent) {
/**
* Local helper function to merge two objects recursively.
--
GitLab
From adfabee38496030e6ce01ad4215eaf7ab05e21fd Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sun, 17 Nov 2024 07:42:24 -0500
Subject: [PATCH 03/26] Missed the filename for the export.
---
.../src/Form/ConfigSingleExportForm.php | 45 ++++++++++++++-----
1 file changed, 33 insertions(+), 12 deletions(-)
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 61e2088deece..026ba1615c3c 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -75,7 +75,12 @@ public function getFormId() {
/**
* {@inheritdoc}
*/
- public function buildForm(array $form, FormStateInterface $form_state, $config_type = '', $config_name = '') {
+ public function buildForm(array $form, FormStateInterface $form_state, ?string $config_type = NULL, ?string $config_name = NULL) {
+ // Default types allow us to extend the form signature but Drupal actually
+ // passes NULL if the parameters are not in the route. Insure we have a
+ // string.
+ $config_type = $config_type ?? '';
+ $config_name = $config_name ?? '';
$trigger = $this->getHtmxTrigger();
$form['#prefix'] = '<div id="js-config-form-wrapper">';
$form['#suffix'] = '</div>';
@@ -134,8 +139,8 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t
'#default_value' => $config_name,
'#htmx' => $config_name_htmx
->post($form_url)
- ->select('textarea[data-drupal-selector="edit-export"]')
- ->target('textarea[data-drupal-selector="edit-export"]')
+ ->select('#edit-export-wrapper')
+ ->target('#edit-export-wrapper')
->swap('outerHTML'),
];
@@ -143,41 +148,57 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t
'#title' => $this->t('Here is your configuration:'),
'#type' => 'textarea',
'#rows' => 24,
+ '#prefix' => '<div id="edit-export-wrapper">',
+ '#suffix' => '</div>',
];
if ($trigger === 'edit-config-type') {
// Type has changed.
$form['export']['#value'] = NULL;
// Also replace the export element when the response is returned.
+ // See https://htmx.org/attributes/hx-swap-oob/ for a detailed description
+ // of selection and targeting with ::swapOob.
$export_htmx = new HtmxAttribute();
- $form['export']['#htmx'] = $export_htmx->swapOob(TRUE);
+ $attributes = (string) $export_htmx->swapOob('outerHTML:#edit-export-wrapper');
+ $form['export']['#prefix'] = '<div id="edit-export-wrapper" ' . $attributes . '>';
}
elseif ($trigger === 'edit-config-name') {
// A name is selected.
- $form['export'] = $this->updateExport($form, $form_state);
+ $default_name = $form_state->getValue('config_name', $config_name);
+ $form['export'] = $this->updateExport($form['export'], $default_type, $default_name);
+ }
+ elseif ($config_type && $config_name) {
+ $form['export'] = $this->updateExport($form['export'], $config_type, $config_name);
}
return $form;
}
/**
* Handles switching the export textarea.
+ *
+ * @param array $element
+ * The export element render array.
+ * @param string $config_type
+ * The config type ID.
+ * @param string $config_name
+ * The config name ID.
+ *
+ * @return array
*/
- public function updateExport($form, FormStateInterface $form_state) {
+ public function updateExport(array $element, string $config_type, string $config_name) {
// Determine the full config name for the selected config entity.
- $config_type = $form_state->getValue('config_type');
- $config_name = $form_state->getValue('config_name');
if (!empty($config_type) && $config_type !== 'system.simple' && !empty($config_name)) {
$definition = $this->entityTypeManager->getDefinition($config_type);
$name = $definition->getConfigPrefix() . '.' . $config_name;
}
// The config name is used directly for simple configuration.
else {
- $name = $form_state->getValue('config_name');
+ $name = $config_name;
}
// Read the raw data for this config name, encode it, and display it.
$exists = $this->configStorage->exists($name);
- $form['export']['#value'] = !$exists ? NULL : Yaml::encode($this->configStorage->read($name));
- $form['export']['#description'] = !$exists ? NULL : $this->t('Filename: %name', ['%name' => $name . '.yml']);
- return $form['export'];
+ $element['#value'] = !$exists ? NULL : Yaml::encode($this->configStorage->read($name));
+ $element['#description'] = !$exists ? NULL : $this->t('Filename: %name', ['%name' => $name . '.yml']);
+ return $element;
}
/**
--
GitLab
From 5abdf1371da75ecf30adf1d2f9919cdf86d42089 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sun, 17 Nov 2024 08:28:40 -0500
Subject: [PATCH 04/26] Add #htmx prerender to the remaining elements
---
core/lib/Drupal/Core/Datetime/Element/Datetime.php | 1 +
core/lib/Drupal/Core/Render/Element/Button.php | 1 +
core/lib/Drupal/Core/Render/Element/Checkbox.php | 1 +
core/lib/Drupal/Core/Render/Element/Color.php | 1 +
core/lib/Drupal/Core/Render/Element/Container.php | 1 +
core/lib/Drupal/Core/Render/Element/Date.php | 1 +
core/lib/Drupal/Core/Render/Element/Details.php | 1 +
core/lib/Drupal/Core/Render/Element/Dropbutton.php | 1 +
core/lib/Drupal/Core/Render/Element/Email.php | 1 +
core/lib/Drupal/Core/Render/Element/Fieldset.php | 1 +
core/lib/Drupal/Core/Render/Element/Hidden.php | 1 +
core/lib/Drupal/Core/Render/Element/HtmlTag.php | 1 +
core/lib/Drupal/Core/Render/Element/Label.php | 3 +++
core/lib/Drupal/Core/Render/Element/Link.php | 1 +
core/lib/Drupal/Core/Render/Element/MachineName.php | 1 +
core/lib/Drupal/Core/Render/Element/Number.php | 1 +
core/lib/Drupal/Core/Render/Element/PageTitle.php | 3 +++
core/lib/Drupal/Core/Render/Element/Pager.php | 1 +
core/lib/Drupal/Core/Render/Element/Password.php | 1 +
core/lib/Drupal/Core/Render/Element/Radio.php | 1 +
core/lib/Drupal/Core/Render/Element/RenderElementBase.php | 2 +-
core/lib/Drupal/Core/Render/Element/Search.php | 1 +
core/lib/Drupal/Core/Render/Element/StatusMessages.php | 1 +
core/lib/Drupal/Core/Render/Element/Tel.php | 1 +
core/lib/Drupal/Core/Render/Element/Textfield.php | 1 +
core/lib/Drupal/Core/Render/Element/Url.php | 1 +
core/lib/Drupal/Core/Render/Element/VerticalTabs.php | 1 +
core/lib/Drupal/Core/Render/Element/Weight.php | 1 +
28 files changed, 32 insertions(+), 1 deletion(-)
diff --git a/core/lib/Drupal/Core/Datetime/Element/Datetime.php b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
index f3b7aba93a45..d12dab902b09 100644
--- a/core/lib/Drupal/Core/Datetime/Element/Datetime.php
+++ b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
@@ -52,6 +52,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processDatetime'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
[static::class, 'processGroup'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Button.php b/core/lib/Drupal/Core/Render/Element/Button.php
index a8f12e939636..7fdcbb46f4e3 100644
--- a/core/lib/Drupal/Core/Render/Element/Button.php
+++ b/core/lib/Drupal/Core/Render/Element/Button.php
@@ -53,6 +53,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processButton'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderButton'],
diff --git a/core/lib/Drupal/Core/Render/Element/Checkbox.php b/core/lib/Drupal/Core/Render/Element/Checkbox.php
index 65be5d22bf10..a33eaa2cd3ef 100644
--- a/core/lib/Drupal/Core/Render/Element/Checkbox.php
+++ b/core/lib/Drupal/Core/Render/Element/Checkbox.php
@@ -35,6 +35,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processCheckbox'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
[static::class, 'processGroup'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Color.php b/core/lib/Drupal/Core/Render/Element/Color.php
index 254300d976f9..52b3a8ede481 100644
--- a/core/lib/Drupal/Core/Render/Element/Color.php
+++ b/core/lib/Drupal/Core/Render/Element/Color.php
@@ -33,6 +33,7 @@ public function getInfo() {
'#input' => TRUE,
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateColor'],
diff --git a/core/lib/Drupal/Core/Render/Element/Container.php b/core/lib/Drupal/Core/Render/Element/Container.php
index d5a2092718e7..e417eab8ff35 100644
--- a/core/lib/Drupal/Core/Render/Element/Container.php
+++ b/core/lib/Drupal/Core/Render/Element/Container.php
@@ -58,6 +58,7 @@ public function getInfo() {
'#pre_render' => [
[static::class, 'preRenderGroup'],
[static::class, 'preRenderContainer'],
+ [static::class, 'preRenderHtmxElement'],
],
'#theme_wrappers' => ['container'],
];
diff --git a/core/lib/Drupal/Core/Render/Element/Date.php b/core/lib/Drupal/Core/Render/Element/Date.php
index 8304167ae707..9cc2c61444d6 100644
--- a/core/lib/Drupal/Core/Render/Element/Date.php
+++ b/core/lib/Drupal/Core/Render/Element/Date.php
@@ -45,6 +45,7 @@ public function getInfo() {
'#theme' => 'input__date',
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [[static::class, 'preRenderDate']],
'#theme_wrappers' => ['form_element'],
diff --git a/core/lib/Drupal/Core/Render/Element/Details.php b/core/lib/Drupal/Core/Render/Element/Details.php
index 28e7396887d8..a3579138645b 100644
--- a/core/lib/Drupal/Core/Render/Element/Details.php
+++ b/core/lib/Drupal/Core/Render/Element/Details.php
@@ -49,6 +49,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processGroup'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderDetails'],
diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
index 20bb375ea879..4ce702f21df8 100644
--- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php
+++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
@@ -52,6 +52,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderDropbutton'],
+ [static::class, 'preRenderHtmxElement'],
],
'#theme' => 'links__dropbutton',
];
diff --git a/core/lib/Drupal/Core/Render/Element/Email.php b/core/lib/Drupal/Core/Render/Element/Email.php
index 82e688ce38e2..8e5be973c478 100644
--- a/core/lib/Drupal/Core/Render/Element/Email.php
+++ b/core/lib/Drupal/Core/Render/Element/Email.php
@@ -53,6 +53,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
[static::class, 'processPattern'],
],
'#element_validate' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Fieldset.php b/core/lib/Drupal/Core/Render/Element/Fieldset.php
index af0396789b39..946a11d64b26 100644
--- a/core/lib/Drupal/Core/Render/Element/Fieldset.php
+++ b/core/lib/Drupal/Core/Render/Element/Fieldset.php
@@ -34,6 +34,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processGroup'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderGroup'],
diff --git a/core/lib/Drupal/Core/Render/Element/Hidden.php b/core/lib/Drupal/Core/Render/Element/Hidden.php
index db3b23a08cce..98789ea6b880 100644
--- a/core/lib/Drupal/Core/Render/Element/Hidden.php
+++ b/core/lib/Drupal/Core/Render/Element/Hidden.php
@@ -34,6 +34,7 @@ public function getInfo() {
'#input' => TRUE,
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderHidden'],
diff --git a/core/lib/Drupal/Core/Render/Element/HtmlTag.php b/core/lib/Drupal/Core/Render/Element/HtmlTag.php
index 3b4dbd25d462..cbad7bfeb964 100644
--- a/core/lib/Drupal/Core/Render/Element/HtmlTag.php
+++ b/core/lib/Drupal/Core/Render/Element/HtmlTag.php
@@ -56,6 +56,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderHtmlTag'],
+ [static::class, 'preRenderHtmxElement'],
],
'#attributes' => [],
'#value' => NULL,
diff --git a/core/lib/Drupal/Core/Render/Element/Label.php b/core/lib/Drupal/Core/Render/Element/Label.php
index b2dbc9841a73..bdb9929bc1f2 100644
--- a/core/lib/Drupal/Core/Render/Element/Label.php
+++ b/core/lib/Drupal/Core/Render/Element/Label.php
@@ -20,6 +20,9 @@ class Label extends RenderElementBase {
public function getInfo() {
return [
'#theme' => 'form_element_label',
+ '#pre_render' => [
+ [self::class, 'preRenderHtmxElement'],
+ ],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/Link.php b/core/lib/Drupal/Core/Render/Element/Link.php
index 2a00e0526b68..a4efeffa3092 100644
--- a/core/lib/Drupal/Core/Render/Element/Link.php
+++ b/core/lib/Drupal/Core/Render/Element/Link.php
@@ -37,6 +37,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderLink'],
+ [static::class, 'preRenderHtmxElement'],
],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/MachineName.php b/core/lib/Drupal/Core/Render/Element/MachineName.php
index ec03e46616e8..682fc6d38004 100644
--- a/core/lib/Drupal/Core/Render/Element/MachineName.php
+++ b/core/lib/Drupal/Core/Render/Element/MachineName.php
@@ -88,6 +88,7 @@ public function getInfo() {
[static::class, 'processMachineName'],
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateMachineName'],
diff --git a/core/lib/Drupal/Core/Render/Element/Number.php b/core/lib/Drupal/Core/Render/Element/Number.php
index 7096b2925beb..c97a8a5d03ed 100644
--- a/core/lib/Drupal/Core/Render/Element/Number.php
+++ b/core/lib/Drupal/Core/Render/Element/Number.php
@@ -41,6 +41,7 @@ public function getInfo() {
'#step' => 1,
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateNumber'],
diff --git a/core/lib/Drupal/Core/Render/Element/PageTitle.php b/core/lib/Drupal/Core/Render/Element/PageTitle.php
index c56141de3480..b72cf83b2169 100644
--- a/core/lib/Drupal/Core/Render/Element/PageTitle.php
+++ b/core/lib/Drupal/Core/Render/Element/PageTitle.php
@@ -21,6 +21,9 @@ public function getInfo() {
// The page title: either a string for plain titles or a render array for
// formatted titles.
'#title' => NULL,
+ '#pre_render' => [
+ [self::class, 'preRenderHtmxElement'],
+ ],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/Pager.php b/core/lib/Drupal/Core/Render/Element/Pager.php
index a31c7f2f3719..0973d97b4a0a 100644
--- a/core/lib/Drupal/Core/Render/Element/Pager.php
+++ b/core/lib/Drupal/Core/Render/Element/Pager.php
@@ -41,6 +41,7 @@ public function getInfo() {
return [
'#pre_render' => [
static::class . '::preRenderPager',
+ [self::class, 'preRenderHtmxElement'],
],
'#theme' => 'pager',
// The pager ID, to distinguish between multiple pagers on the same page.
diff --git a/core/lib/Drupal/Core/Render/Element/Password.php b/core/lib/Drupal/Core/Render/Element/Password.php
index 0c2e99d054b7..c9dd5398e8b4 100644
--- a/core/lib/Drupal/Core/Render/Element/Password.php
+++ b/core/lib/Drupal/Core/Render/Element/Password.php
@@ -39,6 +39,7 @@ public function getInfo() {
'#maxlength' => 128,
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
[static::class, 'processPattern'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Radio.php b/core/lib/Drupal/Core/Render/Element/Radio.php
index e7c5771ec4c5..0a9df142717c 100644
--- a/core/lib/Drupal/Core/Render/Element/Radio.php
+++ b/core/lib/Drupal/Core/Render/Element/Radio.php
@@ -26,6 +26,7 @@ public function getInfo() {
'#default_value' => NULL,
'#process' => [
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderRadio'],
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index 29d4fb707edb..029e5ee6cf38 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -442,7 +442,7 @@ public static function preRenderAjaxForm($element) {
* @return mixed[]
* The modified array with HTMX library attachments, if appropriate.
*/
- public static function preProcessHtmxElement(array $element): array {
+ public static function preRenderHtmxElement(array $element): array {
$processed = $element['#htmx_processed'] ?? FALSE;
// Skip already processed elements.
if ($processed) {
diff --git a/core/lib/Drupal/Core/Render/Element/Search.php b/core/lib/Drupal/Core/Render/Element/Search.php
index 3c022c55e33b..d9613c8d7ede 100644
--- a/core/lib/Drupal/Core/Render/Element/Search.php
+++ b/core/lib/Drupal/Core/Render/Element/Search.php
@@ -33,6 +33,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderSearch'],
diff --git a/core/lib/Drupal/Core/Render/Element/StatusMessages.php b/core/lib/Drupal/Core/Render/Element/StatusMessages.php
index 4eecd9f42f1a..0ba4c85326c5 100644
--- a/core/lib/Drupal/Core/Render/Element/StatusMessages.php
+++ b/core/lib/Drupal/Core/Render/Element/StatusMessages.php
@@ -32,6 +32,7 @@ public function getInfo() {
'#display' => NULL,
'#pre_render' => [
static::class . '::generatePlaceholder',
+ [self::class, 'preRenderHtmxElement'],
],
'#include_fallback' => FALSE,
];
diff --git a/core/lib/Drupal/Core/Render/Element/Tel.php b/core/lib/Drupal/Core/Render/Element/Tel.php
index 9d5951e7d4e6..0f4f45e200b0 100644
--- a/core/lib/Drupal/Core/Render/Element/Tel.php
+++ b/core/lib/Drupal/Core/Render/Element/Tel.php
@@ -42,6 +42,7 @@ public function getInfo() {
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
+ [static::class, 'preRenderHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderTel'],
diff --git a/core/lib/Drupal/Core/Render/Element/Textfield.php b/core/lib/Drupal/Core/Render/Element/Textfield.php
index de144ab4348d..0c896d28c4a7 100644
--- a/core/lib/Drupal/Core/Render/Element/Textfield.php
+++ b/core/lib/Drupal/Core/Render/Element/Textfield.php
@@ -52,6 +52,7 @@ public function getInfo() {
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
[static::class, 'processGroup'],
+ [static::class, 'preRenderHtmxElement']
],
'#pre_render' => [
[static::class, 'preRenderTextfield'],
diff --git a/core/lib/Drupal/Core/Render/Element/Url.php b/core/lib/Drupal/Core/Render/Element/Url.php
index 7c5a9af2fbb4..b9c714f670dd 100644
--- a/core/lib/Drupal/Core/Render/Element/Url.php
+++ b/core/lib/Drupal/Core/Render/Element/Url.php
@@ -44,6 +44,7 @@ public function getInfo() {
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
+ [static::class, 'preRenderHtmxElement']
],
'#element_validate' => [
[static::class, 'validateUrl'],
diff --git a/core/lib/Drupal/Core/Render/Element/VerticalTabs.php b/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
index bf55119913b0..a50323a8c2c1 100644
--- a/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
+++ b/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
@@ -60,6 +60,7 @@ public function getInfo() {
],
'#pre_render' => [
[static::class, 'preRenderVerticalTabs'],
+ [self::class, 'preRenderHtmxElement'],
],
'#theme_wrappers' => ['vertical_tabs', 'form_element'],
];
diff --git a/core/lib/Drupal/Core/Render/Element/Weight.php b/core/lib/Drupal/Core/Render/Element/Weight.php
index 89df69b1879f..e48d95065f01 100644
--- a/core/lib/Drupal/Core/Render/Element/Weight.php
+++ b/core/lib/Drupal/Core/Render/Element/Weight.php
@@ -39,6 +39,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processWeight'],
[static::class, 'processAjaxForm'],
+ [static::class, 'preRenderHtmxElement'],
],
];
}
--
GitLab
From 30da71f8ca54a62623d33cf402762c95aa7a85f9 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sun, 17 Nov 2024 08:50:48 -0500
Subject: [PATCH 05/26] Asset library info in a compressed header
---
core/core.libraries.yml | 2 +-
.../Core/Ajax/HtmxResponseAttachmentsProcessor.php | 9 ++++++++-
core/lib/Drupal/Core/Form/FormBuilder.php | 2 +-
core/misc/{htmx.js => htmx-behaviors.js} | 2 +-
4 files changed, 11 insertions(+), 4 deletions(-)
rename core/misc/{htmx.js => htmx-behaviors.js} (98%)
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index adf9f6c51e49..488b9ebed59c 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -617,7 +617,7 @@ drupal.form:
drupal.htmx:
version: VERSION
js:
- misc/htmx.js: {}
+ misc/htmx-behaviors.js: {}
dependencies:
- core/drupal
- core/drupalSettings
diff --git a/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php b/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
index 76ca1f67197e..64d7d1f67d33 100644
--- a/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
+++ b/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
@@ -3,6 +3,7 @@
namespace Drupal\Core\Ajax;
use Drupal\Component\Serialization\Json;
+use Drupal\Component\Utility\UrlHelper;
use Drupal\Core\Asset\AttachedAssetsInterface;
use Drupal\Core\Render\AttachmentsInterface;
use Drupal\Core\Render\HtmlResponse;
@@ -15,7 +16,7 @@
*
* @see \Drupal\Core\EventSubscriber\HtmxResponseSubscriber
* @see \Drupal\Core\Render\HtmlResponseAttachmentsProcessor::processAttachments
- * @see core/misc/htmx.js
+ * @see core/misc/htmx-behaviors.js
*/
class HtmxResponseAttachmentsProcessor extends HtmlResponseAttachmentsProcessor {
@@ -42,6 +43,12 @@ public function processAttachments(AttachmentsInterface $response): HtmlResponse
* {@inheritdoc}
*/
protected function processAssetLibraries(AttachedAssetsInterface $assets, array $placeholders) {
+ $request = $this->requestStack->getCurrentRequest();
+ if ($request->headers->has('HX-Page-State')) {
+ $uncompressed = UrlHelper::uncompressQueryParameter($request->headers->get('HX-Page-State'));
+ $libraries = explode(',', $uncompressed);
+ $assets->setAlreadyLoadedLibraries($libraries);
+ }
$settings = [];
$variables = [];
$maintenance_mode = defined('MAINTENANCE_MODE') || \Drupal::state()->get('system.maintenance_mode');
diff --git a/core/lib/Drupal/Core/Form/FormBuilder.php b/core/lib/Drupal/Core/Form/FormBuilder.php
index cccb28ca406b..068989beeb35 100644
--- a/core/lib/Drupal/Core/Form/FormBuilder.php
+++ b/core/lib/Drupal/Core/Form/FormBuilder.php
@@ -1361,7 +1361,7 @@ protected function elementTriggeredScriptedSubmission($element, FormStateInterfa
$input = $form_state->getUserInput();
if ($this->isHtmxRequest()) {
if (isset($element['#attributes']['data-drupal-selector']) && $element['#attributes']['data-drupal-selector'] === $this->getHtmxTrigger()) {
- // @see htmxDrupalData() in core/misc/htmx.js.
+ // @see htmxDrupalData() in core/misc/htmx-behaviors.js.
return TRUE;
}
}
diff --git a/core/misc/htmx.js b/core/misc/htmx-behaviors.js
similarity index 98%
rename from core/misc/htmx.js
rename to core/misc/htmx-behaviors.js
index 6e2508465518..bcd625a5fbe3 100644
--- a/core/misc/htmx.js
+++ b/core/misc/htmx-behaviors.js
@@ -36,7 +36,7 @@
const sameHost = origin === url.origin;
if (sameHost) {
// We only need to add this data for htmx requests back to the site.
- configRequestEvent.detail.parameters['ajax_page_state[libraries]'] = drupalSettings.ajaxPageState.libraries;
+ configRequestEvent.detail.headers['HX-Page-State'] = drupalSettings.ajaxPageState.libraries;
// Swap in drupal data selectors as #id values are altered to be unique.
configRequestEvent.detail.headers['HX-Target'] = configRequestEvent.detail.target.dataset.drupalSelector;
configRequestEvent.detail.headers['HX-Trigger'] = configRequestEvent.detail.elt.dataset.drupalSelector;
--
GitLab
From 87087bfe0fa47e581cbce0185722b6777666605b Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 2 Dec 2024 08:45:47 -0500
Subject: [PATCH 06/26] Added header support
---
core/lib/Drupal/Core/Ajax/Htmx.php | 19 ++
.../Drupal/Core/Http/HtmxHeaderInterface.php | 31 ++
.../Core/Http/HtmxLocationResponseData.php | 70 +++++
.../Drupal/Core/Http/HtmxResponseHeaders.php | 272 ++++++++++++++++++
.../Core/Render/Element/RenderElementBase.php | 20 +-
.../src/Form/ConfigSingleExportForm.php | 40 ++-
6 files changed, 432 insertions(+), 20 deletions(-)
create mode 100644 core/lib/Drupal/Core/Ajax/Htmx.php
create mode 100644 core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
create mode 100644 core/lib/Drupal/Core/Http/HtmxLocationResponseData.php
create mode 100644 core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
diff --git a/core/lib/Drupal/Core/Ajax/Htmx.php b/core/lib/Drupal/Core/Ajax/Htmx.php
new file mode 100644
index 000000000000..25f492876983
--- /dev/null
+++ b/core/lib/Drupal/Core/Ajax/Htmx.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Drupal\Core\Ajax;
+
+use Drupal\Core\Http\HtmxHeaderInterface;
+use Drupal\Core\Http\HtmxResponseHeaders;
+use Drupal\Core\Template\HtmxAttribute;
+
+/**
+ * A value object that collects HTMX attributes and headers.
+ */
+class Htmx {
+
+ public function __construct(
+ public readonly HtmxAttribute $attributes = new HtmxAttribute(),
+ public readonly HtmxHeaderInterface $headers = new HtmxResponseHeaders(),
+ ) {}
+
+}
diff --git a/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php b/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
new file mode 100644
index 000000000000..6d7b20479b0d
--- /dev/null
+++ b/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Drupal\Core\Http;
+
+/**
+ * An interface for classes that manage HTMX Headers.
+ *
+ * @extends \IteratorAggregate<string, list<string|null>>
+ */
+interface HtmxHeaderInterface extends \IteratorAggregate, \Countable, \Stringable {
+
+ /**
+ * Checks if the storage has a header with the given name.
+ *
+ * @param string $name
+ * The name of the header to check for.
+ *
+ * @return bool
+ * Returns TRUE if the header exists, or FALSE otherwise.
+ */
+ public function hasHeader($name): bool;
+
+ /**
+ * Returns all storage elements as a Drupal 'http_header' array.
+ *
+ * @return mixed[]
+ * An associative array of headers.
+ */
+ public function toArray(): array;
+
+}
diff --git a/core/lib/Drupal/Core/Http/HtmxLocationResponseData.php b/core/lib/Drupal/Core/Http/HtmxLocationResponseData.php
new file mode 100644
index 000000000000..4fee738040ab
--- /dev/null
+++ b/core/lib/Drupal/Core/Http/HtmxLocationResponseData.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Drupal\Core\Http;
+
+use Drupal\Core\Url;
+
+/**
+ * Optional data object for HX-Location.
+ */
+class HtmxLocationResponseData implements \Stringable {
+
+ /**
+ * Data for HX-Location headers.
+ *
+ * @param \Drupal\Core\Url $path
+ * The path for the GET request.
+ * @param string $source
+ * The source element of the request.
+ * @param string $event
+ * An event that “triggered” the request.
+ * @param array<string, string> $headers
+ * Headers to submit with the request.
+ * @param string $handler
+ * A callback that will handle the response HTML.
+ * @param string $target
+ * The target for the swap.
+ * @param string $swap
+ * The swap strategy.
+ * @param string $select
+ * A selector for the content to swap into the target.
+ * @param array<string, string> $values
+ * A set of values to submit with the request.
+ *
+ * @see https://htmx.org/headers/hx-location/
+ */
+ public function __construct(
+ public readonly Url $path,
+ public readonly string $source = '',
+ public readonly string $event = '',
+ public readonly array $headers = [],
+ public readonly string $handler = '',
+ public readonly string $target = '',
+ public readonly string $swap = '',
+ public readonly string $select = '',
+ public readonly array $values = [],
+ ) {}
+
+ /**
+ * Returns non-empty data, JSON encoded.
+ *
+ * @return string
+ * The encoded data.
+ */
+ public function __toString(): string {
+ $data = [
+ 'path' => $this->path->toString(),
+ 'source' => $this->source,
+ 'event' => $this->event,
+ 'headers' => $this->headers,
+ 'handler' => $this->handler,
+ 'target' => $this->target,
+ 'swap' => $this->swap,
+ 'select' => $this->select,
+ 'values' => $this->values,
+ ];
+ $data = array_filter($data, static fn ($item) => $item !== '' && $item !== []);
+ return json_encode($data);
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
new file mode 100644
index 000000000000..639ba8c0a0c2
--- /dev/null
+++ b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
@@ -0,0 +1,272 @@
+<?php
+
+namespace Drupal\Core\Http;
+
+use Drupal\Core\Url;
+use Symfony\Component\HttpFoundation\HeaderBag;
+
+/**
+ * Builds HTMX response headers.
+ *
+ * Principally used in the composite Htmx value object.
+ *
+ * @see \Drupal\Core\Ajax\Htmx
+ * @see https://htmx.org/reference/
+ */
+class HtmxResponseHeaders implements HtmxHeaderInterface {
+
+ /**
+ * Storage.
+ */
+ private HeaderBag $headers;
+
+ /**
+ * Initialize empty storage.
+ */
+ public function __construct() {
+ $this->headers = new HeaderBag();
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getIterator(): \Traversable {
+ return $this->headers->getIterator();
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function count(): int {
+ return $this->headers->count();
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function __toString(): string {
+ return (string) $this->headers;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function hasHeader($name): bool {
+ return $this->headers->has($name);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function toArray(): array {
+ $drupalHeaders = [];
+ foreach ($this->headers as $name => $value) {
+ // Set replace to true.
+ $drupalHeaders[] = [$name, $value, TRUE];
+ }
+ return $drupalHeaders;
+ }
+
+ /**
+ * Set HX-Location header.
+ *
+ * @param \Drupal\Core\Url|\Drupal\htmx\Http\HtmxLocationResponseData $data
+ * Use Url if only a path is needed.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-location/
+ */
+ public function location(Url|HtmxLocationResponseData $data): HtmxResponseHeaders {
+ if ($data instanceof HtmxLocationResponseData) {
+ $this->headers->set('HX-Location', (string) $data);
+ }
+ else {
+ $this->headers->set('HX-Location', $data->toString());
+ }
+ return $this;
+ }
+
+ /**
+ * Set HX-Push-Url header.
+ *
+ * @param \Drupal\Core\Url|false $data
+ * URL to push to the location bar or false to prevent a history update.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-push-url/
+ */
+ public function pushUrl(Url|false $data): HtmxResponseHeaders {
+ if ($data instanceof Url) {
+ $this->headers->set('HX-Push-Url', $data->toString());
+ }
+ else {
+ $this->headers->set('HX-Push-Url', 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * Set HX-Replace-Url header.
+ *
+ * @param \Drupal\Core\Url|false $data
+ * URL for history replacement, false prevents updates to the current URL.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-replace-url/
+ */
+ public function replaceUrl(Url|false $data): HtmxResponseHeaders {
+ if ($data instanceof Url) {
+ $this->headers->set('HX-Replace-Url', $data->toString());
+ }
+ else {
+ $this->headers->set('HX-Replace-Url', 'false');
+ }
+ return $this;
+ }
+
+ /**
+ * Set HX-Redirect header.
+ *
+ * @param \Drupal\Core\Url $url
+ * Destination for a client side redirection.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ */
+ public function redirect(Url $url): HtmxResponseHeaders {
+ $this->headers->set('HX-Redirect', $url->toString());
+ return $this;
+ }
+
+ /**
+ * Set HX-Refresh header.
+ *
+ * @param bool $refresh
+ * If set to “true” the client-side will do a full refresh of the page.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ */
+ public function refresh(bool $refresh): HtmxResponseHeaders {
+ $this->headers->set('HX-Refresh', $refresh ? 'true' : 'false');
+ return $this;
+ }
+
+ /**
+ * Set HX-Reswap header.
+ *
+ * @param string $strategy
+ * Specify how the response will be swapped (see hx-swap).
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ */
+ public function reswap(string $strategy): HtmxResponseHeaders {
+ $this->headers->set('HX-Reswap', $strategy);
+ return $this;
+ }
+
+ /**
+ * Set HX-Retarget header.
+ *
+ * @param string $strategy
+ * CSS selector that replaces the target to a different element on the page.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ */
+ public function retarget(string $strategy): HtmxResponseHeaders {
+ $this->headers->set('HX-Retarget', $strategy);
+ return $this;
+ }
+
+ /**
+ * Set HX-Reselect header.
+ *
+ * @param string $strategy
+ * CSS selector that changes the selection taken from the response.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ */
+ public function reselect(string $strategy): HtmxResponseHeaders {
+ $this->headers->set('HX-Reselect', $strategy);
+ return $this;
+ }
+
+ /**
+ * Set HX-Trigger header.
+ *
+ * See the documentation for the structure of the array.
+ *
+ * @param string|array $data
+ * An event name or an array which will be JSON encoded.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-trigger/
+ */
+ public function trigger(string|array $data): HtmxResponseHeaders {
+ if (is_array($data)) {
+ $this->headers->set('HX-Trigger', json_encode($data));
+ }
+ else {
+ $this->headers->set('HX-Trigger', $data);
+ }
+ return $this;
+ }
+
+ /**
+ * Set HX-Trigger-After-Settle header.
+ *
+ * See the documentation for the structure of the array.
+ *
+ * @param string|array $data
+ * An event name or an array which will be JSON encoded.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-trigger/
+ */
+ public function triggerAfterSettle(string|array $data): HtmxResponseHeaders {
+ if (is_array($data)) {
+ $this->headers->set('HX-Trigger-After-Settle', json_encode($data));
+ }
+ else {
+ $this->headers->set('HX-Trigger-After-Settle', $data);
+ }
+ return $this;
+ }
+
+ /**
+ * Set HX-Trigger-After-Swap header.
+ *
+ * See the documentation for the structure of the array.
+ *
+ * @param string|array $data
+ * An event name or an array which will be JSON encoded.
+ *
+ * @return \Drupal\htmx\Http\HtmxResponseHeaders
+ * Self for chaining.
+ *
+ * @see https://htmx.org/headers/hx-trigger/
+ */
+ public function triggerAfterSwap(string|array $data): HtmxResponseHeaders {
+ if (is_array($data)) {
+ $this->headers->set('HX-Trigger-After-Swap', json_encode($data));
+ }
+ else {
+ $this->headers->set('HX-Trigger-After-Swap', $data);
+ }
+ return $this;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index 029e5ee6cf38..63af81d9b21c 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -2,6 +2,8 @@
namespace Drupal\Core\Render\Element;
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Ajax\Htmx;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\PluginBase;
@@ -451,16 +453,24 @@ public static function preRenderHtmxElement(array $element): array {
// Initialize #htmx_processed, so we do not process this element again.
$element['#htmx_processed'] = FALSE;
- // Nothing to do if there are no Ajax settings.
- if (empty($element['#htmx'])) {
+ // Nothing to do if there are no HTMX settings.
+ if (empty($element['#htmx']) || !($element['#htmx'] instanceof Htmx)) {
return $element;
}
+ $htmx = $element['#htmx'];
// Attach HTMX and integration javascript.
$element['#attached']['library'][] = 'core/drupal.htmx';
- $element['#attributes'] = $element['#attributes'] ?? [];
- $element['#attributes'] = AttributeHelper::mergeCollections($element['#attributes'], $element['#htmx']);
-
+ // Consolidate headers.
+ if ($htmx->headers->count() !== 0) {
+ $element['#attached']['http_header'] = $element['#attached']['http_header'] ?? [];
+ $element['#attached']['http_header'] = NestedArray::mergeDeep($element['#attached']['http_header'], $htmx->headers->toArray());
+ }
+ if ($htmx->attributes->count() !== 0) {
+ // Consolidate attributes.
+ $element['#attributes'] = $element['#attributes'] ?? [];
+ $element['#attributes'] = AttributeHelper::mergeCollections($element['#attributes'], $htmx->attributes);
+ }
// Indicate that HTMX processing was successful.
$element['#htmx_processed'] = TRUE;
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 026ba1615c3c..0c43d80a12be 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -3,6 +3,7 @@
namespace Drupal\config\Form;
use Drupal\Component\Serialization\Yaml;
+use Drupal\Core\Ajax\Htmx;
use Drupal\Core\Config\Entity\ConfigEntityInterface;
use Drupal\Core\Config\StorageInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
@@ -99,15 +100,19 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
'system.simple' => $this->t('Simple configuration'),
] + $entity_types;
- // Prepare an HtmxAttribute for each dynamic select.
- $config_type_htmx = new HtmxAttribute();
- $config_name_htmx = new HtmxAttribute();
+ // Prepare an Htmx object for each dynamic select.
+ $config_type_htmx = new Htmx();
+ $config_name_htmx = new Htmx();
$form_url = Url::fromRoute(
route_name: 'config.export_single',
route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
);
-
+ $config_type_htmx->attributes
+ ->post($form_url)
+ ->select('select[data-drupal-selector="edit-config-name"]')
+ ->target('select[data-drupal-selector="edit-config-name"]')
+ ->swap('outerHTML');
$form['config_type'] = [
'#title' => $this->t('Configuration type'),
'#type' => 'select',
@@ -123,25 +128,22 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
* - Replace using the outerHTML strategy: that is replace the whole tag.
* - Also select and replace the export value.
*/
- '#htmx' => $config_type_htmx
- ->post($form_url)
- ->select('select[data-drupal-selector="edit-config-name"]')
- ->target('select[data-drupal-selector="edit-config-name"]')
- ->swap('outerHTML'),
+ '#htmx' => $config_type_htmx,
];
$default_type = $form_state->getValue('config_type', $config_type);
+ $config_name_htmx->attributes
+ ->post($form_url)
+ ->select('#edit-export-wrapper')
+ ->target('#edit-export-wrapper')
+ ->swap('outerHTML');
$form['config_name'] = [
'#title' => $this->t('Configuration name'),
'#type' => 'select',
'#options' => $this->findConfiguration($default_type, $form_state),
'#empty_value' => '',
'#default_value' => $config_name,
- '#htmx' => $config_name_htmx
- ->post($form_url)
- ->select('#edit-export-wrapper')
- ->target('#edit-export-wrapper')
- ->swap('outerHTML'),
+ '#htmx' => $config_name_htmx,
];
$form['export'] = [
@@ -154,9 +156,11 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
if ($trigger === 'edit-config-type') {
// Type has changed.
$form['export']['#value'] = NULL;
- // Also replace the export element when the response is returned.
+ // Also replace the wrapped export element when the response is returned.
// See https://htmx.org/attributes/hx-swap-oob/ for a detailed description
// of selection and targeting with ::swapOob.
+ // Since this is placed directly in the prefix string, use an
+ // HtmxAttribute object directly.
$export_htmx = new HtmxAttribute();
$attributes = (string) $export_htmx->swapOob('outerHTML:#edit-export-wrapper');
$form['export']['#prefix'] = '<div id="edit-export-wrapper" ' . $attributes . '>';
@@ -165,6 +169,12 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
// A name is selected.
$default_name = $form_state->getValue('config_name', $config_name);
$form['export'] = $this->updateExport($form['export'], $default_type, $default_name);
+ // Also update the browser URL.
+ $push = Url::fromRoute(
+ route_name: 'config.export_single',
+ route_parameters: ['config_type' => $default_type, 'config_name' => $default_name],
+ );
+ $config_name_htmx->headers->pushUrl($push);
}
elseif ($config_type && $config_name) {
$form['export'] = $this->updateExport($form['export'], $config_type, $config_name);
--
GitLab
From def6657057ace022eb766aa753e29f2590785979 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Tue, 3 Dec 2024 07:59:27 -0500
Subject: [PATCH 07/26] Added expanded documentation in Class
---
core/lib/Drupal/Core/Ajax/Htmx.php | 42 ++++++++++++++++++-
.../Drupal/Core/Http/HtmxResponseHeaders.php | 2 +-
.../Drupal/Core/Template/HtmxAttribute.php | 21 +++++++---
.../src/Form/ConfigSingleExportForm.php | 11 +++--
4 files changed, 65 insertions(+), 11 deletions(-)
diff --git a/core/lib/Drupal/Core/Ajax/Htmx.php b/core/lib/Drupal/Core/Ajax/Htmx.php
index 25f492876983..569182e2c911 100644
--- a/core/lib/Drupal/Core/Ajax/Htmx.php
+++ b/core/lib/Drupal/Core/Ajax/Htmx.php
@@ -7,7 +7,47 @@
use Drupal\Core\Template\HtmxAttribute;
/**
- * A value object that collects HTMX attributes and headers.
+ * Collects HTMX attributes and headers and manages complex behaviors.
+ *
+ * An instance of this object is required to add HTMX behaviors to a render
+ * element.
+ *
+ * @code
+ * $htmx = new Htmx();
+ * $form_url = Url::fromRoute(
+ * route_name: 'config.export_single',
+ * route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
+ * );
+ *
+ * $htmx->attributes
+ * ->post($form_url)
+ * ->select('select[data-drupal-selector="edit-config-name"]')
+ * ->target('select[data-drupal-selector="edit-config-name"]')
+ * ->swap('outerHTML');
+ *
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * HTMX headers are added in a similar way.
+ *
+ * @code
+ * // Also update the browser URL.
+ * $push = Url::fromRoute(
+ * route_name: 'config.export_single',
+ * route_parameters: ['config_type' => $default_type, 'config_name' => $default_name],
+ * );
+ *
+ * $htmx = new Htmx();
+ * $htmx->headers->pushUrl($push);
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * @see \Drupal\Core\Template\HtmxAttribute
+ * @see \Drupal\Core\Http\HtmxResponseHeaders
*/
class Htmx {
diff --git a/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
index 639ba8c0a0c2..adc009987d60 100644
--- a/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
+++ b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
@@ -11,7 +11,7 @@
* Principally used in the composite Htmx value object.
*
* @see \Drupal\Core\Ajax\Htmx
- * @see https://htmx.org/reference/
+ * @see https://htmx.org/reference/#response_headers
*/
class HtmxResponseHeaders implements HtmxHeaderInterface {
diff --git a/core/lib/Drupal/Core/Template/HtmxAttribute.php b/core/lib/Drupal/Core/Template/HtmxAttribute.php
index a5a0a23b1b73..c9fa137df422 100644
--- a/core/lib/Drupal/Core/Template/HtmxAttribute.php
+++ b/core/lib/Drupal/Core/Template/HtmxAttribute.php
@@ -6,16 +6,27 @@
use Symfony\Component\Serializer\NameConverter\CamelCaseToSnakeCaseNameConverter;
/**
- * Adds methods for creating HTMX attributes.
+ * Collects, sanitizes, and renders attributes for HTMX integration.
*
- * References to HTMX attributes are given on each method.
+ * This object is composed into \Drupal\Core\Ajax\Htmx. The most common usage
+ * will be to access it as a property there.
*
- * We hope to add an interface, AttributeInterface, to core and implement that
- * rather than extend a class. For now, this is what we can do.
+ * There are times when this class is needed directly because a portion of
+ * HTML is being managed directly, such as a prefix
+ * element.
*
+ * @code
+ * $attributes = new Attribute(['id' => 'edit-export-wrapper']);
+ * $export_htmx_attributes = new HtmxAttribute();
+ * $export_htmx_attributes->swapOob('outerHTML:#edit-export-wrapper');
+ * $attributes = $attributes->merge($export_htmx_attributes);
+ * $form['export']['#prefix'] = '<div ' . $attributes . '>';
+ * @endcode
+ *
+ * @see \Drupal\Core\Ajax\Htmx
* @see https://htmx.org/reference/
*/
-class HtmxAttribute Implements HtmlAttributeInterface {
+class HtmxAttribute implements HtmlAttributeInterface {
use HtmlAttributeTrait;
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 0c43d80a12be..b401c53dfd7f 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -11,6 +11,7 @@
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Template\Attribute;
use Drupal\Core\Template\HtmxAttribute;
use Drupal\Core\Url;
use Symfony\Component\DependencyInjection\ContainerInterface;
@@ -160,10 +161,12 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
// See https://htmx.org/attributes/hx-swap-oob/ for a detailed description
// of selection and targeting with ::swapOob.
// Since this is placed directly in the prefix string, use an
- // HtmxAttribute object directly.
- $export_htmx = new HtmxAttribute();
- $attributes = (string) $export_htmx->swapOob('outerHTML:#edit-export-wrapper');
- $form['export']['#prefix'] = '<div id="edit-export-wrapper" ' . $attributes . '>';
+ // HtmxAttribute object directly and merge it with standard attributes.
+ $attributes = new Attribute(['id' => 'edit-export-wrapper']);
+ $export_htmx_attributes = new HtmxAttribute();
+ $export_htmx_attributes->swapOob('outerHTML:#edit-export-wrapper');
+ $attributes = $attributes->merge($export_htmx_attributes);
+ $form['export']['#prefix'] = '<div ' . $attributes . '>';
}
elseif ($trigger === 'edit-config-name') {
// A name is selected.
--
GitLab
From 8f24b01c583f1e25e9c343445cb23847fd5df513 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Wed, 4 Dec 2024 08:21:01 -0500
Subject: [PATCH 08/26] Test for htmx response header
---
.../htmx_headers_test.info.yml | 5 +
.../htmx_headers_test.routing.yml | 103 ++++++
.../Controller/TestHtmxHeadersController.php | 308 ++++++++++++++++++
.../KernelTests/Core/Http/HtmxHeaderTest.php | 126 +++++++
4 files changed, 542 insertions(+)
create mode 100644 core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.info.yml
create mode 100644 core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.routing.yml
create mode 100644 core/modules/system/tests/modules/htmx_headers_test/src/Controller/TestHtmxHeadersController.php
create mode 100644 core/tests/Drupal/KernelTests/Core/Http/HtmxHeaderTest.php
diff --git a/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.info.yml b/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.info.yml
new file mode 100644
index 000000000000..82db4315f10b
--- /dev/null
+++ b/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.info.yml
@@ -0,0 +1,5 @@
+name: 'HTMX Header test'
+type: module
+description: 'Provides routes that return render arrays for testing HtmxResponseHeader methods.'
+package: Testing
+version: VERSION
diff --git a/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.routing.yml b/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.routing.yml
new file mode 100644
index 000000000000..3afb9d8c5272
--- /dev/null
+++ b/core/modules/system/tests/modules/htmx_headers_test/htmx_headers_test.routing.yml
@@ -0,0 +1,103 @@
+htmx_headers_test.location_url:
+ path: '/test-htmx-headers/location-url'
+ defaults:
+ _title: 'Location: URL'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::locationUrl'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.location_json:
+ path: '/test-htmx-headers/location-json'
+ defaults:
+ _title: 'Location: JSON'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::locationJson'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.push_url:
+ path: '/test-htmx-headers/push-url'
+ defaults:
+ _title: 'Push-url'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::pushUrl'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.push_url_false:
+ path: '/test-htmx-headers/push-url-false'
+ defaults:
+ _title: 'Push-url false'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::pushUrlFalse'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.replace_url:
+ path: '/test-htmx-headers/replace-url'
+ defaults:
+ _title: 'Replace-url'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::replaceUrl'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.replace_url_false:
+ path: '/test-htmx-headers/replace-url-false'
+ defaults:
+ _title: 'Replace-url false'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::replaceUrlFalse'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.refresh:
+ path: '/test-htmx-headers/refresh'
+ defaults:
+ _title: 'Refresh'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::refresh'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.reselect:
+ path: '/test-htmx-headers/reselect'
+ defaults:
+ _title: 'Reselect'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::reselect'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.redirect:
+ path: '/test-htmx-headers/redirect'
+ defaults:
+ _title: 'Redirect'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::redirectHeader'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.reswap:
+ path: '/test-htmx-headers/reswap'
+ defaults:
+ _title: 'Reswap'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::reswap'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.retarget:
+ path: '/test-htmx-headers/retarget'
+ defaults:
+ _title: 'Retarget'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::retarget'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.triggers:
+ path: '/test-htmx-headers/triggers'
+ defaults:
+ _title: 'Triggers'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::triggers'
+ requirements:
+ _permission: 'access content'
+
+htmx_headers_test.triggers_json:
+ path: '/test-htmx-headers/triggers-json'
+ defaults:
+ _title: 'Triggers'
+ _controller: '\Drupal\htmx_headers_test\Controller\TestHtmxHeadersController::triggersJson'
+ requirements:
+ _permission: 'access content'
diff --git a/core/modules/system/tests/modules/htmx_headers_test/src/Controller/TestHtmxHeadersController.php b/core/modules/system/tests/modules/htmx_headers_test/src/Controller/TestHtmxHeadersController.php
new file mode 100644
index 000000000000..1180aaed50f5
--- /dev/null
+++ b/core/modules/system/tests/modules/htmx_headers_test/src/Controller/TestHtmxHeadersController.php
@@ -0,0 +1,308 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\htmx_headers_test\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Url;
+use Drupal\Core\Http\HtmxLocationResponseData;
+use Drupal\Core\Http\HtmxResponseHeaders;
+
+/**
+ * Returns responses for HTMX Header test routes.
+ */
+final class TestHtmxHeadersController extends ControllerBase {
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function locationUrl(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->location($this->getUrl());
+ $build['content'] = [
+ '#markup' => $this->t('Location'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Helper function to build a sample url.
+ *
+ * @return \Drupal\Core\Url
+ * The url object.
+ */
+ protected function getUrl(): Url {
+ return Url::fromRoute('<front>');
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function locationJson(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $data = new HtmxLocationResponseData(
+ path: $this->getUrl(),
+ source: 'source-value',
+ event: 'event-value',
+ headers: ['Header-one' => 'one'],
+ handler: 'handler-value',
+ target: 'target-value',
+ swap: 'swap-value',
+ select: 'select-value',
+ values: ['one' => '1', 'two' => '2'],
+ );
+ $htmxHeaders->location($data);
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('Location'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function pushUrlFalse(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->pushUrl(FALSE);
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('pushUrl'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function pushUrl(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->pushUrl($this->getUrl());
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('pushUrl'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function replaceUrlFalse(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->replaceUrl(FALSE);
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('pushUrl'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function replaceUrl(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->replaceUrl($this->getUrl());
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('replaceUrl'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function redirectHeader(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->redirect($this->getUrl());
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('redirect'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function refresh(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->refresh(TRUE);
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('refresh'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function reswap(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->reswap('swap-value');
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('reswap'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function retarget(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->retarget('retarget-value');
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('retarget'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function reselect(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->reselect('reselect-value');
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('reselect'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function triggers(): array {
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->trigger('trigger-value')
+ ->triggerAfterSettle('trigger-value')
+ ->triggerAfterSwap('trigger-value');
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('reselect'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+ /**
+ * Builds the response with header.
+ *
+ * @return array
+ * The render array
+ */
+ public function triggersJson(): array {
+ $data = [
+ 'showMessage' =>
+ [
+ 'level' => 'info',
+ 'message' => 'Here Is A Message',
+ ],
+ ];
+ $htmxHeaders = new HtmxResponseHeaders();
+ $htmxHeaders->trigger($data)
+ ->triggerAfterSettle($data)
+ ->triggerAfterSwap($data);
+ $build['content'] = [
+ '#type' => 'item',
+ '#markup' => $this->t('reselect'),
+ '#attached' => [
+ 'http_header' => $htmxHeaders->toArray(),
+ ],
+ ];
+
+ return $build;
+ }
+
+}
diff --git a/core/tests/Drupal/KernelTests/Core/Http/HtmxHeaderTest.php b/core/tests/Drupal/KernelTests/Core/Http/HtmxHeaderTest.php
new file mode 100644
index 000000000000..ef3fc944365a
--- /dev/null
+++ b/core/tests/Drupal/KernelTests/Core/Http/HtmxHeaderTest.php
@@ -0,0 +1,126 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\KernelTests\Core\Http;
+
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\KernelTests\KernelTestBase;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * Test the header builder.
+ *
+ * @group Http
+ *
+ * @coversDefaultClass \Drupal\Core\Http\HtmxResponseHeaders
+ */
+final class HtmxHeaderTest extends KernelTestBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ protected static $modules = ['system', 'user', 'htmx_headers_test'];
+
+ /**
+ * Injected entity type manager.
+ */
+ protected EntityTypeManagerInterface $entityTypeManager;
+
+ /**
+ * Set up the test.
+ */
+ protected function setUp(): void {
+ parent::setUp();
+ $this->entityTypeManager = $this->container->get('entity_type.manager');
+ $this->installEntitySchema('user_role');
+ $this->installEntitySchema('user');
+ $this->installConfig(['user']);
+ $this->container
+ ->get('module_handler')
+ ->loadInclude('user', 'install');
+ user_install();
+ /** @var \Drupal\user\Entity\Role $anonymous */
+ $anonymous = $this->entityTypeManager->getStorage('user_role')->load('anonymous');
+ $anonymous->grantPermission('access content')->save();
+ }
+
+ /**
+ * Test all the headers.
+ *
+ * @covers ::location
+ * @covers ::pushUrl
+ * @covers ::replaceUrl
+ * @covers ::refresh
+ * @covers ::reswap
+ * @dataProvider hxHeaderDataProvider
+ */
+ public function testHeaders(string $path, string $headerName, string $headerValue): void {
+ $httpKernel = $this->container->get('http_kernel');
+ $request = Request::create($path);
+ $response = $httpKernel->handle($request);
+ $this->assertTrue($response->headers->has($headerName));
+ $value = $response->headers->get($headerName);
+ $this->assertEquals($headerValue, $value);
+ }
+
+ /**
+ * Data provider for ::testHeaders.
+ */
+ public static function hxHeaderDataProvider(): array {
+ return [
+ ['/test-htmx-headers/location-url', 'HX-Location', '/'],
+ [
+ '/test-htmx-headers/location-json',
+ 'HX-Location',
+ '{"path":"\/","source":"source-value","event":"event-value","headers":{"Header-one":"one"},"handler":"handler-value","target":"target-value","swap":"swap-value","select":"select-value","values":{"one":"1","two":"2"}}',
+ ],
+ ['/test-htmx-headers/push-url', 'HX-Push-Url', '/'],
+ ['/test-htmx-headers/push-url-false', 'HX-Push-Url', 'false'],
+ ['/test-htmx-headers/replace-url', 'HX-Replace-Url', '/'],
+ ['/test-htmx-headers/replace-url-false', 'HX-Replace-Url', 'false'],
+ ['/test-htmx-headers/redirect', 'HX-Redirect', '/'],
+ ['/test-htmx-headers/refresh', 'HX-Refresh', 'true'],
+ ['/test-htmx-headers/reswap', 'HX-Reswap', 'swap-value'],
+ ['/test-htmx-headers/retarget', 'HX-Retarget', 'retarget-value'],
+ ['/test-htmx-headers/reselect', 'HX-Reselect', 'reselect-value'],
+ ];
+ }
+
+ /**
+ * Test trigger headers with just an event name.
+ */
+ public function testSimpleTriggers(): void {
+ $httpKernel = $this->container->get('http_kernel');
+ $request = Request::create('/test-htmx-headers/triggers');
+ $response = $httpKernel->handle($request);
+ $this->assertTrue($response->headers->has('HX-Trigger'));
+ $this->assertTrue($response->headers->has('HX-Trigger-After-Settle'));
+ $this->assertTrue($response->headers->has('HX-Trigger-After-Swap'));
+ $value = $response->headers->get('HX-Trigger');
+ $this->assertEquals('trigger-value', $value);
+ $value = $response->headers->get('HX-Trigger-After-Settle');
+ $this->assertEquals('trigger-value', $value);
+ $value = $response->headers->get('HX-Trigger-After-Swap');
+ $this->assertEquals('trigger-value', $value);
+ }
+
+ /**
+ * Test triggers with JSON payload.
+ */
+ public function testJsonTriggers(): void {
+ $httpKernel = $this->container->get('http_kernel');
+ $request = Request::create('/test-htmx-headers/triggers-json');
+ $response = $httpKernel->handle($request);
+ $this->assertTrue($response->headers->has('HX-Trigger'));
+ $this->assertTrue($response->headers->has('HX-Trigger-After-Settle'));
+ $this->assertTrue($response->headers->has('HX-Trigger-After-Swap'));
+ $value = $response->headers->get('HX-Trigger');
+ $this->assertEquals('{"showMessage":{"level":"info","message":"Here Is A Message"}}', $value);
+ $value = $response->headers->get('HX-Trigger-After-Settle');
+ $this->assertEquals('{"showMessage":{"level":"info","message":"Here Is A Message"}}', $value);
+ $value = $response->headers->get('HX-Trigger-After-Swap');
+ $this->assertEquals('{"showMessage":{"level":"info","message":"Here Is A Message"}}', $value);
+ }
+
+}
--
GitLab
From e94237bfac5d9f14d5098400aa4f7fa93699133d Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Wed, 4 Dec 2024 08:31:29 -0500
Subject: [PATCH 09/26] Test for htmx attribute
---
.../Core/Template/HtmxAttributeTest.php | 28 +++++++++----------
1 file changed, 14 insertions(+), 14 deletions(-)
diff --git a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
index 8270a5a6fa84..be5003d6aa6b 100644
--- a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
@@ -20,7 +20,7 @@ final class HtmxAttributeTest extends KernelTestBase {
/**
* {@inheritdoc}
*/
- protected static $modules = ['system'];
+ protected static $modules = ['common_test'];
/**
* Class under test.
@@ -43,12 +43,12 @@ protected function setUp(): void {
* @covers ::get
*/
public function testHxGet(): void {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
$this->htmxAttribute->get($url);
$rendered = (string) $this->htmxAttribute;
// The paths in GitLabCI include a subfolder.
$this->assertStringStartsWith(' data-hx-get="', $rendered);
- $this->assertStringEndsWith('/system/404"', $rendered);
+ $this->assertStringEndsWith('/common-test/destination"', $rendered);
}
/**
@@ -57,12 +57,12 @@ public function testHxGet(): void {
* @covers ::post
*/
public function testHxPost(): void {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
$this->htmxAttribute->post($url);
$rendered = (string) $this->htmxAttribute;
// The paths in GitLabCI include a subfolder.
$this->assertStringStartsWith(' data-hx-post="', $rendered);
- $this->assertStringEndsWith('/system/404"', $rendered);
+ $this->assertStringEndsWith('/common-test/destination"', $rendered);
}
/**
@@ -71,12 +71,12 @@ public function testHxPost(): void {
* @covers ::put
*/
public function testHxPut(): void {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
$this->htmxAttribute->put($url);
$rendered = (string) $this->htmxAttribute;
// The paths in GitLabCI include a subfolder.
$this->assertStringStartsWith(' data-hx-put="', $rendered);
- $this->assertStringEndsWith('/system/404"', $rendered);
+ $this->assertStringEndsWith('/common-test/destination"', $rendered);
}
/**
@@ -85,12 +85,12 @@ public function testHxPut(): void {
* @covers ::patch
*/
public function testHxPatch(): void {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
$this->htmxAttribute->patch($url);
$rendered = (string) $this->htmxAttribute;
// The paths in GitLabCI include a subfolder.
$this->assertStringStartsWith(' data-hx-patch="', $rendered);
- $this->assertStringEndsWith('/system/404"', $rendered);
+ $this->assertStringEndsWith('/common-test/destination"', $rendered);
}
/**
@@ -99,12 +99,12 @@ public function testHxPatch(): void {
* @covers ::delete
*/
public function testHxDelete(): void {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
$this->htmxAttribute->delete($url);
$rendered = (string) $this->htmxAttribute;
// The paths in GitLabCI include a subfolder.
$this->assertStringStartsWith(' data-hx-delete="', $rendered);
- $this->assertStringEndsWith('/system/404"', $rendered);
+ $this->assertStringEndsWith('/common-test/destination"', $rendered);
}
/**
@@ -177,11 +177,11 @@ public function testHxReplaceUrl(bool|Url $value, string $endsWith): void {
* Array of bool|Url, expected.
*/
public static function hxPushUrlDataProvider(): array {
- $url = Url::fromRoute('system.404');
+ $url = Url::fromRoute('common_test.destination');
return [
[TRUE, 'true"'],
[FALSE, 'false"'],
- [$url, '/system/404"'],
+ [$url, '/common-test/destination"'],
];
}
@@ -385,7 +385,7 @@ public static function hxSimpleStringAttributesDataProvider(): array {
['select', 'info[data-drupal-selector="edit-select"]', " data-hx-select='$singleQuotedSyntax'"],
['selectOob', '#info-details', ' data-hx-select-oob="#info-details"'],
['selectOob', '#info-details:afterbegin, #alert', ' data-hx-select-oob="#info-details:afterbegin, #alert"'],
- ['swap', 'afterbegin', ' data-hx-swap="afterbegin"'],
+ ['swap', 'afterbegin', ' data-hx-swap="afterbegin ignoreTitle:true"'],
['target', 'descriptor', ' data-hx-target="descriptor"'],
['trigger', 'event', ' data-hx-trigger="event"'],
['confirm', 'A confirmation message', ' data-hx-confirm="A confirmation message"'],
--
GitLab
From 8690da0587284ccc4b5b5669bcc8c83843f26790 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Thu, 12 Dec 2024 21:23:27 -0500
Subject: [PATCH 10/26] Working out behaviors using insert
---
core/lib/Drupal/Core/Ajax/Htmx.php | 74 ++++++++++++++++++-
core/lib/Drupal/Core/Http/HttpMethods.php | 13 ++++
.../Drupal/Core/Template/HtmxAttribute.php | 66 ++++++++---------
.../Core/Template/HtmxAttributeTest.php | 6 ++
4 files changed, 124 insertions(+), 35 deletions(-)
create mode 100644 core/lib/Drupal/Core/Http/HttpMethods.php
diff --git a/core/lib/Drupal/Core/Ajax/Htmx.php b/core/lib/Drupal/Core/Ajax/Htmx.php
index 569182e2c911..163c919a6e96 100644
--- a/core/lib/Drupal/Core/Ajax/Htmx.php
+++ b/core/lib/Drupal/Core/Ajax/Htmx.php
@@ -4,7 +4,9 @@
use Drupal\Core\Http\HtmxHeaderInterface;
use Drupal\Core\Http\HtmxResponseHeaders;
+use Drupal\Core\Http\HttpMethods;
use Drupal\Core\Template\HtmxAttribute;
+use Drupal\Core\Url;
/**
* Collects HTMX attributes and headers and manages complex behaviors.
@@ -12,11 +14,28 @@
* An instance of this object is required to add HTMX behaviors to a render
* element.
*
+ * Methods to configure common behaviors are provided:
+ *
+ * @code
+ * $htmx = new Htmx();
+ * $node_url = Url::fromRoute(
+ * route_name: entity.node.canonical',
+ * route_parameters: ['node' => 123],
+ * );
+ * $htmx->insert($node_url, 'div.example', 'article.page')
+ *
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * Attributes may also be specified explicitly:
+ *
* @code
* $htmx = new Htmx();
* $form_url = Url::fromRoute(
- * route_name: 'config.export_single',
- * route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
+ * route_name: 'config.export_single',
+ * route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
* );
*
* $htmx->attributes
@@ -56,4 +75,55 @@ public function __construct(
public readonly HtmxHeaderInterface $headers = new HtmxResponseHeaders(),
) {}
+ public function setRequest(Url $url, HttpMethods $method) {
+ switch ($method) {
+ case HttpMethods::Get:
+ $this->attributes->get($url);
+ break;
+
+ case HttpMethods::Put:
+ $this->attributes->put($url);
+ break;
+
+ case HttpMethods::Patch:
+ $this->attributes->patch($url);
+ break;
+
+ case HttpMethods::Post:
+ $this->attributes->post($url);
+ break;
+
+ case HttpMethods::Delete:
+ $this->attributes->delete($url);
+ break;
+ }
+ }
+
+ /**
+ * Configures HTMX properties to select and insert content from a request.
+ *
+ * Selected content will be inserted in the target element as the last content
+ * before the closing tag.
+ *
+ * @param \Drupal\Core\Url $url
+ * The Url which is used to request the content.
+ * @param string $selector
+ * A CSS selector that selects the new content within the returned response.
+ * @param string $target
+ * A CSS selector that selects the target element in the current page.
+ * @param \Drupal\Core\Http\HttpMethods $method
+ * The HTTP method to use. Defaults to GET.
+ *
+ * @return \Drupal\Core\Ajax\Htmx
+ * Returns this object for method chaining.
+ */
+ public function insert(Url $url, string $selector, string $target, HttpMethods $method = HttpMethods::Get): Htmx {
+ $this->setRequest($url, $method);
+ $this->attributes->select($selector);
+ $this->attributes->target($target);
+ $this->attributes->swap('beforeend');
+
+ return $this;
+ }
+
}
diff --git a/core/lib/Drupal/Core/Http/HttpMethods.php b/core/lib/Drupal/Core/Http/HttpMethods.php
new file mode 100644
index 000000000000..8767fcf7b787
--- /dev/null
+++ b/core/lib/Drupal/Core/Http/HttpMethods.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Drupal\Core\Http;
+
+enum HttpMethods {
+
+ case Get;
+ case Post;
+ case Put;
+ case Patch;
+ case Delete;
+
+}
diff --git a/core/lib/Drupal/Core/Template/HtmxAttribute.php b/core/lib/Drupal/Core/Template/HtmxAttribute.php
index c9fa137df422..798cc2f4bee7 100644
--- a/core/lib/Drupal/Core/Template/HtmxAttribute.php
+++ b/core/lib/Drupal/Core/Template/HtmxAttribute.php
@@ -168,7 +168,7 @@ public function get(Url $url): HtmxAttribute {
*
* @see https://htmx.org/attributes/hx-post/
*/
- public function post(Url $url) {
+ public function post(Url $url): HtmxAttribute {
$this->createStringAttribute('post', $url->toString());
return $this;
}
@@ -184,7 +184,7 @@ public function post(Url $url) {
*
* @see https://htmx.org/attributes/hx-put/
*/
- public function put(Url $url) {
+ public function put(Url $url): HtmxAttribute {
$this->createStringAttribute('put', $url->toString());
return $this;
}
@@ -200,7 +200,7 @@ public function put(Url $url) {
*
* @see https://htmx.org/attributes/hx-patch/
*/
- public function patch(Url $url) {
+ public function patch(Url $url): HtmxAttribute {
$this->createStringAttribute('patch', $url->toString());
return $this;
}
@@ -216,7 +216,7 @@ public function patch(Url $url) {
*
* @see https://htmx.org/attributes/hx-delete/
*/
- public function delete(Url $url) {
+ public function delete(Url $url): HtmxAttribute {
$this->createStringAttribute('delete', $url->toString());
return $this;
}
@@ -235,7 +235,7 @@ public function delete(Url $url) {
*
* @see https://htmx.org/attributes/hx-on/
*/
- public function on(string $event, string $action) {
+ public function on(string $event, string $action): HtmxAttribute {
// Special case: the `::EventName` shorthand for `htmx:EventName`.
// Remove one leading `:` so that our final attribute is
// `data-hx--event-name` rather than `data-hx---event-name`.
@@ -263,7 +263,7 @@ public function on(string $event, string $action) {
*
* @see https://htmx.org/attributes/hx-push-url/
*/
- public function pushUrl(bool|Url $value) {
+ public function pushUrl(bool|Url $value): HtmxAttribute {
if ($value instanceof Url) {
$this->createStringAttribute('push-url', $value->toString());
}
@@ -285,7 +285,7 @@ public function pushUrl(bool|Url $value) {
*
* @see https://htmx.org/attributes/hx-select/
*/
- public function select(string $selector) {
+ public function select(string $selector): HtmxAttribute {
$this->createStringAttribute('select', $selector);
return $this;
}
@@ -304,7 +304,7 @@ public function select(string $selector) {
*
* @see https://htmx.org/attributes/hx-select-oob/
*/
- public function selectOob(string $selectors) {
+ public function selectOob(string $selectors): HtmxAttribute {
$this->createStringAttribute('select-oob', $selectors);
return $this;
}
@@ -322,7 +322,7 @@ public function selectOob(string $selectors) {
*
* @see https://htmx.org/attributes/hx-swap/
*/
- public function swap(string $strategy, bool $ignoreTitle = TRUE) {
+ public function swap(string $strategy, bool $ignoreTitle = TRUE): HtmxAttribute {
// HTMX defaults this behavior to FALSE, that is it replaces page title.
// We believe our most common use case is to not change the title.
if ($ignoreTitle) {
@@ -347,7 +347,7 @@ public function swap(string $strategy, bool $ignoreTitle = TRUE) {
*
* @see https://htmx.org/attributes/hx-swap-oob/
*/
- public function swapOob(true|string $value) {
+ public function swapOob(true|string $value): HtmxAttribute {
if ($value === TRUE) {
$this->createStringAttribute('swap-oob', 'true');
}
@@ -371,7 +371,7 @@ public function swapOob(true|string $value) {
*
* @see https://htmx.org/attributes/hx-target/
*/
- public function target(string $target) {
+ public function target(string $target): HtmxAttribute {
$this->createStringAttribute('target', $target);
return $this;
}
@@ -392,7 +392,7 @@ public function target(string $target) {
*
* @see https://htmx.org/attributes/hx-trigger/
*/
- public function trigger(string $triggerDefinition) {
+ public function trigger(string $triggerDefinition): HtmxAttribute {
$this->createStringAttribute('trigger', $triggerDefinition);
return $this;
}
@@ -410,7 +410,7 @@ public function trigger(string $triggerDefinition) {
*
* @see https://htmx.org/attributes/hx-trigger/
*/
- public function vals(array $values) {
+ public function vals(array $values): HtmxAttribute {
$this->createJsonAttribute('vals', $values);
return $this;
}
@@ -431,7 +431,7 @@ public function vals(array $values) {
*
* @see https://htmx.org/attributes/hx-boost/
*/
- public function boost(bool $value) {
+ public function boost(bool $value): HtmxAttribute {
if ($value === TRUE) {
$this->createStringAttribute('boost', 'true');
}
@@ -451,7 +451,7 @@ public function boost(bool $value) {
*
* @see https://htmx.org/attributes/hx-confirm/
*/
- public function confirm(string $message) {
+ public function confirm(string $message): HtmxAttribute {
$this->createStringAttribute('confirm', $message);
return $this;
}
@@ -463,7 +463,7 @@ public function confirm(string $message) {
*
* @see https://htmx.org/attributes/hx-disable/
*/
- public function disable() {
+ public function disable(): HtmxAttribute {
$this->createBooleanAttribute('disable', TRUE);
return $this;
}
@@ -481,7 +481,7 @@ public function disable() {
*
* @see https://htmx.org/attributes/hx-disabled-elt/
*/
- public function disabledElements(string $descriptor) {
+ public function disabledElements(string $descriptor): HtmxAttribute {
$this->createStringAttribute('disabled-elt', $descriptor);
return $this;
}
@@ -496,7 +496,7 @@ public function disabledElements(string $descriptor) {
*
* @see https://htmx.org/attributes/hx-disinherit/
*/
- public function disinherit(string $names) {
+ public function disinherit(string $names): HtmxAttribute {
$this->createStringAttribute('disinherit', $names);
return $this;
}
@@ -511,7 +511,7 @@ public function disinherit(string $names) {
*
* @see https://htmx.org/attributes/hx-encoding/
*/
- public function encoding(string $method = 'multipart/form-data') {
+ public function encoding(string $method = 'multipart/form-data'): HtmxAttribute {
$this->createStringAttribute('encoding', $method);
return $this;
}
@@ -526,7 +526,7 @@ public function encoding(string $method = 'multipart/form-data') {
*
* @see https://htmx.org/attributes/hx-ext/
*/
- public function ext(string $names) {
+ public function ext(string $names): HtmxAttribute {
$this->createStringAttribute('ext', $names);
return $this;
}
@@ -541,7 +541,7 @@ public function ext(string $names) {
*
* @see https://htmx.org/attributes/hx-headers/
*/
- public function headers(array $headerValues) {
+ public function headers(array $headerValues): HtmxAttribute {
$this->createJsonAttribute('headers', $headerValues);
return $this;
}
@@ -561,7 +561,7 @@ public function headers(array $headerValues) {
*
* @see https://htmx.org/attributes/hx-history/
*/
- public function history(bool $value = FALSE) {
+ public function history(bool $value = FALSE): HtmxAttribute {
if ($value) {
$this->createStringAttribute('history', 'true');
}
@@ -578,7 +578,7 @@ public function history(bool $value = FALSE) {
*
* @see https://htmx.org/attributes/hx-history-elt/
*/
- public function historyElement() {
+ public function historyElement(): HtmxAttribute {
$this->createBooleanAttribute('history-elt', TRUE);
return $this;
}
@@ -596,7 +596,7 @@ public function historyElement() {
*
* @see https://htmx.org/attributes/hx-include/
*/
- public function include(string $descriptors) {
+ public function include(string $descriptors): HtmxAttribute {
$this->createStringAttribute('include', $descriptors);
return $this;
}
@@ -611,7 +611,7 @@ public function include(string $descriptors) {
*
* @see https://htmx.org/attributes/hx-indicator/
*/
- public function indicator(string $selector) {
+ public function indicator(string $selector): HtmxAttribute {
$this->createStringAttribute('indicator', $selector);
return $this;
}
@@ -633,7 +633,7 @@ public function indicator(string $selector) {
*
* @see https://htmx.org/attributes/hx-inherit/
*/
- public function inherit(string $attributes) {
+ public function inherit(string $attributes): HtmxAttribute {
$this->createStringAttribute('inherit', $attributes);
return $this;
}
@@ -648,7 +648,7 @@ public function inherit(string $attributes) {
*
* @see https://htmx.org/attributes/hx-params/
*/
- public function params(string $filter) {
+ public function params(string $filter): HtmxAttribute {
$this->createStringAttribute('params', $filter);
return $this;
}
@@ -663,7 +663,7 @@ public function params(string $filter) {
*
* @see https://htmx.org/attributes/hx-preserve/
*/
- public function preserve(string $id) {
+ public function preserve(string $id): HtmxAttribute {
$this->createStringAttribute('preserve', $id);
return $this;
}
@@ -678,7 +678,7 @@ public function preserve(string $id) {
*
* @see https://htmx.org/attributes/hx-prompt/
*/
- public function prompt(string $message) {
+ public function prompt(string $message): HtmxAttribute {
$this->createStringAttribute('prompt', $message);
return $this;
}
@@ -701,7 +701,7 @@ public function prompt(string $message) {
*
* @see https://htmx.org/attributes/hx-replace-url/
*/
- public function replaceUrl(bool|Url $value) {
+ public function replaceUrl(bool|Url $value): HtmxAttribute {
if ($value instanceof Url) {
$this->createStringAttribute('replace-url', $value->toString());
}
@@ -730,7 +730,7 @@ public function replaceUrl(bool|Url $value) {
*
* @see https://htmx.org/attributes/hx-headers/
*/
- public function request(array $configValues) {
+ public function request(array $configValues): HtmxAttribute {
$this->createJsonAttribute('request', $configValues);
return $this;
}
@@ -745,7 +745,7 @@ public function request(array $configValues) {
*
* @see https://htmx.org/attributes/hx-sync/
*/
- public function sync(string $selector) {
+ public function sync(string $selector): HtmxAttribute {
$this->createStringAttribute('sync', $selector);
return $this;
}
@@ -760,7 +760,7 @@ public function sync(string $selector) {
*
* @see https://htmx.org/attributes/hx-validate/
*/
- public function validate(bool $value = TRUE) {
+ public function validate(bool $value = TRUE): HtmxAttribute {
if ($value) {
$this->createStringAttribute('validate', 'true');
}
diff --git a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
index be5003d6aa6b..6fcf01a8d7b9 100644
--- a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
@@ -221,6 +221,12 @@ public function testHxVals(): void {
$rendered = (string) $this->htmxAttribute;
$expected = " data-hx-vals='" . '{"myValue":"My Value"}' . "'";
$this->assertEquals($expected, $rendered);
+ // AttributeJson is not tested in AttributeTest, verify safe strings.
+ $values = ['myValue' => '<script>alert(123)</script>'];
+ $this->htmxAttribute->vals($values);
+ $rendered = (string) $this->htmxAttribute;
+ $expected = " data-hx-vals='" . '{"myValue":"alert(123)"}' . "'";
+ $this->assertEquals($expected, $rendered);
}
/**
--
GitLab
From f7e08025d0d418d58c3b3fb7087744434c31b2ab Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sun, 15 Dec 2024 09:45:21 -0500
Subject: [PATCH 11/26] Reconfigure namespaces Setup Operations for developers
to use to configure interactions using HTMX
---
core/core.services.yml | 2 +-
core/lib/Drupal/Core/Ajax/Htmx.php | 129 -------------
.../Drupal/Core/Http/HtmxHeaderInterface.php | 13 +-
.../Drupal/Core/Http/HtmxResponseHeaders.php | 25 ++-
.../Http/{HttpMethods.php => HttpMethod.php} | 2 +-
.../Core/Render/Element/RenderElementBase.php | 10 +-
.../Drupal/Core/Render/Hypermedia/Htmx.php | 178 ++++++++++++++++++
.../Core/Render/Hypermedia/HtmxInterface.php | 101 ++++++++++
.../HtmxResponseAttachmentsProcessor.php | 2 +-
.../Operations/HtmxOperationInterface.php | 21 +++
.../HtmxRequestOperationInterface.php | 32 ++++
.../Operations/HtmxRequestTrait.php | 64 +++++++
.../Render/Hypermedia/Operations/Insert.php | 38 ++++
.../Drupal/Core/Template/AttributeHelper.php | 4 +-
.../Core/Template/HtmlAttributeInterface.php | 2 +
.../Core/Template/HtmlAttributeTrait.php | 5 +-
.../Drupal/Core/Template/HtmxAttribute.php | 2 +-
.../src/Form/ConfigSingleExportForm.php | 2 +-
18 files changed, 481 insertions(+), 151 deletions(-)
delete mode 100644 core/lib/Drupal/Core/Ajax/Htmx.php
rename core/lib/Drupal/Core/Http/{HttpMethods.php => HttpMethod.php} (84%)
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Htmx.php
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
rename core/lib/Drupal/Core/{Ajax => Render/Hypermedia}/HtmxResponseAttachmentsProcessor.php (99%)
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
diff --git a/core/core.services.yml b/core/core.services.yml
index 491d9d7d997e..79d276046000 100644
--- a/core/core.services.yml
+++ b/core/core.services.yml
@@ -1401,7 +1401,7 @@ services:
class: Drupal\Core\EventSubscriber\HtmlResponseSubscriber
arguments: ['@html_response.attachments_processor']
htmx_response.attachments_processor:
- class: Drupal\Core\Ajax\HtmxResponseAttachmentsProcessor
+ class: Drupal\Core\Render\Hypermedia\HtmxResponseAttachmentsProcessor
arguments: [ '@asset.resolver', '@config.factory', '@asset.css.collection_renderer', '@asset.js.collection_renderer', '@request_stack', '@renderer', '@module_handler', '@language_manager' ]
htmx.response_subscriber:
class: Drupal\Core\EventSubscriber\HtmxResponseSubscriber
diff --git a/core/lib/Drupal/Core/Ajax/Htmx.php b/core/lib/Drupal/Core/Ajax/Htmx.php
deleted file mode 100644
index 163c919a6e96..000000000000
--- a/core/lib/Drupal/Core/Ajax/Htmx.php
+++ /dev/null
@@ -1,129 +0,0 @@
-<?php
-
-namespace Drupal\Core\Ajax;
-
-use Drupal\Core\Http\HtmxHeaderInterface;
-use Drupal\Core\Http\HtmxResponseHeaders;
-use Drupal\Core\Http\HttpMethods;
-use Drupal\Core\Template\HtmxAttribute;
-use Drupal\Core\Url;
-
-/**
- * Collects HTMX attributes and headers and manages complex behaviors.
- *
- * An instance of this object is required to add HTMX behaviors to a render
- * element.
- *
- * Methods to configure common behaviors are provided:
- *
- * @code
- * $htmx = new Htmx();
- * $node_url = Url::fromRoute(
- * route_name: entity.node.canonical',
- * route_parameters: ['node' => 123],
- * );
- * $htmx->insert($node_url, 'div.example', 'article.page')
- *
- * $build = [
- * '#htmx' => $htmx,
- * ];
- * @endcode
- *
- * Attributes may also be specified explicitly:
- *
- * @code
- * $htmx = new Htmx();
- * $form_url = Url::fromRoute(
- * route_name: 'config.export_single',
- * route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
- * );
- *
- * $htmx->attributes
- * ->post($form_url)
- * ->select('select[data-drupal-selector="edit-config-name"]')
- * ->target('select[data-drupal-selector="edit-config-name"]')
- * ->swap('outerHTML');
- *
- * $build = [
- * '#htmx' => $htmx,
- * ];
- * @endcode
- *
- * HTMX headers are added in a similar way.
- *
- * @code
- * // Also update the browser URL.
- * $push = Url::fromRoute(
- * route_name: 'config.export_single',
- * route_parameters: ['config_type' => $default_type, 'config_name' => $default_name],
- * );
- *
- * $htmx = new Htmx();
- * $htmx->headers->pushUrl($push);
- * $build = [
- * '#htmx' => $htmx,
- * ];
- * @endcode
- *
- * @see \Drupal\Core\Template\HtmxAttribute
- * @see \Drupal\Core\Http\HtmxResponseHeaders
- */
-class Htmx {
-
- public function __construct(
- public readonly HtmxAttribute $attributes = new HtmxAttribute(),
- public readonly HtmxHeaderInterface $headers = new HtmxResponseHeaders(),
- ) {}
-
- public function setRequest(Url $url, HttpMethods $method) {
- switch ($method) {
- case HttpMethods::Get:
- $this->attributes->get($url);
- break;
-
- case HttpMethods::Put:
- $this->attributes->put($url);
- break;
-
- case HttpMethods::Patch:
- $this->attributes->patch($url);
- break;
-
- case HttpMethods::Post:
- $this->attributes->post($url);
- break;
-
- case HttpMethods::Delete:
- $this->attributes->delete($url);
- break;
- }
- }
-
- /**
- * Configures HTMX properties to select and insert content from a request.
- *
- * Selected content will be inserted in the target element as the last content
- * before the closing tag.
- *
- * @param \Drupal\Core\Url $url
- * The Url which is used to request the content.
- * @param string $selector
- * A CSS selector that selects the new content within the returned response.
- * @param string $target
- * A CSS selector that selects the target element in the current page.
- * @param \Drupal\Core\Http\HttpMethods $method
- * The HTTP method to use. Defaults to GET.
- *
- * @return \Drupal\Core\Ajax\Htmx
- * Returns this object for method chaining.
- */
- public function insert(Url $url, string $selector, string $target, HttpMethods $method = HttpMethods::Get): Htmx {
- $this->setRequest($url, $method);
- $this->attributes->select($selector);
- $this->attributes->target($target);
- $this->attributes->swap('beforeend');
-
- return $this;
- }
-
-}
diff --git a/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php b/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
index 6d7b20479b0d..f1cd52b35289 100644
--- a/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
+++ b/core/lib/Drupal/Core/Http/HtmxHeaderInterface.php
@@ -18,7 +18,7 @@ interface HtmxHeaderInterface extends \IteratorAggregate, \Countable, \Stringabl
* @return bool
* Returns TRUE if the header exists, or FALSE otherwise.
*/
- public function hasHeader($name): bool;
+ public function hasHeader(string $name): bool;
/**
* Returns all storage elements as a Drupal 'http_header' array.
@@ -28,4 +28,15 @@ public function hasHeader($name): bool;
*/
public function toArray(): array;
+ /**
+ * Merges an HtmxHeaderInterface object into the current storage.
+ *
+ * @param HtmlAttributeInterface $headers
+ * The Attribute object to merge.
+ *
+ * @return HtmxHeaderInterface
+ * A combined header collection.
+ */
+ public function merge(HtmxHeaderInterface $headers): HtmxHeaderInterface;
+
}
diff --git a/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
index adc009987d60..20439a79631e 100644
--- a/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
+++ b/core/lib/Drupal/Core/Http/HtmxResponseHeaders.php
@@ -10,22 +10,19 @@
*
* Principally used in the composite Htmx value object.
*
- * @see \Drupal\Core\Ajax\Htmx
+ * @see \Drupal\Core\Render\Hypermedia\Htmx
* @see https://htmx.org/reference/#response_headers
*/
class HtmxResponseHeaders implements HtmxHeaderInterface {
- /**
- * Storage.
- */
- private HeaderBag $headers;
-
/**
* Initialize empty storage.
+ *
+ * Allows for passing a populated HeaderBag to support merging.
*/
- public function __construct() {
- $this->headers = new HeaderBag();
- }
+ public function __construct(
+ private HeaderBag $headers = new HeaderBag(),
+ ) {}
/**
* {@inheritdoc}
@@ -67,6 +64,16 @@ public function toArray(): array {
return $drupalHeaders;
}
+ /**
+ * {@inheritdoc}
+ */
+ public function merge(HtmxHeaderInterface $headers): HtmxHeaderInterface {
+ foreach ($headers as $name => $value) {
+ $this->headers->set($name, $value);
+ }
+ return $this;
+ }
+
/**
* Set HX-Location header.
*
diff --git a/core/lib/Drupal/Core/Http/HttpMethods.php b/core/lib/Drupal/Core/Http/HttpMethod.php
similarity index 84%
rename from core/lib/Drupal/Core/Http/HttpMethods.php
rename to core/lib/Drupal/Core/Http/HttpMethod.php
index 8767fcf7b787..14fe932261f6 100644
--- a/core/lib/Drupal/Core/Http/HttpMethods.php
+++ b/core/lib/Drupal/Core/Http/HttpMethod.php
@@ -2,7 +2,7 @@
namespace Drupal\Core\Http;
-enum HttpMethods {
+enum HttpMethod {
case Get;
case Post;
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index 63af81d9b21c..e582dc268608 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -3,12 +3,13 @@
namespace Drupal\Core\Render\Element;
use Drupal\Component\Utility\NestedArray;
-use Drupal\Core\Ajax\Htmx;
+use Drupal\Core\Render\Hypermedia\Htmx;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\PluginBase;
use Drupal\Core\Render\BubbleableMetadata;
use Drupal\Core\Render\Element;
+use Drupal\Core\Render\Hypermedia\HtmxInterface;
use Drupal\Core\Template\AttributeHelper;
use Drupal\Core\Url;
@@ -454,11 +455,16 @@ public static function preRenderHtmxElement(array $element): array {
$element['#htmx_processed'] = FALSE;
// Nothing to do if there are no HTMX settings.
- if (empty($element['#htmx']) || !($element['#htmx'] instanceof Htmx)) {
+ if (empty($element['#htmx']) || !($element['#htmx'] instanceof HtmxInterface)) {
return $element;
}
$htmx = $element['#htmx'];
+ // Process operations;
+ if ($htmx->hasOperations()) {
+ $htmx->processOperations();
+ }
+
// Attach HTMX and integration javascript.
$element['#attached']['library'][] = 'core/drupal.htmx';
// Consolidate headers.
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Htmx.php b/core/lib/Drupal/Core/Render/Hypermedia/Htmx.php
new file mode 100644
index 000000000000..e8bb402d7c66
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Htmx.php
@@ -0,0 +1,178 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia;
+
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Http\HtmxHeaderInterface;
+use Drupal\Core\Http\HtmxResponseHeaders;
+use Drupal\Core\Render\Hypermedia\Operations\HtmxOperationInterface;
+use Drupal\Core\Render\Hypermedia\Operations\HtmxRequestOperationInterface;
+use Drupal\Core\Template\AttributeHelper;
+use Drupal\Core\Template\HtmlAttributeInterface;
+use Drupal\Core\Template\HtmxAttribute;
+
+/**
+ * Collects HTMX attributes and headers and manages complex behaviors.
+ *
+ * An instance of this object is required to add HTMX behaviors to a render
+ * element.
+ *
+ * Methods to configure common behaviors are provided:
+ *
+ * @code
+ * $htmx = new Htmx();
+ * $node_url = Url::fromRoute(
+ * route_name: entity.node.canonical',
+ * route_parameters: ['node' => 123],
+ * );
+ * $htmx->insert($node_url, 'div.example', 'article.page')
+ *
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * Attributes may also be specified explicitly:
+ *
+ * @code
+ * $htmx = new Htmx();
+ * $form_url = Url::fromRoute(
+ * route_name: 'config.export_single',
+ * route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
+ * );
+ *
+ * $htmx->attributes()
+ * ->post($form_url)
+ * ->select('select[data-drupal-selector="edit-config-name"]')
+ * ->target('select[data-drupal-selector="edit-config-name"]')
+ * ->swap('outerHTML');
+ *
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * HTMX headers are added in a similar way.
+ *
+ * @code
+ * // Also update the browser URL.
+ * $push = Url::fromRoute(
+ * route_name: 'config.export_single',
+ * route_parameters: ['config_type' => $default_type, 'config_name' => $default_name],
+ * );
+ *
+ * $htmx = new Htmx();
+ * $htmx->headers()->pushUrl($push);
+ * $build = [
+ * '#htmx' => $htmx,
+ * ];
+ * @endcode
+ *
+ * @see \Drupal\Core\Template\HtmxAttribute
+ * @see \Drupal\Core\Http\HtmxResponseHeaders
+ */
+class Htmx implements HtmxInterface {
+
+ /**
+ * Optional request operation.
+ *
+ * @var \Drupal\Core\Render\Hypermedia\Operations\HtmxRequestOperationInterface|null
+ */
+ protected HtmxRequestOperationInterface|null $requestOperation = NULL;
+
+ /**
+ * Additional operations that do not depend on a request.
+ *
+ * @var \Drupal\Core\Render\Hypermedia\Operations\HtmxOperationInterface[]
+ */
+ protected array $additionalOperations = [];
+
+ public function __construct(
+ public readonly HtmxAttribute $attributes = new HtmxAttribute(),
+ public readonly HtmxHeaderInterface $headers = new HtmxResponseHeaders(),
+ ) {}
+
+ /**
+ * {@inheritdoc}
+ */
+ public function attributes(): HtmxAttribute {
+ return $this->attributes;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function headers(): HtmxHeaderInterface {
+ return $this->headers;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getCombinedAttributes(array|HtmlAttributeInterface $attributes): HtmlAttributeInterface|array {
+ return AttributeHelper::mergeCollections($attributes, $this->attributes);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getCombinedHeaders(array $headers): array {
+ return NestedArray::mergeDeep($headers, $this->headers->toArray());
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function merge(HtmxInterface $htmx): HtmxInterface {
+ $this->attributes->merge($htmx->attributes());
+ $this->headers->merge($htmx->headers());
+ return $this;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setRequestOperation(HtmxRequestOperationInterface $operation): HtmxInterface {
+ $this->requestOperation = $operation;
+ return $this;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setAdditionalOperation(HtmxOperationInterface $operation): HtmxInterface {
+ if ($operation instanceof HtmxRequestOperationInterface) {
+ throw new \ValueError('Htmx::setRequestOperation() must be used to add HtmxRequestOperationInterface operations');
+ }
+ $this->additionalOperations[] = $operation;
+ return $this;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function hasOperations(): bool {
+ return $this->requestOperation instanceof HtmxRequestOperationInterface
+ || count($this->additionalOperations) !== 0;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function processOperations(): void {
+ if ($this->hasOperations() === FALSE) {
+ return;
+ }
+ $operations = [];
+ if (count($this->additionalOperations) !== 0) {
+ $operations = $this->additionalOperations;
+ }
+ if ($this->requestOperation instanceof HtmxRequestOperationInterface) {
+ array_unshift($operations, $this->requestOperation);
+ }
+ foreach ($operations as $operation) {
+ $operation->setProperties($this);
+ }
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
new file mode 100644
index 000000000000..dde2507ec6cd
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia;
+
+use Drupal\Core\Http\HtmxHeaderInterface;
+use Drupal\Core\Render\Hypermedia\Operations\HtmxOperationInterface;
+use Drupal\Core\Render\Hypermedia\Operations\HtmxRequestOperationInterface;
+use Drupal\Core\Template\HtmlAttributeInterface;
+use Drupal\Core\Template\HtmxAttribute;
+
+/**
+ * An interface for objects that manage HTMX behaviors.
+ */
+interface HtmxInterface {
+
+ /**
+ * Accessor for the HtmxAttribute.
+ *
+ * @return \Drupal\Core\Template\HtmxAttribute
+ */
+ public function attributes(): HtmxAttribute;
+
+ /**
+ * Accessor for the headers, typically an instance of HtmxResponseHeader.
+ *
+ * @return \Drupal\Core\Http\HtmxHeaderInterface
+ */
+ public function headers(): HtmxHeaderInterface;
+
+ /**
+ * Merges this object's attributes with an array or collection of attributes.
+ *
+ * @param \Drupal\Core\Template\HtmlAttributeInterface|array $attributes
+ * The data to merge.
+ *
+ * @return \Drupal\Core\Template\HtmlAttributeInterface|array
+ * Returns the data in the form it was recieved.
+ */
+ public function getCombinedAttributes(HtmlAttributeInterface|array $attributes): HtmlAttributeInterface|array;
+
+ /**
+ * Produces a merged Drupal 'http_header' array.
+ *
+ * @param array $headers
+ * A Drupal 'http_header' array to augment.
+ *
+ * @return array
+ * This objects headers merged with the received headers.
+ */
+ public function getCombinedHeaders(array $headers): array;
+
+ /**
+ * Merges this objects data with another instance of HtmxInterface.
+ *
+ * @param \Drupal\Core\Render\Hypermedia\HtmxInterface $htmx
+ * The source of additional data.
+ *
+ * @return \Drupal\Core\Render\Hypermedia\HtmxInterface
+ * An instance with attributes and headers from both objects.
+ */
+ public function merge(HtmxInterface $htmx): HtmxInterface;
+
+ /**
+ * Sets the HTMX request operation for the element.
+ *
+ * @param \Drupal\Core\Render\Hypermedia\Operations\HtmxRequestOperationInterface $operation
+ * The operation.
+ *
+ * @return \Drupal\Core\Render\Hypermedia\HtmxInterface
+ * Returns self to enable chained methods.
+ */
+ public function setRequestOperation(HtmxRequestOperationInterface $operation): HtmxInterface;
+
+ /**
+ * Set an additional operation that don't use a request.
+ *
+ * These should be accumulated in a stack that is processed in
+ * ::processOperations.
+ *
+ * @param \Drupal\Core\Render\Hypermedia\Operations\HtmxOperationInterface $operation
+ * The operation
+ *
+ * @return \Drupal\Core\Render\Hypermedia\HtmxInterface
+ * Returns self to enable chained methods.
+ */
+ public function setAdditionalOperation(HtmxOperationInterface $operation): HtmxInterface;
+
+ /**
+ * Checks for request or additional operations.
+ *
+ * @return bool
+ * True if any operations are set.
+ */
+ public function hasOperations(): bool;
+
+ /**
+ * Step through all the operations, calling their ::setProperties method.
+ */
+ public function processOperations(): void;
+
+}
diff --git a/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
similarity index 99%
rename from core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
rename to core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
index 64d7d1f67d33..f7420dec9f4f 100644
--- a/core/lib/Drupal/Core/Ajax/HtmxResponseAttachmentsProcessor.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
@@ -1,6 +1,6 @@
<?php
-namespace Drupal\Core\Ajax;
+namespace Drupal\Core\Render\Hypermedia;
use Drupal\Component\Serialization\Json;
use Drupal\Component\Utility\UrlHelper;
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
new file mode 100644
index 000000000000..95979b370e37
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+use Drupal\Core\Render\Hypermedia\HtmxInterface;
+
+/**
+ * An HtmxOperation adds attributes or headers to an HTMX object.
+ *
+ */
+interface HtmxOperationInterface {
+
+ /**
+ * Add the necessary values to the Htmx object to implement the operation.
+ *
+ * @param \Drupal\Core\Render\Hypermedia\HtmxInterface $htmx
+ * The Htmx object collecting the attributes and headers.
+ */
+ public function setProperties(HtmxInterface $htmx): void;
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
new file mode 100644
index 000000000000..ec6680eed764
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+
+use Drupal\Core\Http\HttpMethod;
+use Drupal\Core\Url;
+
+/**
+ * This interface segments HTMX operations that perform and process a request.
+ *
+ * There can only be one HTMX request attribute and accompanying processing
+ * attributes on an HTML element.
+ */
+interface HtmxRequestOperationInterface extends HtmxOperationInterface {
+
+ /**
+ * Configures the method and url for the request.
+ *
+ * The developer experience will be simplified if this method is called
+ * by the constructor and all operation properties are set at instantiation.
+ *
+ * @see \Drupal\Core\Render\Hypermedia\Operations\HtmxRequestTrait
+ *
+ * @param \Drupal\Core\Http\HttpMethod $method
+ * The request method.
+ * @param \Drupal\Core\Url $url
+ * The URL for the request.
+ */
+ public function setRequest(HttpMethod $method, Url $url): void;
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
new file mode 100644
index 000000000000..1ed1467acf28
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+use Drupal\Core\Http\HttpMethod;
+use Drupal\Core\Render\Hypermedia\HtmxInterface;
+use Drupal\Core\Url;
+
+/**
+ * Provides reusable methods for HtmxRequestOperationInterface objects.
+ */
+trait HtmxRequestTrait {
+
+ /**
+ * The method to use for the request.
+ */
+ protected HttpMethod $method;
+
+ /**
+ * The url to use for the request.
+ */
+ protected Url $url;
+
+ /**
+ * Setter for the required properties.
+ *
+ * @param \Drupal\Core\Http\HttpMethod $method
+ * The request method.
+ * @param \Drupal\Core\Url $url
+ * The request URL.
+ */
+ public function setRequest(HttpMethod $method, Url $url): void {
+ $this->method = $method;
+ $this->url = $url;
+ }
+
+ /**
+ * Map the stored parameters to HTMX attributes.
+ */
+ public function configureRequest(HtmxInterface $htmx): void {
+ switch ($this->method) {
+ case HttpMethod::Get:
+ $htmx->attributes()->get($this->url);
+ break;
+
+ case HttpMethod::Put:
+ $htmx->attributes()->put($this->url);
+ break;
+
+ case HttpMethod::Patch:
+ $htmx->attributes()->patch($this->url);
+ break;
+
+ case HttpMethod::Post:
+ $htmx->attributes()->post($this->url);
+ break;
+
+ case HttpMethod::Delete:
+ $htmx->attributes()->delete($this->url);
+ break;
+ }
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
new file mode 100644
index 000000000000..5eee3a0c0357
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+use Drupal\Core\Http\HttpMethod;
+use Drupal\Core\Render\Hypermedia\HtmxInterface;
+use Drupal\Core\Url;
+
+/**
+ * Inserts the selected element as the last child of the target element.
+ *
+ * There are three required properties and one optional property.
+ * - selector: A CSS selector used to select the element from the response that
+ * should be inserted into the DOM.
+ * - target: A CSS selector used to select the existing element in the DOM to
+ * receive the insertion.
+ * - url: A Url object used to configure the request.
+ * - method: (Optional) The HTTP method to be used for the request. Defaults to
+ * HttpMethod::Get.
+ */
+class Insert implements HtmxRequestOperationInterface {
+ use HtmxRequestTrait;
+
+ public function __construct(protected string $selector, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
+ $this->setRequest($method, $url);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setProperties(HtmxInterface $htmx): void {
+ $this->configureRequest($htmx);
+ $htmx->attributes()->select($this->selector);
+ $htmx->attributes()->target($this->target);
+ $htmx->attributes()->swap('beforeend');
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Template/AttributeHelper.php b/core/lib/Drupal/Core/Template/AttributeHelper.php
index 96501020e68a..41203b3eae75 100644
--- a/core/lib/Drupal/Core/Template/AttributeHelper.php
+++ b/core/lib/Drupal/Core/Template/AttributeHelper.php
@@ -51,8 +51,8 @@ public static function attributeExists($name, $collection) {
* @param HtmlAttributeInterface|array $b
* Second Attribute object or array to merge.
*
- * @return \Drupal\Core\Template\Attribute
- * The merged attributes, as an Attribute object.
+ * @return \Drupal\Core\Template\Attribute|array
+ * The merged attributes in the form of the first argument.
*
* @throws \InvalidArgumentException
* If at least one collection argument is neither an Attribute object nor an
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
index 518eddfd0ab9..740fd1791be2 100644
--- a/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
@@ -7,6 +7,8 @@
/**
* An interface for classes that manage HTML Attributes.
+ *
+ * @extends \IteratorAggregate<string, \Drupal\Core\Template\AttributeValueBase>
*/
interface HtmlAttributeInterface extends \Countable, \IteratorAggregate, MarkupInterface {
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
index f9a841c88743..adb183a7ff62 100644
--- a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
@@ -58,9 +58,8 @@ public function jsonSerialize(): string {
* @return $this
*/
public function merge(HtmlAttributeInterface $collection): self {
- $merged_attributes = NestedArray::mergeDeep($this->toArray(), $collection->toArray());
- foreach ($merged_attributes as $name => $value) {
- $this->storage[$name] = $this->createAttributeValue($name, $value);
+ foreach ($collection as $name => $value) {
+ $this->storage[$name] = $value;
}
return $this;
}
diff --git a/core/lib/Drupal/Core/Template/HtmxAttribute.php b/core/lib/Drupal/Core/Template/HtmxAttribute.php
index 798cc2f4bee7..86562fb2696e 100644
--- a/core/lib/Drupal/Core/Template/HtmxAttribute.php
+++ b/core/lib/Drupal/Core/Template/HtmxAttribute.php
@@ -23,7 +23,7 @@
* $form['export']['#prefix'] = '<div ' . $attributes . '>';
* @endcode
*
- * @see \Drupal\Core\Ajax\Htmx
+ * @see \Drupal\Core\Render\Hypermedia\Htmx
* @see https://htmx.org/reference/
*/
class HtmxAttribute implements HtmlAttributeInterface {
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index b401c53dfd7f..370aa9c1c108 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -3,7 +3,7 @@
namespace Drupal\config\Form;
use Drupal\Component\Serialization\Yaml;
-use Drupal\Core\Ajax\Htmx;
+use Drupal\Core\Render\Hypermedia\Htmx;
use Drupal\Core\Config\Entity\ConfigEntityInterface;
use Drupal\Core\Config\StorageInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
--
GitLab
From 0401418f2958cd09b9ad9ae80cd6677aca532217 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 16 Dec 2024 07:39:51 -0500
Subject: [PATCH 12/26] Add a Replace operation and use it in the example
implementation in ConfigSingleExportForm.php
---
.../Render/Hypermedia/Operations/Replace.php | 38 +++++++++++++++++++
.../src/Form/ConfigSingleExportForm.php | 32 ++++++++++------
2 files changed, 58 insertions(+), 12 deletions(-)
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
new file mode 100644
index 000000000000..7964fe94cd99
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+use Drupal\Core\Http\HttpMethod;
+use Drupal\Core\Render\Hypermedia\HtmxInterface;
+use Drupal\Core\Url;
+
+/**
+ * Replaces the target element with the element.
+ *
+ * There are three required properties and one optional property.
+ * - select: A CSS selector used to select the element from the response that
+ * should be inserted into the DOM.
+ * - target: A CSS selector used to select the existing element in the DOM to
+ * be replaced.
+ * - url: A Url object used to configure the request.
+ * - method: (Optional) The HTTP method to be used for the request. Defaults to
+ * HttpMethod::Get.
+ */
+class Replace implements HtmxRequestOperationInterface {
+ use HtmxRequestTrait;
+
+ public function __construct(protected string $select, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
+ $this->setRequest($method, $url);
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setProperties(HtmxInterface $htmx): void {
+ $this->configureRequest($htmx);
+ $htmx->attributes()->select($this->select);
+ $htmx->attributes()->target($this->target);
+ $htmx->attributes()->swap('outerHTML');
+ }
+
+}
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 370aa9c1c108..ae97adb30aed 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -3,13 +3,15 @@
namespace Drupal\config\Form;
use Drupal\Component\Serialization\Yaml;
-use Drupal\Core\Render\Hypermedia\Htmx;
use Drupal\Core\Config\Entity\ConfigEntityInterface;
use Drupal\Core\Config\StorageInterface;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Entity\EntityTypeInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Http\HttpMethod;
+use Drupal\Core\Render\Hypermedia\Htmx;
+use Drupal\Core\Render\Hypermedia\Operations\Replace;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Template\HtmxAttribute;
@@ -109,11 +111,14 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
route_name: 'config.export_single',
route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
);
- $config_type_htmx->attributes
- ->post($form_url)
- ->select('select[data-drupal-selector="edit-config-name"]')
- ->target('select[data-drupal-selector="edit-config-name"]')
- ->swap('outerHTML');
+ $config_type_htmx->setRequestOperation(
+ new Replace(
+ select: 'select[data-drupal-selector="edit-config-name"]',
+ target: 'select[data-drupal-selector="edit-config-name"]',
+ url: $form_url,
+ method: HttpMethod::Post
+ )
+ );
$form['config_type'] = [
'#title' => $this->t('Configuration type'),
'#type' => 'select',
@@ -133,11 +138,14 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
];
$default_type = $form_state->getValue('config_type', $config_type);
- $config_name_htmx->attributes
- ->post($form_url)
- ->select('#edit-export-wrapper')
- ->target('#edit-export-wrapper')
- ->swap('outerHTML');
+ $config_name_htmx->setRequestOperation(
+ new Replace(
+ select: '#edit-export-wrapper',
+ target: '#edit-export-wrapper',
+ url: $form_url,
+ method: HttpMethod::Post
+ )
+ );
$form['config_name'] = [
'#title' => $this->t('Configuration name'),
'#type' => 'select',
--
GitLab
From 31fbd76765b3dcf875252ab8d69f5b7d3c1e3af5 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 16 Dec 2024 08:48:26 -0500
Subject: [PATCH 13/26] Add a unit test for Htmx operations
---
.../Render/Hypermedia/Operations/Insert.php | 6 +-
.../Render/Hypermedia/HtmxOperationsTest.php | 101 ++++++++++++++++++
2 files changed, 104 insertions(+), 3 deletions(-)
create mode 100644 core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
index 5eee3a0c0357..5a2901daac01 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
@@ -10,7 +10,7 @@
* Inserts the selected element as the last child of the target element.
*
* There are three required properties and one optional property.
- * - selector: A CSS selector used to select the element from the response that
+ * - select: A CSS selector used to select the element from the response that
* should be inserted into the DOM.
* - target: A CSS selector used to select the existing element in the DOM to
* receive the insertion.
@@ -21,7 +21,7 @@
class Insert implements HtmxRequestOperationInterface {
use HtmxRequestTrait;
- public function __construct(protected string $selector, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
+ public function __construct(protected string $select, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
$this->setRequest($method, $url);
}
@@ -30,7 +30,7 @@ public function __construct(protected string $selector, protected string $target
*/
public function setProperties(HtmxInterface $htmx): void {
$this->configureRequest($htmx);
- $htmx->attributes()->select($this->selector);
+ $htmx->attributes()->select($this->select);
$htmx->attributes()->target($this->target);
$htmx->attributes()->swap('beforeend');
}
diff --git a/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
new file mode 100644
index 000000000000..f4fc14fddd79
--- /dev/null
+++ b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace Drupal\Tests\Core\Render\Hypermedia;
+
+use Drupal\Core\Render\Element\RenderElementBase;
+use Drupal\Core\Render\Hypermedia\Htmx;
+use Drupal\Core\Render\Hypermedia\Operations\Insert;
+use Drupal\Core\Render\Hypermedia\Operations\Replace;
+use Drupal\Core\Url;
+use Drupal\Tests\UnitTestCase;
+use PHPUnit\Framework\MockObject\MockObject;
+
+/**
+ * Unit tests for implementations of HtmxOperationInterface.
+ *
+ * @group Hypermedia
+ */
+class HtmxOperationsTest extends UnitTestCase {
+
+ /**
+ * Htmx object to support operation testing.
+ */
+ private Htmx $htmx;
+
+ /**
+ * Tests for HtmxRequestOperationInterface operations need a URL.
+ */
+ private Url|MockObject $url;
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp(): void {
+ parent::setUp();
+ $this->htmx = new Htmx();
+ $this->url = $this->getMockBuilder('\Drupal\Core\Url')
+ ->disableOriginalConstructor()
+ ->onlyMethods(['toString'])
+ ->getMock();
+ $this->url->expects($this->any())
+ ->method('toString')
+ ->willReturn('/example/path');
+ }
+
+ /**
+ * Helper method to process the operations as if the render callback was used.
+ *
+ * @return array
+ * A stub of a processed render array.
+ */
+ protected function processOperations(): array {
+ return RenderElementBase::preRenderHtmxElement(['#htmx' => $this->htmx]);
+ }
+
+ /**
+ * @covers \Drupal\Core\Render\Hypermedia\Operations\Insert
+ */
+ public function testInsert(): void {
+ $insert = new Insert(
+ select: '#source-value',
+ target: '#target-value',
+ url: $this->url,
+ );
+ $this->htmx->setRequestOperation($insert);
+ $result = $this->processOperations();
+ $headers = $result['#attached']['http_header'] ?? [];
+ $attributes = $result['#attributes'] ?? [];
+ $this->assertEquals([], $headers);
+ $expected = [
+ 'data-hx-get' => '/example/path',
+ 'data-hx-select' => '#source-value',
+ 'data-hx-target' => '#target-value',
+ 'data-hx-swap' => 'beforeend ignoreTitle:true',
+ ];
+ $this->assertEquals($expected, $attributes);
+ }
+
+ /**
+ * @covers \Drupal\Core\Render\Hypermedia\Operations\Replace
+ */
+ public function testReplace(): void {
+ $insert = new Replace(
+ select: '#source-value',
+ target: '#target-value',
+ url: $this->url,
+ );
+ $this->htmx->setRequestOperation($insert);
+ $result = $this->processOperations();
+ $headers = $result['#attached']['http_header'] ?? [];
+ $attributes = $result['#attributes'] ?? [];
+ $this->assertEquals([], $headers);
+ $expected = [
+ 'data-hx-get' => '/example/path',
+ 'data-hx-select' => '#source-value',
+ 'data-hx-target' => '#target-value',
+ 'data-hx-swap' => 'outerHTML ignoreTitle:true',
+ ];
+ $this->assertEquals($expected, $attributes);
+ }
+
+}
--
GitLab
From a39c28bb08409e3f421a70dafdf8963ae9fcc2a1 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Tue, 17 Dec 2024 07:35:32 -0500
Subject: [PATCH 14/26] Update htmx to v2.0.4
---
core/assets/vendor/htmx/htmx.min.js | 2 +-
core/core.libraries.yml | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/core/assets/vendor/htmx/htmx.min.js b/core/assets/vendor/htmx/htmx.min.js
index 6eeb64f51ea9..59937d712d90 100644
--- a/core/assets/vendor/htmx/htmx.min.js
+++ b/core/assets/vendor/htmx/htmx.min.js
@@ -1 +1 @@
-var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=cn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",inlineStyleNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0.1"};Q.onLoad=$;Q.process=kt;Q.on=be;Q.off=we;Q.trigger=he;Q.ajax=Hn;Q.find=r;Q.findAll=p;Q.closest=g;Q.remove=K;Q.addClass=Y;Q.removeClass=o;Q.toggleClass=W;Q.takeClass=ge;Q.swap=ze;Q.defineExtension=Un;Q.removeExtension=Bn;Q.logAll=z;Q.logNone=J;Q.parseInterval=d;Q._=_;const n={addTriggerHandler:Et,bodyContains:le,canAccessLocalStorage:j,findThisElement:Ee,filterValues:dn,swap:ze,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:T,getExpressionVars:Cn,getHeaders:hn,getInputValues:cn,getInternalData:ie,getSwapSpecification:pn,getTriggerSpecs:lt,getTarget:Ce,makeFragment:k,mergeObjects:ue,makeSettleInfo:xn,oobSwap:Te,querySelectorExt:fe,settleImmediately:Gt,shouldCancel:dt,triggerEvent:he,triggerErrorEvent:ae,withExtensions:Ut};const v=["get","post","put","delete","patch"];const R=v.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");const O=e("head");function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function H(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function T(e,t){while(e&&!t(e)){e=u(e)}return e||null}function q(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;T(t,function(e){return!!(r=q(t,ce(e),n))});if(r!=="unset"){return r}}function a(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function L(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function N(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function A(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function I(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function P(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function D(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(P(e)){const t=I(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){w(e)}finally{e.remove()}}})}function k(e){const t=e.replace(O,"");const n=L(t);let r;if(n==="html"){r=new DocumentFragment;const i=N(e);A(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=N(t);A(r,i.body);r.title=i.title}else{const i=N('<body><template class="internal-htmx-wrapper">'+t+"</template></body>");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){D(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function M(e){return typeof e==="function"}function X(e){return t(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function F(t){const n=[];if(t){for(let e=0;e<t.length;e++){n.push(t[e])}}return n}function se(t,n){if(t){for(let e=0;e<t.length;e++){n(t[e])}}}function U(e){const t=e.getBoundingClientRect();const n=t.top;const r=t.bottom;return n<window.innerHeight&&r>=0}function le(e){const t=e.getRootNode&&e.getRootNode();if(t&&t instanceof window.ShadowRoot){return ne().body.contains(t.host)}else{return ne().body.contains(e)}}function B(e){return e.trim().split(/\s+/)}function ue(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function S(e){try{return JSON.parse(e)}catch(e){w(e);return null}}function j(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function V(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function _(e){return vn(ne().body,function(){return eval(e)})}function $(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function z(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function J(){Q.logger=null}function r(e,t){if(typeof e!=="string"){return e.querySelector(t)}else{return r(ne(),e)}}function p(e,t){if(typeof e!=="string"){return e.querySelectorAll(t)}else{return p(ne(),e)}}function E(){return window}function K(e,t){e=y(e);if(t){E().setTimeout(function(){K(e);e=null},t)}else{u(e).removeChild(e)}}function ce(e){return e instanceof Element?e:null}function G(e){return e instanceof HTMLElement?e:null}function Z(e){return typeof e==="string"?e:null}function h(e){return e instanceof Element||e instanceof Document||e instanceof DocumentFragment?e:null}function Y(e,t,n){e=ce(y(e));if(!e){return}if(n){E().setTimeout(function(){Y(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function o(e,t,n){let r=ce(y(e));if(!r){return}if(n){E().setTimeout(function(){o(r,t);r=null},n)}else{if(r.classList){r.classList.remove(t);if(r.classList.length===0){r.removeAttribute("class")}}}}function W(e,t){e=y(e);e.classList.toggle(t)}function ge(e,t){e=y(e);se(e.parentElement.children,function(e){o(e,t)});Y(ce(e),t)}function g(e,t){e=ce(y(e));if(e&&e.closest){return e.closest(t)}else{do{if(e==null||a(e,t)){return e}}while(e=e&&ce(u(e)));return null}}function l(e,t){return e.substring(0,t.length)===t}function pe(e,t){return e.substring(e.length-t.length)===t}function i(e){const t=e.trim();if(l(t,"<")&&pe(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function m(e,t,n){e=y(e);if(t.indexOf("closest ")===0){return[g(ce(e),i(t.substr(8)))]}else if(t.indexOf("find ")===0){return[r(h(e),i(t.substr(5)))]}else if(t==="next"){return[ce(e).nextElementSibling]}else if(t.indexOf("next ")===0){return[me(e,i(t.substr(5)),!!n)]}else if(t==="previous"){return[ce(e).previousElementSibling]}else if(t.indexOf("previous ")===0){return[ye(e,i(t.substr(9)),!!n)]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else if(t==="root"){return[H(e,!!n)]}else if(t.indexOf("global ")===0){return m(e,t.slice(7),true)}else{return F(h(H(e,!!n)).querySelectorAll(i(t)))}}var me=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=0;e<r.length;e++){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_PRECEDING){return o}}};var ye=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=r.length-1;e>=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function fe(e,t){if(typeof e!=="string"){return m(e,t)[0]}else{return m(ne().body,e)[0]}}function y(e,t){if(typeof e==="string"){return r(h(t)||document,e)}else{return e}}function xe(e,t,n){if(M(t)){return{target:ne().body,event:Z(e),listener:t}}else{return{target:y(e),event:Z(t),listener:n}}}function be(t,n,r){_n(function(){const e=xe(t,n,r);e.target.addEventListener(e.event,e.listener)});const e=M(n);return e?n:r}function we(t,n,r){_n(function(){const e=xe(t,n,r);e.target.removeEventListener(e.event,e.listener)});return M(n)?n:r}const ve=ne().createElement("output");function Se(e,t){const n=re(e,t);if(n){if(n==="this"){return[Ee(e,t)]}else{const r=m(e,n);if(r.length===0){w('The selector "'+n+'" on '+t+" returned no matches!");return[ve]}else{return r}}}}function Ee(e,t){return ce(T(e,function(e){return te(ce(e),t)!=null}))}function Ce(e){const t=re(e,"hx-target");if(t){if(t==="this"){return Ee(e,"hx-target")}else{return fe(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Re(t){const n=Q.config.attributesToSettle;for(let e=0;e<n.length;e++){if(t===n[e]){return true}}return false}function Oe(t,n){se(t.attributes,function(e){if(!n.hasAttribute(e.name)&&Re(e.name)){t.removeAttribute(e.name)}});se(n.attributes,function(e){if(Re(e.name)){t.setAttribute(e.name,e.value)}})}function He(t,e){const n=jn(e);for(let e=0;e<n.length;e++){const r=n[e];try{if(r.isInlineSwap(t)){return true}}catch(e){w(e)}}return t==="outerHTML"}function Te(e,o,i){let t="#"+ee(o,"id");let s="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){s=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{s=e}const n=ne().querySelectorAll(t);if(n){se(n,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!He(s,e)){t=h(n)}const r={shouldSwap:true,target:e,fragment:t};if(!he(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){_e(s,e,e,t,i)}se(i.elts,function(e){he(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);ae(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function qe(e){se(p(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){e.parentNode.replaceChild(n,e)}})}function Le(l,e,u){se(e.querySelectorAll("[id]"),function(t){const n=ee(t,"id");if(n&&n.length>0){const r=n.replace("'","\\'");const o=t.tagName.replace(":","\\:");const e=h(l);const i=e&&e.querySelector(o+"[id='"+r+"']");if(i&&i!==e){const s=t.cloneNode();Oe(t,i);u.tasks.push(function(){Oe(t,s)})}}})}function Ne(e){return function(){o(e,Q.config.addedClass);kt(ce(e));Ae(h(e));he(e,"htmx:load")}}function Ae(e){const t="[autofocus]";const n=G(a(e,t)?e:e.querySelector(t));if(n!=null){n.focus()}}function c(e,t,n,r){Le(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;Y(ce(o),Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Ne(o))}}}function Ie(e,t){let n=0;while(n<e.length){t=(t<<5)-t+e.charCodeAt(n++)|0}return t}function Pe(t){let n=0;if(t.attributes){for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e];if(r.value){n=Ie(r.name,n);n=Ie(r.value,n)}}}return n}function De(t){const n=ie(t);if(n.onHandlers){for(let e=0;e<n.onHandlers.length;e++){const r=n.onHandlers[e];we(t,r.event,r.listener)}delete n.onHandlers}}function ke(e){const t=ie(e);if(t.timeout){clearTimeout(t.timeout)}if(t.listenerInfos){se(t.listenerInfos,function(e){if(e.on){we(e.on,e.trigger,e.listener)}})}De(e);se(Object.keys(t),function(e){delete t[e]})}function f(e){he(e,"htmx:beforeCleanupElement");ke(e);if(e.children){se(e.children,function(e){f(e)})}}function Me(t,e,n){if(t instanceof Element&&t.tagName==="BODY"){return Ve(t,e,n)}let r;const o=t.previousSibling;c(u(t),t,e,n);if(o==null){r=u(t).firstChild}else{r=o.nextSibling}n.elts=n.elts.filter(function(e){return e!==t});while(r&&r!==t){if(r instanceof Element){n.elts.push(r);r=r.nextElementSibling}else{r=null}}f(t);if(t instanceof Element){t.remove()}else{t.parentNode.removeChild(t)}}function Xe(e,t,n){return c(e,e.firstChild,t,n)}function Fe(e,t,n){return c(u(e),e,t,n)}function Ue(e,t,n){return c(e,null,t,n)}function Be(e,t,n){return c(u(e),e.nextSibling,t,n)}function je(e){f(e);return u(e).removeChild(e)}function Ve(e,t,n){const r=e.firstChild;c(e,r,t,n);if(r){while(r.nextSibling){f(r.nextSibling);e.removeChild(r.nextSibling)}f(r);e.removeChild(r)}}function _e(t,e,n,r,o){switch(t){case"none":return;case"outerHTML":Me(n,r,o);return;case"afterbegin":Xe(n,r,o);return;case"beforebegin":Fe(n,r,o);return;case"beforeend":Ue(n,r,o);return;case"afterend":Be(n,r,o);return;case"delete":je(n);return;default:var i=jn(e);for(let e=0;e<i.length;e++){const s=i[e];try{const l=s.handleSwap(t,n,r,o);if(l){if(typeof l.length!=="undefined"){for(let e=0;e<l.length;e++){const u=l[e];if(u.nodeType!==Node.TEXT_NODE&&u.nodeType!==Node.COMMENT_NODE){o.tasks.push(Ne(u))}}}return}}catch(e){w(e)}}if(t==="innerHTML"){Ve(n,r,o)}else{_e(Q.config.defaultSwapStyle,e,n,r,o)}}}function $e(e,n){se(p(e,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){if(Q.config.allowNestedOobSwaps||e.parentElement===null){const t=te(e,"hx-swap-oob");if(t!=null){Te(t,e,n)}}else{e.removeAttribute("hx-swap-oob");e.removeAttribute("data-hx-swap-oob")}})}function ze(e,t,r,o){if(!o){o={}}e=y(e);const n=document.activeElement;let i={};try{i={elt:n,start:n?n.selectionStart:null,end:n?n.selectionEnd:null}}catch(e){}const s=xn(e);if(r.swapStyle==="textContent"){e.textContent=t}else{let n=k(t);s.title=n.title;if(o.selectOOB){const u=o.selectOOB.split(",");for(let t=0;t<u.length;t++){const c=u[t].split(":",2);let e=c[0].trim();if(e.indexOf("#")===0){e=e.substring(1)}const f=c[1]||"true";const a=n.querySelector("#"+e);if(a){Te(f,a,s)}}}$e(n,s);se(p(n,"template"),function(e){$e(e.content,s);if(e.content.childElementCount===0&&e.content.textContent.trim()===""){e.remove()}});if(o.select){const h=ne().createDocumentFragment();se(n.querySelectorAll(o.select),function(e){h.appendChild(e)});n=h}qe(n);_e(r.swapStyle,o.contextElement,e,n,s)}if(i.elt&&!le(i.elt)&&ee(i.elt,"id")){const d=document.getElementById(ee(i.elt,"id"));const g={preventScroll:r.focusScroll!==undefined?!r.focusScroll:!Q.config.defaultFocusScroll};if(d){if(i.start&&d.setSelectionRange){try{d.setSelectionRange(i.start,i.end)}catch(e){}}d.focus(g)}}e.classList.remove(Q.config.swappingClass);se(s.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}he(e,"htmx:afterSwap",o.eventInfo)});if(o.afterSwapCallback){o.afterSwapCallback()}if(!r.ignoreTitle){kn(s.title)}const l=function(){se(s.tasks,function(e){e.call()});se(s.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}he(e,"htmx:afterSettle",o.eventInfo)});if(o.anchor){const e=ce(y("#"+o.anchor));if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}bn(s.elts,r);if(o.afterSettleCallback){o.afterSettleCallback()}};if(r.settleDelay>0){E().setTimeout(l,r.settleDelay)}else{l()}}function Je(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=S(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(!X(e)){e={value:e}}he(n,i,e)}}}else{const s=r.split(",");for(let e=0;e<s.length;e++){he(n,s[e].trim(),[])}}}const Ke=/\s/;const x=/[\s,]/;const Ge=/[_$a-zA-Z]/;const Ze=/[_$a-zA-Z0-9]/;const Ye=['"',"'","/"];const We=/[^\s]/;const Qe=/[{(]/;const et=/[})]/;function tt(e){const t=[];let n=0;while(n<e.length){if(Ge.exec(e.charAt(n))){var r=n;while(Ze.exec(e.charAt(n+1))){n++}t.push(e.substr(r,n-r+1))}else if(Ye.indexOf(e.charAt(n))!==-1){const o=e.charAt(n);var r=n;n++;while(n<e.length&&e.charAt(n)!==o){if(e.charAt(n)==="\\"){n++}n++}t.push(e.substr(r,n-r+1))}else{const i=e.charAt(n);t.push(i)}n++}return t}function nt(e,t,n){return Ge.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==n&&t!=="."}function rt(r,o,i){if(o[0]==="["){o.shift();let e=1;let t=" return (function("+i+"){ return (";let n=null;while(o.length>0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=vn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){ae(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(nt(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function b(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function ot(e){let t;if(e.length>0&&Qe.test(e[0])){e.shift();t=b(e,et).trim();e.shift()}else{t=b(e,x)}return t}const it="input, textarea, select";function st(e,t,n){const r=[];const o=tt(t);do{b(o,We);const l=o.length;const u=b(o,/[,\[\s]/);if(u!==""){if(u==="every"){const c={trigger:"every"};b(o,We);c.pollInterval=d(b(o,/[,\[\s]/));b(o,We);var i=rt(e,o,"event");if(i){c.eventFilter=i}r.push(c)}else{const f={trigger:u};var i=rt(e,o,"event");if(i){f.eventFilter=i}while(o.length>0&&o[0]!==","){b(o,We);const a=o.shift();if(a==="changed"){f.changed=true}else if(a==="once"){f.once=true}else if(a==="consume"){f.consume=true}else if(a==="delay"&&o[0]===":"){o.shift();f.delay=d(b(o,x))}else if(a==="from"&&o[0]===":"){o.shift();if(Qe.test(o[0])){var s=ot(o)}else{var s=b(o,x);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=ot(o);if(h.length>0){s+=" "+h}}}f.from=s}else if(a==="target"&&o[0]===":"){o.shift();f.target=ot(o)}else if(a==="throttle"&&o[0]===":"){o.shift();f.throttle=d(b(o,x))}else if(a==="queue"&&o[0]===":"){o.shift();f.queue=b(o,x)}else if(a==="root"&&o[0]===":"){o.shift();f[a]=ot(o)}else if(a==="threshold"&&o[0]===":"){o.shift();f[a]=b(o,x)}else{ae(e,"htmx:syntax:error",{token:o.shift()})}}r.push(f)}}if(o.length===l){ae(e,"htmx:syntax:error",{token:o.shift()})}b(o,We)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function lt(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||st(e,t,r)}if(n.length>0){return n}else if(a(e,"form")){return[{trigger:"submit"}]}else if(a(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(a(e,it)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function ut(e){ie(e).cancelled=true}function ct(e,t,n){const r=ie(e);r.timeout=E().setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!pt(n,e,Xt("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}ct(e,t,n)}},n.pollInterval)}function ft(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function at(e){return g(e,Q.config.disableSelector)}function ht(t,n,e){if(t instanceof HTMLAnchorElement&&ft(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){n.boosted=true;let r,o;if(t.tagName==="A"){r="get";o=ee(t,"href")}else{const i=ee(t,"method");r=i?i.toLowerCase():"get";if(r==="get"){}o=ee(t,"action")}e.forEach(function(e){mt(t,function(e,t){const n=ce(e);if(at(n)){f(n);return}de(r,o,n,t)},n,e,true)})}}function dt(e,t){const n=ce(t);if(!n){return false}if(e.type==="submit"||e.type==="click"){if(n.tagName==="FORM"){return true}if(a(n,'input[type="submit"], button')&&g(n,"form")!==null){return true}if(n instanceof HTMLAnchorElement&&n.href&&(n.getAttribute("href")==="#"||n.getAttribute("href").indexOf("#")!==0)){return true}}return false}function gt(e,t){return ie(e).boosted&&e instanceof HTMLAnchorElement&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function pt(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){const o=r.source;ae(ne().body,"htmx:eventFilter:error",{error:e,source:o});return true}}return false}function mt(s,l,e,u,c){const f=ie(s);let t;if(u.from){t=m(s,u.from)}else{t=[s]}if(u.changed){t.forEach(function(e){const t=ie(e);t.lastValue=e.value})}se(t,function(o){const i=function(e){if(!le(s)){o.removeEventListener(u.trigger,i);return}if(gt(s,e)){return}if(c||dt(e,s)){e.preventDefault()}if(pt(u,s,e)){return}const t=ie(e);t.triggerSpec=u;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(s)<0){t.handledFor.push(s);if(u.consume){e.stopPropagation()}if(u.target&&e.target){if(!a(ce(e.target),u.target)){return}}if(u.once){if(f.triggeredOnce){return}else{f.triggeredOnce=true}}if(u.changed){const n=ie(o);const r=o.value;if(n.lastValue===r){return}n.lastValue=r}if(f.delayed){clearTimeout(f.delayed)}if(f.throttle){return}if(u.throttle>0){if(!f.throttle){l(s,e);f.throttle=E().setTimeout(function(){f.throttle=null},u.throttle)}}else if(u.delay>0){f.delayed=E().setTimeout(function(){l(s,e)},u.delay)}else{he(s,"htmx:trigger");l(s,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:u.trigger,listener:i,on:o});o.addEventListener(u.trigger,i)})}let yt=false;let xt=null;function bt(){if(!xt){xt=function(){yt=true};window.addEventListener("scroll",xt);setInterval(function(){if(yt){yt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){wt(e)})}},200)}}function wt(e){if(!s(e,"data-hx-revealed")&&U(e)){e.setAttribute("data-hx-revealed","true");const t=ie(e);if(t.initHash){he(e,"revealed")}else{e.addEventListener("htmx:afterProcessNode",function(){he(e,"revealed")},{once:true})}}}function vt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;t(e)}};if(r>0){E().setTimeout(o,r)}else{o()}}function St(t,n,e){let i=false;se(v,function(r){if(s(t,"hx-"+r)){const o=te(t,"hx-"+r);i=true;n.path=o;n.verb=r;e.forEach(function(e){Et(t,e,n,function(e,t){const n=ce(e);if(g(n,Q.config.disableSelector)){f(n);return}de(r,o,n,t)})})}});return i}function Et(r,e,t,n){if(e.trigger==="revealed"){bt();mt(r,n,t,e);wt(ce(r))}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=fe(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e<t.length;e++){const n=t[e];if(n.isIntersecting){he(r,"intersect");break}}},o);i.observe(ce(r));mt(ce(r),n,t,e)}else if(e.trigger==="load"){if(!pt(e,r,Xt("load",{elt:r}))){vt(ce(r),n,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ct(ce(r),n,e)}else{mt(r,n,t,e)}}function Ct(e){const t=ce(e);if(!t){return false}const n=t.attributes;for(let e=0;e<n.length;e++){const r=n[e].name;if(l(r,"hx-on:")||l(r,"data-hx-on:")||l(r,"hx-on-")||l(r,"data-hx-on-")){return true}}return false}const Rt=(new XPathEvaluator).createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]');function Ot(e,t){if(Ct(e)){t.push(ce(e))}const n=Rt.evaluate(e);let r=null;while(r=n.iterateNext())t.push(ce(r))}function Ht(e){const t=[];if(e instanceof DocumentFragment){for(const n of e.childNodes){Ot(n,t)}}else{Ot(e,t)}return t}function Tt(e){if(e.querySelectorAll){const n=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";const r=[];for(const i in Xn){const s=Xn[i];if(s.getSelectors){var t=s.getSelectors();if(t){r.push(t)}}}const o=e.querySelectorAll(R+n+", form, [type='submit'],"+" [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]"+r.flat().map(e=>", "+e).join(""));return o}else{return[]}}function qt(e){const t=g(ce(e.target),"button, input[type='submit']");const n=Nt(e);if(n){n.lastButtonClicked=t}}function Lt(e){const t=Nt(e);if(t){t.lastButtonClicked=null}}function Nt(e){const t=g(ce(e.target),"button, input[type='submit']");if(!t){return}const n=y("#"+ee(t,"form"),t.getRootNode())||g(t,"form");if(!n){return}return ie(n)}function At(e){e.addEventListener("click",qt);e.addEventListener("focusin",qt);e.addEventListener("focusout",Lt)}function It(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){vn(t,function(){if(at(t)){return}if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function Pt(t){De(t);for(let e=0;e<t.attributes.length;e++){const n=t.attributes[e].name;const r=t.attributes[e].value;if(l(n,"hx-on")||l(n,"data-hx-on")){const o=n.indexOf("-on")+3;const i=n.slice(o,o+1);if(i==="-"||i===":"){let e=n.slice(o+1);if(l(e,":")){e="htmx"+e}else if(l(e,"-")){e="htmx:"+e.slice(1)}else if(l(e,"htmx-")){e="htmx:"+e.slice(5)}It(t,e,r)}}}}function Dt(t){if(g(t,Q.config.disableSelector)){f(t);return}const n=ie(t);if(n.initHash!==Pe(t)){ke(t);n.initHash=Pe(t);he(t,"htmx:beforeProcessNode");if(t.value){n.lastValue=t.value}const e=lt(t);const r=St(t,n,e);if(!r){if(re(t,"hx-boost")==="true"){ht(t,n,e)}else if(s(t,"hx-trigger")){e.forEach(function(e){Et(t,e,n,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&s(t,"form")){At(t)}he(t,"htmx:afterProcessNode")}}function kt(e){e=y(e);if(g(e,Q.config.disableSelector)){f(e);return}Dt(e);se(Tt(e),function(e){Dt(e)});se(Ht(e),Pt)}function Mt(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function Xt(e,t){let n;if(window.CustomEvent&&typeof window.CustomEvent==="function"){n=new CustomEvent(e,{bubbles:true,cancelable:true,composed:true,detail:t})}else{n=ne().createEvent("CustomEvent");n.initCustomEvent(e,true,true,t)}return n}function ae(e,t,n){he(e,t,ue({error:t},n))}function Ft(e){return e==="htmx:afterProcessNode"}function Ut(e,t){se(jn(e),function(e){try{t(e)}catch(e){w(e)}})}function w(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function he(e,t,n){e=y(e);if(n==null){n={}}n.elt=e;const r=Xt(t,n);if(Q.logger&&!Ft(t)){Q.logger(e,t,n)}if(n.error){w(n.error);he(e,"htmx:error",{errorInfo:n})}let o=e.dispatchEvent(r);const i=Mt(t);if(o&&i!==t){const s=Xt(i,r.detail);o=o&&e.dispatchEvent(s)}Ut(ce(e),function(e){o=o&&(e.onEvent(t,r)!==false&&!r.defaultPrevented)});return o}let Bt=location.pathname+location.search;function jt(){const e=ne().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||ne().body}function Vt(t,e){if(!j()){return}const n=$t(e);const r=ne().title;const o=window.scrollY;if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}t=V(t);const i=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<i.length;e++){if(i[e].url===t){i.splice(e,1);break}}const s={url:t,content:n,title:r,scroll:o};he(ne().body,"htmx:historyItemCreated",{item:s,cache:i});i.push(s);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){ae(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function _t(t){if(!j()){return null}t=V(t);const n=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<n.length;e++){if(n[e].url===t){return n[e]}}return null}function $t(e){const t=Q.config.requestClass;const n=e.cloneNode(true);se(p(n,"."+t),function(e){o(e,t)});return n.innerHTML}function zt(){const e=jt();const t=Bt||location.pathname+location.search;let n;try{n=ne().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){n=ne().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!n){he(ne().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Vt(t,e)}if(Q.config.historyEnabled)history.replaceState({htmx:true},ne().title,window.location.href)}function Jt(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(pe(e,"&")||pe(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Bt=e}function Kt(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Bt=e}function Gt(e){se(e,function(e){e.call(undefined)})}function Zt(o){const e=new XMLHttpRequest;const i={path:o,xhr:e};he(ne().body,"htmx:historyCacheMiss",i);e.open("GET",o,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",ne().location.href);e.onload=function(){if(this.status>=200&&this.status<400){he(ne().body,"htmx:historyCacheMissLoad",i);const e=k(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=jt();const r=xn(n);kn(e.title);Ve(n,t,r);Gt(r.tasks);Bt=o;he(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{ae(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Yt(e){zt();e=e||location.pathname+location.search;const t=_t(e);if(t){const n=k(t.content);const r=jt();const o=xn(r);kn(n.title);Ve(r,n,o);Gt(o.tasks);E().setTimeout(function(){window.scrollTo(0,t.scroll)},0);Bt=e;he(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{Zt(e)}}}function Wt(e){let t=Se(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Qt(e){let t=Se(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function en(e,t){se(e,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function tn(t,n){for(let e=0;e<t.length;e++){const r=t[e];if(r.isSameNode(n)){return true}}return false}function nn(e){const t=e;if(t.name===""||t.name==null||t.disabled||g(t,"fieldset[disabled]")){return false}if(t.type==="button"||t.type==="submit"||t.tagName==="image"||t.tagName==="reset"||t.tagName==="file"){return false}if(t.type==="checkbox"||t.type==="radio"){return t.checked}return true}function rn(t,e,n){if(t!=null&&e!=null){if(Array.isArray(e)){e.forEach(function(e){n.append(t,e)})}else{n.append(t,e)}}}function on(t,n,r){if(t!=null&&n!=null){let e=r.getAll(t);if(Array.isArray(n)){e=e.filter(e=>n.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function sn(t,n,r,o,i){if(o==null||tn(t,o)){return}else{t.push(o)}if(nn(o)){const s=ee(o,"name");let e=o.value;if(o instanceof HTMLSelectElement&&o.multiple){e=F(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o instanceof HTMLInputElement&&o.files){e=F(o.files)}rn(s,e,n);if(i){ln(o,r)}}if(o instanceof HTMLFormElement){se(o.elements,function(e){if(t.indexOf(e)>=0){on(e.name,e.value,n)}else{t.push(e)}if(i){ln(e,r)}});new FormData(o).forEach(function(e,t){if(e instanceof File&&e.name===""){return}rn(t,e,n)})}}function ln(e,t){const n=e;if(n.willValidate){he(n,"htmx:validation:validate");if(!n.checkValidity()){t.push({elt:n,message:n.validationMessage,validity:n.validity});he(n,"htmx:validation:failed",{message:n.validationMessage,validity:n.validity})}}}function un(t,e){for(const n of e.keys()){t.delete(n);e.getAll(n).forEach(function(e){t.append(n,e)})}return t}function cn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=e instanceof HTMLFormElement&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){sn(n,o,i,g(e,"form"),l)}sn(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const c=s.lastButtonClicked||e;const f=ee(c,"name");rn(f,c.value,o)}const u=Se(e,"hx-include");se(u,function(e){sn(n,r,i,ce(e),l);if(!a(e,"form")){se(h(e).querySelectorAll(it),function(e){sn(n,r,i,e,l)})}});un(r,o);return{errors:i,formData:r,values:An(r)}}function fn(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function an(e){e=Ln(e);let n="";e.forEach(function(e,t){n=fn(n,t,e)});return n}function hn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};wn(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function dn(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.substr(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function gn(e){return!!ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function pn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!gn(e)){r.show="top"}if(n){const s=B(n);if(s.length>0){for(let e=0;e<s.length;e++){const l=s[e];if(l.indexOf("swap:")===0){r.swapDelay=d(l.substr(5))}else if(l.indexOf("settle:")===0){r.settleDelay=d(l.substr(7))}else if(l.indexOf("transition:")===0){r.transition=l.substr(11)==="true"}else if(l.indexOf("ignoreTitle:")===0){r.ignoreTitle=l.substr(12)==="true"}else if(l.indexOf("scroll:")===0){const u=l.substr(7);var o=u.split(":");const c=o.pop();var i=o.length>0?o.join(":"):null;r.scroll=c;r.scrollTarget=i}else if(l.indexOf("show:")===0){const f=l.substr(5);var o=f.split(":");const a=o.pop();var i=o.length>0?o.join(":"):null;r.show=a;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.substr("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{w("Unknown modifier in hx-swap: "+l)}}}}return r}function mn(e){return re(e,"hx-encoding")==="multipart/form-data"||a(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function yn(t,n,r){let o=null;Ut(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(mn(n)){return un(new FormData,Ln(r))}else{return an(r)}}}function xn(e){return{tasks:[],elts:[e]}}function bn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ce(fe(n,t.scrollTarget))}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ce(fe(n,e))}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function wn(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.substr(11);t=true}else if(e.indexOf("js:")===0){e=e.substr(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=vn(r,function(){return Function("return ("+e+")")()},{})}else{n=S(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return wn(ce(u(r)),e,o,i)}function vn(e,t,n){if(Q.config.allowEval){return t()}else{ae(e,"htmx:evalDisallowedError");return n}}function Sn(e,t){return wn(e,"hx-vars",true,t)}function En(e,t){return wn(e,"hx-vals",false,t)}function Cn(e){return ue(Sn(e),En(e))}function Rn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function On(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){ae(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function C(e,t){return t.test(e.getAllResponseHeaders())}function Hn(e,t,n){e=e.toLowerCase();if(n){if(n instanceof Element||typeof n==="string"){return de(e,t,null,null,{targetOverride:y(n),returnPromise:true})}else{return de(e,t,y(n.source),n.event,{handler:n.handler,headers:n.headers,values:n.values,targetOverride:y(n.target),swapOverride:n.swap,select:n.select,returnPromise:true})}}else{return de(e,t,null,null,{returnPromise:true})}}function Tn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function qn(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return he(e,"htmx:validateUrl",ue({url:o,sameHost:r},n))}function Ln(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function Nn(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function An(r){return new Proxy(r,{get:function(e,t){if(typeof t==="symbol"){return Reflect.get(e,t)}if(t==="toJSON"){return()=>Object.fromEntries(r)}if(t in e){if(typeof e[t]==="function"){return function(){return r[t].apply(r,arguments)}}else{return e[t]}}const n=r.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return Nn(e,t,n)}},set:function(t,n,e){if(typeof n!=="string"){return false}t.delete(n);if(typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else{t.append(n,e)}return true},deleteProperty:function(e,t){if(typeof t==="string"){e.delete(t)}return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,k){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const M=i.handler||Mn;const X=i.select||null;if(!le(r)){oe(s);return e}const u=i.targetOverride||ce(Ce(r));if(u==null||u==ve){ae(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let c=ie(r);const f=c.lastButtonClicked;if(f){const L=ee(f,"formaction");if(L!=null){n=L}const N=ee(f,"formmethod");if(N!=null){if(N.toLowerCase()!=="dialog"){t=N}}}const a=re(r,"hx-confirm");if(k===undefined){const K=function(e){return de(t,n,r,o,i,!!e)};const G={target:u,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:K,question:a};if(he(r,"htmx:confirm",G)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const A=d.split(":");const I=A[0].trim();if(I==="this"){h=Ee(r,"hx-sync")}else{h=ce(fe(r,I))}d=(A[1]||"drop").trim();c=ie(h);if(d==="drop"&&c.xhr&&c.abortable!==true){oe(s);return e}else if(d==="abort"){if(c.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){he(h,"htmx:abort")}else if(d.indexOf("queue")===0){const Z=d.split(" ");g=(Z[1]||"last").trim()}}if(c.xhr){if(c.abortable){he(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(c.queuedRequests==null){c.queuedRequests=[]}if(g==="first"&&c.queuedRequests.length===0){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){c.queuedRequests=[];c.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;c.xhr=p;c.abortable=F;const m=function(){c.xhr=null;c.abortable=false;if(c.queuedRequests!=null&&c.queuedRequests.length>0){const e=c.queuedRequests.shift();e()}};const U=re(r,"hx-prompt");if(U){var y=prompt(U);if(y===null||!he(r,"htmx:prompt",{prompt:y,target:u})){oe(s);m();return e}}if(a&&!k){if(!confirm(a)){oe(s);m();return e}}let x=hn(r,u,y);if(t!=="get"&&!mn(r)){x["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){x=ue(x,i.headers)}const B=cn(r,t);let b=B.errors;const j=B.formData;if(i.values){un(j,Ln(i.values))}const V=Ln(Cn(r));const w=un(j,V);let v=dn(w,r);if(Q.config.getCacheBusterParam&&t==="get"){v.set("org.htmx.cache-buster",ee(u,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=wn(r,"hx-request");const _=ie(r).boosted;let E=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const C={boosted:_,useUrlParams:E,formData:v,parameters:An(v),unfilteredFormData:w,unfilteredParameters:An(w),headers:x,target:u,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!he(r,"htmx:configRequest",C)){oe(s);m();return e}n=C.path;t=C.verb;x=C.headers;v=Ln(C.parameters);b=C.errors;E=C.useUrlParams;if(b&&b.length>0){he(r,"htmx:validation:halted",C);oe(s);m();return e}const $=n.split("#");const z=$[0];const R=$[1];let O=n;if(E){O=z;const Y=!v.keys().next().done;if(Y){if(O.indexOf("?")<0){O+="?"}else{O+="&"}O+=an(v);if(R){O+="#"+R}}}if(!qn(r,O,C)){ae(r,"htmx:invalidPath",C);oe(l);return e}p.open(t.toUpperCase(),O,true);p.overrideMimeType("text/html");p.withCredentials=C.withCredentials;p.timeout=C.timeout;if(S.noHeaders){}else{for(const D in x){if(x.hasOwnProperty(D)){const W=x[D];Rn(p,D,W)}}}const H={xhr:p,target:u,requestConfig:C,etc:i,boosted:_,select:X,pathInfo:{requestPath:n,finalRequestPath:O,responsePath:null,anchor:R}};p.onload=function(){try{const t=Tn(r);H.pathInfo.responsePath=On(p);M(r,H);en(T,q);he(r,"htmx:afterRequest",H);he(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){he(e,"htmx:afterRequest",H);he(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){ae(r,"htmx:onLoadError",ue({error:e},H));throw e}};p.onerror=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){en(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:timeout",H);oe(l);m()};if(!he(r,"htmx:beforeRequest",H)){oe(s);m();return e}var T=Wt(r);var q=Qt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){he(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});he(r,"htmx:beforeSend",H);const J=E?null:yn(p,r,v);p.send(J);return e}function In(e,t){const n=t.xhr;let r=null;let o=null;if(C(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(C(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(C(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const u=re(e,"hx-replace-url");const c=ie(e).boosted;let f=null;let a=null;if(l){f="push";a=l}else if(u){f="replace";a=u}else if(c){f="push";a=s||i}if(a){if(a==="false"){return{}}if(a==="true"){a=s||i}if(t.pathInfo.anchor&&a.indexOf("#")===-1){a=a+"#"+t.pathInfo.anchor}return{type:f,path:a}}else{return{}}}function Pn(e,t){var n=new RegExp(e.code);return n.test(t.toString(10))}function Dn(e){for(var t=0;t<Q.config.responseHandling.length;t++){var n=Q.config.responseHandling[t];if(Pn(n,e.status)){return n}}return{swap:false}}function kn(e){if(e){const t=r("title");if(t){t.innerHTML=e}else{window.document.title=e}}}function Mn(o,i){const s=i.xhr;let l=i.target;const e=i.etc;const u=i.select;if(!he(o,"htmx:beforeOnLoad",i))return;if(C(s,/HX-Trigger:/i)){Je(s,"HX-Trigger",o)}if(C(s,/HX-Location:/i)){zt();let e=s.getResponseHeader("HX-Location");var t;if(e.indexOf("{")===0){t=S(e);e=t.path;delete t.path}Hn("get",e,t).then(function(){Jt(e)});return}const n=C(s,/HX-Refresh:/i)&&s.getResponseHeader("HX-Refresh")==="true";if(C(s,/HX-Redirect:/i)){location.href=s.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}const c=In(o,i);const r=Dn(s);const f=r.swap;let a=!!r.error;let h=Q.config.ignoreTitle||r.ignoreTitle;let d=r.select;if(r.target){i.target=ce(fe(o,r.target))}var g=e.swapOverride;if(g==null&&r.swapOverride){g=r.swapOverride}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var p=s.response;var m=ue({shouldSwap:f,serverResponse:p,isError:a,ignoreTitle:h,selectOverride:d},i);if(r.event&&!he(l,r.event,m))return;if(!he(l,"htmx:beforeSwap",m))return;l=m.target;p=m.serverResponse;a=m.isError;h=m.ignoreTitle;d=m.selectOverride;i.target=l;i.failed=a;i.successful=!a;if(m.shouldSwap){if(s.status===286){ut(o)}Ut(o,function(e){p=e.transformResponse(p,s,o)});if(c.type){zt()}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var y=pn(o,g);if(!y.hasOwnProperty("ignoreTitle")){y.ignoreTitle=h}l.classList.add(Q.config.swappingClass);let n=null;let r=null;if(u){d=u}if(C(s,/HX-Reselect:/i)){d=s.getResponseHeader("HX-Reselect")}const x=re(o,"hx-select-oob");const b=re(o,"hx-select");let e=function(){try{if(c.type){he(ne().body,"htmx:beforeHistoryUpdate",ue({history:c},i));if(c.type==="push"){Jt(c.path);he(ne().body,"htmx:pushedIntoHistory",{path:c.path})}else{Kt(c.path);he(ne().body,"htmx:replacedInHistory",{path:c.path})}}ze(l,p,y,{select:d||b,selectOOB:x,eventInfo:i,anchor:i.pathInfo.anchor,contextElement:o,afterSwapCallback:function(){if(C(s,/HX-Trigger-After-Swap:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Swap",e)}},afterSettleCallback:function(){if(C(s,/HX-Trigger-After-Settle:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Settle",e)}oe(n)}})}catch(e){ae(o,"htmx:swapError",i);oe(r);throw e}};let t=Q.config.globalViewTransitions;if(y.hasOwnProperty("transition")){t=y.transition}if(t&&he(o,"htmx:beforeTransition",i)&&typeof Promise!=="undefined"&&document.startViewTransition){const w=new Promise(function(e,t){n=e;r=t});const v=e;e=function(){document.startViewTransition(function(){v();return w})}}if(y.swapDelay>0){E().setTimeout(e,y.swapDelay)}else{e()}}if(a){ae(o,"htmx:responseError",ue({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const Xn={};function Fn(){return{init:function(e){return null},getSelectors:function(){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function Un(e,t){if(t.init){t.init(n)}Xn[e]=ue(Fn(),t)}function Bn(e){delete Xn[e]}function jn(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=Xn[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return jn(ce(u(e)),n,r)}var Vn=false;ne().addEventListener("DOMContentLoaded",function(){Vn=true});function _n(e){if(Vn||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function $n(){if(Q.config.includeIndicatorStyles!==false){const e=Q.config.inlineStyleNonce?` nonce="${Q.config.inlineStyleNonce}"`:"";ne().head.insertAdjacentHTML("beforeend","<style"+e+"> ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} </style>")}}function zn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function Jn(){const e=zn();if(e){Q.config=ue(Q.config,e)}}_n(function(){Jn();$n();let e=ne().body;kt(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Yt();se(t,function(e){he(e,"htmx:restored",{document:ne(),triggerEvent:he})})}else{if(n){n(e)}}};E().setTimeout(function(){he(e,"htmx:load",{});e=null},0)});return Q}();
\ No newline at end of file
+var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=cn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",inlineStyleNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0.4"};Q.onLoad=j;Q.process=kt;Q.on=ye;Q.off=be;Q.trigger=he;Q.ajax=Rn;Q.find=u;Q.findAll=x;Q.closest=g;Q.remove=z;Q.addClass=K;Q.removeClass=G;Q.toggleClass=W;Q.takeClass=Z;Q.swap=$e;Q.defineExtension=Fn;Q.removeExtension=Bn;Q.logAll=V;Q.logNone=_;Q.parseInterval=d;Q._=e;const n={addTriggerHandler:St,bodyContains:le,canAccessLocalStorage:B,findThisElement:Se,filterValues:hn,swap:$e,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:o,getExpressionVars:En,getHeaders:fn,getInputValues:cn,getInternalData:ie,getSwapSpecification:gn,getTriggerSpecs:st,getTarget:Ee,makeFragment:P,mergeObjects:ce,makeSettleInfo:xn,oobSwap:He,querySelectorExt:ae,settleImmediately:Kt,shouldCancel:ht,triggerEvent:he,triggerErrorEvent:fe,withExtensions:Ft};const r=["get","post","put","delete","patch"];const H=r.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function c(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function m(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function o(e,t){while(e&&!t(e)){e=c(e)}return e||null}function i(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;o(t,function(e){return!!(r=i(t,ue(e),n))});if(r!=="unset"){return r}}function h(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function T(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function q(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function L(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function A(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function N(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function I(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(N(e)){const t=A(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){O(e)}finally{e.remove()}}})}function P(e){const t=e.replace(/<head(\s[^>]*)?>[\s\S]*?<\/head>/i,"");const n=T(t);let r;if(n==="html"){r=new DocumentFragment;const i=q(e);L(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=q(t);L(r,i.body);r.title=i.title}else{const i=q('<body><template class="internal-htmx-wrapper">'+t+"</template></body>");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){I(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function k(e){return typeof e==="function"}function D(e){return t(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function M(t){const n=[];if(t){for(let e=0;e<t.length;e++){n.push(t[e])}}return n}function se(t,n){if(t){for(let e=0;e<t.length;e++){n(t[e])}}}function X(e){const t=e.getBoundingClientRect();const n=t.top;const r=t.bottom;return n<window.innerHeight&&r>=0}function le(e){return e.getRootNode({composed:true})===document}function F(e){return e.trim().split(/\s+/)}function ce(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function S(e){try{return JSON.parse(e)}catch(e){O(e);return null}}function B(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function U(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function e(e){return vn(ne().body,function(){return eval(e)})}function j(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function V(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function _(){Q.logger=null}function u(e,t){if(typeof e!=="string"){return e.querySelector(t)}else{return u(ne(),e)}}function x(e,t){if(typeof e!=="string"){return e.querySelectorAll(t)}else{return x(ne(),e)}}function E(){return window}function z(e,t){e=y(e);if(t){E().setTimeout(function(){z(e);e=null},t)}else{c(e).removeChild(e)}}function ue(e){return e instanceof Element?e:null}function $(e){return e instanceof HTMLElement?e:null}function J(e){return typeof e==="string"?e:null}function f(e){return e instanceof Element||e instanceof Document||e instanceof DocumentFragment?e:null}function K(e,t,n){e=ue(y(e));if(!e){return}if(n){E().setTimeout(function(){K(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function G(e,t,n){let r=ue(y(e));if(!r){return}if(n){E().setTimeout(function(){G(r,t);r=null},n)}else{if(r.classList){r.classList.remove(t);if(r.classList.length===0){r.removeAttribute("class")}}}}function W(e,t){e=y(e);e.classList.toggle(t)}function Z(e,t){e=y(e);se(e.parentElement.children,function(e){G(e,t)});K(ue(e),t)}function g(e,t){e=ue(y(e));if(e&&e.closest){return e.closest(t)}else{do{if(e==null||h(e,t)){return e}}while(e=e&&ue(c(e)));return null}}function l(e,t){return e.substring(0,t.length)===t}function Y(e,t){return e.substring(e.length-t.length)===t}function ge(e){const t=e.trim();if(l(t,"<")&&Y(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function p(t,r,n){if(r.indexOf("global ")===0){return p(t,r.slice(7),true)}t=y(t);const o=[];{let t=0;let n=0;for(let e=0;e<r.length;e++){const l=r[e];if(l===","&&t===0){o.push(r.substring(n,e));n=e+1;continue}if(l==="<"){t++}else if(l==="/"&&e<r.length-1&&r[e+1]===">"){t--}}if(n<r.length){o.push(r.substring(n))}}const i=[];const s=[];while(o.length>0){const r=ge(o.shift());let e;if(r.indexOf("closest ")===0){e=g(ue(t),ge(r.substr(8)))}else if(r.indexOf("find ")===0){e=u(f(t),ge(r.substr(5)))}else if(r==="next"||r==="nextElementSibling"){e=ue(t).nextElementSibling}else if(r.indexOf("next ")===0){e=pe(t,ge(r.substr(5)),!!n)}else if(r==="previous"||r==="previousElementSibling"){e=ue(t).previousElementSibling}else if(r.indexOf("previous ")===0){e=me(t,ge(r.substr(9)),!!n)}else if(r==="document"){e=document}else if(r==="window"){e=window}else if(r==="body"){e=document.body}else if(r==="root"){e=m(t,!!n)}else if(r==="host"){e=t.getRootNode().host}else{s.push(r)}if(e){i.push(e)}}if(s.length>0){const e=s.join(",");const c=f(m(t,!!n));i.push(...M(c.querySelectorAll(e)))}return i}var pe=function(t,e,n){const r=f(m(t,n)).querySelectorAll(e);for(let e=0;e<r.length;e++){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_PRECEDING){return o}}};var me=function(t,e,n){const r=f(m(t,n)).querySelectorAll(e);for(let e=r.length-1;e>=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function ae(e,t){if(typeof e!=="string"){return p(e,t)[0]}else{return p(ne().body,e)[0]}}function y(e,t){if(typeof e==="string"){return u(f(t)||document,e)}else{return e}}function xe(e,t,n,r){if(k(t)){return{target:ne().body,event:J(e),listener:t,options:n}}else{return{target:y(e),event:J(t),listener:n,options:r}}}function ye(t,n,r,o){Vn(function(){const e=xe(t,n,r,o);e.target.addEventListener(e.event,e.listener,e.options)});const e=k(n);return e?n:r}function be(t,n,r){Vn(function(){const e=xe(t,n,r);e.target.removeEventListener(e.event,e.listener)});return k(n)?n:r}const ve=ne().createElement("output");function we(e,t){const n=re(e,t);if(n){if(n==="this"){return[Se(e,t)]}else{const r=p(e,n);if(r.length===0){O('The selector "'+n+'" on '+t+" returned no matches!");return[ve]}else{return r}}}}function Se(e,t){return ue(o(e,function(e){return te(ue(e),t)!=null}))}function Ee(e){const t=re(e,"hx-target");if(t){if(t==="this"){return Se(e,"hx-target")}else{return ae(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Ce(t){const n=Q.config.attributesToSettle;for(let e=0;e<n.length;e++){if(t===n[e]){return true}}return false}function Oe(t,n){se(t.attributes,function(e){if(!n.hasAttribute(e.name)&&Ce(e.name)){t.removeAttribute(e.name)}});se(n.attributes,function(e){if(Ce(e.name)){t.setAttribute(e.name,e.value)}})}function Re(t,e){const n=Un(e);for(let e=0;e<n.length;e++){const r=n[e];try{if(r.isInlineSwap(t)){return true}}catch(e){O(e)}}return t==="outerHTML"}function He(e,o,i,t){t=t||ne();let n="#"+ee(o,"id");let s="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){s=e.substring(0,e.indexOf(":"));n=e.substring(e.indexOf(":")+1)}else{s=e}o.removeAttribute("hx-swap-oob");o.removeAttribute("data-hx-swap-oob");const r=p(t,n,false);if(r){se(r,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!Re(s,e)){t=f(n)}const r={shouldSwap:true,target:e,fragment:t};if(!he(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){qe(t);_e(s,e,e,t,i);Te()}se(i.elts,function(e){he(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);fe(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function Te(){const e=u("#--htmx-preserve-pantry--");if(e){for(const t of[...e.children]){const n=u("#"+t.id);n.parentNode.moveBefore(t,n);n.remove()}e.remove()}}function qe(e){se(x(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){if(e.moveBefore){let e=u("#--htmx-preserve-pantry--");if(e==null){ne().body.insertAdjacentHTML("afterend","<div id='--htmx-preserve-pantry--'></div>");e=u("#--htmx-preserve-pantry--")}e.moveBefore(n,null)}else{e.parentNode.replaceChild(n,e)}}})}function Le(l,e,c){se(e.querySelectorAll("[id]"),function(t){const n=ee(t,"id");if(n&&n.length>0){const r=n.replace("'","\\'");const o=t.tagName.replace(":","\\:");const e=f(l);const i=e&&e.querySelector(o+"[id='"+r+"']");if(i&&i!==e){const s=t.cloneNode();Oe(t,i);c.tasks.push(function(){Oe(t,s)})}}})}function Ae(e){return function(){G(e,Q.config.addedClass);kt(ue(e));Ne(f(e));he(e,"htmx:load")}}function Ne(e){const t="[autofocus]";const n=$(h(e,t)?e:e.querySelector(t));if(n!=null){n.focus()}}function a(e,t,n,r){Le(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;K(ue(o),Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Ae(o))}}}function Ie(e,t){let n=0;while(n<e.length){t=(t<<5)-t+e.charCodeAt(n++)|0}return t}function Pe(t){let n=0;if(t.attributes){for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e];if(r.value){n=Ie(r.name,n);n=Ie(r.value,n)}}}return n}function ke(t){const n=ie(t);if(n.onHandlers){for(let e=0;e<n.onHandlers.length;e++){const r=n.onHandlers[e];be(t,r.event,r.listener)}delete n.onHandlers}}function De(e){const t=ie(e);if(t.timeout){clearTimeout(t.timeout)}if(t.listenerInfos){se(t.listenerInfos,function(e){if(e.on){be(e.on,e.trigger,e.listener)}})}ke(e);se(Object.keys(t),function(e){if(e!=="firstInitCompleted")delete t[e]})}function b(e){he(e,"htmx:beforeCleanupElement");De(e);if(e.children){se(e.children,function(e){b(e)})}}function Me(t,e,n){if(t instanceof Element&&t.tagName==="BODY"){return Ve(t,e,n)}let r;const o=t.previousSibling;const i=c(t);if(!i){return}a(i,t,e,n);if(o==null){r=i.firstChild}else{r=o.nextSibling}n.elts=n.elts.filter(function(e){return e!==t});while(r&&r!==t){if(r instanceof Element){n.elts.push(r)}r=r.nextSibling}b(t);if(t instanceof Element){t.remove()}else{t.parentNode.removeChild(t)}}function Xe(e,t,n){return a(e,e.firstChild,t,n)}function Fe(e,t,n){return a(c(e),e,t,n)}function Be(e,t,n){return a(e,null,t,n)}function Ue(e,t,n){return a(c(e),e.nextSibling,t,n)}function je(e){b(e);const t=c(e);if(t){return t.removeChild(e)}}function Ve(e,t,n){const r=e.firstChild;a(e,r,t,n);if(r){while(r.nextSibling){b(r.nextSibling);e.removeChild(r.nextSibling)}b(r);e.removeChild(r)}}function _e(t,e,n,r,o){switch(t){case"none":return;case"outerHTML":Me(n,r,o);return;case"afterbegin":Xe(n,r,o);return;case"beforebegin":Fe(n,r,o);return;case"beforeend":Be(n,r,o);return;case"afterend":Ue(n,r,o);return;case"delete":je(n);return;default:var i=Un(e);for(let e=0;e<i.length;e++){const s=i[e];try{const l=s.handleSwap(t,n,r,o);if(l){if(Array.isArray(l)){for(let e=0;e<l.length;e++){const c=l[e];if(c.nodeType!==Node.TEXT_NODE&&c.nodeType!==Node.COMMENT_NODE){o.tasks.push(Ae(c))}}}return}}catch(e){O(e)}}if(t==="innerHTML"){Ve(n,r,o)}else{_e(Q.config.defaultSwapStyle,e,n,r,o)}}}function ze(e,n,r){var t=x(e,"[hx-swap-oob], [data-hx-swap-oob]");se(t,function(e){if(Q.config.allowNestedOobSwaps||e.parentElement===null){const t=te(e,"hx-swap-oob");if(t!=null){He(t,e,n,r)}}else{e.removeAttribute("hx-swap-oob");e.removeAttribute("data-hx-swap-oob")}});return t.length>0}function $e(e,t,r,o){if(!o){o={}}e=y(e);const i=o.contextElement?m(o.contextElement,false):ne();const n=document.activeElement;let s={};try{s={elt:n,start:n?n.selectionStart:null,end:n?n.selectionEnd:null}}catch(e){}const l=xn(e);if(r.swapStyle==="textContent"){e.textContent=t}else{let n=P(t);l.title=n.title;if(o.selectOOB){const u=o.selectOOB.split(",");for(let t=0;t<u.length;t++){const a=u[t].split(":",2);let e=a[0].trim();if(e.indexOf("#")===0){e=e.substring(1)}const f=a[1]||"true";const h=n.querySelector("#"+e);if(h){He(f,h,l,i)}}}ze(n,l,i);se(x(n,"template"),function(e){if(e.content&&ze(e.content,l,i)){e.remove()}});if(o.select){const d=ne().createDocumentFragment();se(n.querySelectorAll(o.select),function(e){d.appendChild(e)});n=d}qe(n);_e(r.swapStyle,o.contextElement,e,n,l);Te()}if(s.elt&&!le(s.elt)&&ee(s.elt,"id")){const g=document.getElementById(ee(s.elt,"id"));const p={preventScroll:r.focusScroll!==undefined?!r.focusScroll:!Q.config.defaultFocusScroll};if(g){if(s.start&&g.setSelectionRange){try{g.setSelectionRange(s.start,s.end)}catch(e){}}g.focus(p)}}e.classList.remove(Q.config.swappingClass);se(l.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}he(e,"htmx:afterSwap",o.eventInfo)});if(o.afterSwapCallback){o.afterSwapCallback()}if(!r.ignoreTitle){kn(l.title)}const c=function(){se(l.tasks,function(e){e.call()});se(l.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}he(e,"htmx:afterSettle",o.eventInfo)});if(o.anchor){const e=ue(y("#"+o.anchor));if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}yn(l.elts,r);if(o.afterSettleCallback){o.afterSettleCallback()}};if(r.settleDelay>0){E().setTimeout(c,r.settleDelay)}else{c()}}function Je(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=S(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(D(e)){n=e.target!==undefined?e.target:n}else{e={value:e}}he(n,i,e)}}}else{const s=r.split(",");for(let e=0;e<s.length;e++){he(n,s[e].trim(),[])}}}const Ke=/\s/;const v=/[\s,]/;const Ge=/[_$a-zA-Z]/;const We=/[_$a-zA-Z0-9]/;const Ze=['"',"'","/"];const w=/[^\s]/;const Ye=/[{(]/;const Qe=/[})]/;function et(e){const t=[];let n=0;while(n<e.length){if(Ge.exec(e.charAt(n))){var r=n;while(We.exec(e.charAt(n+1))){n++}t.push(e.substring(r,n+1))}else if(Ze.indexOf(e.charAt(n))!==-1){const o=e.charAt(n);var r=n;n++;while(n<e.length&&e.charAt(n)!==o){if(e.charAt(n)==="\\"){n++}n++}t.push(e.substring(r,n+1))}else{const i=e.charAt(n);t.push(i)}n++}return t}function tt(e,t,n){return Ge.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==n&&t!=="."}function nt(r,o,i){if(o[0]==="["){o.shift();let e=1;let t=" return (function("+i+"){ return (";let n=null;while(o.length>0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=vn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){fe(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(tt(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function C(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function rt(e){let t;if(e.length>0&&Ye.test(e[0])){e.shift();t=C(e,Qe).trim();e.shift()}else{t=C(e,v)}return t}const ot="input, textarea, select";function it(e,t,n){const r=[];const o=et(t);do{C(o,w);const l=o.length;const c=C(o,/[,\[\s]/);if(c!==""){if(c==="every"){const u={trigger:"every"};C(o,w);u.pollInterval=d(C(o,/[,\[\s]/));C(o,w);var i=nt(e,o,"event");if(i){u.eventFilter=i}r.push(u)}else{const a={trigger:c};var i=nt(e,o,"event");if(i){a.eventFilter=i}C(o,w);while(o.length>0&&o[0]!==","){const f=o.shift();if(f==="changed"){a.changed=true}else if(f==="once"){a.once=true}else if(f==="consume"){a.consume=true}else if(f==="delay"&&o[0]===":"){o.shift();a.delay=d(C(o,v))}else if(f==="from"&&o[0]===":"){o.shift();if(Ye.test(o[0])){var s=rt(o)}else{var s=C(o,v);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=rt(o);if(h.length>0){s+=" "+h}}}a.from=s}else if(f==="target"&&o[0]===":"){o.shift();a.target=rt(o)}else if(f==="throttle"&&o[0]===":"){o.shift();a.throttle=d(C(o,v))}else if(f==="queue"&&o[0]===":"){o.shift();a.queue=C(o,v)}else if(f==="root"&&o[0]===":"){o.shift();a[f]=rt(o)}else if(f==="threshold"&&o[0]===":"){o.shift();a[f]=C(o,v)}else{fe(e,"htmx:syntax:error",{token:o.shift()})}C(o,w)}r.push(a)}}if(o.length===l){fe(e,"htmx:syntax:error",{token:o.shift()})}C(o,w)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function st(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||it(e,t,r)}if(n.length>0){return n}else if(h(e,"form")){return[{trigger:"submit"}]}else if(h(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(h(e,ot)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function lt(e){ie(e).cancelled=true}function ct(e,t,n){const r=ie(e);r.timeout=E().setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!gt(n,e,Mt("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}ct(e,t,n)}},n.pollInterval)}function ut(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function at(e){return g(e,Q.config.disableSelector)}function ft(t,n,e){if(t instanceof HTMLAnchorElement&&ut(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"&&String(ee(t,"method")).toLowerCase()!=="dialog"){n.boosted=true;let r,o;if(t.tagName==="A"){r="get";o=ee(t,"href")}else{const i=ee(t,"method");r=i?i.toLowerCase():"get";o=ee(t,"action");if(o==null||o===""){o=ne().location.href}if(r==="get"&&o.includes("?")){o=o.replace(/\?[^#]+/,"")}}e.forEach(function(e){pt(t,function(e,t){const n=ue(e);if(at(n)){b(n);return}de(r,o,n,t)},n,e,true)})}}function ht(e,t){const n=ue(t);if(!n){return false}if(e.type==="submit"||e.type==="click"){if(n.tagName==="FORM"){return true}if(h(n,'input[type="submit"], button')&&(h(n,"[form]")||g(n,"form")!==null)){return true}if(n instanceof HTMLAnchorElement&&n.href&&(n.getAttribute("href")==="#"||n.getAttribute("href").indexOf("#")!==0)){return true}}return false}function dt(e,t){return ie(e).boosted&&e instanceof HTMLAnchorElement&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function gt(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){const o=r.source;fe(ne().body,"htmx:eventFilter:error",{error:e,source:o});return true}}return false}function pt(l,c,e,u,a){const f=ie(l);let t;if(u.from){t=p(l,u.from)}else{t=[l]}if(u.changed){if(!("lastValue"in f)){f.lastValue=new WeakMap}t.forEach(function(e){if(!f.lastValue.has(u)){f.lastValue.set(u,new WeakMap)}f.lastValue.get(u).set(e,e.value)})}se(t,function(i){const s=function(e){if(!le(l)){i.removeEventListener(u.trigger,s);return}if(dt(l,e)){return}if(a||ht(e,l)){e.preventDefault()}if(gt(u,l,e)){return}const t=ie(e);t.triggerSpec=u;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(l)<0){t.handledFor.push(l);if(u.consume){e.stopPropagation()}if(u.target&&e.target){if(!h(ue(e.target),u.target)){return}}if(u.once){if(f.triggeredOnce){return}else{f.triggeredOnce=true}}if(u.changed){const n=event.target;const r=n.value;const o=f.lastValue.get(u);if(o.has(n)&&o.get(n)===r){return}o.set(n,r)}if(f.delayed){clearTimeout(f.delayed)}if(f.throttle){return}if(u.throttle>0){if(!f.throttle){he(l,"htmx:trigger");c(l,e);f.throttle=E().setTimeout(function(){f.throttle=null},u.throttle)}}else if(u.delay>0){f.delayed=E().setTimeout(function(){he(l,"htmx:trigger");c(l,e)},u.delay)}else{he(l,"htmx:trigger");c(l,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:u.trigger,listener:s,on:i});i.addEventListener(u.trigger,s)})}let mt=false;let xt=null;function yt(){if(!xt){xt=function(){mt=true};window.addEventListener("scroll",xt);window.addEventListener("resize",xt);setInterval(function(){if(mt){mt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){bt(e)})}},200)}}function bt(e){if(!s(e,"data-hx-revealed")&&X(e)){e.setAttribute("data-hx-revealed","true");const t=ie(e);if(t.initHash){he(e,"revealed")}else{e.addEventListener("htmx:afterProcessNode",function(){he(e,"revealed")},{once:true})}}}function vt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;he(e,"htmx:trigger");t(e)}};if(r>0){E().setTimeout(o,r)}else{o()}}function wt(t,n,e){let i=false;se(r,function(r){if(s(t,"hx-"+r)){const o=te(t,"hx-"+r);i=true;n.path=o;n.verb=r;e.forEach(function(e){St(t,e,n,function(e,t){const n=ue(e);if(g(n,Q.config.disableSelector)){b(n);return}de(r,o,n,t)})})}});return i}function St(r,e,t,n){if(e.trigger==="revealed"){yt();pt(r,n,t,e);bt(ue(r))}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=ae(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e<t.length;e++){const n=t[e];if(n.isIntersecting){he(r,"intersect");break}}},o);i.observe(ue(r));pt(ue(r),n,t,e)}else if(!t.firstInitCompleted&&e.trigger==="load"){if(!gt(e,r,Mt("load",{elt:r}))){vt(ue(r),n,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ct(ue(r),n,e)}else{pt(r,n,t,e)}}function Et(e){const t=ue(e);if(!t){return false}const n=t.attributes;for(let e=0;e<n.length;e++){const r=n[e].name;if(l(r,"hx-on:")||l(r,"data-hx-on:")||l(r,"hx-on-")||l(r,"data-hx-on-")){return true}}return false}const Ct=(new XPathEvaluator).createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]');function Ot(e,t){if(Et(e)){t.push(ue(e))}const n=Ct.evaluate(e);let r=null;while(r=n.iterateNext())t.push(ue(r))}function Rt(e){const t=[];if(e instanceof DocumentFragment){for(const n of e.childNodes){Ot(n,t)}}else{Ot(e,t)}return t}function Ht(e){if(e.querySelectorAll){const n=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";const r=[];for(const i in Mn){const s=Mn[i];if(s.getSelectors){var t=s.getSelectors();if(t){r.push(t)}}}const o=e.querySelectorAll(H+n+", form, [type='submit'],"+" [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]"+r.flat().map(e=>", "+e).join(""));return o}else{return[]}}function Tt(e){const t=g(ue(e.target),"button, input[type='submit']");const n=Lt(e);if(n){n.lastButtonClicked=t}}function qt(e){const t=Lt(e);if(t){t.lastButtonClicked=null}}function Lt(e){const t=g(ue(e.target),"button, input[type='submit']");if(!t){return}const n=y("#"+ee(t,"form"),t.getRootNode())||g(t,"form");if(!n){return}return ie(n)}function At(e){e.addEventListener("click",Tt);e.addEventListener("focusin",Tt);e.addEventListener("focusout",qt)}function Nt(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){vn(t,function(){if(at(t)){return}if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function It(t){ke(t);for(let e=0;e<t.attributes.length;e++){const n=t.attributes[e].name;const r=t.attributes[e].value;if(l(n,"hx-on")||l(n,"data-hx-on")){const o=n.indexOf("-on")+3;const i=n.slice(o,o+1);if(i==="-"||i===":"){let e=n.slice(o+1);if(l(e,":")){e="htmx"+e}else if(l(e,"-")){e="htmx:"+e.slice(1)}else if(l(e,"htmx-")){e="htmx:"+e.slice(5)}Nt(t,e,r)}}}}function Pt(t){if(g(t,Q.config.disableSelector)){b(t);return}const n=ie(t);const e=Pe(t);if(n.initHash!==e){De(t);n.initHash=e;he(t,"htmx:beforeProcessNode");const r=st(t);const o=wt(t,n,r);if(!o){if(re(t,"hx-boost")==="true"){ft(t,n,r)}else if(s(t,"hx-trigger")){r.forEach(function(e){St(t,e,n,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&s(t,"form")){At(t)}n.firstInitCompleted=true;he(t,"htmx:afterProcessNode")}}function kt(e){e=y(e);if(g(e,Q.config.disableSelector)){b(e);return}Pt(e);se(Ht(e),function(e){Pt(e)});se(Rt(e),It)}function Dt(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function Mt(e,t){let n;if(window.CustomEvent&&typeof window.CustomEvent==="function"){n=new CustomEvent(e,{bubbles:true,cancelable:true,composed:true,detail:t})}else{n=ne().createEvent("CustomEvent");n.initCustomEvent(e,true,true,t)}return n}function fe(e,t,n){he(e,t,ce({error:t},n))}function Xt(e){return e==="htmx:afterProcessNode"}function Ft(e,t){se(Un(e),function(e){try{t(e)}catch(e){O(e)}})}function O(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function he(e,t,n){e=y(e);if(n==null){n={}}n.elt=e;const r=Mt(t,n);if(Q.logger&&!Xt(t)){Q.logger(e,t,n)}if(n.error){O(n.error);he(e,"htmx:error",{errorInfo:n})}let o=e.dispatchEvent(r);const i=Dt(t);if(o&&i!==t){const s=Mt(i,r.detail);o=o&&e.dispatchEvent(s)}Ft(ue(e),function(e){o=o&&(e.onEvent(t,r)!==false&&!r.defaultPrevented)});return o}let Bt=location.pathname+location.search;function Ut(){const e=ne().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||ne().body}function jt(t,e){if(!B()){return}const n=_t(e);const r=ne().title;const o=window.scrollY;if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}t=U(t);const i=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<i.length;e++){if(i[e].url===t){i.splice(e,1);break}}const s={url:t,content:n,title:r,scroll:o};he(ne().body,"htmx:historyItemCreated",{item:s,cache:i});i.push(s);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){fe(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Vt(t){if(!B()){return null}t=U(t);const n=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<n.length;e++){if(n[e].url===t){return n[e]}}return null}function _t(e){const t=Q.config.requestClass;const n=e.cloneNode(true);se(x(n,"."+t),function(e){G(e,t)});se(x(n,"[data-disabled-by-htmx]"),function(e){e.removeAttribute("disabled")});return n.innerHTML}function zt(){const e=Ut();const t=Bt||location.pathname+location.search;let n;try{n=ne().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){n=ne().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!n){he(ne().body,"htmx:beforeHistorySave",{path:t,historyElt:e});jt(t,e)}if(Q.config.historyEnabled)history.replaceState({htmx:true},ne().title,window.location.href)}function $t(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(Y(e,"&")||Y(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Bt=e}function Jt(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Bt=e}function Kt(e){se(e,function(e){e.call(undefined)})}function Gt(o){const e=new XMLHttpRequest;const i={path:o,xhr:e};he(ne().body,"htmx:historyCacheMiss",i);e.open("GET",o,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",ne().location.href);e.onload=function(){if(this.status>=200&&this.status<400){he(ne().body,"htmx:historyCacheMissLoad",i);const e=P(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=Ut();const r=xn(n);kn(e.title);qe(e);Ve(n,t,r);Te();Kt(r.tasks);Bt=o;he(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{fe(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Wt(e){zt();e=e||location.pathname+location.search;const t=Vt(e);if(t){const n=P(t.content);const r=Ut();const o=xn(r);kn(t.title);qe(n);Ve(r,n,o);Te();Kt(o.tasks);E().setTimeout(function(){window.scrollTo(0,t.scroll)},0);Bt=e;he(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{Gt(e)}}}function Zt(e){let t=we(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Yt(e){let t=we(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","");e.setAttribute("data-disabled-by-htmx","")});return t}function Qt(e,t){se(e.concat(t),function(e){const t=ie(e);t.requestCount=(t.requestCount||1)-1});se(e,function(e){const t=ie(e);if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);if(t.requestCount===0){e.removeAttribute("disabled");e.removeAttribute("data-disabled-by-htmx")}})}function en(t,n){for(let e=0;e<t.length;e++){const r=t[e];if(r.isSameNode(n)){return true}}return false}function tn(e){const t=e;if(t.name===""||t.name==null||t.disabled||g(t,"fieldset[disabled]")){return false}if(t.type==="button"||t.type==="submit"||t.tagName==="image"||t.tagName==="reset"||t.tagName==="file"){return false}if(t.type==="checkbox"||t.type==="radio"){return t.checked}return true}function nn(t,e,n){if(t!=null&&e!=null){if(Array.isArray(e)){e.forEach(function(e){n.append(t,e)})}else{n.append(t,e)}}}function rn(t,n,r){if(t!=null&&n!=null){let e=r.getAll(t);if(Array.isArray(n)){e=e.filter(e=>n.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function on(t,n,r,o,i){if(o==null||en(t,o)){return}else{t.push(o)}if(tn(o)){const s=ee(o,"name");let e=o.value;if(o instanceof HTMLSelectElement&&o.multiple){e=M(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o instanceof HTMLInputElement&&o.files){e=M(o.files)}nn(s,e,n);if(i){sn(o,r)}}if(o instanceof HTMLFormElement){se(o.elements,function(e){if(t.indexOf(e)>=0){rn(e.name,e.value,n)}else{t.push(e)}if(i){sn(e,r)}});new FormData(o).forEach(function(e,t){if(e instanceof File&&e.name===""){return}nn(t,e,n)})}}function sn(e,t){const n=e;if(n.willValidate){he(n,"htmx:validation:validate");if(!n.checkValidity()){t.push({elt:n,message:n.validationMessage,validity:n.validity});he(n,"htmx:validation:failed",{message:n.validationMessage,validity:n.validity})}}}function ln(n,e){for(const t of e.keys()){n.delete(t)}e.forEach(function(e,t){n.append(t,e)});return n}function cn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=e instanceof HTMLFormElement&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){on(n,o,i,g(e,"form"),l)}on(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const u=s.lastButtonClicked||e;const a=ee(u,"name");nn(a,u.value,o)}const c=we(e,"hx-include");se(c,function(e){on(n,r,i,ue(e),l);if(!h(e,"form")){se(f(e).querySelectorAll(ot),function(e){on(n,r,i,e,l)})}});ln(r,o);return{errors:i,formData:r,values:An(r)}}function un(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function an(e){e=qn(e);let n="";e.forEach(function(e,t){n=un(n,t,e)});return n}function fn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};bn(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function hn(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.slice(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function dn(e){return!!ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function gn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!dn(e)){r.show="top"}if(n){const s=F(n);if(s.length>0){for(let e=0;e<s.length;e++){const l=s[e];if(l.indexOf("swap:")===0){r.swapDelay=d(l.slice(5))}else if(l.indexOf("settle:")===0){r.settleDelay=d(l.slice(7))}else if(l.indexOf("transition:")===0){r.transition=l.slice(11)==="true"}else if(l.indexOf("ignoreTitle:")===0){r.ignoreTitle=l.slice(12)==="true"}else if(l.indexOf("scroll:")===0){const c=l.slice(7);var o=c.split(":");const u=o.pop();var i=o.length>0?o.join(":"):null;r.scroll=u;r.scrollTarget=i}else if(l.indexOf("show:")===0){const a=l.slice(5);var o=a.split(":");const f=o.pop();var i=o.length>0?o.join(":"):null;r.show=f;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.slice("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{O("Unknown modifier in hx-swap: "+l)}}}}return r}function pn(e){return re(e,"hx-encoding")==="multipart/form-data"||h(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function mn(t,n,r){let o=null;Ft(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(pn(n)){return ln(new FormData,qn(r))}else{return an(r)}}}function xn(e){return{tasks:[],elts:[e]}}function yn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ue(ae(n,t.scrollTarget))}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ue(ae(n,e))}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function bn(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.slice(11);t=true}else if(e.indexOf("js:")===0){e=e.slice(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=vn(r,function(){return Function("return ("+e+")")()},{})}else{n=S(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return bn(ue(c(r)),e,o,i)}function vn(e,t,n){if(Q.config.allowEval){return t()}else{fe(e,"htmx:evalDisallowedError");return n}}function wn(e,t){return bn(e,"hx-vars",true,t)}function Sn(e,t){return bn(e,"hx-vals",false,t)}function En(e){return ce(wn(e),Sn(e))}function Cn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function On(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){fe(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function R(e,t){return t.test(e.getAllResponseHeaders())}function Rn(t,n,r){t=t.toLowerCase();if(r){if(r instanceof Element||typeof r==="string"){return de(t,n,null,null,{targetOverride:y(r)||ve,returnPromise:true})}else{let e=y(r.target);if(r.target&&!e||r.source&&!e&&!y(r.source)){e=ve}return de(t,n,y(r.source),r.event,{handler:r.handler,headers:r.headers,values:r.values,targetOverride:e,swapOverride:r.swap,select:r.select,returnPromise:true})}}else{return de(t,n,null,null,{returnPromise:true})}}function Hn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function Tn(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return he(e,"htmx:validateUrl",ce({url:o,sameHost:r},n))}function qn(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(e[n]&&typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"&&!(e[n]instanceof Blob)){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function Ln(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function An(o){return new Proxy(o,{get:function(e,t){if(typeof t==="symbol"){const r=Reflect.get(e,t);if(typeof r==="function"){return function(){return r.apply(o,arguments)}}else{return r}}if(t==="toJSON"){return()=>Object.fromEntries(o)}if(t in e){if(typeof e[t]==="function"){return function(){return o[t].apply(o,arguments)}}else{return e[t]}}const n=o.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return Ln(e,t,n)}},set:function(t,n,e){if(typeof n!=="string"){return false}t.delete(n);if(e&&typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else if(typeof e==="object"&&!(e instanceof Blob)){t.append(n,JSON.stringify(e))}else{t.append(n,e)}return true},deleteProperty:function(e,t){if(typeof t==="string"){e.delete(t)}return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,D){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const M=i.handler||Dn;const X=i.select||null;if(!le(r)){oe(s);return e}const c=i.targetOverride||ue(Ee(r));if(c==null||c==ve){fe(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let u=ie(r);const a=u.lastButtonClicked;if(a){const L=ee(a,"formaction");if(L!=null){n=L}const A=ee(a,"formmethod");if(A!=null){if(A.toLowerCase()!=="dialog"){t=A}}}const f=re(r,"hx-confirm");if(D===undefined){const K=function(e){return de(t,n,r,o,i,!!e)};const G={target:c,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:K,question:f};if(he(r,"htmx:confirm",G)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const N=d.split(":");const I=N[0].trim();if(I==="this"){h=Se(r,"hx-sync")}else{h=ue(ae(r,I))}d=(N[1]||"drop").trim();u=ie(h);if(d==="drop"&&u.xhr&&u.abortable!==true){oe(s);return e}else if(d==="abort"){if(u.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){he(h,"htmx:abort")}else if(d.indexOf("queue")===0){const W=d.split(" ");g=(W[1]||"last").trim()}}if(u.xhr){if(u.abortable){he(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(u.queuedRequests==null){u.queuedRequests=[]}if(g==="first"&&u.queuedRequests.length===0){u.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){u.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){u.queuedRequests=[];u.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;u.xhr=p;u.abortable=F;const m=function(){u.xhr=null;u.abortable=false;if(u.queuedRequests!=null&&u.queuedRequests.length>0){const e=u.queuedRequests.shift();e()}};const B=re(r,"hx-prompt");if(B){var x=prompt(B);if(x===null||!he(r,"htmx:prompt",{prompt:x,target:c})){oe(s);m();return e}}if(f&&!D){if(!confirm(f)){oe(s);m();return e}}let y=fn(r,c,x);if(t!=="get"&&!pn(r)){y["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){y=ce(y,i.headers)}const U=cn(r,t);let b=U.errors;const j=U.formData;if(i.values){ln(j,qn(i.values))}const V=qn(En(r));const v=ln(j,V);let w=hn(v,r);if(Q.config.getCacheBusterParam&&t==="get"){w.set("org.htmx.cache-buster",ee(c,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=bn(r,"hx-request");const _=ie(r).boosted;let E=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const C={boosted:_,useUrlParams:E,formData:w,parameters:An(w),unfilteredFormData:v,unfilteredParameters:An(v),headers:y,target:c,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!he(r,"htmx:configRequest",C)){oe(s);m();return e}n=C.path;t=C.verb;y=C.headers;w=qn(C.parameters);b=C.errors;E=C.useUrlParams;if(b&&b.length>0){he(r,"htmx:validation:halted",C);oe(s);m();return e}const z=n.split("#");const $=z[0];const O=z[1];let R=n;if(E){R=$;const Z=!w.keys().next().done;if(Z){if(R.indexOf("?")<0){R+="?"}else{R+="&"}R+=an(w);if(O){R+="#"+O}}}if(!Tn(r,R,C)){fe(r,"htmx:invalidPath",C);oe(l);return e}p.open(t.toUpperCase(),R,true);p.overrideMimeType("text/html");p.withCredentials=C.withCredentials;p.timeout=C.timeout;if(S.noHeaders){}else{for(const k in y){if(y.hasOwnProperty(k)){const Y=y[k];Cn(p,k,Y)}}}const H={xhr:p,target:c,requestConfig:C,etc:i,boosted:_,select:X,pathInfo:{requestPath:n,finalRequestPath:R,responsePath:null,anchor:O}};p.onload=function(){try{const t=Hn(r);H.pathInfo.responsePath=On(p);M(r,H);if(H.keepIndicators!==true){Qt(T,q)}he(r,"htmx:afterRequest",H);he(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){he(e,"htmx:afterRequest",H);he(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){fe(r,"htmx:onLoadError",ce({error:e},H));throw e}};p.onerror=function(){Qt(T,q);fe(r,"htmx:afterRequest",H);fe(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){Qt(T,q);fe(r,"htmx:afterRequest",H);fe(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){Qt(T,q);fe(r,"htmx:afterRequest",H);fe(r,"htmx:timeout",H);oe(l);m()};if(!he(r,"htmx:beforeRequest",H)){oe(s);m();return e}var T=Zt(r);var q=Yt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){he(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});he(r,"htmx:beforeSend",H);const J=E?null:mn(p,r,w);p.send(J);return e}function Nn(e,t){const n=t.xhr;let r=null;let o=null;if(R(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(R(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(R(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const c=re(e,"hx-replace-url");const u=ie(e).boosted;let a=null;let f=null;if(l){a="push";f=l}else if(c){a="replace";f=c}else if(u){a="push";f=s||i}if(f){if(f==="false"){return{}}if(f==="true"){f=s||i}if(t.pathInfo.anchor&&f.indexOf("#")===-1){f=f+"#"+t.pathInfo.anchor}return{type:a,path:f}}else{return{}}}function In(e,t){var n=new RegExp(e.code);return n.test(t.toString(10))}function Pn(e){for(var t=0;t<Q.config.responseHandling.length;t++){var n=Q.config.responseHandling[t];if(In(n,e.status)){return n}}return{swap:false}}function kn(e){if(e){const t=u("title");if(t){t.innerHTML=e}else{window.document.title=e}}}function Dn(o,i){const s=i.xhr;let l=i.target;const e=i.etc;const c=i.select;if(!he(o,"htmx:beforeOnLoad",i))return;if(R(s,/HX-Trigger:/i)){Je(s,"HX-Trigger",o)}if(R(s,/HX-Location:/i)){zt();let e=s.getResponseHeader("HX-Location");var t;if(e.indexOf("{")===0){t=S(e);e=t.path;delete t.path}Rn("get",e,t).then(function(){$t(e)});return}const n=R(s,/HX-Refresh:/i)&&s.getResponseHeader("HX-Refresh")==="true";if(R(s,/HX-Redirect:/i)){i.keepIndicators=true;location.href=s.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){i.keepIndicators=true;location.reload();return}if(R(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ue(ae(o,s.getResponseHeader("HX-Retarget")))}}const u=Nn(o,i);const r=Pn(s);const a=r.swap;let f=!!r.error;let h=Q.config.ignoreTitle||r.ignoreTitle;let d=r.select;if(r.target){i.target=ue(ae(o,r.target))}var g=e.swapOverride;if(g==null&&r.swapOverride){g=r.swapOverride}if(R(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ue(ae(o,s.getResponseHeader("HX-Retarget")))}}if(R(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var p=s.response;var m=ce({shouldSwap:a,serverResponse:p,isError:f,ignoreTitle:h,selectOverride:d,swapOverride:g},i);if(r.event&&!he(l,r.event,m))return;if(!he(l,"htmx:beforeSwap",m))return;l=m.target;p=m.serverResponse;f=m.isError;h=m.ignoreTitle;d=m.selectOverride;g=m.swapOverride;i.target=l;i.failed=f;i.successful=!f;if(m.shouldSwap){if(s.status===286){lt(o)}Ft(o,function(e){p=e.transformResponse(p,s,o)});if(u.type){zt()}var x=gn(o,g);if(!x.hasOwnProperty("ignoreTitle")){x.ignoreTitle=h}l.classList.add(Q.config.swappingClass);let n=null;let r=null;if(c){d=c}if(R(s,/HX-Reselect:/i)){d=s.getResponseHeader("HX-Reselect")}const y=re(o,"hx-select-oob");const b=re(o,"hx-select");let e=function(){try{if(u.type){he(ne().body,"htmx:beforeHistoryUpdate",ce({history:u},i));if(u.type==="push"){$t(u.path);he(ne().body,"htmx:pushedIntoHistory",{path:u.path})}else{Jt(u.path);he(ne().body,"htmx:replacedInHistory",{path:u.path})}}$e(l,p,x,{select:d||b,selectOOB:y,eventInfo:i,anchor:i.pathInfo.anchor,contextElement:o,afterSwapCallback:function(){if(R(s,/HX-Trigger-After-Swap:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Swap",e)}},afterSettleCallback:function(){if(R(s,/HX-Trigger-After-Settle:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Settle",e)}oe(n)}})}catch(e){fe(o,"htmx:swapError",i);oe(r);throw e}};let t=Q.config.globalViewTransitions;if(x.hasOwnProperty("transition")){t=x.transition}if(t&&he(o,"htmx:beforeTransition",i)&&typeof Promise!=="undefined"&&document.startViewTransition){const v=new Promise(function(e,t){n=e;r=t});const w=e;e=function(){document.startViewTransition(function(){w();return v})}}if(x.swapDelay>0){E().setTimeout(e,x.swapDelay)}else{e()}}if(f){fe(o,"htmx:responseError",ce({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const Mn={};function Xn(){return{init:function(e){return null},getSelectors:function(){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function Fn(e,t){if(t.init){t.init(n)}Mn[e]=ce(Xn(),t)}function Bn(e){delete Mn[e]}function Un(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=Mn[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return Un(ue(c(e)),n,r)}var jn=false;ne().addEventListener("DOMContentLoaded",function(){jn=true});function Vn(e){if(jn||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function _n(){if(Q.config.includeIndicatorStyles!==false){const e=Q.config.inlineStyleNonce?` nonce="${Q.config.inlineStyleNonce}"`:"";ne().head.insertAdjacentHTML("beforeend","<style"+e+"> ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} </style>")}}function zn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function $n(){const e=zn();if(e){Q.config=ce(Q.config,e)}}Vn(function(){$n();_n();let e=ne().body;kt(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Wt();se(t,function(e){he(e,"htmx:restored",{document:ne(),triggerEvent:he})})}else{if(n){n(e)}}};E().setTimeout(function(){he(e,"htmx:load",{});e=null},0)});return Q}();
\ No newline at end of file
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 488b9ebed59c..35bf4b0d7a46 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -794,7 +794,7 @@ drupal.vertical-tabs:
htmx:
remote: https://github.com/bigskysoftware/htmx
- version: "2.0.1"
+ version: "2.0.4"
license:
name: Zero-Clause BSD
url: https://github.com/bigskysoftware/htmx/blob/master/LICENSE
--
GitLab
From c880dc3f898c61a259ce6d1e42f0f1bde7c61583 Mon Sep 17 00:00:00 2001
From: Shawn Duncan <duncans3@mskcc.org>
Date: Fri, 14 Feb 2025 08:42:26 -0500
Subject: [PATCH 15/26] Change preRenderHtmxElement() to processHtmxElement()
---
core/lib/Drupal/Core/Datetime/Element/Datetime.php | 2 +-
core/lib/Drupal/Core/Render/Element/Button.php | 2 +-
core/lib/Drupal/Core/Render/Element/Checkbox.php | 2 +-
core/lib/Drupal/Core/Render/Element/Color.php | 2 +-
core/lib/Drupal/Core/Render/Element/Container.php | 2 +-
core/lib/Drupal/Core/Render/Element/Date.php | 2 +-
core/lib/Drupal/Core/Render/Element/Details.php | 2 +-
core/lib/Drupal/Core/Render/Element/Dropbutton.php | 2 +-
core/lib/Drupal/Core/Render/Element/Email.php | 2 +-
core/lib/Drupal/Core/Render/Element/Fieldset.php | 2 +-
core/lib/Drupal/Core/Render/Element/Hidden.php | 2 +-
core/lib/Drupal/Core/Render/Element/HtmlTag.php | 2 +-
core/lib/Drupal/Core/Render/Element/Label.php | 2 +-
core/lib/Drupal/Core/Render/Element/Link.php | 2 +-
core/lib/Drupal/Core/Render/Element/MachineName.php | 2 +-
core/lib/Drupal/Core/Render/Element/Number.php | 2 +-
core/lib/Drupal/Core/Render/Element/PageTitle.php | 2 +-
core/lib/Drupal/Core/Render/Element/Pager.php | 2 +-
core/lib/Drupal/Core/Render/Element/Password.php | 2 +-
core/lib/Drupal/Core/Render/Element/Radio.php | 2 +-
core/lib/Drupal/Core/Render/Element/RenderElementBase.php | 2 +-
core/lib/Drupal/Core/Render/Element/Search.php | 2 +-
core/lib/Drupal/Core/Render/Element/Select.php | 2 +-
core/lib/Drupal/Core/Render/Element/StatusMessages.php | 2 +-
core/lib/Drupal/Core/Render/Element/Tel.php | 2 +-
core/lib/Drupal/Core/Render/Element/Textarea.php | 2 +-
core/lib/Drupal/Core/Render/Element/Textfield.php | 2 +-
core/lib/Drupal/Core/Render/Element/Url.php | 2 +-
core/lib/Drupal/Core/Render/Element/VerticalTabs.php | 2 +-
core/lib/Drupal/Core/Render/Element/Weight.php | 2 +-
.../Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php | 2 +-
31 files changed, 31 insertions(+), 31 deletions(-)
diff --git a/core/lib/Drupal/Core/Datetime/Element/Datetime.php b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
index d12dab902b09..e154ab415750 100644
--- a/core/lib/Drupal/Core/Datetime/Element/Datetime.php
+++ b/core/lib/Drupal/Core/Datetime/Element/Datetime.php
@@ -52,7 +52,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processDatetime'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
[static::class, 'processGroup'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Button.php b/core/lib/Drupal/Core/Render/Element/Button.php
index 7fdcbb46f4e3..7712e394f067 100644
--- a/core/lib/Drupal/Core/Render/Element/Button.php
+++ b/core/lib/Drupal/Core/Render/Element/Button.php
@@ -53,7 +53,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processButton'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderButton'],
diff --git a/core/lib/Drupal/Core/Render/Element/Checkbox.php b/core/lib/Drupal/Core/Render/Element/Checkbox.php
index a33eaa2cd3ef..2380fc5328b5 100644
--- a/core/lib/Drupal/Core/Render/Element/Checkbox.php
+++ b/core/lib/Drupal/Core/Render/Element/Checkbox.php
@@ -35,7 +35,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processCheckbox'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
[static::class, 'processGroup'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Color.php b/core/lib/Drupal/Core/Render/Element/Color.php
index 52b3a8ede481..0c031a813e33 100644
--- a/core/lib/Drupal/Core/Render/Element/Color.php
+++ b/core/lib/Drupal/Core/Render/Element/Color.php
@@ -33,7 +33,7 @@ public function getInfo() {
'#input' => TRUE,
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateColor'],
diff --git a/core/lib/Drupal/Core/Render/Element/Container.php b/core/lib/Drupal/Core/Render/Element/Container.php
index e417eab8ff35..83b400525d29 100644
--- a/core/lib/Drupal/Core/Render/Element/Container.php
+++ b/core/lib/Drupal/Core/Render/Element/Container.php
@@ -58,7 +58,7 @@ public function getInfo() {
'#pre_render' => [
[static::class, 'preRenderGroup'],
[static::class, 'preRenderContainer'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#theme_wrappers' => ['container'],
];
diff --git a/core/lib/Drupal/Core/Render/Element/Date.php b/core/lib/Drupal/Core/Render/Element/Date.php
index 9cc2c61444d6..cd97a6031481 100644
--- a/core/lib/Drupal/Core/Render/Element/Date.php
+++ b/core/lib/Drupal/Core/Render/Element/Date.php
@@ -45,7 +45,7 @@ public function getInfo() {
'#theme' => 'input__date',
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [[static::class, 'preRenderDate']],
'#theme_wrappers' => ['form_element'],
diff --git a/core/lib/Drupal/Core/Render/Element/Details.php b/core/lib/Drupal/Core/Render/Element/Details.php
index a3579138645b..b4b24f74631e 100644
--- a/core/lib/Drupal/Core/Render/Element/Details.php
+++ b/core/lib/Drupal/Core/Render/Element/Details.php
@@ -49,7 +49,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processGroup'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderDetails'],
diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
index 4ce702f21df8..09c43ed64da3 100644
--- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php
+++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
@@ -52,7 +52,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderDropbutton'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#theme' => 'links__dropbutton',
];
diff --git a/core/lib/Drupal/Core/Render/Element/Email.php b/core/lib/Drupal/Core/Render/Element/Email.php
index 8e5be973c478..71b22e1079a9 100644
--- a/core/lib/Drupal/Core/Render/Element/Email.php
+++ b/core/lib/Drupal/Core/Render/Element/Email.php
@@ -53,7 +53,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
[static::class, 'processPattern'],
],
'#element_validate' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Fieldset.php b/core/lib/Drupal/Core/Render/Element/Fieldset.php
index 946a11d64b26..6a65c8b64000 100644
--- a/core/lib/Drupal/Core/Render/Element/Fieldset.php
+++ b/core/lib/Drupal/Core/Render/Element/Fieldset.php
@@ -34,7 +34,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processGroup'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderGroup'],
diff --git a/core/lib/Drupal/Core/Render/Element/Hidden.php b/core/lib/Drupal/Core/Render/Element/Hidden.php
index 98789ea6b880..98c524b14be6 100644
--- a/core/lib/Drupal/Core/Render/Element/Hidden.php
+++ b/core/lib/Drupal/Core/Render/Element/Hidden.php
@@ -34,7 +34,7 @@ public function getInfo() {
'#input' => TRUE,
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderHidden'],
diff --git a/core/lib/Drupal/Core/Render/Element/HtmlTag.php b/core/lib/Drupal/Core/Render/Element/HtmlTag.php
index cbad7bfeb964..d59e4189c417 100644
--- a/core/lib/Drupal/Core/Render/Element/HtmlTag.php
+++ b/core/lib/Drupal/Core/Render/Element/HtmlTag.php
@@ -56,7 +56,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderHtmlTag'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#attributes' => [],
'#value' => NULL,
diff --git a/core/lib/Drupal/Core/Render/Element/Label.php b/core/lib/Drupal/Core/Render/Element/Label.php
index bdb9929bc1f2..cefbe049adfe 100644
--- a/core/lib/Drupal/Core/Render/Element/Label.php
+++ b/core/lib/Drupal/Core/Render/Element/Label.php
@@ -21,7 +21,7 @@ public function getInfo() {
return [
'#theme' => 'form_element_label',
'#pre_render' => [
- [self::class, 'preRenderHtmxElement'],
+ [self::class, 'processHtmxElement'],
],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/Link.php b/core/lib/Drupal/Core/Render/Element/Link.php
index a4efeffa3092..73d4e6f149a9 100644
--- a/core/lib/Drupal/Core/Render/Element/Link.php
+++ b/core/lib/Drupal/Core/Render/Element/Link.php
@@ -37,7 +37,7 @@ public function getInfo() {
return [
'#pre_render' => [
[static::class, 'preRenderLink'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/MachineName.php b/core/lib/Drupal/Core/Render/Element/MachineName.php
index 682fc6d38004..b6935fd0f8f2 100644
--- a/core/lib/Drupal/Core/Render/Element/MachineName.php
+++ b/core/lib/Drupal/Core/Render/Element/MachineName.php
@@ -88,7 +88,7 @@ public function getInfo() {
[static::class, 'processMachineName'],
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateMachineName'],
diff --git a/core/lib/Drupal/Core/Render/Element/Number.php b/core/lib/Drupal/Core/Render/Element/Number.php
index c97a8a5d03ed..c15da7339434 100644
--- a/core/lib/Drupal/Core/Render/Element/Number.php
+++ b/core/lib/Drupal/Core/Render/Element/Number.php
@@ -41,7 +41,7 @@ public function getInfo() {
'#step' => 1,
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateNumber'],
diff --git a/core/lib/Drupal/Core/Render/Element/PageTitle.php b/core/lib/Drupal/Core/Render/Element/PageTitle.php
index b72cf83b2169..de8bf1ea1fdd 100644
--- a/core/lib/Drupal/Core/Render/Element/PageTitle.php
+++ b/core/lib/Drupal/Core/Render/Element/PageTitle.php
@@ -22,7 +22,7 @@ public function getInfo() {
// formatted titles.
'#title' => NULL,
'#pre_render' => [
- [self::class, 'preRenderHtmxElement'],
+ [self::class, 'processHtmxElement'],
],
];
}
diff --git a/core/lib/Drupal/Core/Render/Element/Pager.php b/core/lib/Drupal/Core/Render/Element/Pager.php
index 0973d97b4a0a..bf8cc4fff4ad 100644
--- a/core/lib/Drupal/Core/Render/Element/Pager.php
+++ b/core/lib/Drupal/Core/Render/Element/Pager.php
@@ -41,7 +41,7 @@ public function getInfo() {
return [
'#pre_render' => [
static::class . '::preRenderPager',
- [self::class, 'preRenderHtmxElement'],
+ [self::class, 'processHtmxElement'],
],
'#theme' => 'pager',
// The pager ID, to distinguish between multiple pagers on the same page.
diff --git a/core/lib/Drupal/Core/Render/Element/Password.php b/core/lib/Drupal/Core/Render/Element/Password.php
index c9dd5398e8b4..c8abaa99cd49 100644
--- a/core/lib/Drupal/Core/Render/Element/Password.php
+++ b/core/lib/Drupal/Core/Render/Element/Password.php
@@ -39,7 +39,7 @@ public function getInfo() {
'#maxlength' => 128,
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
[static::class, 'processPattern'],
],
'#pre_render' => [
diff --git a/core/lib/Drupal/Core/Render/Element/Radio.php b/core/lib/Drupal/Core/Render/Element/Radio.php
index 0a9df142717c..33e3e5c8c4bf 100644
--- a/core/lib/Drupal/Core/Render/Element/Radio.php
+++ b/core/lib/Drupal/Core/Render/Element/Radio.php
@@ -26,7 +26,7 @@ public function getInfo() {
'#default_value' => NULL,
'#process' => [
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderRadio'],
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index e582dc268608..eba141b813a2 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -445,7 +445,7 @@ public static function preRenderAjaxForm($element) {
* @return mixed[]
* The modified array with HTMX library attachments, if appropriate.
*/
- public static function preRenderHtmxElement(array $element): array {
+ public static function processHtmxElement(array $element): array {
$processed = $element['#htmx_processed'] ?? FALSE;
// Skip already processed elements.
if ($processed) {
diff --git a/core/lib/Drupal/Core/Render/Element/Search.php b/core/lib/Drupal/Core/Render/Element/Search.php
index d9613c8d7ede..6d0f36a2520a 100644
--- a/core/lib/Drupal/Core/Render/Element/Search.php
+++ b/core/lib/Drupal/Core/Render/Element/Search.php
@@ -33,7 +33,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderSearch'],
diff --git a/core/lib/Drupal/Core/Render/Element/Select.php b/core/lib/Drupal/Core/Render/Element/Select.php
index bae2ffe8ac9d..5f68df318490 100644
--- a/core/lib/Drupal/Core/Render/Element/Select.php
+++ b/core/lib/Drupal/Core/Render/Element/Select.php
@@ -98,7 +98,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processSelect'],
[static::class, 'processAjaxForm'],
- [static::class, 'preProcessHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderSelect'],
diff --git a/core/lib/Drupal/Core/Render/Element/StatusMessages.php b/core/lib/Drupal/Core/Render/Element/StatusMessages.php
index 0ba4c85326c5..ff03b475b0a3 100644
--- a/core/lib/Drupal/Core/Render/Element/StatusMessages.php
+++ b/core/lib/Drupal/Core/Render/Element/StatusMessages.php
@@ -32,7 +32,7 @@ public function getInfo() {
'#display' => NULL,
'#pre_render' => [
static::class . '::generatePlaceholder',
- [self::class, 'preRenderHtmxElement'],
+ [self::class, 'processHtmxElement'],
],
'#include_fallback' => FALSE,
];
diff --git a/core/lib/Drupal/Core/Render/Element/Tel.php b/core/lib/Drupal/Core/Render/Element/Tel.php
index 0f4f45e200b0..9628607e4e87 100644
--- a/core/lib/Drupal/Core/Render/Element/Tel.php
+++ b/core/lib/Drupal/Core/Render/Element/Tel.php
@@ -42,7 +42,7 @@ public function getInfo() {
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderTel'],
diff --git a/core/lib/Drupal/Core/Render/Element/Textarea.php b/core/lib/Drupal/Core/Render/Element/Textarea.php
index 698c6ceaf18c..7fcd4cf81cf9 100644
--- a/core/lib/Drupal/Core/Render/Element/Textarea.php
+++ b/core/lib/Drupal/Core/Render/Element/Textarea.php
@@ -41,7 +41,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processAjaxForm'],
[static::class, 'processGroup'],
- [static::class, 'preProcessHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderGroup'],
diff --git a/core/lib/Drupal/Core/Render/Element/Textfield.php b/core/lib/Drupal/Core/Render/Element/Textfield.php
index 0c896d28c4a7..929d910295f3 100644
--- a/core/lib/Drupal/Core/Render/Element/Textfield.php
+++ b/core/lib/Drupal/Core/Render/Element/Textfield.php
@@ -52,7 +52,7 @@ public function getInfo() {
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
[static::class, 'processGroup'],
- [static::class, 'preRenderHtmxElement']
+ [static::class, 'processHtmxElement']
],
'#pre_render' => [
[static::class, 'preRenderTextfield'],
diff --git a/core/lib/Drupal/Core/Render/Element/Url.php b/core/lib/Drupal/Core/Render/Element/Url.php
index b9c714f670dd..82a417af03bd 100644
--- a/core/lib/Drupal/Core/Render/Element/Url.php
+++ b/core/lib/Drupal/Core/Render/Element/Url.php
@@ -44,7 +44,7 @@ public function getInfo() {
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
- [static::class, 'preRenderHtmxElement']
+ [static::class, 'processHtmxElement']
],
'#element_validate' => [
[static::class, 'validateUrl'],
diff --git a/core/lib/Drupal/Core/Render/Element/VerticalTabs.php b/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
index a50323a8c2c1..b580aee0bad3 100644
--- a/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
+++ b/core/lib/Drupal/Core/Render/Element/VerticalTabs.php
@@ -57,10 +57,10 @@ public function getInfo() {
'#default_tab' => '',
'#process' => [
[static::class, 'processVerticalTabs'],
+ [self::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderVerticalTabs'],
- [self::class, 'preRenderHtmxElement'],
],
'#theme_wrappers' => ['vertical_tabs', 'form_element'],
];
diff --git a/core/lib/Drupal/Core/Render/Element/Weight.php b/core/lib/Drupal/Core/Render/Element/Weight.php
index e48d95065f01..c031ff247c38 100644
--- a/core/lib/Drupal/Core/Render/Element/Weight.php
+++ b/core/lib/Drupal/Core/Render/Element/Weight.php
@@ -39,7 +39,7 @@ public function getInfo() {
'#process' => [
[static::class, 'processWeight'],
[static::class, 'processAjaxForm'],
- [static::class, 'preRenderHtmxElement'],
+ [static::class, 'processHtmxElement'],
],
];
}
diff --git a/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
index f4fc14fddd79..1b384012b313 100644
--- a/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
+++ b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
@@ -49,7 +49,7 @@ protected function setUp(): void {
* A stub of a processed render array.
*/
protected function processOperations(): array {
- return RenderElementBase::preRenderHtmxElement(['#htmx' => $this->htmx]);
+ return RenderElementBase::processHtmxElement(['#htmx' => $this->htmx]);
}
/**
--
GitLab
From 5405a4b62b9ba55f406311ba2773bac10fd1307b Mon Sep 17 00:00:00 2001
From: Shawn Duncan <duncans3@mskcc.org>
Date: Thu, 27 Feb 2025 14:06:36 -0500
Subject: [PATCH 16/26] Improve operation explanation.
---
.../config/src/Form/ConfigSingleExportForm.php | 16 ++++++----------
1 file changed, 6 insertions(+), 10 deletions(-)
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index ae97adb30aed..17569d5a39b1 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -107,6 +107,12 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
$config_type_htmx = new Htmx();
$config_name_htmx = new Htmx();
+ /*
+ * - Send a POST request to the form URL.
+ * - Select the config_name <select> element from the response.
+ * - Target the config_name <select> in the rendered form for replacement.
+ * - Replace uses the outerHTML strategy, which is to replace the whole tag.
+ */
$form_url = Url::fromRoute(
route_name: 'config.export_single',
route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
@@ -124,16 +130,6 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
'#type' => 'select',
'#options' => $config_types,
'#default_value' => $config_type,
- /*
- * - Send a POST request to the form URL.
- * - Send the value of this select, and the hidden form builder values.
- * Sending the whole form is both not needed and creates validation
- * issues for the config_name value.
- * - Select the config_name <select> element from the response.
- * - Target the config_name <select> in the rendered form for replacement.
- * - Replace using the outerHTML strategy: that is replace the whole tag.
- * - Also select and replace the export value.
- */
'#htmx' => $config_type_htmx,
];
--
GitLab
From 0c375d26ee0199f9e6520190000def543376d191 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Fri, 28 Feb 2025 08:54:09 -0500
Subject: [PATCH 17/26] Remove named arguments
---
.../HtmxRequestOperationInterface.php | 12 ++---
.../Operations/HtmxRequestTrait.php | 10 ++--
.../Hypermedia/Operations/HtmxSelectTrait.php | 35 ++++++++++++
.../Hypermedia/Operations/HtmxTargetTrait.php | 54 +++++++++++++++++++
.../Render/Hypermedia/Operations/Insert.php | 17 +-----
.../Render/Hypermedia/Operations/Replace.php | 17 +-----
.../src/Form/ConfigSingleExportForm.php | 20 +++----
7 files changed, 109 insertions(+), 56 deletions(-)
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxSelectTrait.php
create mode 100644 core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxTargetTrait.php
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
index ec6680eed764..a1ddd4c22d7f 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
@@ -17,16 +17,14 @@ interface HtmxRequestOperationInterface extends HtmxOperationInterface {
/**
* Configures the method and url for the request.
*
- * The developer experience will be simplified if this method is called
- * by the constructor and all operation properties are set at instantiation.
- *
- * @see \Drupal\Core\Render\Hypermedia\Operations\HtmxRequestTrait
- *
* @param \Drupal\Core\Http\HttpMethod $method
* The request method.
* @param \Drupal\Core\Url $url
- * The URL for the request.
+ * The request URL.
+ *
+ * @return static
+ * The instance using the trait.
*/
- public function setRequest(HttpMethod $method, Url $url): void;
+ public function setRequest(HttpMethod $method, Url $url): static;
}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
index 1ed1467acf28..55c20710ea07 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestTrait.php
@@ -22,16 +22,12 @@ trait HtmxRequestTrait {
protected Url $url;
/**
- * Setter for the required properties.
- *
- * @param \Drupal\Core\Http\HttpMethod $method
- * The request method.
- * @param \Drupal\Core\Url $url
- * The request URL.
+ * {@inheritdoc}
*/
- public function setRequest(HttpMethod $method, Url $url): void {
+ public function setRequest(HttpMethod $method, Url $url): static {
$this->method = $method;
$this->url = $url;
+ return $this;
}
/**
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxSelectTrait.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxSelectTrait.php
new file mode 100644
index 000000000000..1ce1e2f88d3f
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxSelectTrait.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+/**
+ * Provides reusable parameters and methods to support the use of hx-select.
+ *
+ * @see https://htmx.org/attributes/hx-select
+ */
+trait HtmxSelectTrait {
+
+
+ /**
+ * Specifies the markup to select from the returned request.
+ *
+ * A CSS query selector of the element or elements to select from the
+ * response.
+ */
+ protected string $select;
+
+ /**
+ * Setter method for $select.
+ *
+ * @param string $value
+ * The value to set.
+ *
+ * @return static
+ * The instance using the trait.
+ */
+ public function select(string $value): static {
+ $this->select = $value;
+ return $this;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxTargetTrait.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxTargetTrait.php
new file mode 100644
index 000000000000..d7997aa34643
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxTargetTrait.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Drupal\Core\Render\Hypermedia\Operations;
+
+/**
+ * Provides reusable parameters and methods to support the use of hx-target.
+ *
+ * @see https://htmx.org/attributes/hx-target
+ */
+trait HtmxTargetTrait {
+
+ /**
+ * Specifies the element to target for replacement.
+ *
+ * The value is one of the following:
+ * - A CSS query selector of the element to target.
+ * - 'this'
+ * Indicates that element receiving the htmx attributes is the target.
+ * - 'closest <CSS selector>'
+ * Finds the closest ancestor element or itself, that matches the given
+ * CSS selector (e.g. 'closest tr' will target the closest table row to
+ * the element).
+ * - 'find <CSS selector>'
+ * Finds the first child descendant element that matches the given CSS
+ * selector.
+ * - 'next'
+ * Resolves to element.nextElementSibling
+ * - 'next <CSS selector>'
+ * Scans the DOM forward for the first element that matches the given CSS
+ * selector. (e.g. 'next .error' will target the closest following sibling
+ * element with the error class)
+ * - 'previous' which resolves to element.previousElementSibling
+ * - 'previous <CSS selector>'
+ * Scan the DOM backwards for the first element that matches the given CSS
+ * selector. (e.g. `previous .error` will target the closest previous
+ * sibling with the error class)
+ */
+ protected string $target;
+
+ /**
+ * Setter method for $target.
+ *
+ * @param string $value
+ * The value to set.
+ *
+ * @return static
+ * The instance using the trait.
+ */
+ public function target(string $value): static {
+ $this->target = $value;
+ return $this;
+ }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
index 5a2901daac01..11602ba36ed2 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Insert.php
@@ -2,28 +2,15 @@
namespace Drupal\Core\Render\Hypermedia\Operations;
-use Drupal\Core\Http\HttpMethod;
use Drupal\Core\Render\Hypermedia\HtmxInterface;
-use Drupal\Core\Url;
/**
* Inserts the selected element as the last child of the target element.
- *
- * There are three required properties and one optional property.
- * - select: A CSS selector used to select the element from the response that
- * should be inserted into the DOM.
- * - target: A CSS selector used to select the existing element in the DOM to
- * receive the insertion.
- * - url: A Url object used to configure the request.
- * - method: (Optional) The HTTP method to be used for the request. Defaults to
- * HttpMethod::Get.
*/
class Insert implements HtmxRequestOperationInterface {
use HtmxRequestTrait;
-
- public function __construct(protected string $select, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
- $this->setRequest($method, $url);
- }
+ use HtmxSelectTrait;
+ use HtmxTargetTrait;
/**
* {@inheritdoc}
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
index 7964fe94cd99..b8f46ed93ad6 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/Replace.php
@@ -2,28 +2,15 @@
namespace Drupal\Core\Render\Hypermedia\Operations;
-use Drupal\Core\Http\HttpMethod;
use Drupal\Core\Render\Hypermedia\HtmxInterface;
-use Drupal\Core\Url;
/**
* Replaces the target element with the element.
- *
- * There are three required properties and one optional property.
- * - select: A CSS selector used to select the element from the response that
- * should be inserted into the DOM.
- * - target: A CSS selector used to select the existing element in the DOM to
- * be replaced.
- * - url: A Url object used to configure the request.
- * - method: (Optional) The HTTP method to be used for the request. Defaults to
- * HttpMethod::Get.
*/
class Replace implements HtmxRequestOperationInterface {
use HtmxRequestTrait;
-
- public function __construct(protected string $select, protected string $target, Url $url, HttpMethod $method = HttpMethod::Get) {
- $this->setRequest($method, $url);
- }
+ use HtmxSelectTrait;
+ use HtmxTargetTrait;
/**
* {@inheritdoc}
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 17569d5a39b1..88bc82c356ac 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -118,12 +118,10 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
route_parameters: ['config_type' => $config_type, 'config_name' => $config_name],
);
$config_type_htmx->setRequestOperation(
- new Replace(
- select: 'select[data-drupal-selector="edit-config-name"]',
- target: 'select[data-drupal-selector="edit-config-name"]',
- url: $form_url,
- method: HttpMethod::Post
- )
+ (new Replace())
+ ->setRequest(HttpMethod::Post, $form_url)
+ ->select('select[data-drupal-selector="edit-config-name"]')
+ ->target('select[data-drupal-selector="edit-config-name"]')
);
$form['config_type'] = [
'#title' => $this->t('Configuration type'),
@@ -135,12 +133,10 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
$default_type = $form_state->getValue('config_type', $config_type);
$config_name_htmx->setRequestOperation(
- new Replace(
- select: '#edit-export-wrapper',
- target: '#edit-export-wrapper',
- url: $form_url,
- method: HttpMethod::Post
- )
+ (new Replace())
+ ->setRequest(HttpMethod::Post, $form_url)
+ ->select('#edit-export-wrapper')
+ ->target('#edit-export-wrapper')
);
$form['config_name'] = [
'#title' => $this->t('Configuration name'),
--
GitLab
From d8da0178d0509d45fa6d16b87c2d87fa8222ce5b Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sat, 19 Apr 2025 10:44:38 -0400
Subject: [PATCH 18/26] fix linting errors.
---
core/.eslintrc.json | 1 +
core/.phpstan-baseline.php | 30 ++----
core/lib/Drupal/Core/Form/FormBuilder.php | 1 -
core/lib/Drupal/Core/Http/HttpMethod.php | 3 +
.../Core/Render/Element/RenderElementBase.php | 1 -
.../Drupal/Core/Render/Element/Textfield.php | 2 +-
core/lib/Drupal/Core/Render/Element/Url.php | 2 +-
.../Core/Render/Hypermedia/HtmxInterface.php | 4 +-
.../Operations/HtmxOperationInterface.php | 1 -
.../HtmxRequestOperationInterface.php | 1 -
.../Drupal/Core/Template/AttributeHelper.php | 1 -
.../Drupal/Core/Template/AttributeJson.php | 2 +-
.../Core/Template/HtmlAttributeInterface.php | 3 +-
.../Core/Template/HtmlAttributeTrait.php | 2 -
.../Drupal/Core/Template/HtmxAttribute.php | 12 +--
.../Drupal/Core/Template/TwigExtension.php | 4 +-
core/misc/htmx-behaviors.js | 100 ++++++++++--------
.../src/Form/ConfigSingleExportForm.php | 4 +-
.../FieldFormatter/FileMediaFormatterBase.php | 3 +-
.../Core/Template/HtmxAttributeTest.php | 2 +-
.../Render/Hypermedia/HtmxOperationsTest.php | 23 ++--
.../Tests/Core/Template/AttributeTest.php | 1 -
22 files changed, 98 insertions(+), 105 deletions(-)
diff --git a/core/.eslintrc.json b/core/.eslintrc.json
index 6a6916b1a2c0..7b1ed46abeca 100644
--- a/core/.eslintrc.json
+++ b/core/.eslintrc.json
@@ -21,6 +21,7 @@
"_": true,
"Cookies": true,
"Backbone": true,
+ "htmx": true,
"loadjs": true,
"Shepherd": true,
"Sortable": true,
diff --git a/core/.phpstan-baseline.php b/core/.phpstan-baseline.php
index 6f4a52139f11..f9aaa559af2c 100644
--- a/core/.phpstan-baseline.php
+++ b/core/.phpstan-baseline.php
@@ -10443,12 +10443,6 @@
'count' => 1,
'path' => __DIR__ . '/lib/Drupal/Core/Template/Attribute.php',
];
-$ignoreErrors[] = [
- 'message' => '#^Method Drupal\\\\Core\\\\Template\\\\Attribute\\:\\:storage\\(\\) has no return type specified\\.$#',
- 'identifier' => 'missingType.return',
- 'count' => 1,
- 'path' => __DIR__ . '/lib/Drupal/Core/Template/Attribute.php',
-];
$ignoreErrors[] = [
'message' => '#^Method Drupal\\\\Core\\\\Template\\\\AttributeArray\\:\\:getIterator\\(\\) return type with generic class ArrayIterator does not specify its types\\: TKey, TValue$#',
'identifier' => 'missingType.generics',
@@ -10461,6 +10455,12 @@
'count' => 1,
'path' => __DIR__ . '/lib/Drupal/Core/Template/AttributeValueBase.php',
];
+$ignoreErrors[] = [
+ 'message' => '#^Method Drupal\\\\Core\\\\Template\\\\HtmxAttribute\\:\\:getIterator\\(\\) return type with generic class ArrayIterator does not specify its types\\: TKey, TValue$#',
+ 'identifier' => 'missingType.generics',
+ 'count' => 1,
+ 'path' => __DIR__ . 'core/lib/Drupal/Core/Template/HtmxAttribute.php',
+];
$ignoreErrors[] = [
'message' => '#^Constructor of class Drupal\\\\Core\\\\Template\\\\TwigEnvironment has an unused parameter \\$root\\.$#',
'identifier' => 'constructor.unusedParameter',
@@ -13761,30 +13761,12 @@
'count' => 1,
'path' => __DIR__ . '/modules/config/src/Form/ConfigSingleExportForm.php',
];
-$ignoreErrors[] = [
- 'message' => '#^Method Drupal\\\\config\\\\Form\\\\ConfigSingleExportForm\\:\\:findConfiguration\\(\\) has no return type specified\\.$#',
- 'identifier' => 'missingType.return',
- 'count' => 1,
- 'path' => __DIR__ . '/modules/config/src/Form/ConfigSingleExportForm.php',
-];
$ignoreErrors[] = [
'message' => '#^Method Drupal\\\\config\\\\Form\\\\ConfigSingleExportForm\\:\\:submitForm\\(\\) has no return type specified\\.$#',
'identifier' => 'missingType.return',
'count' => 1,
'path' => __DIR__ . '/modules/config/src/Form/ConfigSingleExportForm.php',
];
-$ignoreErrors[] = [
- 'message' => '#^Method Drupal\\\\config\\\\Form\\\\ConfigSingleExportForm\\:\\:updateConfigurationType\\(\\) has no return type specified\\.$#',
- 'identifier' => 'missingType.return',
- 'count' => 1,
- 'path' => __DIR__ . '/modules/config/src/Form/ConfigSingleExportForm.php',
-];
-$ignoreErrors[] = [
- 'message' => '#^Method Drupal\\\\config\\\\Form\\\\ConfigSingleExportForm\\:\\:updateExport\\(\\) has no return type specified\\.$#',
- 'identifier' => 'missingType.return',
- 'count' => 1,
- 'path' => __DIR__ . '/modules/config/src/Form/ConfigSingleExportForm.php',
-];
$ignoreErrors[] = [
'message' => '#^Method Drupal\\\\config\\\\Form\\\\ConfigSingleImportForm\\:\\:create\\(\\) has no return type specified\\.$#',
'identifier' => 'missingType.return',
diff --git a/core/lib/Drupal/Core/Form/FormBuilder.php b/core/lib/Drupal/Core/Form/FormBuilder.php
index 068989beeb35..650ea21e83f8 100644
--- a/core/lib/Drupal/Core/Form/FormBuilder.php
+++ b/core/lib/Drupal/Core/Form/FormBuilder.php
@@ -16,7 +16,6 @@
use Drupal\Core\Render\Element;
use Drupal\Core\Render\ElementInfoManagerInterface;
use Drupal\Core\Security\TrustedCallbackInterface;
-use Drupal\Core\Template\HtmxAttribute;
use Drupal\Core\Theme\ThemeManagerInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Contracts\EventDispatcher\EventDispatcherInterface;
diff --git a/core/lib/Drupal/Core/Http/HttpMethod.php b/core/lib/Drupal/Core/Http/HttpMethod.php
index 14fe932261f6..52637d601736 100644
--- a/core/lib/Drupal/Core/Http/HttpMethod.php
+++ b/core/lib/Drupal/Core/Http/HttpMethod.php
@@ -2,6 +2,9 @@
namespace Drupal\Core\Http;
+/**
+ * Enumerates the valid HTTP methods or verbs.
+ */
enum HttpMethod {
case Get;
diff --git a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
index eba141b813a2..cae21eb90326 100644
--- a/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
+++ b/core/lib/Drupal/Core/Render/Element/RenderElementBase.php
@@ -3,7 +3,6 @@
namespace Drupal\Core\Render\Element;
use Drupal\Component\Utility\NestedArray;
-use Drupal\Core\Render\Hypermedia\Htmx;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\PluginBase;
diff --git a/core/lib/Drupal/Core/Render/Element/Textfield.php b/core/lib/Drupal/Core/Render/Element/Textfield.php
index 929d910295f3..3a04f82145b0 100644
--- a/core/lib/Drupal/Core/Render/Element/Textfield.php
+++ b/core/lib/Drupal/Core/Render/Element/Textfield.php
@@ -52,7 +52,7 @@ public function getInfo() {
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
[static::class, 'processGroup'],
- [static::class, 'processHtmxElement']
+ [static::class, 'processHtmxElement'],
],
'#pre_render' => [
[static::class, 'preRenderTextfield'],
diff --git a/core/lib/Drupal/Core/Render/Element/Url.php b/core/lib/Drupal/Core/Render/Element/Url.php
index 82a417af03bd..f3f20d2f3e9f 100644
--- a/core/lib/Drupal/Core/Render/Element/Url.php
+++ b/core/lib/Drupal/Core/Render/Element/Url.php
@@ -44,7 +44,7 @@ public function getInfo() {
[static::class, 'processAutocomplete'],
[static::class, 'processAjaxForm'],
[static::class, 'processPattern'],
- [static::class, 'processHtmxElement']
+ [static::class, 'processHtmxElement'],
],
'#element_validate' => [
[static::class, 'validateUrl'],
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
index dde2507ec6cd..7fb99e66e93f 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/HtmxInterface.php
@@ -17,6 +17,7 @@ interface HtmxInterface {
* Accessor for the HtmxAttribute.
*
* @return \Drupal\Core\Template\HtmxAttribute
+ * The attributes object.
*/
public function attributes(): HtmxAttribute;
@@ -24,6 +25,7 @@ public function attributes(): HtmxAttribute;
* Accessor for the headers, typically an instance of HtmxResponseHeader.
*
* @return \Drupal\Core\Http\HtmxHeaderInterface
+ * The headers object.
*/
public function headers(): HtmxHeaderInterface;
@@ -78,7 +80,7 @@ public function setRequestOperation(HtmxRequestOperationInterface $operation): H
* ::processOperations.
*
* @param \Drupal\Core\Render\Hypermedia\Operations\HtmxOperationInterface $operation
- * The operation
+ * The operation.
*
* @return \Drupal\Core\Render\Hypermedia\HtmxInterface
* Returns self to enable chained methods.
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
index 95979b370e37..f2ebf5842fd1 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxOperationInterface.php
@@ -6,7 +6,6 @@
/**
* An HtmxOperation adds attributes or headers to an HTMX object.
- *
*/
interface HtmxOperationInterface {
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
index a1ddd4c22d7f..e1a933724b5d 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/Operations/HtmxRequestOperationInterface.php
@@ -2,7 +2,6 @@
namespace Drupal\Core\Render\Hypermedia\Operations;
-
use Drupal\Core\Http\HttpMethod;
use Drupal\Core\Url;
diff --git a/core/lib/Drupal/Core/Template/AttributeHelper.php b/core/lib/Drupal/Core/Template/AttributeHelper.php
index 41203b3eae75..264148f68603 100644
--- a/core/lib/Drupal/Core/Template/AttributeHelper.php
+++ b/core/lib/Drupal/Core/Template/AttributeHelper.php
@@ -2,7 +2,6 @@
namespace Drupal\Core\Template;
-use Drupal\Component\Plugin\Attribute\AttributeInterface;
use Drupal\Component\Utility\NestedArray;
/**
diff --git a/core/lib/Drupal/Core/Template/AttributeJson.php b/core/lib/Drupal/Core/Template/AttributeJson.php
index 61f24ef7fda8..3b0204b371db 100644
--- a/core/lib/Drupal/Core/Template/AttributeJson.php
+++ b/core/lib/Drupal/Core/Template/AttributeJson.php
@@ -26,7 +26,7 @@ public function __toString() {
$data[Xss::filter($key)] = is_string($item) ? Xss::filter($item) : $item;
}
$string = json_encode($data, JSON_FORCE_OBJECT | JSON_NUMERIC_CHECK);
- return $string ? $string : '';
+ return $string ?: '';
}
}
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
index 740fd1791be2..3d0954bfca04 100644
--- a/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeInterface.php
@@ -2,7 +2,6 @@
namespace Drupal\Core\Template;
-
use Drupal\Component\Render\MarkupInterface;
/**
@@ -10,7 +9,7 @@
*
* @extends \IteratorAggregate<string, \Drupal\Core\Template\AttributeValueBase>
*/
-interface HtmlAttributeInterface extends \Countable, \IteratorAggregate, MarkupInterface {
+interface HtmlAttributeInterface extends \Countable, \IteratorAggregate, MarkupInterface {
/**
* Checks if the storage has an attribute with the given name.
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
index adb183a7ff62..1cbd8e111167 100644
--- a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
@@ -2,8 +2,6 @@
namespace Drupal\Core\Template;
-use Drupal\Component\Utility\NestedArray;
-
/**
* Provides a shared implementation of several HtmlAttribute methods.
*
diff --git a/core/lib/Drupal/Core/Template/HtmxAttribute.php b/core/lib/Drupal/Core/Template/HtmxAttribute.php
index 86562fb2696e..3d79403e57e1 100644
--- a/core/lib/Drupal/Core/Template/HtmxAttribute.php
+++ b/core/lib/Drupal/Core/Template/HtmxAttribute.php
@@ -74,8 +74,6 @@ protected function insureKebabCase(string $identifier): string {
* The HTMX attribute id.
* @param string $value
* The attribute value.
- *
- * @return void
*/
protected function createStringAttribute(string $id, string $value): void {
$key = 'data-hx-' . $id;
@@ -90,12 +88,10 @@ protected function createStringAttribute(string $id, string $value): void {
* The HTMX attribute id.
* @param bool $value
* The attribute value.
- *
- * @return void
*/
protected function createBooleanAttribute(string $id, bool $value): void {
$key = 'data-hx-' . $id;
- $attribute = new AttributeBoolean($key, $value);
+ $attribute = new AttributeBoolean($key, $value);
$this->storage[$key] = $attribute;
}
@@ -107,12 +103,10 @@ protected function createBooleanAttribute(string $id, bool $value): void {
* The HTMX attribute id.
* @param array{string, string} $value
* The attribute values.
- *
- * @return void
*/
protected function createJsonAttribute(string $id, array $value): void {
$key = 'data-hx-' . $id;
- $attribute = new AttributeJson($key, $value);
+ $attribute = new AttributeJson($key, $value);
$this->storage[$key] = $attribute;
}
@@ -317,6 +311,8 @@ public function selectOob(string $selectors): HtmxAttribute {
*
* @param string $strategy
* A comma separated list of elements to be swapped out of band.
+ * @param bool $ignoreTitle
+ * Instruct HTMX not to swap in the page title from the request.
*
* @return $this
*
diff --git a/core/lib/Drupal/Core/Template/TwigExtension.php b/core/lib/Drupal/Core/Template/TwigExtension.php
index dd6747a72ef5..ea6a10db1445 100644
--- a/core/lib/Drupal/Core/Template/TwigExtension.php
+++ b/core/lib/Drupal/Core/Template/TwigExtension.php
@@ -621,11 +621,11 @@ public function safeJoin(Environment $env, $value, $glue = '') {
/**
* Creates an Attribute object.
*
- * @param HtmlAttributeInterface|array $attributes
+ * @param \Drupal\Core\Template\HtmlAttributeInterface|array $attributes
* (optional) An existing attribute object or an associative array of
* key-value pairs to be converted to HTML attributes.
*
- * @return HtmlAttributeInterface
+ * @return \Drupal\Core\Template\HtmlAttributeInterface
* An attributes object that has the given attributes.
*/
public function createAttribute(HtmlAttributeInterface|array $attributes = []) {
diff --git a/core/misc/htmx-behaviors.js b/core/misc/htmx-behaviors.js
index bcd625a5fbe3..a57e3e5e331e 100644
--- a/core/misc/htmx-behaviors.js
+++ b/core/misc/htmx-behaviors.js
@@ -20,10 +20,12 @@
// The attachBehaviors method searches within the context.
// We need to go up one level so that the loaded content is processed
// completely.
- Drupal.attachBehaviors(htmxLoadEvent.detail.elt?.parentElement, drupalSettings);
+ Drupal.attachBehaviors(
+ htmxLoadEvent.detail.elt?.parentElement,
+ drupalSettings,
+ );
}
-
/**
* Includes Drupal data with HTMX requests.
*
@@ -36,10 +38,13 @@
const sameHost = origin === url.origin;
if (sameHost) {
// We only need to add this data for htmx requests back to the site.
- configRequestEvent.detail.headers['HX-Page-State'] = drupalSettings.ajaxPageState.libraries;
+ configRequestEvent.detail.headers['HX-Page-State'] =
+ drupalSettings.ajaxPageState.libraries;
// Swap in drupal data selectors as #id values are altered to be unique.
- configRequestEvent.detail.headers['HX-Target'] = configRequestEvent.detail.target.dataset.drupalSelector;
- configRequestEvent.detail.headers['HX-Trigger'] = configRequestEvent.detail.elt.dataset.drupalSelector;
+ configRequestEvent.detail.headers['HX-Target'] =
+ configRequestEvent.detail.target.dataset.drupalSelector;
+ configRequestEvent.detail.headers['HX-Trigger'] =
+ configRequestEvent.detail.elt.dataset.drupalSelector;
}
}
@@ -50,7 +55,6 @@
* The htmx:oobAfterSwap event triggered by HTMX.
*/
function htmxDrupalAssetProcessor(oobSwapEvent) {
-
/**
* Local helper function to merge two objects recursively.
*
@@ -66,33 +70,33 @@
return {};
}
- for (const obj of sources) {
- if (!obj) {
- continue;
- }
+ sources
+ .filter((obj) => Boolean(obj))
+ .forEach((obj) => {
+ Object.entries(obj).forEach(([key, value]) => {
+ switch (Object.prototype.toString.call(value)) {
+ case '[object Object]':
+ current[key] = current[key] || {};
+ current[key] = mergeSettings(current[key], value);
+ break;
- for (const [key, value] of Object.entries(obj)) {
- switch (Object.prototype.toString.call(value)) {
- case '[object Object]':
- current[key] = current[key] || {};
- current[key] = mergeSettings(current[key], value);
- break;
+ case '[object Array]':
+ current[key] = mergeSettings(new Array(value.length), value);
+ break;
- case '[object Array]':
- current[key] = mergeSettings(new Array(value.length), value);
- break;
-
- default:
- current[key] = value;
- }
- }
- }
+ default:
+ current[key] = value;
+ }
+ });
+ });
return current;
}
// Find any inserted assets.
- const assetsTag = oobSwapEvent.detail.target.querySelector('script[data-drupal-selector="drupal-htmx-assets"]');
+ const assetsTag = oobSwapEvent.detail.target.querySelector(
+ 'script[data-drupal-selector="drupal-htmx-assets"]',
+ );
if (!(assetsTag instanceof HTMLElement)) {
return;
}
@@ -106,10 +110,16 @@
// Variable assets should have properties 'styles', 'scripts,
// 'scripts_bottom', 'settings'. See
// HtmxResponseAttachmentsProcessor::processAssetLibraries
- cssItems = new Map(assets['styles'].map((item) => [`css!${item['#attributes']['href']}`, item]));
- scriptItems = new Map(assets['scripts'].map((item) => [item['#attributes']['src'], item]));
- scriptBottomItems = new Map(assets['scripts_bottom'].map((item) => [item['#attributes']['src'], item]));
- mergeSettings(drupalSettings, assets['settings']);
+ cssItems = new Map(
+ assets.styles.map((item) => [`css!${item['#attributes'].href}`, item]),
+ );
+ scriptItems = new Map(
+ assets.scripts.map((item) => [item['#attributes'].src, item]),
+ );
+ scriptBottomItems = new Map(
+ assets.scripts_bottom.map((item) => [item['#attributes'].src, item]),
+ );
+ mergeSettings(drupalSettings, assets.settings);
}
// Load CSS.
if (cssItems instanceof Map && cssItems.size > 0) {
@@ -117,11 +127,13 @@
cssItems.forEach((value, key) => paths.push(key));
loadjs(paths, {
async: false,
- before: function (path, linkElement) {
+ before(path, linkElement) {
const item = cssItems.get(path);
- for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
- linkElement.setAttribute(attributeKey, attributeValue);
- }
+ Object.entries(item['#attributes']).forEach(
+ ([attributeKey, attributeValue]) => {
+ linkElement.setAttribute(attributeKey, attributeValue);
+ },
+ );
},
});
}
@@ -138,11 +150,13 @@
// Fetch in parallel but load in sequence.
loadjs(paths, {
async: false,
- before: function (path, scriptElement) {
+ before(path, scriptElement) {
const item = scriptItems.get(path);
- for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
- scriptElement.setAttribute(attributeKey, attributeValue);
- }
+ Object.entries(item['#attributes']).forEach(
+ ([attributeKey, attributeValue]) => {
+ scriptElement.setAttribute(attributeKey, attributeValue);
+ },
+ );
},
});
}
@@ -152,11 +166,13 @@
// Fetch in parallel but load in sequence.
loadjs(paths, {
async: false,
- before: function (path, scriptElement) {
+ before(path, scriptElement) {
const item = scriptBottomItems.get(path);
- for (const [attributeKey, attributeValue] of Object.entries(item['#attributes'])) {
- scriptElement.setAttribute(attributeKey, attributeValue);
- }
+ Object.entries(item['#attributes']).forEach(
+ ([attributeKey, attributeValue]) => {
+ scriptElement.setAttribute(attributeKey, attributeValue);
+ },
+ );
document.body.appendChild(scriptElement);
// Return false to bypass loadjs' default DOM insertion
// mechanism.
diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php
index 88bc82c356ac..7b27b91d74b8 100644
--- a/core/modules/config/src/Form/ConfigSingleExportForm.php
+++ b/core/modules/config/src/Form/ConfigSingleExportForm.php
@@ -196,6 +196,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?string $
* The config name ID.
*
* @return array
+ * The modified export element render array.
*/
public function updateExport(array $element, string $config_type, string $config_name) {
// Determine the full config name for the selected config entity.
@@ -217,12 +218,13 @@ public function updateExport(array $element, string $config_type, string $config
/**
* Handles switching the configuration type selector.
*
- * @param $config_type
+ * @param string $config_type
* The selected configuration type.
* @param \Drupal\Core\Form\FormStateInterface $form_state
* The current form state.
*
* @return array
+ * An array of matching items.
*/
protected function findConfiguration($config_type, FormStateInterface $form_state) {
$names = [];
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
index ce29a2d81ebb..08af0c0793b7 100644
--- a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
@@ -9,7 +9,6 @@
use Drupal\Core\File\MimeType\MimeTypeMapInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;
-use Drupal\Core\Template\HtmlAttributeInterface;
/**
* Base class for media file formatter.
@@ -147,7 +146,7 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
* Additional attributes to be applied to the HTML element. Attribute names
* will be used as key and value in the HTML element.
*
- * @return HtmlAttributeInterface
+ * @return \Drupal\Core\Template\HtmlAttributeInterface
* Container with all the attributes for the HTML tag.
*/
protected function prepareAttributes(array $additional_attributes = []) {
diff --git a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
index 6fcf01a8d7b9..2536971c1f77 100644
--- a/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Template/HtmxAttributeTest.php
@@ -352,7 +352,7 @@ public static function hxValidateDataProvider(): array {
* @covers ::trigger
* @covers ::confirm
* @covers ::disable
- * @covers ::disabledElt
+ * @covers ::disabledElements
* @covers ::disinherit
* @covers ::encoding
* @covers ::history
diff --git a/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
index 1b384012b313..1ec2c137bab5 100644
--- a/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
+++ b/core/tests/Drupal/Tests/Core/Render/Hypermedia/HtmxOperationsTest.php
@@ -1,7 +1,10 @@
<?php
+declare(strict_types=1);
+
namespace Drupal\Tests\Core\Render\Hypermedia;
+use Drupal\Core\Http\HttpMethod;
use Drupal\Core\Render\Element\RenderElementBase;
use Drupal\Core\Render\Hypermedia\Htmx;
use Drupal\Core\Render\Hypermedia\Operations\Insert;
@@ -56,11 +59,10 @@ protected function processOperations(): array {
* @covers \Drupal\Core\Render\Hypermedia\Operations\Insert
*/
public function testInsert(): void {
- $insert = new Insert(
- select: '#source-value',
- target: '#target-value',
- url: $this->url,
- );
+ $insert = (new Insert())
+ ->select('#source-value')
+ ->target('#target-value')
+ ->setRequest(HttpMethod::Get, $this->url);
$this->htmx->setRequestOperation($insert);
$result = $this->processOperations();
$headers = $result['#attached']['http_header'] ?? [];
@@ -79,12 +81,11 @@ public function testInsert(): void {
* @covers \Drupal\Core\Render\Hypermedia\Operations\Replace
*/
public function testReplace(): void {
- $insert = new Replace(
- select: '#source-value',
- target: '#target-value',
- url: $this->url,
- );
- $this->htmx->setRequestOperation($insert);
+ $replace = (new Replace())
+ ->select('#source-value')
+ ->target('#target-value')
+ ->setRequest(HttpMethod::Get, $this->url);
+ $this->htmx->setRequestOperation($replace);
$result = $this->processOperations();
$headers = $result['#attached']['http_header'] ?? [];
$attributes = $result['#attributes'] ?? [];
diff --git a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
index ec0ff5887462..8f011b46f662 100644
--- a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
+++ b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
@@ -9,7 +9,6 @@
use Drupal\Core\Render\Markup;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Template\AttributeArray;
-use Drupal\Core\Template\HtmlAttributeInterface;
use Drupal\Core\Template\AttributeString;
use Drupal\Core\Template\Loader\StringLoader;
use Drupal\Tests\UnitTestCase;
--
GitLab
From 32ba44e5e0418bacc82982b20aff789a97fd8462 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Sat, 19 Apr 2025 14:33:08 -0400
Subject: [PATCH 19/26] paste error in .phpstan-baseline.php
---
core/.phpstan-baseline.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/core/.phpstan-baseline.php b/core/.phpstan-baseline.php
index f9aaa559af2c..f50467a4dda4 100644
--- a/core/.phpstan-baseline.php
+++ b/core/.phpstan-baseline.php
@@ -10459,7 +10459,7 @@
'message' => '#^Method Drupal\\\\Core\\\\Template\\\\HtmxAttribute\\:\\:getIterator\\(\\) return type with generic class ArrayIterator does not specify its types\\: TKey, TValue$#',
'identifier' => 'missingType.generics',
'count' => 1,
- 'path' => __DIR__ . 'core/lib/Drupal/Core/Template/HtmxAttribute.php',
+ 'path' => __DIR__ . '/lib/Drupal/Core/Template/HtmxAttribute.php',
];
$ignoreErrors[] = [
'message' => '#^Constructor of class Drupal\\\\Core\\\\Template\\\\TwigEnvironment has an unused parameter \\$root\\.$#',
--
GitLab
From b68b500c08a57477d2eb2723f363d581c6e6d42b Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 21 Apr 2025 08:35:19 -0400
Subject: [PATCH 20/26] Add htmx and related words to cspell dictionary.txt
---
core/misc/cspell/dictionary.txt | 3 +++
1 file changed, 3 insertions(+)
diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index 83fe358eb459..94c9f9c17e31 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -224,6 +224,7 @@ hrefs
htmlcorrector
httpheader
httponly
+htmx
icann
iconwrap
idekey
@@ -418,6 +419,8 @@ restrictor
restripe
restriped
restui
+reswap
+retarget
revisionable
revisioned
revisionid
--
GitLab
From 240a55627ad14515bee069130325c6d76fd4f900 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 21 Apr 2025 08:50:10 -0400
Subject: [PATCH 21/26] Fix two misspelled words
---
core/misc/htmx-behaviors.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/core/misc/htmx-behaviors.js b/core/misc/htmx-behaviors.js
index a57e3e5e331e..add7b9502d49 100644
--- a/core/misc/htmx-behaviors.js
+++ b/core/misc/htmx-behaviors.js
@@ -216,9 +216,9 @@
// Fired by HTMX before a request is sent.
window.addEventListener('htmx:configRequest', htmxDrupalData);
// Fired by HTMX after an 'out of band' content swap, which we use to add
- // asset info from the resonse.
+ // asset info from the response.
window.addEventListener('htmx:oobAfterSwap', htmxDrupalAssetProcessor);
- // Attach Drupal behaviors after a normal HTMC content swap.
+ // Attach Drupal behaviors after a normal HTMX content swap.
window.addEventListener('htmx:load', htmxDrupalBehaviors);
// Attach Drupal behaviors after an HTMX 'out of band' content swap.
window.addEventListener('htmx:oobAfterSwap', htmxDrupalBehaviors);
--
GitLab
From 8711e3f530cff83bff188fa11568dbb9570a7018 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 21 Apr 2025 08:52:57 -0400
Subject: [PATCH 22/26] More phpstan lint
---
.../Render/Hypermedia/HtmxResponseAttachmentsProcessor.php | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
index f7420dec9f4f..941b2a738610 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
@@ -95,11 +95,11 @@ protected function processAssetLibraries(AttachedAssetsInterface $assets, array
];
$this->preparedAssetInfo = Json::encode($data);
// Restore assets for a standard page so that HTML state is preserved.
- if (is_array($settingsHeader)) {
+ if (isset($settingsHeader) && is_array($settingsHeader)) {
$js_assets_header['drupalSettings'] = $settingsHeader;
$variables['scripts'] = $this->jsCollectionRenderer->render($js_assets_header);
}
- if (is_array($settingsFooter)) {
+ if (isset($settingsHeader) && is_array($settingsFooter)) {
$js_assets_footer['drupalSettings'] = $settingsFooter;
$variables['scripts_bottom'] = $this->jsCollectionRenderer->render($js_assets_footer);
}
--
GitLab
From 2f5ba32a02ed23120a3d6b2b3c67c77012aad4c7 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 21 Apr 2025 09:46:40 -0400
Subject: [PATCH 23/26] Sort dictionary.txt correctly
---
core/misc/cspell/dictionary.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index 94c9f9c17e31..c0f4912e057d 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -222,9 +222,9 @@ hmac
hookname
hrefs
htmlcorrector
+htmx
httpheader
httponly
-htmx
icann
iconwrap
idekey
--
GitLab
From 8c8fb3618db3e87be0eaf022525c90c98a250952 Mon Sep 17 00:00:00 2001
From: "Shawn P. Duncan" <code@sd.shawnduncan.org>
Date: Mon, 21 Apr 2025 09:47:10 -0400
Subject: [PATCH 24/26] working on merge error in HtmlAttributeTrait
---
core/tests/Drupal/Tests/Core/Template/AttributeTest.php | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
index 8f011b46f662..a72c0f34e67c 100644
--- a/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
+++ b/core/tests/Drupal/Tests/Core/Template/AttributeTest.php
@@ -6,6 +6,7 @@
use Drupal\Component\Render\MarkupInterface;
use Drupal\Component\Utility\Html;
+use Drupal\Component\Utility\Xss;
use Drupal\Core\Render\Markup;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Template\AttributeArray;
@@ -379,11 +380,11 @@ public static function providerTestAttributeValues() {
$data = [];
$string = '"> <script>alert(123)</script>"';
- $data['safe-object-xss1'] = [['title' => Markup::create($string)], ' title=""> alert(123)""'];
- $data['non-safe-object-xss1'] = [['title' => $string], ' title="' . Html::escape($string) . '"'];
+ $data['safe-object-xss1'] = [['title' => Markup::create($string)], ' title=\'"> alert(123)"\''];
+ $data['non-safe-object-xss1'] = [['title' => $string], ' title=\'' . Xss::filter($string) . "'"];
$string = '"><script>alert(123)</script>';
- $data['safe-object-xss2'] = [['title' => Markup::create($string)], ' title="">alert(123)"'];
- $data['non-safe-object-xss2'] = [['title' => $string], ' title="' . Html::escape($string) . '"'];
+ $data['safe-object-xss2'] = [['title' => Markup::create($string)], ' title=\'">alert(123)\''];
+ $data['non-safe-object-xss2'] = [['title' => $string], ' title="' . Xss::filter($string) . '"'];
return $data;
}
--
GitLab
From 273f8476b8b150c25696c136610b377393d910eb Mon Sep 17 00:00:00 2001
From: Shawn Duncan <duncans3@mskcc.org>
Date: Mon, 21 Apr 2025 12:25:31 -0400
Subject: [PATCH 25/26] Remediate tests
---
.../Core/Template/HtmlAttributeTrait.php | 18 +++++++++++++++++-
.../Tests/Core/Common/AttributesTest.php | 2 +-
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
index 1cbd8e111167..2efe43c776e6 100644
--- a/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
+++ b/core/lib/Drupal/Core/Template/HtmlAttributeTrait.php
@@ -2,6 +2,9 @@
namespace Drupal\Core\Template;
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Serialization\Attribute\JsonSchema;
+
/**
* Provides a shared implementation of several HtmlAttribute methods.
*
@@ -13,6 +16,7 @@ trait HtmlAttributeTrait {
/**
* Implements the magic __toString() method.
*/
+ #[JsonSchema(['type' => 'string', 'description' => 'Rendered HTML element attributes'])]
public function __toString() {
$return = '';
/** @var \Drupal\Core\Template\AttributeValueBase $value */
@@ -50,6 +54,12 @@ public function jsonSerialize(): string {
/**
* Merges an Attribute object into the current storage.
*
+ * On name matches, incoming AttributeArrays run through
+ * NestedArray::mergeDeep. Other Attribute types replace a matching name.
+ * This is an equivalent behavior to converting all values arrays and
+ * running NestedArray::mergeDeep on the arrays which preserves the
+ * types of the values.
+ *
* @param HtmlAttributeInterface $collection
* The Attribute object to merge.
*
@@ -57,7 +67,13 @@ public function jsonSerialize(): string {
*/
public function merge(HtmlAttributeInterface $collection): self {
foreach ($collection as $name => $value) {
- $this->storage[$name] = $value;
+ if (isset($this->storage[$name]) && $value instanceof AttributeArray) {
+ $merged_attributes = NestedArray::mergeDeep($this->storage[$name]->value(), $value->value());
+ $this->storage[$name] = new AttributeArray($name, $merged_attributes);
+ }
+ else {
+ $this->storage[$name] = $value;
+ }
}
return $this;
}
diff --git a/core/tests/Drupal/Tests/Core/Common/AttributesTest.php b/core/tests/Drupal/Tests/Core/Common/AttributesTest.php
index 6a65be7f0460..9b144858764e 100644
--- a/core/tests/Drupal/Tests/Core/Common/AttributesTest.php
+++ b/core/tests/Drupal/Tests/Core/Common/AttributesTest.php
@@ -24,7 +24,7 @@ public static function providerTestAttributeData() {
return [
// Verify that special characters are HTML encoded.
[['&"\'<>' => 'value'], ' &"'<>="value"', 'HTML encode attribute names.'],
- [['title' => '&"\'<>'], ' title="&"'<>"', 'HTML encode attribute values.'],
+ [['title' => '&"\'<>'], ' title=\'&"\'<>\'', 'XSS filter attribute values.'],
// Verify multi-value attributes are concatenated with spaces.
[['class' => ['first', 'last']], ' class="first last"', 'Concatenate multi-value attributes.'],
// Verify boolean attribute values are rendered correctly.
--
GitLab
From 96f4cb26eaf29fa4eecb6f178a8abd4a8596a837 Mon Sep 17 00:00:00 2001
From: Shawn Duncan <duncans3@mskcc.org>
Date: Mon, 21 Apr 2025 14:50:19 -0400
Subject: [PATCH 26/26] Fix paste error
---
.../Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
index 941b2a738610..5c8881e7412f 100644
--- a/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
+++ b/core/lib/Drupal/Core/Render/Hypermedia/HtmxResponseAttachmentsProcessor.php
@@ -99,7 +99,7 @@ protected function processAssetLibraries(AttachedAssetsInterface $assets, array
$js_assets_header['drupalSettings'] = $settingsHeader;
$variables['scripts'] = $this->jsCollectionRenderer->render($js_assets_header);
}
- if (isset($settingsHeader) && is_array($settingsFooter)) {
+ if (isset($settingsFooter) && is_array($settingsFooter)) {
$js_assets_footer['drupalSettings'] = $settingsFooter;
$variables['scripts_bottom'] = $this->jsCollectionRenderer->render($js_assets_footer);
}
--
GitLab