@alpinejs/morph
Version:
Diff and patch a block of HTML on a page with an HTML template
2 lines (1 loc) • 5.4 kB
JavaScript
(()=>{function k(r,d,o){S();let t=N(o),e=typeof d=="string"?O(d):d;return window.Alpine&&window.Alpine.closestDataStack&&!r._x_dataStack&&(e._x_dataStack=window.Alpine.closestDataStack(r),e._x_dataStack&&window.Alpine.cloneNode(r,e)),t.patch(r,e),r}function _(r,d,o,t={}){S();let e=N(t),i=r.parentNode,s=new y(r,d),u=typeof o=="string"?(()=>{let c=document.createElement("div");return c.insertAdjacentHTML("beforeend",o),c})():o,l=document.createComment("[morph-start]"),n=document.createComment("[morph-end]");u.insertBefore(l,u.firstChild),u.appendChild(n);let g=new y(l,n);window.Alpine&&window.Alpine.closestDataStack&&(u._x_dataStack=window.Alpine.closestDataStack(i),u._x_dataStack&&window.Alpine.cloneNode(i,u)),e.patchChildren(s,g)}function N(r={}){let d=e=>e.getAttribute("key"),o=()=>{},t={key:r.key||d,lookahead:r.lookahead||!1,updating:r.updating||o,updated:r.updated||o,removing:r.removing||o,removed:r.removed||o,adding:r.adding||o,added:r.added||o};return t.patch=function(e,i){if(t.differentElementNamesTypesOrKeys(e,i))return t.swapElements(e,i);let s=!1,u=!1,l=n=>t.skipUntilCondition=n;if(!L(t.updating,()=>u=!0,l,e,i,()=>s=!0)){if(e.nodeType===1&&window.Alpine&&(window.Alpine.cloneNode(e,i),e._x_teleport&&i._x_teleport&&t.patch(e._x_teleport,i._x_teleport)),U(i)){t.patchNodeValue(e,i),t.updated(e,i);return}s||t.patchAttributes(e,i),t.updated(e,i),u||t.patchChildren(e,i)}},t.differentElementNamesTypesOrKeys=function(e,i){return e.nodeType!=i.nodeType||e.nodeName!=i.nodeName||t.getKey(e)!=t.getKey(i)},t.swapElements=function(e,i){if(w(t.removing,e))return;let s=i.cloneNode(!0);w(t.adding,s)||(e.replaceWith(s),t.removed(e),t.added(s))},t.patchNodeValue=function(e,i){let s=i.nodeValue;e.nodeValue!==s&&(e.nodeValue=s)},t.patchAttributes=function(e,i){if(e._x_transitioning||e._x_isShown&&!i._x_isShown||!e._x_isShown&&i._x_isShown)return;let s=Array.from(e.attributes),u=Array.from(i.attributes);for(let l=s.length-1;l>=0;l--){let n=s[l].name;i.hasAttribute(n)||(n==="open"&&e.nodeName==="DIALOG"&&e.open?e.close():e.removeAttribute(n))}for(let l=u.length-1;l>=0;l--){let n=u[l].name,g=u[l].value;e.getAttribute(n)!==g&&e.setAttribute(n,g)}},t.patchChildren=function(e,i){let s=t.keyToMap(e.children),u={},l=A(i),n=A(e);for(;l;){V(l,n);let c=t.getKey(l),f=t.getKey(n);if(t.skipUntilCondition){let a=!n||t.skipUntilCondition(n),m=!l||t.skipUntilCondition(l);if(a&&m)t.skipUntilCondition=null;else{a||(n=n&&p(e,n)),m||(l=l&&p(i,l));continue}}if(!n)if(c&&u[c]){let a=u[c];e.appendChild(a),n=a,f=t.getKey(n)}else{if(!w(t.adding,l)){let a=l.cloneNode(!0);e.appendChild(a),t.added(a)}l=p(i,l);continue}let x=a=>a&&a.nodeType===8&&a.textContent==="[if BLOCK]><![endif]",C=a=>a&&a.nodeType===8&&a.textContent==="[if ENDBLOCK]><![endif]";if(x(l)&&x(n)){let a=0,m=n;for(;n;){let h=p(e,n);if(x(h))a++;else if(C(h)&&a>0)a--;else if(C(h)&&a===0){n=h;break}n=h}let K=n;a=0;let T=l;for(;l;){let h=p(i,l);if(x(h))a++;else if(C(h)&&a>0)a--;else if(C(h)&&a===0){l=h;break}l=h}let B=l,D=new y(m,K),M=new y(T,B);t.patchChildren(D,M);continue}if(n.nodeType===1&&t.lookahead&&!n.isEqualNode(l)){let a=p(i,l),m=!1;for(;!m&&a;)a.nodeType===1&&n.isEqualNode(a)&&(m=!0,n=t.addNodeBefore(e,l,n),f=t.getKey(n)),a=p(i,a)}if(c!==f){if(!c&&f){u[f]=n,n=t.addNodeBefore(e,l,n),u[f].remove(),n=p(e,n),l=p(i,l);continue}if(c&&!f&&s[c]&&(n.replaceWith(s[c]),n=s[c],f=t.getKey(n)),c&&f){let a=s[c];if(a)u[f]=n,n.replaceWith(a),n=a,f=t.getKey(n);else{u[f]=n,n=t.addNodeBefore(e,l,n),u[f].remove(),n=p(e,n),l=p(i,l);continue}}}let E=n&&p(e,n);t.patch(n,l),l=l&&p(i,l),n=E}let g=[];for(;n;)w(t.removing,n)||g.push(n),n=p(e,n);for(;g.length;){let c=g.shift();c.remove(),t.removed(c)}},t.getKey=function(e){return e&&e.nodeType===1&&t.key(e)},t.keyToMap=function(e){let i={};for(let s of e){let u=t.getKey(s);u&&(i[u]=s)}return i},t.addNodeBefore=function(e,i,s){if(!w(t.adding,i)){let u=i.cloneNode(!0);return e.insertBefore(u,s),t.added(u),u}return i},t}k.step=()=>{};k.log=()=>{};function w(r,...d){let o=!1;return r(...d,()=>o=!0),o}function L(r,d,o,...t){let e=!1;return r(...t,()=>e=!0,d,o),e}var b=!1;function O(r){let d=document.createElement("template");return d.innerHTML=r,d.content.firstElementChild}function U(r){return r.nodeType===3||r.nodeType===8}var y=class{constructor(d,o){this.startComment=d,this.endComment=o}get children(){let d=[],o=this.startComment.nextSibling;for(;o&&o!==this.endComment;)d.push(o),o=o.nextSibling;return d}appendChild(d){this.endComment.before(d)}get firstChild(){let d=this.startComment.nextSibling;if(d!==this.endComment)return d}nextNode(d){let o=d.nextSibling;if(o!==this.endComment)return o}insertBefore(d,o){return o.before(d),d}};function A(r){return r.firstChild}function p(r,d){let o;return r instanceof y?o=r.nextNode(d):o=d.nextSibling,o}function S(){if(b)return;b=!0;let r=Element.prototype.setAttribute,d=document.createElement("div");Element.prototype.setAttribute=function(t,e){if(!t.includes("@"))return r.call(this,t,e);let i=e.replace(/&/g,"&").replace(/"/g,""");d.innerHTML=`<span ${t}="${i}"></span>`;let s=d.firstElementChild.getAttributeNode(t);d.firstElementChild.removeAttributeNode(s),this.setAttributeNode(s)}}function V(r,d){let o=d&&d._x_bindings&&d._x_bindings.id;o&&r.setAttribute&&(r.setAttribute("id",o),r.id=o)}function v(r){r.morph=k,r.morphBetween=_}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(v)});})();