keml/keml.js

Enhance HTML with custom attributes for clean, server-driven interactivity.

/*!
 * keml 3.2.8 Enhance HTML with custom attributes for clean, server-driven interactivity.
 * Docs: https://thealjey.github.io/keml/
 * Repo: https://github.com/thealjey/keml/
 * MIT (see LICENSE)
 */
"use strict";(()=>{var m=e=>{let t=[],r=e.length,n=0,o=-1;for(;n<r;++n)e.charCodeAt(n)===32?o!==-1&&(t.push(e.slice(o,n)),o=-1):o===-1&&(o=n);return o!==-1&&t.push(e.slice(o,n)),t};var D=e=>{let t=Array.from(e.attributes),r=t.length;for(let n=0,o,s,a,c,i,l;n<r;++n){for(s=t[n],a=s.name,c=s.value,l=a.slice(2),o=0;o<r&&(i=t[o],i.name!==l);++o)i=void 0;a.startsWith("x-")?i?(s.value=i.value,i.value=c):(e.removeAttributeNode(s),e.setAttribute("d-"+l,""),e.setAttribute(l,c)):a.startsWith("d-")&&(i&&(e.setAttribute("x-"+l,i.value),e.removeAttributeNode(i)),e.removeAttributeNode(s))}},X=e=>{e.hasAttribute("state")||(D(e),e.setAttribute("state",""))},M=e=>{let t=e.getAttributeNode("state");t&&(e.removeAttributeNode(t),D(e))};var q=(e,t,r)=>{if(t.nodeName==r.nodeName){if(t.nodeValue!=r.nodeValue&&(t.nodeValue=r.nodeValue),t.value!=r.value&&(t.value=r.value),t.checked!=r.checked&&(t.checked=r.checked),t instanceof Element){M(t);let n=t.attributes,o=n.length,s,a,c,i;for(;o--;)a=n[o],r.hasAttribute(a.name)||t.removeAttributeNode(a);for(n=r.attributes,o=0,s=n.length;o<s;++o)a=n[o],c=a.name,i=a.value,(a=t.getAttributeNode(c))?a.value!=i&&(a.value=i):t.setAttribute(c,i);N(t,Array.from(r.childNodes))}}else e.replaceChild(r,t)},U=(e,t)=>{let r=e.parentNode,n=t.length;if(n){let o=0,s;for(;o<n&&(s=t[o],!(s.nodeName==e.nodeName&&s.getAttribute?.("key")==e.getAttribute("key")));++o)s=void 0;s?(o&&e.before.apply(e,t.slice(0,o)),++o<n&&e.after.apply(e,t.slice(o)),q(r,e,s)):(n>1&&e.after.apply(e,t.slice(1)),q(r,e,t[0]))}else r.removeChild(e)},N=(e,t)=>{let r=e.childNodes,n=t.length,o=r.length,s=0,a,c,i;for(;s<n;++s){for(a=t[s],c=s,i=void 0;c<o&&(i=r[c],!(a.nodeName==i.nodeName&&a.getAttribute?.("key")==i.getAttribute?.("key")));++c)i=void 0;i?(c!==s&&e.insertBefore(i,r[s]),q(e,r[s],a)):s<o++?e.insertBefore(a,r[s]):e.appendChild(a)}for(;o>n;)e.removeChild(r[--o])};var h=new Set,E=new Set,x=new Set,g=new Set,A=new Set,k=new Set,C=[],w=[];var ee=[],te=new Event("result"),P=[],H=!0,y,j=e=>P.push(e.target),v=()=>{H=!0},F=e=>{y=e},W=()=>{let e,t,r,n,o,s,a,c,i,l,p,u,d,f;for(;e=C.pop();)e.reset?.();for(;e=w.pop();)e.removeAttribute("on");for(;r=P.pop();){if(s=r.responseXML,e=r.a,o=void 0,(e.o=r.status>399)?(n=e.getAttributeNode("error"))&&(o=m(n.value)):(n=e.getAttributeNode("result"))&&(o=m(n.value)),o){p=!1,c=s?Array.from(s.body.childNodes):ee,f=[];for(t of A)if(o.includes(t.getAttribute("render"))){if(p)for(a=[],i=0,l=c.length;i<l;++i)a.push(c[i].cloneNode(!0));else a=c;f.push(t,a),p=!0}for(;a=f.pop();)t=f.pop(),(n=t.getAttributeNode("position"))?(u=n.value,u==="after"?t.after.apply(t,a):u==="append"?t.append.apply(t,a):u==="before"?t.before.apply(t,a):u==="prepend"?t.prepend.apply(t,a):u==="replaceWith"?U(t,a):N(t,a)):N(t,a)}e.r=!1,H=!0,e.o||e.dispatchEvent(te)}if(H){H=!1,o=[];for(e of E)e.checkValidity&&(n=e.getAttributeNode("if:invalid"))&&!e.checkValidity()&&o.push.apply(o,m(n.value)),(e instanceof HTMLInputElement?e.type==="checkbox"?e.checked:e.value:(e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement)&&e.value)&&(n=e.getAttributeNode("if:value"))&&o.push.apply(o,m(n.value)),(n=e.getAttributeNode("if:intersects"))&&(d=e.getBoundingClientRect(),d.bottom>-1&&d.right>-1&&d.left<=innerWidth&&d.top<=innerHeight&&o.push.apply(o,m(n.value))),e.r&&(n=e.getAttributeNode("if:loading"))&&o.push.apply(o,m(n.value)),e.o&&(n=e.getAttributeNode("if:error"))&&o.push.apply(o,m(n.value));for(e of k)o.includes(e.getAttribute("if"))?X(e):M(e)}if(y){try{l=y.value.length,y.focus(),y.setSelectionRange(l,l)}catch{}y=void 0}requestAnimationFrame(W)};var ne=new Event("reveal"),oe=new Event("conceal"),re=e=>{let t=e.length;for(let r=0,n;r<t;++r)n=e[r],n.isIntersecting&&n.target.dispatchEvent(ne)},ae=e=>{let t=e.length;for(let r=0,n;r<t;++r)n=e[r],n.isIntersecting||n.target.dispatchEvent(oe)},T=new IntersectionObserver(re),O=new IntersectionObserver(ae),I=new IntersectionObserver(v);var se=new Event("navigate"),_=()=>{for(let e of g)e.dispatchEvent(se)};var K=document.createElement("form"),z=Object.create(null),L=(e,t)=>{if(e)for(let r of e)typeof r[1]=="string"&&t.searchParams.append(r[0],r[1])},S=e=>{if(clearTimeout(e.n),e.n=void 0,!e.checkValidity||e.checkValidity()){e.hasAttribute("once")&&w.push(e);let t,r,n,o="",s="GET";(t=e.getAttributeNode("get"))?o=t.value:(t=e.getAttributeNode("post"))?(o=t.value,s="POST"):(t=e.getAttributeNode("put"))?(o=t.value,s="PUT"):(t=e.getAttributeNode("delete"))?(o=t.value,s="DELETE"):((t=e.getAttributeNode("href"))||(t=e.getAttributeNode("action"))||(t=e.getAttributeNode("src")))&&(o=t.value),(t=e.getAttributeNode("method"))&&(s=t.value.toUpperCase());let a=new URL(o,e.baseURI),c=a.pathname,i,l,p,u=r=c.length;for(;r--&&c.charCodeAt(r)===47;);if(r!==-1){for(i=r-u+1;r--&&(l=c.charCodeAt(r),l!==47);)if(l===46){p=!0;break}p?i<0&&(a.pathname=c.slice(0,i)):i===0?a.pathname=c+"/":i<-1&&(a.pathname=c.slice(0,i+1))}let d;e instanceof HTMLFormElement?d=new FormData(e):e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement?(K.replaceChildren(e.cloneNode(!0)),d=new FormData(K)):(t=e.getAttributeNode("name"))&&(n=t.value,(t=e.getAttributeNode("value"))&&(d=new FormData,d.set(n,t.value)));let f=e.getAttribute("redirect");if(f==="pushState")L(d,a),history.pushState(z,"",a),_();else if(f==="replaceState")L(d,a),history.replaceState(z,"",a),_();else if(f==="assign")L(d,a),location.assign(a);else if(f==="replace")L(d,a),location.replace(a);else{let b=new XMLHttpRequest,V=e.attributes;for(s!=="POST"&&(L(d,a),d=void 0),b.responseType="document",b.withCredentials=e.hasAttribute("credentials"),b.a=e,b.onloadend=j,b.open(s,a),b.setRequestHeader("X-Requested-With","XMLHttpRequest"),r=0,u=V.length;r<u;++r)t=V[r],n=t.name,n.startsWith("h-")&&b.setRequestHeader(n.slice(2),t.value);e.o=!1,e.r=!0,v(),b.send(d)}}};var $=e=>{let t=e.target;if(t instanceof Element){let r=e.type,n=t,o,s=`on:${r}`;for(;n&&!(o=n.getAttributeNode(s));)n=n.parentElement;if(n&&o){let a=m(o.value);if(a.length){if(o=n.getAttributeNode(`event:${r}`)){let c=o.value.split(","),i=c.length;for(let l=0,p,u;l<i;++l)if(p=c[l],u=p.indexOf("="),u===-1){if(r=p.trim(),r&&!e[r])return}else if(r=p.slice(0,u).trim(),r&&e[r]+""!==p.slice(u+1).trim())return}e.preventDefault();for(n of h)a.includes(n.getAttribute("on"))&&((o=n.getAttributeNode("throttle"))?n.n??=setTimeout(S,+o.value,n):(o=n.getAttributeNode("debounce"))?(clearTimeout(n.n),n.n=setTimeout(S,+o.value,n)):S(n));for(n of x)a.includes(n.getAttribute("reset"))&&C.push(n)}}}};var G=[],Q={s:{e(e,t){t==="on:navigate"?g.add(e):t==="on:reveal"?T.observe(e):t==="on:conceal"&&O.observe(e),G.includes(t)||(G.push(t),document.addEventListener(t.slice(3),$,!0))},t(e,t){t==="on:navigate"?g.delete(e):t==="on:reveal"?T.unobserve(e):t==="on:conceal"&&O.unobserve(e)}},i:{e(e,t){E.add(e),t==="if:intersects"&&I.observe(e)},t(e,t){E.delete(e),t==="if:intersects"&&I.unobserve(e)}},on:{e(e){h.add(e)},t(e){h.delete(e)}},if:{e(e){k.add(e)},t(e){k.delete(e)}},reset:{e(e){x.add(e)},t(e){x.delete(e)}},render:{e(e){A.add(e)},t(e){A.delete(e)}},autofocus:{e:F,t(){}}},J=e=>{h.delete(e),k.delete(e),g.delete(e),A.delete(e),x.delete(e),E.delete(e),O.unobserve(e),I.unobserve(e),T.unobserve(e)},R=e=>e.startsWith("on:")?Q.s:e.startsWith("if:")?Q.i:Q[e];var B=(e,t)=>{let r=e.length;for(let n=0,o,s,a,c,i,l;n<r;++n)if(s=e[n],s instanceof Element){a=document.createNodeIterator(s,NodeFilter.SHOW_ELEMENT);do if(t)for(o=0,i=s.attributes,c=i.length;o<c;++o)l=i[o].name,R(l)?.e(s,l);else J(s);while(s=a.nextNode())}};var Y=e=>{let t=e.length;for(let r=0,n,o,s,a;r<t;++r)n=e[r],o=n.attributeName,s=n.target,B(n.removedNodes,!1),B(n.addedNodes,!0),o&&s instanceof Element&&(a=R(o),a&&(s.hasAttribute(o)?n.oldValue==null&&a.e(s,o):n.oldValue!=null&&a.t(s,o)));v()};var Z=()=>{try{document.cookie=`tzo=${new Date().getTimezoneOffset()};Path=/;SameSite=lax;Max-Age=31536000`}catch{}B(document.childNodes,!0),new MutationObserver(Y).observe(document,{attributeOldValue:!0,attributes:!0,childList:!0,subtree:!0}),document.addEventListener("change",v,!0),document.addEventListener("input",v,!0),document.addEventListener("reset",v,!0),window.addEventListener("popstate",_,!0),requestAnimationFrame(W)};var ie=e=>{document.readyState.charCodeAt(0)===108?document.addEventListener("DOMContentLoaded",e,!0):e()};ie(Z);})();