Elroid.min.js

class Elroid{constructor(t){this.el=t.el,this.data=t.data,this.template=document.querySelector(t.el).innerHTML,this.compile(),this.bindEvents()}compile(){let t=document.querySelectorAll(this.el);t.forEach(t=>{this.compileElement(t)})}compileElement(t){let e=t.innerHTML,i=this.compileTemplate(e);t.innerHTML=i}compileTemplate(t){let e=t.replace(/\{\{(.*?)\}\}/g,(t,e)=>e.split(".").reduce((t,e)=>t[e.trim()],this.data)||"");return e}bindEvents(){let t=document.querySelectorAll("[el-click]");t.forEach(t=>{let e=t.getAttribute("el-click"),i=this.data.methods[e];i&&"function"==typeof i&&t.addEventListener("click",()=>{i.bind(this.data)();let t=this.data.route||"/";router.navigateTo(t)})})}update(t){Object.assign(this.data,t);let e=this.compileTemplate(this.template),i=document.querySelector(this.el);i.innerHTML=e,this.bindEvents()}}class ElComponent{constructor(t){this.template=t.template,this.data=t.data,this.route=t.route,this.el=document.querySelector(t.el),this.compile(),this.bindEvents()}compile(){let t=this.compileTemplate(this.template);this.el.innerHTML=t}compileTemplate(t){let e=t.replace(/\{\{(.*?)\}\}/g,(t,e)=>e.split(".").reduce((t,e)=>t[e.trim()],this.data)||"");return e}bindEvents(){let t=this.el.querySelectorAll("[el-click]");t.forEach(t=>{let e=t.getAttribute("el-click"),i=this.data.methods[e];i&&"function"==typeof i&&t.addEventListener("click",()=>{i.bind(this.data)();let t=this.data.route||"/";router.navigateTo(t)})})}update(t){Object.assign(this.data,t);let e=this.compileTemplate(this.template);this.el.innerHTML=e,this.bindEvents()}}class ElRouter{constructor(t){this.routes=t.routes,this.defaultRoute=t.defaultRoute,this.errorRoute=t.errorRoute,this.el=t.el,this.visitedRoutes=[],this.init()}init(){this.navigateTo(window.location.pathname),window.addEventListener("popstate",()=>{this.goToPreviousRoute()}),document.addEventListener("click",t=>{let e=t.target.closest("a");e&&e.getAttribute("href").startsWith("/")&&(t.preventDefault(),this.navigateTo(e.getAttribute("href")))})}navigateTo(t){let e=this.findRoute(t)||this.findRoute(this.errorRoute),{component:i,data:s}=e;new i({el:this.el,data:s}),this.visitedRoutes.push(t),history.pushState({path:t},"",t)}goToPreviousRoute(){if(this.visitedRoutes.length>1){this.visitedRoutes.pop();let t=this.visitedRoutes[this.visitedRoutes.length-1],e=this.findRoute(t)||this.findRoute(this.errorRoute),{component:i,data:s}=e;new i({el:this.el,data:s}),history.pushState({path:t},"",t)}}findRoute(t){return this.routes.find(e=>e.route===t)}}class ElRequest{constructor(){this.http=new XMLHttpRequest,this.headers={}}setHeader(t,e){this.headers[t]=e}get(t="",e={},i=()=>{}){let s=Object.entries(e).map(([t,e])=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`).join("&");for(let[h,o]of(this.http.open("GET",`${t}?${s}`,!0),Object.entries(this.headers)))this.http.setRequestHeader(h,o);this.http.onload=(function(){200===this.http.status?i(null,this.http.responseText):i(`Error: ${this.http.status}`)}).bind(this),this.http.send()}post(t="",e={},i=()=>{}){for(let[s,h]of(this.http.open("POST",t,!0),Object.entries(this.headers)))this.http.setRequestHeader(s,h);this.http.onload=(function(){i(null,this.http.responseText)}).bind(this);let o=Object.entries(e).map(([t,e])=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`).join("&");this.http.send(o)}put(t="",e={},i=()=>{}){for(let[s,h]of(this.http.open("PUT",t,!0),Object.entries(this.headers)))this.http.setRequestHeader(s,h);this.http.onload=(function(){i(null,this.http.responseText)}).bind(this);let o=Object.entries(e).map(([t,e])=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`).join("&");this.http.send(o)}delete(t="",e=()=>{}){for(let[i,s]of(this.http.open("DELETE",t,!0),Object.entries(this.headers)))this.http.setRequestHeader(i,s);this.http.onload=(function(){200===this.http.status?e(null,"Post Deleted!"):e(`Error: ${this.http.status}`)}).bind(this),this.http.send()}}