myopie.min.js

export default class myopie{t;i;o=0;l;h=void 0;u={};p=null;m=!1;v={init:{pre:[],post:[]},render:{pre:[],post:[]}};constructor(t,e,i={},s=[],o=100,l=!0){this.t=t,this.i=e,this.o=o,this.l=s,this.u=myopie.DeepClone(i),document.addEventListener("input",(t=>{const e=t;for(let t=0,i=this.l.length;t<i;t++)if(e&&e.target&&e.target.matches(this.l[t][0]))switch(e.target.type){case"checkbox":case"radio":this.set(this.l[t][1],e.target.checked,l);break;default:this.set(this.l[t][1],e.target.value,l)}}))}static DeepClone(t){let e=null;switch(typeof t){case"undefined":case"boolean":case"number":case"bigint":case"string":case"symbol":case"function":e=t;break;case"object":if(null===t)e=null;else{e=Array.isArray(t)?[]:{};for(let i in t){let s=t[i],o={}.toString.call(s).slice(8,-1);if("Array"==o||"Object"==o)e[i]=myopie.DeepClone(s);else if("Date"==o)e[i]=new Date(s.getTime());else if("RegExp"==o){let t="";if("string"==typeof s.source.flags)t=s.source.flags;else{let e=[];s.global&&e.push("g"),s.ignoreCase&&e.push("i"),s.multiline&&e.push("m"),s.sticky&&e.push("y"),s.unicode&&e.push("u"),t=e.join("")}e[i]=RegExp(s.source,t)}else e[i]=s}}}return e}static SimilarNode(t,e){return t.nodeType===e.nodeType&&t.tagName===e.tagName&&t.id===e.id&&(!!t.id||t.src&&t.src===e.src||t.href&&t.href===e.href||t.className===e.className||t.childElementCount===e.childElementCount||!t.src&&!e.src&&!t.href&&!e.href&&!t.className&&!e.className)}DiffNode(t,e,i){const s=t.childNodes,o=e.childNodes,l=s.length;for(let t=0;t<l;t++){const l=s[t];let n;if(o.length<=t)switch(l.nodeType){case 1:e.append(l.cloneNode(!0));break;case 3:e.append(l.nodeValue)}else{n=o[t];let s=!1;if(!n.isEqualNode(l)){if(!myopie.SimilarNode(l,n)){let i=Array.from(o).slice(t+1).find((t=>myopie.SimilarNode(l,t)));i?n=e.insertBefore(i,t<o.length?n:null):(n=e.insertBefore(l.cloneNode(!0),t<o.length?n:null),s=!0)}if(!s){const t=l.childNodes&&l.childNodes.length?null:l.textContent;if(t!=(n.childNodes&&n.childNodes.length?null:n.textContent)&&(n.textContent=t),1===l.nodeType){const t=l.attributes,e=n.attributes;"true"===t.getNamedItem("data-myopie-ignore-content")?.value&&(i.content=!0),"true"===t.getNamedItem("data-myopie-ignore-style")?.value&&(i.style=!0);for(let{name:s,value:o}of t)if(s.startsWith("data-myopie-default-")&&20<s.length){const t=s.substr(20);null===e.getNamedItem(t)&&n.setAttribute(t,o)}else s.startsWith("data-myopie-")||(i?.style&&"style"==s||-1!==["input","option","textarea"].indexOf(n.tagName)&&-1!==["value","selected","checked"].indexOf(s))&&null!==e.getNamedItem(s)||n.setAttribute(s,o);for(let{name:s}of e)null===t.getNamedItem(s)&&(i?.style&&"style"===s||n.removeAttribute(s));i.content||(!l.childNodes.length&&n.childNodes.length?n.innerHTML="":(!n.childNodes.length&&l.childNodes.length,this.DiffNode(l,n,Object.assign({},i))))}}}}}for(let t=o.length-s.length;t>0;t--)o[o.length-1].remove()}HooksInitAddPre(t){this.v.init.pre.push(t)}HooksInitAddPost(t){this.v.init.post.push(t)}HooksRenderAddPre(t){this.v.render.pre.push(t)}HooksRenderAddPost(t){this.v.render.post.push(t)}render(){this.h=void 0;const t=document.querySelector(this.t);if(null!=t){if(this.m)for(let t=0,e=this.v.render.pre.length;t<e;t++)this.v.render.pre[t](this.u,this.p);else for(let t=0,e=this.v.init.pre.length;t<e;t++)this.v.init.pre[t](this.u);let e=(new DOMParser).parseFromString(this.i(this.u),"text/html");e.head&&e.head.childNodes&&e.head.childNodes.length&&Array.from(e.head.childNodes).reverse().forEach((function(t){e.body.insertBefore(t,e.body.firstChild)}));const i=e&&e.body?e.body:document.createElement("body");this.DiffNode(i,t,{content:!1,style:!1});const s=t.querySelectorAll("*");for(let t=0,e=s.length;t<e;t++)for(let e=0,i=s[t].attributes?.length;e<i;e++)s[t].attributes[e].name.startsWith("data-myopie-")&&(s[t].removeAttribute(s[t].attributes[e].name),e--,i--);if(this.m)for(let t=0,e=this.v.render.post.length;t<e;t++)this.v.render.post[t](this.u,this.p);else{for(let t=0,e=this.v.init.post.length;t<e;t++)this.v.init.post[t](this.u);this.m=!0}this.p=null}}get(t){let e=this.u;if(null!=t){let i=t.split(/(?<!(?<!\\)\\)\//);const s=i.length;for(let t=0;t<s&&void 0!==e;t++)if(Array.isArray(e)||"object"==typeof e){const s=i[t];e=void 0!==e[s]?e[s]:void 0}else e=void 0}return e}set(t,e,i=!0){null===this.p&&(this.p=myopie.DeepClone(this.u));let s=this.u,o=t.split(/(?<!(?<!\\)\\)\//);const l=o.length;for(let t=0;t<l-1;t++){let e=o[t];void 0===s[e]&&(s[e]={}),s=s[e]}void 0!==e?s[o[l-1]]=e:void 0!==s[o[l-1]]&&delete s[o[l-1]],i&&(this.o>0?(void 0!==this.h&&clearTimeout(this.h),this.h=setTimeout((()=>this.render()),this.o)):this.render())}}