solarite 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -5
- package/benchmarks/naive/Solarite.min.js +0 -4
- package/benchmarks/naive/index.html +0 -14
- package/benchmarks/naive/main.js +0 -339
- package/benchmarks/naive/package-lock.json +0 -13
- package/benchmarks/naive/package.json +0 -23
- package/benchmarks/readme.md +0 -48
- package/build/build.bat +0 -4
- package/build/build.js +0 -139
- package/build/lib/rollup.min.js +0 -11
- package/build/lib/source-map.min.js +0 -1
- package/build/lib/terser.min.js +0 -1
- package/docs/index.md +0 -883
- package/docs/js/Playground.js +0 -184
- package/docs/js/codemirror/codemirror6.js +0 -32513
- package/docs/js/codemirror/themeSolarIce.js +0 -312
- package/docs/js/documentation.js +0 -32
- package/docs/js/ui/CodeEditor.js +0 -978
- package/docs/js/ui/DarkToggle.js +0 -52
- package/docs/js/ui/FlexResizer.js +0 -152
- package/docs/js/util/Draggable2.js +0 -151
- package/docs/js/util/Errors.js +0 -20
- package/docs/js/util/Html.js +0 -147
- package/docs/js/util/Icons.js +0 -623
- package/docs/js/util/Input.js +0 -253
- package/docs/js/util/Util.js +0 -88
- package/docs/js/util/delve.js +0 -43
- package/docs/media/FiraCode400.woff2 +0 -0
- package/docs/media/cabin-latin-700.woff2 +0 -0
- package/docs/media/documentation.css +0 -96
- package/docs/media/eternium.css +0 -1123
- package/docs/media/solarite-machine.webp +0 -0
- package/index.html +0 -761
- package/tests/Benchmark.test.js +0 -319
- package/tests/Solarite.test.js +0 -3838
- package/tests/Testimony.js +0 -809
- package/tests/index.html +0 -46
- package/tests/run.bat +0 -2
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solarite",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Solarite is a small, fast, compilation-free JavaScript web component library that closely follows modern web standards.",
|
|
5
5
|
"main": "dist/Solarite.js",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
6
|
+
"files": [
|
|
7
|
+
"readme.md",
|
|
8
|
+
"dist",
|
|
9
|
+
"src"
|
|
10
|
+
],
|
|
10
11
|
"scripts": {
|
|
11
12
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
13
|
},
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
// Version 2024.10.5.1955
|
|
2
|
-
// License: MIT
|
|
3
|
-
// http://vorticode.github.io/solarite
|
|
4
|
-
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};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8"/>
|
|
5
|
-
<title>Solarite Naive</title>
|
|
6
|
-
<link href="/css/currentStyle.css" rel="stylesheet"/>
|
|
7
|
-
<style>h1 { font-size: 16px !important }</style>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
|
|
11
|
-
<div id='main'></div>
|
|
12
|
-
<script type="module" src='main.js'></script>
|
|
13
|
-
</body>
|
|
14
|
-
</html>
|
package/benchmarks/naive/main.js
DELETED
|
@@ -1,339 +0,0 @@
|
|
|
1
|
-
import {Solarite, r} from './Solarite.min.js';
|
|
2
|
-
//import {Solarite, r} from '../../src/solarite/Solarite.js';
|
|
3
|
-
let debug2 = window.location.search.includes('debug');
|
|
4
|
-
let benchmark = window.location.search.includes('benchmark');
|
|
5
|
-
|
|
6
|
-
if (debug2) {
|
|
7
|
-
window.getHtml = (item, includeComments=false) => {
|
|
8
|
-
if (!item)
|
|
9
|
-
return item;
|
|
10
|
-
|
|
11
|
-
if (item.fragment)
|
|
12
|
-
item = item.fragment; // Shell
|
|
13
|
-
if (item instanceof DocumentFragment)
|
|
14
|
-
item = [...item.childNodes]
|
|
15
|
-
|
|
16
|
-
else if (item.getNodes)
|
|
17
|
-
item = item.getNodes()
|
|
18
|
-
|
|
19
|
-
let result;
|
|
20
|
-
if (Array.isArray(item)) {
|
|
21
|
-
if (!includeComments)
|
|
22
|
-
item = item.filter(n => n.nodeType !==8)
|
|
23
|
-
|
|
24
|
-
result = item.map(n => n.nodeType === 8 ? `<!--${n.textContent}-->` : n.outerHTML || n.textContent).join('|')
|
|
25
|
-
}
|
|
26
|
-
else
|
|
27
|
-
result = item.outerHTML || item.textContent
|
|
28
|
-
|
|
29
|
-
if (!includeComments)
|
|
30
|
-
result = result.replace(/(<|\x3C)!--(.*?)-->/g, '')
|
|
31
|
-
|
|
32
|
-
return result;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
let idCounter = 1;
|
|
39
|
-
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"],
|
|
40
|
-
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
|
|
41
|
-
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
|
|
42
|
-
|
|
43
|
-
function _random (max) {
|
|
44
|
-
return Math.round(Math.random() * 1000) % max
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function buildData(count) {
|
|
48
|
-
let data = new Array(count);
|
|
49
|
-
for (let i = 0; i < count; i++) {
|
|
50
|
-
data[i] = {
|
|
51
|
-
id: idCounter++,
|
|
52
|
-
label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
return data;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
class JSFrameworkBenchmark extends Solarite {
|
|
62
|
-
data = [];
|
|
63
|
-
|
|
64
|
-
constructor() {
|
|
65
|
-
// Disable features we don't need, for performance.
|
|
66
|
-
// At least until these new features are more performant.
|
|
67
|
-
super({ids: false, scripts: false, styles: false})
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// quickly mimic what the js-framework-benchmark does.
|
|
71
|
-
// This is useful to see if performance changes after code modifications.
|
|
72
|
-
benchmark(runs=1) {
|
|
73
|
-
let times = [];
|
|
74
|
-
let results = [];
|
|
75
|
-
|
|
76
|
-
// Helper function to calculate geometric mean
|
|
77
|
-
const geometricMean = (arr) => {
|
|
78
|
-
return Math.pow(arr.reduce((a, b) => (a || .1) * (b || .1), 1), 1 / arr.length);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
// Time the creation of rows
|
|
82
|
-
for (let i=0; i<runs; i++) {
|
|
83
|
-
let start = performance.now();
|
|
84
|
-
this.data = buildData(1000);
|
|
85
|
-
this.render();
|
|
86
|
-
times.push(performance.now() - start);
|
|
87
|
-
if (runs===1) console.log(`Create rows: ${times[times.length - 1]}ms`);
|
|
88
|
-
|
|
89
|
-
// Time replacing all rows
|
|
90
|
-
start = performance.now();
|
|
91
|
-
this.data = buildData(1000);
|
|
92
|
-
this.render();
|
|
93
|
-
times.push(performance.now() - start);
|
|
94
|
-
if (runs===1) console.log(`Replace all rows: ${times[times.length - 1]}ms`);
|
|
95
|
-
|
|
96
|
-
// Time the partial update
|
|
97
|
-
start = performance.now();
|
|
98
|
-
let len = this.data.length;
|
|
99
|
-
for (let i = 0; i < len; i += 10) {
|
|
100
|
-
this.data[i].label += ' !!!';
|
|
101
|
-
}
|
|
102
|
-
this.render();
|
|
103
|
-
times.push(performance.now() - start);
|
|
104
|
-
if (runs===1) console.log(`Partial update: ${times[times.length - 1]}ms`);
|
|
105
|
-
|
|
106
|
-
// Time selecting a row
|
|
107
|
-
start = performance.now();
|
|
108
|
-
this.data[1].selected = !this.data[1].selected;
|
|
109
|
-
let modifications = this.render();
|
|
110
|
-
times.push(performance.now() - start);
|
|
111
|
-
if (runs===1) console.log(`Select row: ${times[times.length - 1]}ms`);
|
|
112
|
-
|
|
113
|
-
// Time swapping rows
|
|
114
|
-
start = performance.now();
|
|
115
|
-
let temp = this.data[1];
|
|
116
|
-
this.data[1] = this.data[998];
|
|
117
|
-
this.data[998] = temp;
|
|
118
|
-
this.render();
|
|
119
|
-
times.push(performance.now() - start);
|
|
120
|
-
if (runs===1) console.log(`Swap rows: ${times[times.length - 1]}ms`);
|
|
121
|
-
|
|
122
|
-
// Time removing a row
|
|
123
|
-
start = performance.now();
|
|
124
|
-
this.data.splice(1, 1);
|
|
125
|
-
this.render();
|
|
126
|
-
times.push(performance.now() - start);
|
|
127
|
-
if (runs===1) console.log(`Remove row: ${times[times.length - 1]}ms`);
|
|
128
|
-
|
|
129
|
-
// Time creating many rows
|
|
130
|
-
start = performance.now();
|
|
131
|
-
this.data = buildData(10_000);
|
|
132
|
-
this.render();
|
|
133
|
-
times.push(performance.now() - start);
|
|
134
|
-
if (runs===1) console.log(`Create many rows: ${times[times.length - 1]}ms`);
|
|
135
|
-
|
|
136
|
-
// Time appending rows to large table
|
|
137
|
-
start = performance.now();
|
|
138
|
-
this.data.push(...buildData(1000));
|
|
139
|
-
this.render();
|
|
140
|
-
times.push(performance.now() - start);
|
|
141
|
-
if (runs===1) console.log(`Append rows: ${times[times.length - 1]}ms`);
|
|
142
|
-
|
|
143
|
-
// Time clearing rows
|
|
144
|
-
start = performance.now();
|
|
145
|
-
this.data = [];
|
|
146
|
-
this.render();
|
|
147
|
-
times.push(performance.now() - start);
|
|
148
|
-
if (runs===1) console.log(`Clear rows: ${times[times.length - 1]}ms`);
|
|
149
|
-
|
|
150
|
-
// Log the geometric mean of all steps
|
|
151
|
-
const geoMean = geometricMean(times);
|
|
152
|
-
results.push(geoMean);
|
|
153
|
-
console.log(`Geometric mean: ${geoMean}ms`);
|
|
154
|
-
times = [];
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
if (runs > 1) {
|
|
158
|
-
console.log('---');
|
|
159
|
-
let avg = results.reduce((a, b) => a + b) / results.length;
|
|
160
|
-
console.log(`Min: ${Math.min(...results)}ms`);
|
|
161
|
-
console.log(`Max: ${Math.max(...results)}ms`);
|
|
162
|
-
console.log(`Avg: ${avg}ms`);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
run() {
|
|
169
|
-
if (debug2)
|
|
170
|
-
var start = performance.now();
|
|
171
|
-
this.data = buildData(1000);
|
|
172
|
-
let modifications = this.render()
|
|
173
|
-
|
|
174
|
-
if (debug2) {
|
|
175
|
-
console.log(performance.now() - start)
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
runLots() {
|
|
180
|
-
if (debug2)
|
|
181
|
-
var start = performance.now();
|
|
182
|
-
this.data = buildData(10_000);
|
|
183
|
-
let modifications = this.render()
|
|
184
|
-
|
|
185
|
-
if (debug2) {
|
|
186
|
-
console.log(performance.now() - start)
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
add() {
|
|
191
|
-
if (debug2)
|
|
192
|
-
var start = performance.now();
|
|
193
|
-
|
|
194
|
-
this.data.push(...buildData(1000));
|
|
195
|
-
let modifications = this.render();
|
|
196
|
-
|
|
197
|
-
if (debug2) {
|
|
198
|
-
console.log(performance.now() - start)
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
update() {
|
|
203
|
-
if (debug2)
|
|
204
|
-
var start = performance.now();
|
|
205
|
-
let len = this.data.length;
|
|
206
|
-
for (let i=0; i<len; i+=10)
|
|
207
|
-
this.data[i].label += ' !!!';
|
|
208
|
-
|
|
209
|
-
this.render()
|
|
210
|
-
|
|
211
|
-
if (debug2) {
|
|
212
|
-
console.log(performance.now() - start)
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
swapRows() {
|
|
217
|
-
if (debug2)
|
|
218
|
-
var start = performance.now();
|
|
219
|
-
|
|
220
|
-
if (this.data.length > 998) {
|
|
221
|
-
|
|
222
|
-
let temp = this.data[1];
|
|
223
|
-
this.data[1] = this.data[998];
|
|
224
|
-
this.data[998] = temp;
|
|
225
|
-
var modifications = this.render()
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
if (debug2) {
|
|
229
|
-
console.log(performance.now() - start)
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
clear() {
|
|
234
|
-
if (debug2)
|
|
235
|
-
var start = performance.now();
|
|
236
|
-
this.data = [];
|
|
237
|
-
let modifications = this.render()
|
|
238
|
-
|
|
239
|
-
if (debug2) {
|
|
240
|
-
console.log(performance.now() - start)
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
remove(id) {
|
|
245
|
-
if (debug2)
|
|
246
|
-
var start = performance.now();
|
|
247
|
-
|
|
248
|
-
let index = this.data.findIndex(row=>row.id===id);
|
|
249
|
-
|
|
250
|
-
this.data.splice(index, 1);
|
|
251
|
-
let modifications = this.render();
|
|
252
|
-
|
|
253
|
-
if (debug2) {
|
|
254
|
-
console.log(performance.now() - start)
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
setSelected(row) {
|
|
259
|
-
if (debug2)
|
|
260
|
-
var start = performance.now();
|
|
261
|
-
|
|
262
|
-
// row.selected = !row.selected;
|
|
263
|
-
// let modifications = this.render();
|
|
264
|
-
|
|
265
|
-
row.selected = !row.selected;
|
|
266
|
-
let modifications = this.render();
|
|
267
|
-
|
|
268
|
-
if (debug2) {
|
|
269
|
-
console.log(performance.now() - start)
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
render() {
|
|
274
|
-
let options = {ids: false, scripts: false, styles: false} // doesn't seem to make that much performance difference to disable these?
|
|
275
|
-
r(this, options)`
|
|
276
|
-
<div class="container">
|
|
277
|
-
<div class="jumbotron">
|
|
278
|
-
<div class="row">
|
|
279
|
-
<div class="col-md-6">
|
|
280
|
-
<h1>Solarite Keyed</h1>
|
|
281
|
-
</div>
|
|
282
|
-
<div class="col-md-6">
|
|
283
|
-
<div class="row">
|
|
284
|
-
<div class="col-sm-6 smallpad">
|
|
285
|
-
<button id="run" class="btn btn-primary btn-block" type="button"
|
|
286
|
-
onclick=${this.run}>Create 1,000 rows</button>
|
|
287
|
-
</div>
|
|
288
|
-
<div class="col-sm-6 smallpad">
|
|
289
|
-
<button id="runlots" class="btn btn-primary btn-block" type="button"
|
|
290
|
-
onclick=${this.runLots}>Create 10,000 rows</button>
|
|
291
|
-
</div>
|
|
292
|
-
<div class="col-sm-6 smallpad">
|
|
293
|
-
<button id="add" class="btn btn-primary btn-block" type="button"
|
|
294
|
-
onclick=${this.add}>Append 1,000 rows</button>
|
|
295
|
-
</div>
|
|
296
|
-
<div class="col-sm-6 smallpad">
|
|
297
|
-
<button id="update" class="btn btn-primary btn-block" type="button"
|
|
298
|
-
onclick=${this.update}>Update every 10th row</button>
|
|
299
|
-
</div>
|
|
300
|
-
<div class="col-sm-6 smallpad">
|
|
301
|
-
<button id="clear" class="btn btn-primary btn-block" type="button"
|
|
302
|
-
onclick=${this.clear}>Clear</button>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="col-sm-6 smallpad">
|
|
305
|
-
<button id="swaprows" class="btn btn-primary btn-block" type="button"
|
|
306
|
-
onclick=${this.swapRows}>Swap Rows</button>
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
<table class="table table-hover table-striped test-data"><tbody>
|
|
313
|
-
${this.data.map(row =>
|
|
314
|
-
r`<tr class=${row.selected ? 'danger' : ''}>
|
|
315
|
-
<td class="col-md-1">${row.id}</td>
|
|
316
|
-
<td class="col-md-4">
|
|
317
|
-
<a onclick=${[this.setSelected, row]}>${row.label}</a></td>
|
|
318
|
-
<td class="col-md-1">
|
|
319
|
-
<a onclick=${[this.remove, row.id]}>
|
|
320
|
-
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
|
|
321
|
-
</td>
|
|
322
|
-
<td class="col-md-6"/>
|
|
323
|
-
</tr>`
|
|
324
|
-
)}
|
|
325
|
-
</tbody></table>
|
|
326
|
-
</div>`;
|
|
327
|
-
|
|
328
|
-
return this.modifications;
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
let app = new JSFrameworkBenchmark();
|
|
333
|
-
document.body.append(app);
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
if (benchmark)
|
|
338
|
-
app.benchmark(50);
|
|
339
|
-
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "js-framework-benchmark-non-keyed-redcomponent",
|
|
3
|
-
"version": "1.1.1",
|
|
4
|
-
"lockfileVersion": 3,
|
|
5
|
-
"requires": true,
|
|
6
|
-
"packages": {
|
|
7
|
-
"": {
|
|
8
|
-
"name": "js-framework-benchmark-non-keyed-redcomponent",
|
|
9
|
-
"version": "1.1.1",
|
|
10
|
-
"license": "Apache-2.0"
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "js-framework-benchmark-non-keyed-solarite",
|
|
3
|
-
"version": "1.1.1",
|
|
4
|
-
"description": "Solarite demo",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"js-framework-benchmark": {
|
|
7
|
-
"frameworkVersion": "",
|
|
8
|
-
"frameworkHomeURL": "https://vorticode.github.io/solarite",
|
|
9
|
-
"issues": []
|
|
10
|
-
},
|
|
11
|
-
"scripts": {
|
|
12
|
-
"build-dev": "echo 0",
|
|
13
|
-
"build-prod": "echo 0"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [],
|
|
16
|
-
"author": "Eric Poggel",
|
|
17
|
-
"license": "Apache-2.0",
|
|
18
|
-
"homepage": "https://github.com/krausest/js-framework-benchmark",
|
|
19
|
-
"repository": {
|
|
20
|
-
"type": "git",
|
|
21
|
-
"url": "https://github.com/krausest/js-framework-benchmark.git"
|
|
22
|
-
}
|
|
23
|
-
}
|
package/benchmarks/readme.md
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
These are implementations for krausest's https://github.com/krausest/js-framework-benchmark.
|
|
2
|
-
|
|
3
|
-
To use them, either copy them or symbolic link these folders into the frameworks/keyed and frameworks/non-keyed folders.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
## How to run the js-framework-benchmark tests
|
|
7
|
-
|
|
8
|
-
### To Run a test:
|
|
9
|
-
Run `npm start` from the folder where you've cloned the js-framework-benchmark repository.
|
|
10
|
-
in another command window:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
cd webdriver-ts
|
|
15
|
-
npm run bench non-keyed/solarite-naive keyed/solarite-naive
|
|
16
|
-
cd ../webdriver-ts-results
|
|
17
|
-
npm ci
|
|
18
|
-
cd ../webdriver-ts
|
|
19
|
-
npm run results
|
|
20
|
-
cd ../
|
|
21
|
-
```
|
|
22
|
-
Then open:
|
|
23
|
-
http://localhost:8080/webdriver-ts-results/table.html
|
|
24
|
-
|
|
25
|
-
### Run every test I care about:
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
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
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### Run a single benchmark within a test (partialUpdate below - numbers start with 01_)
|
|
32
|
-
```
|
|
33
|
-
cd webdriver-ts
|
|
34
|
-
npm run bench -- --framework keyed/redcomponent --benchmark 09_
|
|
35
|
-
cd ../webdriver-ts-results
|
|
36
|
-
npm ci
|
|
37
|
-
cd ../webdriver-ts
|
|
38
|
-
npm run results
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### To see if it's keyed:
|
|
42
|
-
npm run isKeyed keyed/redcomponent
|
|
43
|
-
|
|
44
|
-
### Run Instance for testing
|
|
45
|
-
From the keyed/redcomponent folder:
|
|
46
|
-
`npm run build-prod`
|
|
47
|
-
http://localhost:8080/frameworks/non-keyed/redcomponent/index.html
|
|
48
|
-
|
package/build/build.bat
DELETED
package/build/build.js
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Run rollup and terser on a javascript file and all of its dependencies.
|
|
3
|
-
*
|
|
4
|
-
* @example
|
|
5
|
-
* # Creates output.js and output.min.js
|
|
6
|
-
* node build input.js output.js
|
|
7
|
-
*
|
|
8
|
-
* ------------------------
|
|
9
|
-
* How to create the dependencies for build.js Tested with Rollup v2.23.0 and Terser 5.3.2
|
|
10
|
-
* 1. Start in a blank folder.
|
|
11
|
-
* 2. npm install rollup terser
|
|
12
|
-
* 3. npm install -g rollup terser
|
|
13
|
-
* 4. rollup node_modules/rollup/dist/shared/rollup.js > ./rollup2.js
|
|
14
|
-
* 5. terser ./rollup2.js > rollup.min.js
|
|
15
|
-
* 6. del rollup2.js
|
|
16
|
-
* 7. terser node_modules/terser/dist/bundle.min.js > ./terser.min.js
|
|
17
|
-
* 8. Modify line 2 of terser.min.js to replace require('source-map') with require('./source-map.min.js')
|
|
18
|
-
* 9. npm uninstall -g rollup terser
|
|
19
|
-
* 10. Copy terser.min.js, rollup.min.js, and source-map.min.js to the lib folder, and delete our temporary working folder.
|
|
20
|
-
*
|
|
21
|
-
* After that, node.js is the only external dependency needed to build.
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
const rollupOptions = {
|
|
25
|
-
onwarn: function (message) { // Suppress messages about external dependencies.
|
|
26
|
-
if (message.code !== 'CIRCULAR_DEPENDENCY' && message.code !== 'EVAL')
|
|
27
|
-
console.error(message);
|
|
28
|
-
},
|
|
29
|
-
treeshake: { // does nothing!
|
|
30
|
-
preset: 'smallest',
|
|
31
|
-
manualPureFunctions: ['assert']
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
const terserOptions = {
|
|
35
|
-
ecma: 8, // Decreases size.
|
|
36
|
-
format: {
|
|
37
|
-
preamble: `// Version ${timestamp()}\r\n// License: MIT\r\n// http://vorticode.github.io/solarite`,
|
|
38
|
-
},
|
|
39
|
-
compress: { // https://github.com/terser/terser#compress-options
|
|
40
|
-
passes: 5,
|
|
41
|
-
//hoist_funs: true, // Increases size
|
|
42
|
-
//hoist_vars: true, // Increases size
|
|
43
|
-
pure_getters: true,
|
|
44
|
-
unsafe: true,
|
|
45
|
-
unsafe_arrows: true,
|
|
46
|
-
unsafe_comps: true,
|
|
47
|
-
unsafe_Function: true,
|
|
48
|
-
unsafe_math: true,
|
|
49
|
-
unsafe_methods: true,
|
|
50
|
-
unsafe_proto: true,
|
|
51
|
-
unsafe_regexp: true,
|
|
52
|
-
unsafe_undefined: true,
|
|
53
|
-
},
|
|
54
|
-
mangle: { // https://github.com/terser/terser#mangle-options
|
|
55
|
-
//eval: true, // We use reserved words to not mangle names used in eval.
|
|
56
|
-
toplevel: true, // Does nothing?
|
|
57
|
-
properties: {
|
|
58
|
-
regex: /_$/,
|
|
59
|
-
undeclared: true, // Does nothing?
|
|
60
|
-
}
|
|
61
|
-
//module: true, // Does nothing?
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
// Code starts here:
|
|
68
|
-
|
|
69
|
-
const input = process.argv[2];
|
|
70
|
-
const output = process.argv[3];
|
|
71
|
-
const outputDebug = output.replace(/\.js$/, '-debug.js');
|
|
72
|
-
const outputMin = output.replace(/\.js$/, '.min.js');
|
|
73
|
-
|
|
74
|
-
const fs = require('fs');
|
|
75
|
-
const Rollup = require('./lib/rollup.min.js');
|
|
76
|
-
const Terser = require("./lib/terser.min.js");
|
|
77
|
-
|
|
78
|
-
/*
|
|
79
|
-
// Deno version (Unsupported)
|
|
80
|
-
const input = Deno.args[0];
|
|
81
|
-
const output = Deno.args[1];
|
|
82
|
-
const outputMin = output.replace(/\.js$/, '.min.js');
|
|
83
|
-
|
|
84
|
-
import './lib/rollup.min.js';
|
|
85
|
-
import "./lib/terser.min.js";
|
|
86
|
-
*/
|
|
87
|
-
|
|
88
|
-
async function rollup(input, output, options) {
|
|
89
|
-
options.input = input;
|
|
90
|
-
const bundle = await Rollup.rollup(options);
|
|
91
|
-
await bundle.write({ // https://rollupjs.org/guide/en/
|
|
92
|
-
file: output,
|
|
93
|
-
format: 'es'
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function timestamp() {
|
|
98
|
-
let d = new Date();
|
|
99
|
-
return d.getUTCFullYear() +
|
|
100
|
-
'.' + (d.getUTCMonth()+1) +
|
|
101
|
-
'.' + d.getUTCDate() +
|
|
102
|
-
'.' + (d.getUTCHours()+'').padStart(2, '0') + (d.getUTCMinutes()+'').padStart(2, '0')
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
async function terser(options) {
|
|
106
|
-
var code = [fs.readFileSync(outputDebug)].join('');
|
|
107
|
-
|
|
108
|
-
// Remove //#IFDEV blocks.
|
|
109
|
-
code = code.replace(/\/\/#IFDEV[\s\S]*?\/\/#ENDIF/gm, '');
|
|
110
|
-
code = code.replace(/\/\*#IFDEV\*\/[\s\S]*?\/\*#ENDIF\*\//gm, '');
|
|
111
|
-
|
|
112
|
-
fs.writeFileSync(output, code);
|
|
113
|
-
|
|
114
|
-
let idx = code.indexOf('#IFDEV')
|
|
115
|
-
if (idx !== -1) {
|
|
116
|
-
console.log(idx);
|
|
117
|
-
console.log(code.slice(Math.max(idx-50, 0), idx+50));
|
|
118
|
-
throw new Error('Unmatched #IFDEV block');
|
|
119
|
-
}
|
|
120
|
-
idx = code.indexOf('#ENDIF');
|
|
121
|
-
if (idx !== -1) {
|
|
122
|
-
console.log(code.slice(Math.max(idx-50, 0), idx+50));
|
|
123
|
-
throw new Error('Unmatched #ENDIF block');
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
var result = await Terser.minify(code, options);
|
|
128
|
-
fs.writeFileSync(outputMin, result.code);
|
|
129
|
-
|
|
130
|
-
let stats = fs.statSync(output);
|
|
131
|
-
let statsMin = fs.statSync(outputMin);
|
|
132
|
-
console.log(`Successfully created ${output} (${stats.size.toLocaleString()} bytes) ` +
|
|
133
|
-
`and ${outputMin} (${statsMin.size.toLocaleString()} bytes).` );
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
rollup(input, outputDebug, rollupOptions).then(() => {
|
|
138
|
-
terser(terserOptions);
|
|
139
|
-
});
|