solarite 0.1.1 → 0.2.0

package/benchmarks/naive/Solarite.min.js

@@ -0,0 +1,4 @@
+// Version 2024.10.5.1955
+// License: MIT
+// http://vorticode.github.io/solarite
+var Util$1={callback(...t){var e=!1;let l=async(...t)=>{let s=[];if(!e)for(let e=0;l.length>e;e++)s.push(l[e](...t));return await Promise.all(s)};l[Symbol.iterator]=()=>{let t=0;return{next(){return l.length>t?{value:l[t++],done:!1}:{done:!0}}}};for(let t of Object.getOwnPropertyNames(Array.prototype))"length"!==t&&"constructor"!==t&&(l[t]=Array.prototype[t]);l.l=0,Object.defineProperty(l,"length",{get:()=>l.l,set(t){l.l=t}}),l.remove=t=>{let e=l.findIndex((e=>e===t));-1!==e&&l.splice(e,1)},l.pause=()=>e=!0,l.resume=()=>e=!1;for(let e of t)l.push(e);return l}};function delve(t,e,l=delveDontCreate){let s=l!==delveDontCreate,i=e.length;if(!t&&!s&&i)return;let o=0;for(let r of e){if(void 0===t[r]){if(!s)return;i-1>o&&(t[r]=(e[o+1]+"").match(/^\d+$/)?[]:{})}s&&o===i-1&&(t[r]=l),t=t[r],o++}return t}let delveDontCreate={};function getArg(el,name,val=null,type=ArgType.String){let attrVal=el.getAttribute(name);if(null!==attrVal&&(val=attrVal),Array.isArray(type))return type.includes(val)?val:void 0;if("function"==typeof type)return type(val);if(type===ArgType.Bool){let t="string"==typeof val?val.toLowerCase():val;return!["false","0",!1,0,null,void 0].includes(t)}switch(type){case ArgType.Int:return parseInt(val);case ArgType.Float:return parseFloat(val);case ArgType.String:return[void 0,null,!1].includes(val)?"":val+"";case ArgType.JSON:case ArgType.Eval:if("string"!=typeof val||!val.length)return val;try{return type===ArgType.JSON?JSON.parse(val):eval(`(${val})`)}catch(t){return val}default:return val}}var ArgType={Bool:"Bool",Int:"Int",Float:"Float",String:"String",JSON:"JSON",Eval:"Eval"};let lastObjectId=1,objectIds=new WeakMap;function getObjectId(t){let e=objectIds.get(t);return e||(e=lastObjectId++,objectIds.set(t,e)),e}let isHashing=!0;function toJSON(){return isHashing?getObjectId(this):this}function getObjectHash(t){let e;isHashing=!0;try{e=JSON.stringify(t)}catch(l){e=getObjectHashCircular(t)}return isHashing=!1,e}function getObjectHashCircular(t){const e=new Set;return JSON.stringify(t,((t,l)=>{if("object"==typeof l&&null!==l){if(e.has(l))return getObjectId(l);e.add(l)}return l}))}Node.prototype.toJSON!==toJSON&&(Node.prototype.toJSON=toJSON,(()=>{}).toJSON!==toJSON&&(Function.prototype.toJSON=toJSON));var Globals={componentHash:new WeakMap,connected:new WeakSet,rendered:new WeakSet,currentExprPath:[],elementClasses:{},nodeEvents:new WeakMap,nodeGroups:new WeakMap,objToEl:new WeakMap,pendingChildren:[],rendering:new WeakSet,shells:new WeakMap};let Util={bindStyles(t,e){let l=e.getAttribute("data-style");l||(e.constructor.styleId||(e.constructor.styleId=1),l=e.constructor.styleId++,e.setAttribute("data-style",l));let s=e.tagName.toLowerCase();for(let e of t.childNodes)if(3===e.nodeType){let t=e.textContent,i=t.replace(/:host(?=[^a-z0-9_])/gi,s+'[data-style="'+l+'"]');t!==i&&(e.textContent=i)}},*flatten(t){if(Array.isArray(t))for(const e of t)yield*Util.flatten(e);else if("function"==typeof t){const e=t();yield*Util.flatten(e)}else yield t},getInputValue:t=>"checkbox"===t.type||"radio"===t.type?t.checked:"file"===t.type?[...t.files]:"number"===t.type||"range"===t.type?t.valueAsNumber:"date"===t.type||"time"===t.type||"datetime-local"===t.type?t.valueAsDate:"select-multiple"===t.type?[...t.selectedOptions].map((t=>t.value)):t.value,isPath:t=>Array.isArray(t)&&"object"==typeof t[0]&&!t.slice(1).find((t=>"string"!=typeof t&&"number"!=typeof t)),saveOrphans(t,e){let l=new Map;for(let e of t)l.set(e.startNode,e);for(let t,s=0;t=e[s];s++){let i;if(!t.parentNode&&(i=l.get(t))){let l=document.createDocumentFragment(),o=i.endNode;for(;t!==o;)l.append(t),s++,t=e[s];l.append(o)}}},trimEmptyNodes(t){const e=t=>t.nodeType!==Node.ELEMENT_NODE&&(t.nodeType!==Node.TEXT_NODE||""===t.textContent.trim()),l=[...t];for(;l.length>0&&e(l[0]);)l.shift();for(;l.length>0&&e(l[l.length-1]);)l.pop();return l}},div=document.createElement("div"),isEvent=t=>t.startsWith("on")&&t in div;function camelToDashes(t){return(t=(t=(t=t.replace(/([a-z0-9])([A-Z])/g,"$1-$2")).replace(/([A-Z])([A-Z][a-z])/g,"$1-$2")).replace(/([a-zA-Z])([0-9])/g,"$1-$2")).toLowerCase()}function arraySame(t,e){let l=t.length;if(l!==e.length)return!1;for(let s=0;l>s;s++)if(t[s]!==e[s])return!1;return!0}function htmlContext(t){if(null===t)return state={...defaultState},state.context;for(let e=0;t.length>e;e++){const l=t[e];switch(state.context){case htmlContext.Text:"<"===l&&t[e+1].match(/[a-z!]/i)&&(state.context=htmlContext.Tag,state.buffer="");break;case htmlContext.Tag:if(">"===l)state.context=htmlContext.Text,state.quote=null,state.buffer="";else{if(" "===l&&!state.buffer)continue;" "===l||"/"===l||"?"===l?state.buffer="":'"'===l||"'"===l||"="===l?(state.context=htmlContext.Attribute,state.quote="="===l?null:l,state.buffer=""):state.buffer+=l}break;case htmlContext.Attribute:state.quote||state.buffer.length||'"'!==l&&"'"!==l?l===state.quote||!state.quote&&state.buffer.length?(state.context=htmlContext.Tag,state.quote=null,state.buffer=""):state.quote||">"!==l?" "!==l&&(state.buffer+=l):(state.context=htmlContext.Text,state.quote=null,state.buffer=""):state.quote=l}}return state.context}htmlContext.Attribute="Attribute",htmlContext.Text="Text",htmlContext.Tag="Tag";let defaultState={context:htmlContext.Text,quote:null,buffer:"",lastChar:null},state={...defaultState};class MultiValueMap{data={};add(t,e){let l=this.data,s=l[t];s||(s=new Set,l[t]=s),s.add(e)}isEmpty(){for(let t in this.data)return!0;return!1}getAll(t){return this.data[t]||[]}delete(t,e=void 0){let l,s=this.data,i=s[t];if(i)return void 0===e?([l]=i,i.delete(l)):(i.delete(e),l=e),0===i.size&&delete s[t],l}hasValue(t){let e=this.data,l=[];for(let s in e)e[s].has(t)&&l.push(s);return l}}const udomdiff=(t,e,l,s)=>{const i=l.length;let o=e.length,r=i,n=0,a=0,h=null;for(;o>n||r>a;)if(o===n){const e=i>r?a?l[a-1].nextSibling:l[r-a]:s;for(;r>a;){let s=l[a++];t.insertBefore(s,e)}}else if(r===a)for(;o>n;){let l=e[n];h&&h.has(l)||t.removeChild(l),n++}else if(e[n]===l[a])n++,a++;else if(e[o-1]===l[r-1])o--,r--;else if(e[n]===l[r-1]&&l[a]===e[o-1]){const s=e[--o].nextSibling;let i=l[a++],h=e[n++];t.insertBefore(i,h.nextSibling);let f=l[--r];t.insertBefore(f,s),e[o]=l[r]}else{if(!h){h=new Map;let t=a;for(;r>t;)h.set(l[t],t++)}if(h.has(e[n])){const s=h.get(e[n]);if(s>a&&r>s){let i=n,f=1;for(;++i<o&&r>i&&h.get(e[i])===s+f;)f++;if(f>s-a){const i=e[n];for(;s>a;){let e=l[a++];t.insertBefore(e,i)}}else{let s=e[n++],i=l[a++];t.replaceChild(i,s)}}else n++}else{let l=e[n++];t.removeChild(l)}}return l};class ExprPath{type;attrName;attrValue;attrNames;nodeBefore;nodeMarker;parentNg;nodeGroups=[];nodesCache;nodeBeforeIndex;nodeMarkerPath;constructor(t,e,l=PathType.Content,s=null,i=null){this.nodeBefore=t,this.nodeMarker=e,this.type=l,this.attrName=s,this.attrValue=i,l===PathType.Multiple&&(this.attrNames=new Set)}apply(t,e=null,l=0,s={}){switch(this.type){case 1:this.applyNodes(t);break;case 2:this.applyMultipleAttribs(this.nodeMarker,t);break;case 5:break;case 6:this.applyEventAttrib(this.nodeMarker,t,this.parentNg.rootNg.root);break;default:4===this.type&&this.nodeMarker!==this.parentNg.rootNg.root?s[this.attrName]=t:l=this.applyValueAttrib(this.nodeMarker,e||[t],l)}return l}applyNodes(t){let e=this,l=[],s=e.nodeGroups,i=[];e.nodeGroups=[],e.applyExact(t,l,i),this.existingTextNodes=null;let o=!1;if(i.length){for(let[t,s]of i){let i=e.getNodeGroup(l[t],!1),r=i.getNodes();1===r.length?l[t]=r[0]:(l[t]=r,o=!0),e.nodeGroups[s]=i}o&&(l=l.flat())}let r=e.getNodes();arraySame(r,l)||(e.nodesCache=l,this.parentNg.parentPath&&this.parentNg.parentPath.clearNodesCache(),r.length&&!l.length&&e.fastClear()||udomdiff(e.nodeMarker.parentNode,r,l,e.nodeMarker),Util.saveOrphans(s,r)),e.freeNodeGroups()}applyExact(t,e,l){if(t instanceof Template){let s=this.getNodeGroup(t,!0);s?(e.push(...s.getNodes()),this.nodeGroups.push(s)):(l.push([e.length,this.nodeGroups.length]),e.push(t),this.nodeGroups.push(null))}else if(t instanceof Node)t instanceof DocumentFragment?e.push(...t.childNodes):e.push(t);else if(Array.isArray(t))for(let s of t)this.applyExact(s,e,l);else if("function"==typeof t){Globals.currentExprPath=[this,t];let s=t();Globals.currentExprPath=null,this.applyExact(s,e,l)}else{let l=void 0===t||!1===t||null===t?"":t+"",s=this.nodeBefore.nextSibling;if(3!==s.nodeType||s.nextSibling!==this.nodeMarker||e.includes(s)){this.existingTextNodes||(this.existingTextNodes=this.getNodes().filter((t=>3===t.nodeType)));let t=this.existingTextNodes.findIndex((t=>t.textContent===l));-1!==t?e.push(...this.existingTextNodes.splice(t,1)):e.push(this.nodeMarker.ownerDocument.createTextNode(l))}else s.textContent!==l&&(s.textContent=l),e.push(s)}}applyMultipleAttribs(t,e){Array.isArray(e)&&(e=e.flat().join(" "));let l=this.attrNames;if(this.attrNames=new Set,e){let l=(e+"").split(/([\w-]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s]+))/g).map((t=>t.trim())).filter((t=>t.length));for(let e of l){let[l,s]=e.split(/\s*=\s*/);s=(s||"").replace(/^(['"])(.*)\1$/,"$2"),t.setAttribute(l,s),this.attrNames.add(l)}}for(let e of l)this.attrNames.has(e)||t.removeAttribute(e)}applyEventAttrib(t,e,l){let s,i=this.attrName.slice(2),o=[];Array.isArray(e)?"function"==typeof e[0]?(s=e[0],o=e.slice(1)):(s=setValue,o=[e[0],e.slice(1),t],t.value=delve(e[0],e.slice(1))):s=e;let r=Globals.nodeEvents.get(t);r||(r={[i]:[,,,]},Globals.nodeEvents.set(t,r));let n=r[i];if(n[0]!==s){let[e,o,r]=n;e&&t.removeEventListener(i,o);let a=s,h=e=>a.call(l,...n[2],e,t);n[0]=a,n[1]=h,t.addEventListener(i,h)}r[i][2]=o}applyValueAttrib(t,e,l){let s=e[l];if(this.attrValue||!1!==s&&null!=s)if(this.attrValue||!0!==s)if("value"!==this.attrName&&"data-value"!==this.attrName||!Util.isPath(s)){let i=[];if(this.attrValue){for(let t=this.attrValue.length-1;t>=0;t--)if(i.unshift(this.attrValue[t]),t>0){let t=e[l];!1!==t&&null!=t&&i.unshift(t),l--}l++}else i.unshift(s);let o=i.join("");("value"===this.attrName?t.value:t.getAttribute(this.attrName))!==o&&t.setAttribute(this.attrName,o),this.attrName in t&&(t[this.attrName]=o)}else{let[e,l]=[s[0],s.slice(1)];t.value=delve(e,l),t.addEventListener("input",(()=>{delve(e,l,Util.getInputValue(t))}),!0)}else t.setAttribute(this.attrName,"");else t.removeAttribute(this.attrName);return l}clone(t,e=0){let l,s,i=t,o=e?this.nodeMarkerPath.slice(0,-e):this.nodeMarkerPath;for(let t=o.length-1;t>0;t--)i=i.childNodes[o[t]];let r=i.childNodes;return l=o.length?r[o[0]]:t,this.nodeBefore&&(s=r[this.nodeBeforeIndex]),new ExprPath(s,l,this.type,this.attrName,this.attrValue)}clearNodesCache(){let t=this,e=this.nodeMarker.parentNode;for(;t&&t.nodeMarker.parentNode===e;)t.nodesCache=null,t=t.parentNg?.parentPath}fastClear(){let t=this.nodeBefore.parentNode;return this.nodeBefore===t.firstChild&&this.nodeMarker===t.lastChild&&(t.innerHTML="",t.append(this.nodeBefore,this.nodeMarker),!0)}getNodes(){let t;if(t=this.nodesCache,t)return t;t=[];let e=this.nodeBefore.nextSibling,l=this.nodeMarker;for(;e&&e!==l;)t.push(e),e=e.nextSibling;return this.nodesCache=t,t}getParentNode(){return this.nodeMarker.parentNode}getNodeGroup(t,e=!0){let l;if(e){if(l=this.nodeGroupsFree.delete(t.getExactKey()),!l)return null;this.nodeGroupsFree.delete(t.getCloseKey(),l)}else l=this.nodeGroupsFree.delete(t.getCloseKey()),l&&(this.nodeGroupsFree.delete(l.exactKey,l),l.applyExprs(t.exprs),l.exactKey=t.getExactKey());return l||(l=new NodeGroup(t,this)),this.nodeGroupsInUse.push(l),l}nodeGroupsInUse=[];nodeGroupsFree=new MultiValueMap;freeNodeGroups(){let t=this.nodeGroupsFree;for(let e of this.nodeGroupsInUse)t.add(e.exactKey,e),t.add(e.closeKey,e);this.nodeGroupsInUse=[]}}function setValue(t,e,l){let s=l.value;"number"===l.type&&(s=parseFloat(s)),delve(t,e,s)}const PathType={Content:1,Multiple:2,Value:3,Component:4,Comment:5,Event:6};function getNodePath(t){let e=[];for(;;){let l=t.parentNode;if(!l)break;e.push([].indexOf.call(t.parentNode.childNodes,t)),t=l}return e}function resolveNodePath(t,e){for(let l=e.length-1;l>=0;l--)t=t.childNodes[e[l]];return t}class Shell{fragment;paths=[];events=[];ids=[];scripts=[];styles=[];staticComponents=[];constructor(t=null){if(!t)return;let e=[],l="\x3c!--!✨!--\x3e",s={};htmlContext(null);for(let i=0;t.length>i;i++){let o=t[i],r=htmlContext(o);if(r===htmlContext.Attribute){let t,e;if(o.replace(/<[a-z][a-z0-9]*-[a-z0-9-]+/gi,((l,s)=>{t=s+1,e=l.slice(1)})),e){let l=e+"-solarite-placeholder";o=o.slice(0,t)+l+o.slice(t+e.length),s[e]=l}}e.push(o),t.length-1>i&&e.push(r===htmlContext.Text?l:String.fromCharCode(57344+i))}let i,o=document.createElement("template"),r=e.join("");for(let t in s)r=r.replaceAll(`</${t}>`,`</${s[t]}>`);r?o.innerHTML=r:o.content.append(document.createTextNode("")),this.fragment=o.content;let n=[];const a=document.createTreeWalker(o.content,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT|NodeFilter.SHOW_TEXT);for(;i=a.nextNode();)if(n.map((t=>t.remove())),n=[],1===i.nodeType)for(let t of[...i.attributes]){let e=t.name.match(/^[\ue000-\uf8ff]$/);if(e)this.paths.push(new ExprPath(null,i,PathType.Multiple)),i.removeAttribute(e[0]);else{let e=t.value.split(/[\ue000-\uf8ff]/g);if(e.length>1){let l=2!==e.length||e[0].length||e[1].length?e:null,s=isEvent(t.name)?PathType.Event:PathType.Value;this.paths.push(new ExprPath(null,i,s,t.name,l)),i.setAttribute(t.name,e.join(""))}}}else if(i.nodeType===Node.COMMENT_NODE&&"!✨!"===i.nodeValue){let t,e=i.previousSibling;e||(e=document.createComment("ExprPath:"+this.paths.length),i.parentNode.insertBefore(e,i)),!i.nextSibling||8===i.nextSibling.nodeType&&"!✨!"===i.nextSibling.textContent?(t=i,t.textContent="ExprPathEnd:"+this.paths.length):(t=i.nextSibling,n.push(i));let l=new ExprPath(e,t,PathType.Content);this.paths.push(l)}else if(i.nodeType===Node.COMMENT_NODE){let t=i.textContent.split(/[\ue000-\uf8ff]/g);for(let e=0;t.length-1>e;e++){let t=new ExprPath(i.previousSibling,i);t.type=PathType.Comment,this.paths.push(t)}}else if(i.nodeType===Node.TEXT_NODE&&["SCRIPT","STYLE"].includes(i.parentNode?.nodeName)){let t=i.textContent.split(l);if(t.length>1){let e=[];for(let l=0;t.length>l;l++){let s=document.createTextNode(t[l]);i.parentNode.insertBefore(s,i),l>0&&e.push(s)}for(let t,l=0;t=e[l];l++){let e=new ExprPath(t.previousSibling,t,PathType.Content);this.paths.push(e)}n.push(i)}}n.map((t=>t.remove()));for(let t of this.fragment.querySelectorAll("[is]"))t.setAttribute("_is",t.getAttribute("is"));for(let t of this.paths)t.nodeBefore&&(t.nodeBeforeIndex=[].indexOf.call(t.nodeBefore.parentNode.childNodes,t.nodeBefore)),t.nodeMarkerPath=getNodePath(t.nodeMarker),t.type===PathType.Value&&1===t.nodeMarker.nodeType&&(t.nodeMarker.tagName.includes("-")||t.nodeMarker.hasAttribute("is"))&&(t.type=PathType.Component);this.findEmbeds()}findEmbeds(){this.scripts=[].map.call(this.fragment.querySelectorAll("scripts"),(t=>getNodePath(t))),this.styles=[].map.call(this.fragment.querySelectorAll("style"),(t=>getNodePath(t)));let t=this.fragment.querySelectorAll("[id],[data-id]");for(let e of t){let t=e.getAttribute("data-id")||e.getAttribute("id");if(div.hasOwnProperty(t))throw Error(`<${e.tagName.toLowerCase()} id="${t}"> can't override existing HTMLElement id property.`)}this.ids=[].map.call(t,(t=>getNodePath(t)));for(let t of this.fragment.querySelectorAll("*")){for(let e of t.attributes)isEvent(e.name)&&this.events.push([e.name,getNodePath(t)]);(t.tagName.includes("-")||t.hasAttribute("_is"))&&(this.paths.find((e=>e.nodeMarker===t))||this.staticComponents.push(getNodePath(t)))}}static get(t){let e=Globals.shells.get(t);return e||(e=new Shell(t),Globals.shells.set(t,e)),e}}class NodeGroup{rootNg;parentPath;startNode;endNode;paths=[];exactKey;closeKey;nodesCache;styles;currentComponentProps={};constructor(t,e=null){if(!(this instanceof RootNodeGroup)){let[l,s]=this.init(t,e);this.updatePaths(l,s.paths),this.activateEmbeds(l,s),this.applyExprs(t.exprs)}}init(t,e=null,l=null,s=null){this.exactKey=l||t.getExactKey(),this.closeKey=s||t.getCloseKey(),this.parentPath=e,this.rootNg=e?.parentNg?.rootNg||this,this.template=t,t.nodeGroup=this;let i=Shell.get(t.html),o=i.fragment.cloneNode(!0),r=o.childNodes;return this.startNode=r[0],this.endNode=r[r.length-1],[o,i]}applyExprs(t,e=null){e=e||this.paths;let l,s,i=t.length-1;for(let o of e.toReversed())l=t[i],s&&s!==this.rootNg.root&&s!==o.nodeMarker&&Object.keys(this.currentComponentProps).length&&(this.applyComponentExprs(s,this.currentComponentProps),this.currentComponentProps={}),i=o.apply(l,t,i,this.currentComponentProps),s=o.nodeMarker,i--;s&&s!==this.rootNg.root&&Object.keys(this.currentComponentProps).length&&(this.applyComponentExprs(s,this.currentComponentProps),this.currentComponentProps={}),this.updateStyles(),this.nodesCache=null}applyComponentExprs(t,e){let l=getObjectHash(e),s=t.tagName.endsWith("-SOLARITE-PLACEHOLDER"),i=t.hasAttribute("_is");s||i?t=this.createNewComponent(t,s,e):t.render&&Globals.componentHash.get(t)!==l&&t.render(e),Globals.componentHash.set(t,l)}createNewComponent(t,e=void 0,l=void 0){void 0===e&&(e=!t.hasAttribute("_is"));let s=(e?t.tagName.endsWith("-SOLARITE-PLACEHOLDER")?t.tagName.slice(0,-21):t.tagName:t.getAttribute("is")).toLowerCase(),i={...l||{}};if(t.attributes.length){l||(l={});for(let e of t.attributes)l.hasOwnProperty(e.name)||(l[e.name]=e.value)}let o=customElements.get(s);if(!o)throw Error(`The custom tag name ${s} is not registered.`);let r=[...t.childNodes];Globals.pendingChildren.push(r);let n=new o(l,r);e||n.setAttribute("is",t.getAttribute("is").toLowerCase()),t.replaceWith(n);for(let t in l){let e=l[t];if(t.startsWith("on")&&"function"==typeof e&&n.addEventListener(t.slice(2),(t=>e(t,n))),("value"===t||"data-value"===t)&&Util.isPath(e)){let[t,l]=[e[0],e.slice(1)];n.value=delve(t,l),n.addEventListener("input",(e=>{delve(t,l,Util.getInputValue(n))}),!0)}}let a=t.getAttribute("data-id")||t.getAttribute("id");a&&delve(this.getRootNode(),a.split(/\./g),n);for(let e of this.paths)e.nodeMarker===t&&(e.nodeMarker=n),e.nodeBefore===t&&(e.nodeBefore=n);this.startNode===t&&(this.startNode=n),this.endNode===t&&(this.endNode=n),n.renderFirstTime&&n.renderFirstTime();for(let e of t.attributes)"_is"!==e.name&&n.setAttribute(e.name,e.value);for(let t in i){let e=i[t];"boolean"==typeof e?!1!==e&&null!=e&&n.setAttribute(t,""):["number","bigint","string"].includes(typeof e)&&n.setAttribute(t,e)}return n}getNodes(){let t=this.nodesCache;if(t)return t;t=[];let e=this.startNode,l=this.endNode?.nextSibling;for(;e&&e!==l;)t.push(e),e=e.nextSibling;return this.nodesCache=t,t}getParentNode(){return this.startNode?.parentNode}getRootNode(){return this.rootNg.root}getRootNodeGroup(){return this.rootNg}updatePaths(t,e,l){this.paths.length=e.length;for(let s=0;e.length>s;s++){let i=e[s].clone(t,l);i.parentNg=this,this.paths[s]=i}}updateStyles(){if(this.styles)for(let[t,e]of this.styles)e!==t.textContent&&Util.bindStyles(t,this.getRootNodeGroup().root)}activateEmbeds(root,shell,pathOffset=0){for(let t of shell.staticComponents){pathOffset&&(t=t.slice(0,-pathOffset));let e=resolveNodePath(root,t);root!==e&&this.createNewComponent(e)}let rootEl=this.rootNg.root;if(rootEl){if(!1!==this.options?.ids)for(let t of shell.ids){pathOffset&&(t=t.slice(0,-pathOffset));let e=resolveNodePath(root,t),l=e.getAttribute("data-id")||e.getAttribute("id");if(l){if(rootEl[l]&&!(rootEl[l]instanceof Node))throw Error(`${rootEl.constructor.name}.${l} already has a value.  Can't set it as a reference to <${e.tagName.toLowerCase()} id="${l}">`);delve(rootEl,l.split(/\./g),e)}}if(!1!==this.options?.styles){shell.styles.length&&(this.styles=new Map);for(let t of shell.styles){pathOffset&&(t=t.slice(0,-pathOffset));let e=resolveNodePath(root,t);Util.bindStyles(e,rootEl),this.styles.set(e,e.textContent)}}if(!1!==this.options?.scripts)for(let path of shell.scripts){pathOffset&&(path=path.slice(0,-pathOffset));let script=resolveNodePath(root,path);eval(script.textContent)}}}}class RootNodeGroup extends NodeGroup{root;constructor(t,e,l){super(t),this.options=l,this.rootNg=this;let[s,i]=this.init(t),o=0,r=s;if(e){let t;if(e.childNodes.length&&(t=document.createDocumentFragment(),t.append(...e.childNodes)),this.root=e,isReplaceEl(s,e)){e.append(...s.children[0].childNodes);for(let t of s.children[0].attributes)e.hasAttribute(t.name)||e.setAttribute(t.name,t.value);o=1}else 1===s.childNodes.length&&3===s.childNodes[0].nodeType&&""===s.childNodes[0].textContent||e.append(...s.childNodes);if(t){for(let l of e.querySelectorAll("slot[name]")){let e=l.getAttribute("name");if(e){let s=t.querySelectorAll(`[slot='${e}']`);l.append(...s)}}let l=e.querySelector("slot:not([name])");l?l.append(t):e.append(t)}r=e,this.startNode=e,this.endNode=e}else{let t=getSingleEl(s);this.root=t||s,t&&(r=t,o=1)}this.updatePaths(r,i.paths,o),this.activateEmbeds(r,i,o),this.applyExprs(t.exprs)}}function getSingleEl(t){let e=[];for(let l of t.childNodes)if(1===l.nodeType||3===l.nodeType&&l.textContent.trim().length){if(e.length)return null;e.push(l)}return e[0]}function isReplaceEl(t,e){return e.tagName.includes("-")&&1===t.children.length&&t.children[0].tagName.replace("-SOLARITE-PLACEHOLDER","")===e.tagName}class Template{exprs=[];html=[];hashedFields;parentPath;nodeGroup;paths=[];constructor(t,e){this.html=t,this.exprs=e}toJSON(){return this.hashedFields||(this.hashedFields=[getObjectId(this.html),this.exprs]),this.hashedFields}render(t=null,e={}){let l,s=!1;return t?(l=Globals.nodeGroups.get(t),l||(l=new RootNodeGroup(this,t,e),Globals.nodeGroups.set(t,l),s=!0)):(l=new RootNodeGroup(this,null,e),t=l.getRootNode(),Globals.nodeGroups.set(t,l),s=!0),s||(1!==this.html?.length||this.html[0]?l.applyExprs(this.exprs):t.innerHTML=""),t}getExactKey(){return this.exactKey||(this.exactKey=getObjectHash(this)),this.exactKey}getCloseKey(){return this.closeKey||(this.closeKey="@"+this.toJSON()[0]),this.closeKey}}function r(t=void 0,...e){if(!(t instanceof Node)){if(Array.isArray(t))return new Template(t,e);if("string"==typeof t||t instanceof String){t.match(/^\s^</)&&(t=t.trim());let e=document.createElement("template");e.innerHTML=t;let l=Util.trimEmptyNodes(e.content.childNodes);return 1===l.length?l[0]:e.content}if(void 0===t)return(t,...e)=>r(t,...e).render();if(t instanceof Template)return t.render();if("object"==typeof t){let e=t;if(Globals.objToEl.has(e))return((...t)=>{let l=r(...t).render();Globals.objToEl.set(e,l)}).bind(e);{Globals.objToEl.set(e,null),e.render();let t=Globals.objToEl.get(e);Globals.objToEl.delete(e);for(let l in e)t[l]="function"==typeof e[l]?e[l].bind(t):e[l];return t}}throw Error("Unsupported arguments.")}{let l=t,s=e[0];if(!(e[0]instanceof Template)){l.shadowRoot&&(l.innerHTML="");let t=e[0],s=(e,...s)=>(Globals.rendered.add(l),new Template(e,s).render(l,t));return s}if(!(e[0]instanceof Template))throw Error("unsupported");s.render(l,e[1]),!l.childNodes.length&&this&&l.append(this.rootNg.getParentNode())}}function defineClass(t,e,l){if(!customElements.getName(t)){(e=e||camelToDashes(t.name)).includes("-")||(e+="-element");let s=null;l&&(s={extends:l}),customElements.define(e,t,s)}}function createSolarite(t=null){let e=HTMLElement;t&&!t.includes("-")&&(t=t.toLowerCase(),e=Globals.elementClasses[t],e||(e=document.createElement(t).constructor,Globals.elementClasses[t]=e));let l=new Proxy(e,{construct:(e,l,s)=>(defineClass(s,null,t),Reflect.construct(e,l,s))});return class extends l{onConnect=Util$1.callback();onFirstConnect=Util$1.callback();onDisconnect=Util$1.callback();constructor(t={}){super(),!0===t.render?this.render():!1===t.render&&Globals.rendered.add(this);let e=Globals.pendingChildren.pop();e&&(this.querySelector("slot")||this).append(...e),Object.defineProperty(this,"html",{set(e){Globals.rendered.add(this),"string"==typeof e?(console.warn("Assigning to this.html without the r template prefix."),this.innerHTML=e):this.modifications=r(this,e,t)}})}renderFirstTime(){!Globals.rendered.has(this)&&this.render&&this.render()}connectedCallback(){this.renderFirstTime(),Globals.connected.has(this)||(Globals.connected.add(this),this.onFirstConnect()),this.onConnect()}disconnectedCallback(){this.onDisconnect()}static define(e=null){defineClass(this,e,t)}}}let Solarite=new Proxy(createSolarite(),{apply:(t,e,l)=>createSolarite(...l)}),getInputValue=Util.getInputValue;export{ArgType,Globals,Solarite,Template,delve,getArg,getInputValue,r};

package/benchmarks/naive/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8"/>
+	<title>Solarite Naive</title>
+	<link href="/css/currentStyle.css" rel="stylesheet"/>
+	<style>h1 { font-size: 16px !important }</style>
+</head>
+<body>
+<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+<div id='main'></div>
+<script type="module" src='main.js'></script>
+</body>
+</html>

package/benchmarks/naive/main.js

@@ -0,0 +1,339 @@
+import {Solarite, r} from './Solarite.min.js';
+//import {Solarite, r} from '../../src/solarite/Solarite.js';
+let debug2 = window.location.search.includes('debug');
+let benchmark = window.location.search.includes('benchmark');
+
+if (debug2) {
+	window.getHtml = (item, includeComments=false) => {
+		if (!item)
+			return item;
+
+		if (item.fragment)
+			item = item.fragment; // Shell
+		if (item instanceof DocumentFragment)
+			item = [...item.childNodes]
+
+		else if (item.getNodes)
+			item = item.getNodes()
+
+		let result;
+		if (Array.isArray(item)) {
+			if (!includeComments)
+				item = item.filter(n => n.nodeType !==8)
+
+			result = item.map(n => n.nodeType === 8 ? `<!--${n.textContent}-->` : n.outerHTML || n.textContent).join('|')
+		}
+		else
+			result = item.outerHTML || item.textContent
+
+		if (!includeComments)
+			result = result.replace(/(<|\x3C)!--(.*?)-->/g, '')
+
+		return result;
+	}
+}
+
+
+
+let idCounter = 1;
+const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"],
+	colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
+	nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+
+function _random (max) {
+	return Math.round(Math.random() * 1000) % max
+}
+
+function buildData(count) {
+	let data = new Array(count);
+	for (let i = 0; i < count; i++) {
+		data[i] = {
+			id: idCounter++,
+			label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
+		}
+	}
+	return data;
+}
+
+
+
+
+class JSFrameworkBenchmark extends Solarite {
+	data = [];
+
+	constructor() {
+		// Disable features we don't need, for performance.
+		// At least until these new features are more performant.
+		super({ids: false, scripts: false, styles: false})
+	}
+
+	// quickly mimic what the js-framework-benchmark does.
+	// This is useful to see if performance changes after code modifications.
+	benchmark(runs=1) {
+		let times = [];
+		let results = [];
+
+		// Helper function to calculate geometric mean
+		const geometricMean = (arr) => {
+			return Math.pow(arr.reduce((a, b) => (a || .1) * (b || .1), 1), 1 / arr.length);
+		};
+
+		// Time the creation of rows
+		for (let i=0; i<runs; i++) {
+			let start = performance.now();
+			this.data = buildData(1000);
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Create rows: ${times[times.length - 1]}ms`);
+
+			// Time replacing all rows
+			start = performance.now();
+			this.data = buildData(1000);
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Replace all rows: ${times[times.length - 1]}ms`);
+
+			// Time the partial update
+			start = performance.now();
+			let len = this.data.length;
+			for (let i = 0; i < len; i += 10) {
+				this.data[i].label += ' !!!';
+			}
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Partial update: ${times[times.length - 1]}ms`);
+
+			// Time selecting a row
+			start = performance.now();
+			this.data[1].selected = !this.data[1].selected;
+			let modifications = this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Select row: ${times[times.length - 1]}ms`);
+
+			// Time swapping rows
+			start = performance.now();
+			let temp = this.data[1];
+			this.data[1] = this.data[998];
+			this.data[998] = temp;
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Swap rows: ${times[times.length - 1]}ms`);
+
+			// Time removing a row
+			start = performance.now();
+			this.data.splice(1, 1);
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Remove row: ${times[times.length - 1]}ms`);
+
+			// Time creating many rows
+			start = performance.now();
+			this.data = buildData(10_000);
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Create many rows: ${times[times.length - 1]}ms`);
+
+			// Time appending rows to large table
+			start = performance.now();
+			this.data.push(...buildData(1000));
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Append rows: ${times[times.length - 1]}ms`);
+
+			// Time clearing rows
+			start = performance.now();
+			this.data = [];
+			this.render();
+			times.push(performance.now() - start);
+			if (runs===1) console.log(`Clear rows: ${times[times.length - 1]}ms`);
+
+			// Log the geometric mean of all steps
+			const geoMean = geometricMean(times);
+			results.push(geoMean);
+			console.log(`Geometric mean: ${geoMean}ms`);
+			times = [];
+		}
+
+		if (runs > 1) {
+			console.log('---');
+			let avg = results.reduce((a, b) => a + b) / results.length;
+			console.log(`Min: ${Math.min(...results)}ms`);
+			console.log(`Max: ${Math.max(...results)}ms`);
+			console.log(`Avg: ${avg}ms`);
+		}
+
+
+	}
+
+	run() {
+		if (debug2)
+			var start = performance.now();
+		this.data = buildData(1000);
+		let modifications = this.render()
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	runLots() {
+		if (debug2)
+			var start = performance.now();
+		this.data = buildData(10_000);
+		let modifications = this.render()
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	add() {
+		if (debug2)
+			var start = performance.now();
+
+		this.data.push(...buildData(1000));
+		let modifications = this.render();
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	update() {
+		if (debug2)
+			var start = performance.now();
+		let len = this.data.length;
+		for (let i=0; i<len; i+=10)
+			this.data[i].label += ' !!!';
+
+		this.render()
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	swapRows() {
+		if (debug2)
+			var start = performance.now();
+
+		if (this.data.length > 998) {
+
+			let temp = this.data[1];
+			this.data[1] = this.data[998];
+			this.data[998] = temp;
+			var modifications = this.render()
+		}
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	clear() {
+		if (debug2)
+			var start = performance.now();
+		this.data = [];
+		let modifications = this.render()
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	remove(id) {
+		if (debug2)
+			var start = performance.now();
+
+		let index = this.data.findIndex(row=>row.id===id);
+
+		this.data.splice(index, 1);
+		let modifications = this.render();
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	setSelected(row) {
+		if (debug2)
+			var start = performance.now();
+
+		// row.selected = !row.selected;
+		// let modifications = this.render();
+
+		row.selected = !row.selected;
+		let modifications = this.render();
+
+		if (debug2) {
+			console.log(performance.now() - start)
+		}
+	}
+
+	render() {
+		let options = {ids: false, scripts: false, styles: false} // doesn't seem to make that much performance difference to disable these?
+		r(this, options)`
+		<div class="container">
+			<div class="jumbotron">
+				<div class="row">
+					<div class="col-md-6">
+						<h1>Solarite Keyed</h1>
+					</div>
+					<div class="col-md-6">
+						<div class="row">
+							<div class="col-sm-6 smallpad">
+								<button id="run" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.run}>Create 1,000 rows</button>
+							</div>
+							<div class="col-sm-6 smallpad">
+								<button id="runlots" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.runLots}>Create 10,000 rows</button>
+							</div>
+							<div class="col-sm-6 smallpad">
+								<button id="add" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.add}>Append 1,000 rows</button>
+							</div>
+							<div class="col-sm-6 smallpad">
+								<button id="update" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.update}>Update every 10th row</button>
+							</div>
+							<div class="col-sm-6 smallpad">
+								<button id="clear" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.clear}>Clear</button>
+							</div>
+							<div class="col-sm-6 smallpad">
+								<button id="swaprows" class="btn btn-primary btn-block" type="button" 
+									onclick=${this.swapRows}>Swap Rows</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<table class="table table-hover table-striped test-data"><tbody>
+				${this.data.map(row =>
+					r`<tr class=${row.selected ? 'danger' : ''}>
+						<td class="col-md-1">${row.id}</td>
+						<td class="col-md-4">
+							<a onclick=${[this.setSelected, row]}>${row.label}</a></td>
+						<td class="col-md-1">
+							<a onclick=${[this.remove, row.id]}>
+								<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
+						</td>
+						<td class="col-md-6"/>
+					</tr>`
+				)}
+			</tbody></table>
+		</div>`;
+
+		return this.modifications;
+	}
+}
+
+let app = new JSFrameworkBenchmark();
+document.body.append(app);
+
+
+
+if (benchmark)
+	app.benchmark(50);
+

package/benchmarks/naive/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "js-framework-benchmark-non-keyed-redcomponent",
+  "version": "1.1.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "js-framework-benchmark-non-keyed-redcomponent",
+      "version": "1.1.1",
+      "license": "Apache-2.0"
+    }
+  }
+}

package/benchmarks/naive/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "js-framework-benchmark-non-keyed-solarite",
+  "version": "1.1.1",
+  "description": "Solarite demo",
+  "main": "index.js",
+  "js-framework-benchmark": {
+    "frameworkVersion": "",
+    "frameworkHomeURL": "https://vorticode.github.io/solarite",
+    "issues": []
+  },
+  "scripts": {
+    "build-dev": "echo 0",
+    "build-prod": "echo 0"
+  },
+  "keywords": [],
+  "author": "Eric Poggel",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/krausest/js-framework-benchmark",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/krausest/js-framework-benchmark.git"
+  }
+}

package/benchmarks/readme.md

@@ -0,0 +1,48 @@
+These are implementations for krausest's  https://github.com/krausest/js-framework-benchmark.
+
+To use them, either copy them or symbolic link these folders into the frameworks/keyed and frameworks/non-keyed folders.
+
+
+## How to run the js-framework-benchmark tests
+
+### To Run a test:
+Run `npm start` from the folder where you've cloned the js-framework-benchmark repository.
+in another command window:
+
+
+```
+cd webdriver-ts
+npm run bench non-keyed/solarite-naive keyed/solarite-naive
+cd ../webdriver-ts-results
+npm ci
+cd ../webdriver-ts
+npm run results
+cd ../
+```
+Then open:
+http://localhost:8080/webdriver-ts-results/table.html
+
+### Run every test I care about:
+
+```
+npm run bench non-keyed/solarite-naive keyed/solarite-naive keyed/redcomponent keyed/vanillajs keyed/inferno keyed/solid keyed/svelte keyed/vue keyed/lit keyed/preact keyed/react keyed/angular keyed/ember keyed/knockout keyed/alpine non-keyed/mikado non-keyed/delorean non-keyed/vanillajs non-keyed/vanillajs-1 non-keyed/inferno non-keyed/lit non-keyed/redcomponent non-keyed/svelte non-keyed/vue non-keyed/react
+```
+
+### Run a single benchmark within a test (partialUpdate below - numbers start with 01_)
+```
+cd webdriver-ts
+npm run bench -- --framework keyed/redcomponent --benchmark 09_
+cd ../webdriver-ts-results
+npm ci
+cd ../webdriver-ts
+npm run results
+```
+
+### To see if it's keyed:
+npm run isKeyed keyed/redcomponent
+
+### Run Instance for testing
+From the keyed/redcomponent folder:
+`npm run build-prod`
+http://localhost:8080/frameworks/non-keyed/redcomponent/index.html
+

package/build/build.bat

@@ -1,4 +1,4 @@
 @echo off
 node build ../src/solarite/Solarite.js ../dist/Solarite.js
-rem copy "..\dist\Solarite.min.js" "..\js-framework-benchmark\keyed\solarite\Solarite.min.js"
-rem copy "..\dist\Solarite.min.js" "..\js-framework-benchmark\non-keyed\solarite\Solarite.min.js"
+copy "..\dist\Solarite.min.js" "../benchmarks/naive/Solarite.min.js"
+copy "..\dist\Solarite.min.js" "../benchmarks/watch/Solarite.min.js"

package/build/build.js

@@ -34,7 +34,7 @@ const rollupOptions = {
 const terserOptions = {
 	ecma: 8, // Decreases size.
 	format: {
-		preamble: `// Version ${timestamp()}\r\n// License: MIT\r\n// https://github.com/vorticode/Solarite`,
+		preamble: `// Version ${timestamp()}\r\n// License: MIT\r\n// http://vorticode.github.io/solarite`,
 	},
 	compress: { // https://github.com/terser/terser#compress-options
 		passes: 5,