rrender.js

class superxmlparser74{static parse(t,e,l,s,a=()=>{}){let f=!1,r=!1,n="",u="",c="",o=!1,p="",m=[],g="";for(let i=0;i<=t.length-1;i++){if("<"===t[i]){if("!"===t[i+1]&&"-"===t[i+2]&&"-"===t[i+3]){for(let e=i+4;e<=t.length-1;e++)if("-"===t[e]&&"-"===t[e+1]&&">"===t[e+2]){i=e+2;break}continue}if(""!==n.trim()&&"\n"!==n.trim()&&"\t"!==n.trim()?(l({value:n}),n=""):"/"!==t[i+1]&&l({value:""}),f=!0,"/"===t[i+1]){f=!1,i+=1;continue}}else if(">"===t[i])f?("/"===g?a:e)({tag:n,attr:m}):s({tag:n.split("\n").join("").trim()}),m=[],n="",r=!1,f=!1;else if(!r&&" "!==t[i]||!f)n+=t[i];else if(r)if("="===t[i])u=p,p="";else if('"'===t[i]){if(!1===(o=!o)&&(c="class"===u?p.split(" "):[p],p="",m.push({key:u,value:c})," "===t[i+1])){i+=1;continue}}else p+=t[i];else" "===t[i]&&f&&(r=!0);g=t[i]}}}
class node{id;childrens=[];innerTEXT="";parent=[];numChild=0;tag;closedtag;visible=!0;rIf=!1;attr=[];parentComponent="";left;right;rName}var _dirty=[];class BuilderDOM{build(e){var t="<dom>";return this._html_to_dom(t+e+"\n </dom>")}_html_to_dom(e){let i=[],p=[],o=0,d=[];let m=[],h,s=[];return superxmlparser74.parse(e,e=>{var t=JSON.stringify([m]),n="false"===e.attr.find(e=>"r-if"==e.key)?.value[0];let r="";var a=e.attr.find(e=>"r-name"==e.key)?.value[0],l="false"!=e.attr.find(e=>"r-dirty"==e.key)?.value[0],l=(a?(h=e.attr.find(e=>"r-name"==e.key)?.value[0],l&&_dirty.push({name:h}),s.push({type:"component",component:h,nname:_dirty[_dirty.length-1]?.name})):s.push({type:"div",component:null,remove:n}),r=n?void 0:a?a+"#component":(null==d[t]?d[t]=0:d[t]++,`_${m.join("-")}#`+d[t]),new node);l.attr=e.attr,l.tag=e.tag.trim(),l.numChild=d[t],l.dirty=Boolean(_dirty.length),l.parent=JSON.parse(JSON.stringify(m)),l.parentNode=p[p.length-1],l.id=r,e.attr.find(e=>"r-name"==e.key)?.value[0]||n||m.push(d[t]),l.parentComponent=s.filter(e=>"component"===e.type)[s.filter(e=>"component"===e.type).length-1]?.component,l.left=o++,l.rName=e.attr.find(e=>"r-name"==e.key)?.value[0],i.push(l),l.attr.push({key:"tag",value:[e.tag]}),p[p.length-1]&&"script"!==l.tag&&p[p.length-1].childrens.push(l),p.push(l)},e=>{p[p.length-1]&&(p[p.length-1].innerTEXT+=e.value)},e=>{var t;p.length&&(p[p.length-1].right=o++,(t=s.pop()).nname&&t.nname===_dirty[_dirty.length-1]?.name&&_dirty.pop(),p.pop(),t.remove||"component"===t.type||m.pop())}),i}}
class dom_node{childrens=[];innerTEXT="";tag}class _template{static render=(t,c)=>{t=_template.html_to_dom(t);let f="",k=[{data:c.state}],y=(e,a)=>{var t;if(a)return"function"==typeof(t=k.find(t=>t.key===a)?.data[e])?t(k[k.length-1].data):t;for(let t=k.length-1;0<=t;t--){var n=k[t]?.data[e];if(void 0!==n)return"function"==typeof n?n(k[k.length-1].data):n}},$=(l,r=null,i=null,s,t)=>{l.tag=l.tag.trim();let e="",a=l?.attr?.find(t=>"r-for"===t.key)?.value[0];var p=l?.attr?.find(t=>"r-if"===t.key)?.value[0];let u=l?.attr?.find(t=>"r-bind"===t.key)?.value[0],o=l?.attr?.find(t=>"r-click"===t.key)?.value[0],g=l?.attr?.find(t=>"r-mouse"===t.key)?.value[0],d=l?.attr?.find(t=>"r-model"===t.key)?.value[0],m=l?.attr?.find(t=>"r-value"===t.key)?.value[0];var v=l?.attr?.filter(t=>t.key.includes("r-bind.")).map(t=>({key:t.key,val:t.value[0]}))?.map(t=>({attr:t.key,val:t.val}));let n;if(a&&!r){1<a.split("of").length&&(e=a.split("of")[0].trim(),a=a.split("of")[1].trim()),1<a.split(".").length&&(n=a.split(".")[0],a=a.split(".")[1]);var h=y(a,n);!h?.length&&components.map(t=>t.name).includes(l.tag)&&(f+=`<${l.tag} r-index="0" r-type="destroy" r-repeat="${a}">`+"\n");for(let t=0;t<=h?.length-1;t++)s=h?.[t],k.push({key:e,data:JSON.parse(JSON.stringify(s))}),$(l,a,t,s),k.pop()}else{let t,e;p&&(l.attr=l?.attr?.filter(t=>"r-if"!==t.key),e="!"===p.split("")[0]?(t=p.split("").filter((t,e)=>0!==e).join(""),!Boolean(y(t))):(t=p,Boolean(y(t))));let a=[];1<=v.length&&(a=v.map(t=>{let e=t.val.split("."),a;return e=1<e.length?(a=e[0],e[1]):t.val,{attr:t.attr.split(".")[1],val:y(e,a)}}));let n;u?.includes(".")&&(n=u.split(".")[0],u=u.split(".")[1]),o=o&&(o.includes(".")?` onclick="runEvent('${c.name}', '${o.split(".")[0]}', '${y(o.split(".")[1])}') "`:` onclick="runEvent('${c.name}', '${o}') "`),g=g&&(g.includes(".")?` onmousemove="runEvent('${c.name}', '${g.split(".")[0]}', '${y(g.split(".")[1])}') "`:` onmousemove="runEvent('${c.name}', '${g}') "`),m=m&&`value="${y(m)??""}" onkeyup="model('${c.name}', {event: event, key: '${m}'})"`,d=d&&`value="${y(d)??""}" onkeyup="model_change('${c.name}', {event: event, key: '${d}'})"`,f=(f=f+("<"+l.tag+(1<l.attr.length?" ":"")+l.attr.reduce((t,e,a)=>t+("tag"!==e.key?`${e.key}="${e.value.join(" ")}"`+(l.attr.length-1!=a+1?" ":""):""),"")+(p?` r-key="${t}" r-if="${e}" `:"")+(r?` r-repeat="${r}" r-index="${i}"`:"")+(a.length?a.map(t=>{if(t?.attr)return` ${t.attr}="${t.val}" `;u=t.val}).filter(t=>t).join(" "):"")+(o||"")+(m||"")+(d||"")+(g||"")+">")+"\n")+(l.innerTEXT??"")+"\n",u&&(f=f+y(u,n)+"\n"),l.childrens.forEach(t=>{$(t,null,null,s)}),components.map(t=>t.name).includes(l.tag)||(f=f+("</"+l.tag)+">\n")}};return $(t[0],null,null,c.state),f};static html_to_dom=t=>{var a=function(t){return["noscript","link","base","meta","input","svg","path","img","br","area","base","br","col","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"].includes(t)};let n=[],l=[];return superxmlparser74.parse(t,t=>{"p"===t.tag&&"p"===l[l.length-1]?.tag&&l.pop();var e=new dom_node;e.attr=t.attr,e.tag=t.tag,n.push(e),e.attr.push({key:"tag",value:[t.tag]}),l[l.length-1]&&"script"!==e.tag&&l[l.length-1].childrens.push(e),a(e.tag.split("\n").join("").trim())||l.push(e)},t=>{l[l.length-1]&&(l[l.length-1].innerTEXT+=t.value)},t=>{a(t.tag)||l.pop()},t=>{var e=new dom_node;e.attr=t.attr,e.tag=t.tag,n.push(e),l[l.length-1].childrens.push(e),e.attr.push({key:"tag",value:[t.tag]})}),n}}
var domBuilder=new BuilderDOM,currentComponents=[],components={};class component{name="";index=null;propKey=null;bbody=null;constructor(e){this.name=e}get _body(){return this.propKey&&0===getProps(this.parent,this.propKey)?.length?"":this.body()}body(){}init(){}destroy(){}dirtyCheck(){partialCheck(this.name)}getProps=e=>void 0===this.index?getProps(this.parent,e):getProps(this.parent,this.propKey,this.index)}var _currentDom="";class render{init=!0;vdom=[];prevVdom=[];hiddenEls=[];prevComponents=[];_el={};constructor(e,n){components=n,this._el=e,_currentDom=this._el.innerHTML.trim().split("\n")}renderDom(){var e=performance.now();let n={},t=!1;for(let e=0;e<=currentComponents.length-1;e++)if(!currentComponents[e].component.bbody){t=!0;break}if(this.init||t){var v="",y=[];let h=[],u=[],f=[];if(this.prevVdom){let r=n=>{var e,t;"true"==n?.attr?.find(e=>"r-if"===e.key)?.value[0]&&(t=n?.attr?.find(e=>"r-key"===e.key)?.value[0],e=this.prevComponents.find(e=>e.name==n.parentComponent)?.component?.state?.[t],t=currentComponents.find(e=>e.name==n.parentComponent)?.component?.state?.[t],void 0!==e)&&t!=e&&f.push(...this.prevVdom.filter(e=>n.left<e.left&&n.right>e.right)?.filter(e=>e?.id?.includes("component"))?.map(e=>e.attr?.find(e=>"r-name"===e.key)?.value[0])),n?.childrens?.forEach(e=>{r(e)})};r(this.prevVdom[0])}_currentDom.forEach(e=>{let c=e=>{var n=this.utils.parseTag(e);let i=n?.tag?.trim();var o=n?.attr?.find(e=>"r-index"==e.key)?.value[0],s=n?.attr?.find(e=>"r-repeat"==e.key)?.value[0],n=(n?.attr?.find(e=>"r-if"==e.key)?.value[0],n?.attr?.find(e=>"r-type"==e.key)?.value[0]);if(this.utils.isComponent(i)){var a=y.join(".")+("#"+i);void 0===h[a]&&(h[a]=0),h[a]++;let r=a+"-"+h[a];if(f.includes(r))currentComponents.filter(e=>e.hierarchy?.split(".")?.includes(r)).forEach(n=>{n.component.destroy(),currentComponents=currentComponents.filter(e=>e.name!==n.name)});else{if(s){let n=currentComponents.find(e=>e.name==y[y.length-1]).component;var p=this.prevComponents.find(e=>e.name==n.name)?.component.state[s],l=n?.state?.[s];p?.length<l?.length&&(n.state=this.utils.setIndexes(n.state))}if(s&&this.prevComponents.find(e=>e.name==r)){let o=currentComponents.find(e=>e.name==y[y.length-1]).component;if(!u.includes(o.name)){u.push(o.name);var m=this.prevComponents.find(e=>e.name==o.name).component.state[s];let n=o.state[s],r=m.map(e=>e.index).filter(e=>!n.map(e=>e.index).includes(e)),i=0;for(let e=0;e<=m.length-1;e++){i++;let n=a+"-"+(h[a]+e),t=currentComponents.find(e=>e.name==n);if(r.includes(e))o.state=this.utils.setIndexes(o.state),i--,currentComponents.filter(e=>e.hierarchy?.split(".")?.includes(t.name)).forEach(n=>{n.component.destroy(),currentComponents=currentComponents.filter(e=>e.name!==n.name)});else{var d=t.name;let e=t.name.split("-");e.pop(),e=e.join("-"),t.name=e+"-"+i,t.component.index=i-1,t.component.name=t.name;for(let e=0;e<=currentComponents.length-1;e++)currentComponents[e].hierarchy=currentComponents[e].hierarchy?.split(d).join(t.name)}}}}let t=currentComponents.find(e=>e.name===r);if(y.push(r),"destroy"!=n){t?t=t.component:(p=components.find(e=>e.name===i).component,t=new p(r),currentComponents.push({name:r,component:t,hierarchy:y.join(".")}),t.name=r,t.index=o,t.propKey=s,t.parent=y[y.length-2],t.init(),t.state=this.utils.setIndexes(t.state));let e,n="false";t.bbody?e=t.bbody:(e=_template.render(t._body,t),t.bbody=e,n="true"),v+=`<div r-name="${r}" r-dirty="${n}">`,e.split("\n").forEach(e=>{c(e)}),v+="</div>",y.pop(r)}}}else v+=e+"\n"};c(e)});let i="";var s={noEndTag(e){return["noscript","link","base","meta","input","svg","path","img","br","area","base","br","col","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"].includes(e)}};let o=(r,e=!1)=>{r&&"false"!=r?.attr?.find(e=>"r-if"===e.key)?.value[0]&&((e=r?.attr?.find(e=>"r-name"===e.key)?.value[0]?!0:e)||(i=(i+="<"+r.tag+(1<r.attr.length?" ":"")+r.attr.filter(e=>!e.key.includes("r-")).reduce((e,n,t)=>e+("tag"!==n.key?`${n.key}="${n.value.join(" ")}"`+(r.attr.length-1!=t+1?" ":""):""),"")+">")+r.innerTEXT),r.childrens.forEach(e=>{o(e)}),s.noEndTag(r.tag)||e||(i+="</"+r.tag+">"))};if(this.init)this.vdom=domBuilder.build(v),o(this.vdom[0],!0),this._el.innerHTML=i,this.init=!1,this.prevVdom=this.vdom;else{let t=t=>{let r=this._el;for(let n=1;n<=t.length-1;n++){let e;e=Number(t[n])===t[n]?t[n]:this.vdom.find(e=>e.id==t[n]).numChild,r.children[e]&&(r=r.children[e])}return r};var d=[];this.vdom=domBuilder.build(v);let m=n=>{if(n){let t=this.vdom.find(e=>e.id==n),r=this.prevVdom.find(e=>e.id==n);var e=t?.childrens?.length,i=r?.childrens?.length,o=[],s=i<e?e:i;for(let n=0;n<=s-1;n++){var a=this.vdom.find(e=>e.id==t?.childrens[n]?.id);if(a.dirty&&"input"!=a.tag){var p=this.prevVdom.find(e=>e.id==r?.childrens[n]?.id),l={...a,childrens:"",parentComponent:"",parentNode:"",left:"",right:""},p={...p,childrens:"",parentComponent:"",parentNode:"",left:"",right:""};if(JSON.stringify(l)!==JSON.stringify(p))return r.id.includes("component")&&(r=r.parentNode,t=t.parentNode),void d.push({el:t,prev:r,type:"create"})}o.push(a.id)}o.forEach(e=>{m(e)})}};m(this.vdom[0].id),d.forEach(e=>{var n=t([...e.prev.parent,e.prev.id]);switch(i="",e.type){case"delete":break;case"create":o(e.el,!0),n.innerHTML=i}}),this.prevVdom=this.vdom,this.prevComponents=JSON.parse(JSON.stringify(currentComponents))}}n=performance.now(),console.log("perfomance",n-e)}utils={isComponent(e){return components.map(e=>e.name).includes(e)},parseTag(e){let n={};return superxmlparser74.parse(e,e=>{n=e},()=>{},()=>{},e=>{n=e}),n},setIndexes(n){return Object.keys(n).forEach(e=>{Array.isArray(n[e])&&(n[e]=n[e].map((e,n)=>({...e,index:n})))}),n}}}function runEvent(n,e,t){currentComponents.find(e=>e.name===n).component[e](t),partialCheck(n),Render.renderDom()}function partialCheck(n){for(let e=0;e<=currentComponents.length-1;e++)currentComponents[e].hierarchy.includes(n)&&(currentComponents[e].component.bbody=null)}function runParentEvent(n,e,t){let r="";currentComponents.forEach(e=>{(e=e.hierarchy.split("."))[e.length-1]===n&&(r=e[e.length-2])}),runEvent(r,e,t)}function getProps(n,e,t=void 0,r){var i=currentComponents.find(e=>(e=e.hierarchy.split("."))[e.length-1]===n);return void 0!==t?i?.component.state[e]?.[t]:i?.component?.state?.[e]}function model(n,{event:e,key:t}){e=e.target.value;currentComponents.find(e=>(e=e.hierarchy.split("."))[e.length-1]===n).component.state[t]=e,partialCheck(n)}function model_change(n,{event:e,key:t}){e=e.target.value;currentComponents.find(e=>(e=e.hierarchy.split("."))[e.length-1]===n).component.state[t]=e,partialCheck(n),Render.renderDom()}