text: !function(){"use strict";const t=new class{constructor(){const t=this;let e={},i=0,n=[];function r(i,d,o,c,l){const u="string"!=typeof d&&d.attrs["lucid-id"],h="string"!=typeof d&&d.attrs["lucid-key"];if(u&&h){const n=document.createElement("div");return t.render(n,e[u],h),n.firstElementChild.setAttribute("lucid-key",s(h,o,c)),void i.appendChild(n.firstElementChild)}if("string"==typeof d){const t=document.createTextNode(s(d,o,c,!1));return void i.appendChild(t)}let a;l||"svg"===d.tag?(a=document.createElementNS("http://www.w3.org/2000/svg",d.tag),l=!0):a=document.createElement(d.tag);for(const t in d.attrs){let e;t.startsWith("on")?(e=s(d.attrs[t],o,c,!0),a.addEventListener(t.substr(2),(t=>{e(t)}))):(e=s(d.attrs[t],o,c,!1),""!==e&&a.setAttribute(t.replace("srcname","src"),e))}for(let t=0;t<d.children.length;++t)r(a,d.children[t],o,c,l);i.appendChild(a);const f=a.getAttribute("lucid-ref");f&&(n[o][c].refs[f]=a)}function d(t,e,i,n,r){if("string"==typeof e){const r=s(e,i,n);return void(r!==t.nodeValue&&(t.nodeValue=r))}for(const r in e.attrs)if(!r.startsWith("on")){const d=s(e.attrs[r],i,n);t.getAttribute(r)!==d&&""!==d&&t.setAttribute(r,d)}let o=0;const c=Array.from(t.childNodes);for(let s=0,l=0;s<c.length;++s,++l){if(c[s].nodeType===document.ELEMENT_NODE){if(!r&&t.children.length>o&&t.children[o].getAttribute("lucid-id")&&t.children[o].getAttribute("lucid-key")){l--,o++;continue}o++}e.children[l]&&d(c[s],e.children[l],i,n,!1)}}function o(t){if(t.nodeType!==Node.ELEMENT_NODE){const e=t.nodeValue.trim();return""!==e?e:void 0}const e={tag:t.tagName,attrs:{},children:[]};for(let i=0;i<t.attributes.length;++i)e.attrs[t.attributes[i].name]=t.attributes[i].value;const i=Array.from(t.childNodes);for(let t=0;t<i.length;++t){const n=o(i[t]);n&&e.children.push(n)}return e}function s(t,e,i,r){let d=[],o=t.indexOf("{{",0),s=t.indexOf("}}",o+2);for(;-1!==o&&-1!==s;)d.push(t.substring(o+2,s)),o=t.indexOf("{{",s+2),s=t.indexOf("}}",o+2);if(0===d.length)return t;for(let o=0;o<d.length;++o){const s=d[o].split(".");if("attributes"===s[0]||"state"===s[0]){let r=n[e][i];for(let t=0;t<s.length;++t)r=r[s[t]];t=void 0!==r?t.replace("{{"+d[o]+"}}",r):t.replace("{{"+d[o]+"}}","")}else if("methods"===s[0]){if(r)return n[e][i]["m_"+s[1]].bind(n[e][i]);t=t.replace("{{"+d[o]+"}}",n[e][i]["m_"+s[1]]())}}return t}this.component=function(t){return e[i]={id:i,attributes:t.attributes,state:t.state,methods:t.methods,hooks:t.hooks,watch:t.watch,skeleton:void 0,render:t.render},n[i]={},e[i++]},this.render=function(t,i,s,c,l){if(!e[i.id].skeleton){const t=document.createElement("div");t.innerHTML=e[i.id].render().replace("src=","srcname="),e[i.id].skeleton=o(t.firstElementChild)}n[i.id][s]={id:i.id,key:s,state:e[i.id].state&&e[i.id].state(),attributes:e[i.id].attributes&&e[i.id].attributes(),methods:{},watch:{},hooks:{},refs:{},children:[],dom:void 0,setState:function(t){"function"==typeof t?this.state=t(this.state):"object"==typeof t&&(this.state=t),d(this.dom,e[this.id].skeleton,this.id,this.key,!0),n[i.id][s].h_updated&&n[i.id][s].h_updated()}};for(const t in e[i.id].methods)n[i.id][s]["m_"+t]=e[i.id].methods[t],n[i.id][s].methods[t]=(...e)=>n[i.id][s]["m_"+t](...e);for(const t in e[i.id].watch)n[i.id][s]["w_"+t]=e[i.id].watch[t],n[i.id][s].watch[t]=(...e)=>n[i.id][s]["w_"+t](...e);for(const t in e[i.id].hooks)n[i.id][s]["h_"+t]=e[i.id].hooks[t],n[i.id][s].hooks[t]=(...e)=>n[i.id][s]["h_"+t](...e);let u=t;for(;u;){const e=t.getAttribute("lucid-id"),r=t.getAttribute("lucid-key");if(e&&r){n[e][r].children.push({id:i.id,key:s});break}u=u.parentElement}c&&(n[i.id][s].attributes=c),n[i.id][s].h_created&&n[i.id][s].h_created();let h=document.createElement("div");r(h,e[i.id].skeleton,i.id,s,!1),h=h.firstChild,l?l.first?t.firstChild?t.insertBefore(h,t.firstChild):t.appendChild(h):l.index?t.insertBefore(h,t.children[l.index]):t.appendChild(h):t.appendChild(h),h.setAttribute("lucid-id",i.id),h.setAttribute("lucid-key",s),n[i.id][s].dom=h,n[i.id][s].h_connected&&n[i.id][s].h_connected()},this.remove=function(t,e){const i="number"==typeof t?t:t.id,r=n[i][e].dom;r.parentNode.removeChild(r);const d=n[i][e].children.length;for(let t=0;t<d;++t){const r=n[i][e].children[t];this.remove(r.id,r.key)}n[i][e].h_disconnected&&n[i][e].h_disconnected(),delete n[i][e]},this.instance=function(t,e){if(n[t.id][e])return{attribute:function(i,r){if(void 0===r)return n[t.id][e].attributes[i];{const d=n[t.id][e].attributes[i];n[t.id][e].attributes[i]=r,n[t.id][e]["w_"+i]&&n[t.id][e]["w_"+i](d,r)}}}}}};let e,i;function n(){++i;for(let t=0;t<Benchmark.number;++t)e[t].top=10*Math.sin(i/10)+"px",e[t].left=10*Math.cos(i/10)+"px",e[t].background=`rgb(0,0,${i%255})`}const r=t.component({render:function(){return"<div></div>"},hooks:{connected:function(){console.log(this.dom);for(let i=0;i<e.length;++i)t.render(this.dom,d,i,{element:e[i],id:i})}}}),d=t.component({attributes:function(){return{element:void 0,id:void 0}},methods:{getStyle:function(){return`top:${10*Math.sin(i/10)+"px"};left:${10*Math.cos(i/10)+"px"};background:rgb(0,0,${i%255})`},getCount:function(){return i}},render:function(){return'\n      <div class="box-view">\n        <div class="box" id="{{attributes.id}}" style="{{methods.getStyle}}">{{methods.getCount}}</div>\n      </div>\n    '},watch:{element:function(){this.setState()}}});Benchmark.Framework.Lucid={start(){e=[],i=0;for(let t=0;t<Benchmark.number;++t)e.push({top:0,left:0,background:0});n(),t.render(document.getElementById("grid"),r,0)},loop(){Promise.resolve().then((()=>{n();for(let i=0;i<Benchmark.number;++i)t.instance(d,i).attribute("element",e[i])}))}}}();
  