@saasquatch/squatch-js 2.8.3-9 → 2.8.4
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/CHANGELOG.md +9 -2
- package/babelregister.js +0 -1
- package/coverage/base.css +224 -0
- package/coverage/block-navigation.js +87 -0
- package/coverage/clover.xml +996 -0
- package/coverage/coverage-final.json +26 -0
- package/coverage/favicon.png +0 -0
- package/coverage/prettify.css +1 -0
- package/coverage/prettify.js +2 -0
- package/coverage/sort-arrow-sprite.png +0 -0
- package/coverage/sorter.js +210 -0
- package/demo/perf-benchmark.ts +363 -0
- package/demo/perf-compare.html +870 -0
- package/demo/perf-deploy/vercel.json +17 -0
- package/demo/perf-frame.html +417 -0
- package/demo/perf-server.ts +131 -0
- package/dist/ErrorTemplate-DUNm11h9.js +124 -0
- package/dist/ErrorTemplate-DUNm11h9.js.map +1 -0
- package/dist/ErrorTemplate-DumOlC5f.cjs +109 -0
- package/dist/ErrorTemplate-DumOlC5f.cjs.map +1 -0
- package/dist/SkeletonTemplate-B3Bk4NFu.cjs +243 -0
- package/dist/SkeletonTemplate-B3Bk4NFu.cjs.map +1 -0
- package/dist/SkeletonTemplate-Day_0iMM.js +246 -0
- package/dist/SkeletonTemplate-Day_0iMM.js.map +1 -0
- package/dist/squatch.cjs.js +20 -329
- package/dist/squatch.cjs.js.map +1 -1
- package/dist/squatch.esm.js +417 -764
- package/dist/squatch.esm.js.map +1 -1
- package/dist/squatch.js +149 -110
- package/dist/squatch.js.map +1 -1
- package/dist/squatch.min.js +2 -2
- package/dist/utils/cookieUtils.d.ts +1 -0
- package/dist/widgets/EmbedWidget.d.ts +1 -1
- package/dist/widgets/ErrorTemplate.d.ts +9 -0
- package/dist/widgets/PopupWidget.d.ts +1 -4
- package/dist/widgets/SkeletonTemplate.d.ts +1 -2
- package/dist/widgets/Widget.d.ts +19 -11
- package/package.json +11 -15
- package/vite-env.d.ts +2 -1
- package/vite.config.ts +17 -0
- package/babel.config.js +0 -8
- package/jest.config.ts +0 -200
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V<U;++V){var ae=Z[V];if(ae.ignoreCase){ac=true}else{if(/[a-z]/i.test(ae.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){S=true;ac=false;break}}}var Y={b:8,t:9,n:10,v:11,f:12,r:13};function ab(ah){var ag=ah.charCodeAt(0);if(ag!==92){return ag}var af=ah.charAt(1);ag=Y[af];if(ag){return ag}else{if("0"<=af&&af<="7"){return parseInt(ah.substring(1),8)}else{if(af==="u"||af==="x"){return parseInt(ah.substring(2),16)}else{return ah.charCodeAt(1)}}}}function T(af){if(af<32){return(af<16?"\\x0":"\\x")+af.toString(16)}var ag=String.fromCharCode(af);if(ag==="\\"||ag==="-"||ag==="["||ag==="]"){ag="\\"+ag}return ag}function X(am){var aq=am.substring(1,am.length-1).match(new RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));var ak=[];var af=[];var ao=aq[0]==="^";for(var ar=ao?1:0,aj=aq.length;ar<aj;++ar){var ah=aq[ar];if(/\\[bdsw]/i.test(ah)){ak.push(ah)}else{var ag=ab(ah);var al;if(ar+2<aj&&"-"===aq[ar+1]){al=ab(aq[ar+2]);ar+=2}else{al=ag}af.push([ag,al]);if(!(al<65||ag>122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;ar<af.length;++ar){var at=af[ar];if(at[0]<=ap[1]+1){ap[1]=Math.max(ap[1],at[1])}else{ai.push(ap=at)}}var an=["["];if(ao){an.push("^")}an.push.apply(an,ak);for(var ar=0;ar<ai.length;++ar){var at=ai[ar];an.push(T(at[0]));if(at[1]>at[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak<ah;++ak){var ag=aj[ak];if(ag==="("){++am}else{if("\\"===ag.charAt(0)){var af=+ag.substring(1);if(af&&af<=am){an[af]=-1}}}}for(var ak=1;ak<an.length;++ak){if(-1===an[ak]){an[ak]=++ad}}for(var ak=0,am=0;ak<ah;++ak){var ag=aj[ak];if(ag==="("){++am;if(an[am]===undefined){aj[ak]="(?:"}}else{if("\\"===ag.charAt(0)){var af=+ag.substring(1);if(af&&af<=am){aj[ak]="\\"+an[am]}}}}for(var ak=0,am=0;ak<ah;++ak){if("^"===aj[ak]&&"^"!==aj[ak+1]){aj[ak]=""}}if(al.ignoreCase&&S){for(var ak=0;ak<ah;++ak){var ag=aj[ak];var ai=ag.charAt(0);if(ag.length>=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V<U;++V){var ae=Z[V];if(ae.global||ae.multiline){throw new Error(""+ae)}aa.push("(?:"+W(ae)+")")}return new RegExp(aa.join("|"),ac?"gi":"g")}function a(V){var U=/(?:^|\s)nocode(?:\s|$)/;var X=[];var T=0;var Z=[];var W=0;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=document.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Y=S&&"pre"===S.substring(0,3);function aa(ab){switch(ab.nodeType){case 1:if(U.test(ab.className)){return}for(var ae=ab.firstChild;ae;ae=ae.nextSibling){aa(ae)}var ad=ab.nodeName;if("BR"===ad||"LI"===ad){X[W]="\n";Z[W<<1]=T++;Z[(W++<<1)|1]=ab}break;case 3:case 4:var ac=ab.nodeValue;if(ac.length){if(!Y){ac=ac.replace(/[ \t\r\n]+/g," ")}else{ac=ac.replace(/\r\n?/g,"\n")}X[W]=ac;Z[W<<1]=T;T+=ac.length;Z[(W++<<1)|1]=ab}break}}aa(V);return{sourceCode:X.join("").replace(/\n$/,""),spans:Z}}function B(S,U,W,T){if(!U){return}var V={sourceCode:U,basePos:S};W(V);T.push.apply(T,V.decorations)}var v=/\S/;function o(S){var V=undefined;for(var U=S.firstChild;U;U=U.nextSibling){var T=U.nodeType;V=(T===1)?(V?S:U):(T===3)?(v.test(U.nodeValue)?S:V):V}return V===S?undefined:V}function g(U,T){var S={};var V;(function(){var ad=U.concat(T);var ah=[];var ag={};for(var ab=0,Z=ad.length;ab<Z;++ab){var Y=ad[ab];var ac=Y[3];if(ac){for(var ae=ac.length;--ae>=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae<aq;++ae){var ag=an[ae];var ap=aj[ag];var ai=void 0;var am;if(typeof ap==="string"){am=false}else{var aa=S[ag.charAt(0)];if(aa){ai=ag.match(aa[1]);ap=aa[0]}else{for(var ao=0;ao<X;++ao){aa=T[ao];ai=ag.match(aa[1]);if(ai){ap=aa[0];break}}if(!ai){ap=F}}am=ap.length>=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y<W.length;++Y){ae(W[Y])}if(ag===(ag|0)){W[0].setAttribute("value",ag)}var aa=ac.createElement("OL");aa.className="linenums";var X=Math.max(0,((ag-1))|0)||0;for(var Y=0,T=W.length;Y<T;++Y){af=W[Y];af.className="L"+((Y+X)%10);if(!af.firstChild){af.appendChild(ac.createTextNode("\xA0"))}aa.appendChild(af)}V.appendChild(aa)}function D(ac){var aj=/\bMSIE\b/.test(navigator.userAgent);var am=/\n/g;var al=ac.sourceCode;var an=al.length;var V=0;var aa=ac.spans;var T=aa.length;var ah=0;var X=ac.decorations;var Y=X.length;var Z=0;X[Y]=an;var ar,aq;for(aq=ar=0;aq<Y;){if(X[aq]!==X[aq+2]){X[ar++]=X[aq++];X[ar++]=X[aq++]}else{aq+=2}}Y=ar;for(aq=ar=0;aq<Y;){var at=X[aq];var ab=X[aq+1];var W=aq+2;while(W+2<=Y&&X[W+1]===ab){W+=2}X[ar++]=at;X[ar++]=ab;aq=W}Y=X.length=ar;var ae=null;while(ah<T){var af=aa[ah];var S=aa[ah+2]||an;var ag=X[Z];var ap=X[Z+2]||an;var W=Math.min(S,ap);var ak=aa[ah+1];var U;if(ak.nodeType!==1&&(U=al.substring(V,W))){if(aj){U=U.replace(am,"\r")}ak.nodeValue=U;var ai=ak.ownerDocument;var ao=ai.createElement("SPAN");ao.className=X[Z+1];var ad=ak.parentNode;ad.replaceChild(ao,ak);ao.appendChild(ak);if(V<S){aa[ah+1]=ak=ai.createTextNode(al.substring(W,S));ad.insertBefore(ak,ao.nextSibling)}}V=W;if(V>=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*</.test(S)?"default-markup":"default-code"}return t[T]}c(K,["default-code"]);c(g([],[[F,/^[^<?]+/],[E,/^<!\w[^>]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa<ac.length;++aa){for(var Z=0,V=ac[aa].length;Z<V;++Z){T.push(ac[aa][Z])}}ac=null;var W=Date;if(!W.now){W={now:function(){return +(new Date)}}}var X=0;var S;var ab=/\blang(?:uage)?-([\w.]+)(?!\S)/;var ae=/\bprettyprint\b/;function U(){var ag=(window.PR_SHOULD_USE_CONTINUATION?W.now()+250:Infinity);for(;X<T.length&&W.now()<ag;X++){var aj=T[X];var ai=aj.className;if(ai.indexOf("prettyprint")>=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X<T.length){setTimeout(U,250)}else{if(ad){ad()}}}U()}window.prettyPrintOne=y;window.prettyPrint=b;window.PR={createSimpleLexer:g,registerLangHandler:c,sourceDecorator:i,PR_ATTRIB_NAME:P,PR_ATTRIB_VALUE:n,PR_COMMENT:j,PR_DECLARATION:E,PR_KEYWORD:z,PR_LITERAL:G,PR_NOCODE:N,PR_PLAIN:F,PR_PUNCTUATION:L,PR_SOURCE:J,PR_STRING:C,PR_TAG:m,PR_TYPE:O}})();PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_DECLARATION,/^<!\w[^>]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^<script\b[^>]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:<!--|-->)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^\)\"\']+/]]),["css-str"]);
|
|
Binary file
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
var addSorting = (function() {
|
|
3
|
+
'use strict';
|
|
4
|
+
var cols,
|
|
5
|
+
currentSort = {
|
|
6
|
+
index: 0,
|
|
7
|
+
desc: false
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// returns the summary table element
|
|
11
|
+
function getTable() {
|
|
12
|
+
return document.querySelector('.coverage-summary');
|
|
13
|
+
}
|
|
14
|
+
// returns the thead element of the summary table
|
|
15
|
+
function getTableHeader() {
|
|
16
|
+
return getTable().querySelector('thead tr');
|
|
17
|
+
}
|
|
18
|
+
// returns the tbody element of the summary table
|
|
19
|
+
function getTableBody() {
|
|
20
|
+
return getTable().querySelector('tbody');
|
|
21
|
+
}
|
|
22
|
+
// returns the th element for nth column
|
|
23
|
+
function getNthColumn(n) {
|
|
24
|
+
return getTableHeader().querySelectorAll('th')[n];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function onFilterInput() {
|
|
28
|
+
const searchValue = document.getElementById('fileSearch').value;
|
|
29
|
+
const rows = document.getElementsByTagName('tbody')[0].children;
|
|
30
|
+
|
|
31
|
+
// Try to create a RegExp from the searchValue. If it fails (invalid regex),
|
|
32
|
+
// it will be treated as a plain text search
|
|
33
|
+
let searchRegex;
|
|
34
|
+
try {
|
|
35
|
+
searchRegex = new RegExp(searchValue, 'i'); // 'i' for case-insensitive
|
|
36
|
+
} catch (error) {
|
|
37
|
+
searchRegex = null;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
for (let i = 0; i < rows.length; i++) {
|
|
41
|
+
const row = rows[i];
|
|
42
|
+
let isMatch = false;
|
|
43
|
+
|
|
44
|
+
if (searchRegex) {
|
|
45
|
+
// If a valid regex was created, use it for matching
|
|
46
|
+
isMatch = searchRegex.test(row.textContent);
|
|
47
|
+
} else {
|
|
48
|
+
// Otherwise, fall back to the original plain text search
|
|
49
|
+
isMatch = row.textContent
|
|
50
|
+
.toLowerCase()
|
|
51
|
+
.includes(searchValue.toLowerCase());
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
row.style.display = isMatch ? '' : 'none';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// loads the search box
|
|
59
|
+
function addSearchBox() {
|
|
60
|
+
var template = document.getElementById('filterTemplate');
|
|
61
|
+
var templateClone = template.content.cloneNode(true);
|
|
62
|
+
templateClone.getElementById('fileSearch').oninput = onFilterInput;
|
|
63
|
+
template.parentElement.appendChild(templateClone);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// loads all columns
|
|
67
|
+
function loadColumns() {
|
|
68
|
+
var colNodes = getTableHeader().querySelectorAll('th'),
|
|
69
|
+
colNode,
|
|
70
|
+
cols = [],
|
|
71
|
+
col,
|
|
72
|
+
i;
|
|
73
|
+
|
|
74
|
+
for (i = 0; i < colNodes.length; i += 1) {
|
|
75
|
+
colNode = colNodes[i];
|
|
76
|
+
col = {
|
|
77
|
+
key: colNode.getAttribute('data-col'),
|
|
78
|
+
sortable: !colNode.getAttribute('data-nosort'),
|
|
79
|
+
type: colNode.getAttribute('data-type') || 'string'
|
|
80
|
+
};
|
|
81
|
+
cols.push(col);
|
|
82
|
+
if (col.sortable) {
|
|
83
|
+
col.defaultDescSort = col.type === 'number';
|
|
84
|
+
colNode.innerHTML =
|
|
85
|
+
colNode.innerHTML + '<span class="sorter"></span>';
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return cols;
|
|
89
|
+
}
|
|
90
|
+
// attaches a data attribute to every tr element with an object
|
|
91
|
+
// of data values keyed by column name
|
|
92
|
+
function loadRowData(tableRow) {
|
|
93
|
+
var tableCols = tableRow.querySelectorAll('td'),
|
|
94
|
+
colNode,
|
|
95
|
+
col,
|
|
96
|
+
data = {},
|
|
97
|
+
i,
|
|
98
|
+
val;
|
|
99
|
+
for (i = 0; i < tableCols.length; i += 1) {
|
|
100
|
+
colNode = tableCols[i];
|
|
101
|
+
col = cols[i];
|
|
102
|
+
val = colNode.getAttribute('data-value');
|
|
103
|
+
if (col.type === 'number') {
|
|
104
|
+
val = Number(val);
|
|
105
|
+
}
|
|
106
|
+
data[col.key] = val;
|
|
107
|
+
}
|
|
108
|
+
return data;
|
|
109
|
+
}
|
|
110
|
+
// loads all row data
|
|
111
|
+
function loadData() {
|
|
112
|
+
var rows = getTableBody().querySelectorAll('tr'),
|
|
113
|
+
i;
|
|
114
|
+
|
|
115
|
+
for (i = 0; i < rows.length; i += 1) {
|
|
116
|
+
rows[i].data = loadRowData(rows[i]);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
// sorts the table using the data for the ith column
|
|
120
|
+
function sortByIndex(index, desc) {
|
|
121
|
+
var key = cols[index].key,
|
|
122
|
+
sorter = function(a, b) {
|
|
123
|
+
a = a.data[key];
|
|
124
|
+
b = b.data[key];
|
|
125
|
+
return a < b ? -1 : a > b ? 1 : 0;
|
|
126
|
+
},
|
|
127
|
+
finalSorter = sorter,
|
|
128
|
+
tableBody = document.querySelector('.coverage-summary tbody'),
|
|
129
|
+
rowNodes = tableBody.querySelectorAll('tr'),
|
|
130
|
+
rows = [],
|
|
131
|
+
i;
|
|
132
|
+
|
|
133
|
+
if (desc) {
|
|
134
|
+
finalSorter = function(a, b) {
|
|
135
|
+
return -1 * sorter(a, b);
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
for (i = 0; i < rowNodes.length; i += 1) {
|
|
140
|
+
rows.push(rowNodes[i]);
|
|
141
|
+
tableBody.removeChild(rowNodes[i]);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
rows.sort(finalSorter);
|
|
145
|
+
|
|
146
|
+
for (i = 0; i < rows.length; i += 1) {
|
|
147
|
+
tableBody.appendChild(rows[i]);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
// removes sort indicators for current column being sorted
|
|
151
|
+
function removeSortIndicators() {
|
|
152
|
+
var col = getNthColumn(currentSort.index),
|
|
153
|
+
cls = col.className;
|
|
154
|
+
|
|
155
|
+
cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
|
|
156
|
+
col.className = cls;
|
|
157
|
+
}
|
|
158
|
+
// adds sort indicators for current column being sorted
|
|
159
|
+
function addSortIndicators() {
|
|
160
|
+
getNthColumn(currentSort.index).className += currentSort.desc
|
|
161
|
+
? ' sorted-desc'
|
|
162
|
+
: ' sorted';
|
|
163
|
+
}
|
|
164
|
+
// adds event listeners for all sorter widgets
|
|
165
|
+
function enableUI() {
|
|
166
|
+
var i,
|
|
167
|
+
el,
|
|
168
|
+
ithSorter = function ithSorter(i) {
|
|
169
|
+
var col = cols[i];
|
|
170
|
+
|
|
171
|
+
return function() {
|
|
172
|
+
var desc = col.defaultDescSort;
|
|
173
|
+
|
|
174
|
+
if (currentSort.index === i) {
|
|
175
|
+
desc = !currentSort.desc;
|
|
176
|
+
}
|
|
177
|
+
sortByIndex(i, desc);
|
|
178
|
+
removeSortIndicators();
|
|
179
|
+
currentSort.index = i;
|
|
180
|
+
currentSort.desc = desc;
|
|
181
|
+
addSortIndicators();
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
for (i = 0; i < cols.length; i += 1) {
|
|
185
|
+
if (cols[i].sortable) {
|
|
186
|
+
// add the click event handler on the th so users
|
|
187
|
+
// dont have to click on those tiny arrows
|
|
188
|
+
el = getNthColumn(i).querySelector('.sorter').parentElement;
|
|
189
|
+
if (el.addEventListener) {
|
|
190
|
+
el.addEventListener('click', ithSorter(i));
|
|
191
|
+
} else {
|
|
192
|
+
el.attachEvent('onclick', ithSorter(i));
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
// adds sorting functionality to the UI
|
|
198
|
+
return function() {
|
|
199
|
+
if (!getTable()) {
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
cols = loadColumns();
|
|
203
|
+
loadData();
|
|
204
|
+
addSearchBox();
|
|
205
|
+
addSortIndicators();
|
|
206
|
+
enableUI();
|
|
207
|
+
};
|
|
208
|
+
})();
|
|
209
|
+
|
|
210
|
+
window.addEventListener('load', addSorting);
|
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Headless performance benchmark for squatch-js v2 vs next.
|
|
3
|
+
*
|
|
4
|
+
* Uses Playwright to load perf-frame.html for each SDK version,
|
|
5
|
+
* collects instrumentation metrics, and prints a comparison table.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* npx tsx demo/perf-benchmark.ts # 5 iterations (default)
|
|
9
|
+
* npx tsx demo/perf-benchmark.ts --runs 10 # 10 iterations
|
|
10
|
+
* npx tsx demo/perf-benchmark.ts --json # Also output JSON
|
|
11
|
+
* npx tsx demo/perf-benchmark.ts --throttle # Simulate slow 3G
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import { chromium, type Page, type CDPSession } from "playwright";
|
|
15
|
+
import { createServer, type Server, type IncomingMessage, type ServerResponse } from "http";
|
|
16
|
+
import { readFileSync, existsSync } from "fs";
|
|
17
|
+
import { join, extname, dirname } from "path";
|
|
18
|
+
|
|
19
|
+
// @ts-ignore -- tsx/node ESM handles import.meta fine at runtime
|
|
20
|
+
const __scriptDir = typeof __dirname !== "undefined" ? __dirname : dirname(new URL(import.meta.url).pathname);
|
|
21
|
+
|
|
22
|
+
// ── Configuration ──────────────────────────────────────────
|
|
23
|
+
|
|
24
|
+
const V2_URL = "https://fast.ssqt.io/squatch-js@2";
|
|
25
|
+
const NEXT_URL = "https://fast.ssqt.io/squatch-js@next";
|
|
26
|
+
|
|
27
|
+
const MIME_TYPES: Record<string, string> = {
|
|
28
|
+
".html": "text/html",
|
|
29
|
+
".js": "application/javascript",
|
|
30
|
+
".css": "text/css",
|
|
31
|
+
".json": "application/json",
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
interface PerfMetrics {
|
|
35
|
+
sdkUrl: string;
|
|
36
|
+
sdkScriptLoad: number;
|
|
37
|
+
sdkReady: number;
|
|
38
|
+
frameCreated: number;
|
|
39
|
+
meaningfulPaint: number;
|
|
40
|
+
stable: number;
|
|
41
|
+
timeUnstyled: number;
|
|
42
|
+
bundleSizeBytes: number;
|
|
43
|
+
networkTime: number;
|
|
44
|
+
totalLoad: number;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
interface MetricDef {
|
|
48
|
+
key: keyof PerfMetrics;
|
|
49
|
+
label: string;
|
|
50
|
+
unit: string;
|
|
51
|
+
format: (v: number) => string;
|
|
52
|
+
lowerBetter: boolean;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const METRICS: MetricDef[] = [
|
|
56
|
+
{ key: "bundleSizeBytes", label: "Bundle Size", unit: "KB", format: (v) => v > 0 ? (v / 1024).toFixed(1) : "—", lowerBetter: true },
|
|
57
|
+
{ key: "sdkScriptLoad", label: "SDK Script Load", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
58
|
+
{ key: "sdkReady", label: "SDK Ready", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
59
|
+
{ key: "frameCreated", label: "Frame Created", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
60
|
+
{ key: "meaningfulPaint", label: "Meaningful Paint", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
61
|
+
{ key: "timeUnstyled", label: "Time Unstyled", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
62
|
+
{ key: "networkTime", label: "Network Request Time", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
63
|
+
{ key: "totalLoad", label: "Total Load Time", unit: "ms", format: (v) => v > 0 ? v.toFixed(0) : "—", lowerBetter: true },
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
// ── CLI args ───────────────────────────────────────────────
|
|
67
|
+
|
|
68
|
+
function parseArgs() {
|
|
69
|
+
const args = process.argv.slice(2);
|
|
70
|
+
let runs = 5;
|
|
71
|
+
let json = false;
|
|
72
|
+
let throttle = false;
|
|
73
|
+
|
|
74
|
+
for (let i = 0; i < args.length; i++) {
|
|
75
|
+
if (args[i] === "--runs" && args[i + 1]) {
|
|
76
|
+
runs = parseInt(args[i + 1], 10);
|
|
77
|
+
if (isNaN(runs) || runs < 1) runs = 5;
|
|
78
|
+
i++;
|
|
79
|
+
} else if (args[i] === "--json") {
|
|
80
|
+
json = true;
|
|
81
|
+
} else if (args[i] === "--throttle") {
|
|
82
|
+
throttle = true;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return { runs, json, throttle };
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// ── Local static server for demo/ ──────────────────────────
|
|
90
|
+
|
|
91
|
+
function startServer(demoDir: string): Promise<{ server: Server; port: number }> {
|
|
92
|
+
return new Promise((resolve, reject) => {
|
|
93
|
+
const server = createServer((req: IncomingMessage, res: ServerResponse) => {
|
|
94
|
+
const url = new URL(req.url || "/", "http://localhost");
|
|
95
|
+
let filePath = join(demoDir, url.pathname === "/" ? "perf-frame.html" : url.pathname);
|
|
96
|
+
|
|
97
|
+
if (!existsSync(filePath)) {
|
|
98
|
+
res.writeHead(404);
|
|
99
|
+
res.end("Not found");
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
const ext = extname(filePath);
|
|
104
|
+
const mime = MIME_TYPES[ext] || "application/octet-stream";
|
|
105
|
+
const content = readFileSync(filePath);
|
|
106
|
+
res.writeHead(200, { "Content-Type": mime });
|
|
107
|
+
res.end(content);
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
server.listen(0, "127.0.0.1", () => {
|
|
111
|
+
const addr = server.address();
|
|
112
|
+
if (typeof addr === "object" && addr) {
|
|
113
|
+
resolve({ server, port: addr.port });
|
|
114
|
+
} else {
|
|
115
|
+
reject(new Error("Failed to start server"));
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// ── Collect metrics from a single page load ────────────────
|
|
122
|
+
|
|
123
|
+
async function collectMetrics(
|
|
124
|
+
page: Page,
|
|
125
|
+
baseUrl: string,
|
|
126
|
+
sdkUrl: string,
|
|
127
|
+
cdpSession?: CDPSession,
|
|
128
|
+
): Promise<PerfMetrics | null> {
|
|
129
|
+
const cb = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
|
|
130
|
+
const url = `${baseUrl}/perf-frame.html?sdk=${encodeURIComponent(sdkUrl)}&cb=${cb}`;
|
|
131
|
+
|
|
132
|
+
// Enable network throttling if CDP session provided (simulates slow 3G)
|
|
133
|
+
if (cdpSession) {
|
|
134
|
+
await cdpSession.send("Network.emulateNetworkConditions", {
|
|
135
|
+
offline: false,
|
|
136
|
+
downloadThroughput: (500 * 1024) / 8, // 500 Kbps
|
|
137
|
+
uploadThroughput: (500 * 1024) / 8,
|
|
138
|
+
latency: 400, // 400ms RTT
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
await page.goto(url, { waitUntil: "domcontentloaded" });
|
|
143
|
+
|
|
144
|
+
// Wait for metrics to be reported (poll for window.__perfMetrics)
|
|
145
|
+
const metrics = await page.evaluate(() => {
|
|
146
|
+
return new Promise<PerfMetrics | null>((resolve) => {
|
|
147
|
+
let attempts = 0;
|
|
148
|
+
const maxAttempts = 200; // 20 seconds
|
|
149
|
+
const poll = setInterval(() => {
|
|
150
|
+
attempts++;
|
|
151
|
+
const m = (window as any).__perfMetrics;
|
|
152
|
+
if (m && m.stable > 0) {
|
|
153
|
+
clearInterval(poll);
|
|
154
|
+
resolve({
|
|
155
|
+
sdkUrl: m.sdkUrl,
|
|
156
|
+
sdkScriptLoad: m.sdkScriptLoad,
|
|
157
|
+
sdkReady: m.sdkReady,
|
|
158
|
+
frameCreated: m.frameCreated,
|
|
159
|
+
meaningfulPaint: m.meaningfulPaint,
|
|
160
|
+
stable: m.stable,
|
|
161
|
+
timeUnstyled: m.timeUnstyled || 0,
|
|
162
|
+
bundleSizeBytes: m.bundleSizeBytes || 0,
|
|
163
|
+
networkTime: m.networkTime || 0,
|
|
164
|
+
totalLoad: m.stable,
|
|
165
|
+
});
|
|
166
|
+
} else if (attempts >= maxAttempts) {
|
|
167
|
+
clearInterval(poll);
|
|
168
|
+
// Return partial data or null
|
|
169
|
+
if (m) {
|
|
170
|
+
resolve({
|
|
171
|
+
sdkUrl: m.sdkUrl || "",
|
|
172
|
+
sdkScriptLoad: m.sdkScriptLoad || 0,
|
|
173
|
+
sdkReady: m.sdkReady || 0,
|
|
174
|
+
frameCreated: m.frameCreated || 0,
|
|
175
|
+
meaningfulPaint: m.meaningfulPaint || 0,
|
|
176
|
+
stable: m.stable || 0,
|
|
177
|
+
timeUnstyled: m.timeUnstyled || 0,
|
|
178
|
+
bundleSizeBytes: m.bundleSizeBytes || 0,
|
|
179
|
+
networkTime: m.networkTime || 0,
|
|
180
|
+
totalLoad: m.stable || 0,
|
|
181
|
+
});
|
|
182
|
+
} else {
|
|
183
|
+
resolve(null);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}, 100);
|
|
187
|
+
});
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
return metrics;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// ── Averaging helper ───────────────────────────────────────
|
|
194
|
+
|
|
195
|
+
function averageMetrics(arr: (PerfMetrics | null)[]): PerfMetrics {
|
|
196
|
+
const valid = arr.filter((m): m is PerfMetrics => m !== null);
|
|
197
|
+
const avg: any = { sdkUrl: valid[0]?.sdkUrl || "" };
|
|
198
|
+
|
|
199
|
+
for (const def of METRICS) {
|
|
200
|
+
const values = valid.map((m) => m[def.key] as number).filter((v) => v > 0);
|
|
201
|
+
avg[def.key] = values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
return avg as PerfMetrics;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// ── Pretty console table ───────────────────────────────────
|
|
208
|
+
|
|
209
|
+
function printComparisonTable(v2: PerfMetrics, next: PerfMetrics) {
|
|
210
|
+
const COL = { metric: 20, v2: 14, next: 14, delta: 14, pct: 10 };
|
|
211
|
+
const sep = "─";
|
|
212
|
+
|
|
213
|
+
function pad(s: string, w: number, right = false) {
|
|
214
|
+
return right ? s.padStart(w) : s.padEnd(w);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
const header =
|
|
218
|
+
pad("Metric", COL.metric) +
|
|
219
|
+
pad("v2", COL.v2, true) +
|
|
220
|
+
pad("next", COL.next, true) +
|
|
221
|
+
pad("Delta", COL.delta, true) +
|
|
222
|
+
pad("Change", COL.pct, true);
|
|
223
|
+
|
|
224
|
+
const divider = sep.repeat(header.length);
|
|
225
|
+
|
|
226
|
+
console.log("\n" + divider);
|
|
227
|
+
console.log(header);
|
|
228
|
+
console.log(divider);
|
|
229
|
+
|
|
230
|
+
for (const def of METRICS) {
|
|
231
|
+
const v2Val = (v2[def.key] as number) || 0;
|
|
232
|
+
const nextVal = (next[def.key] as number) || 0;
|
|
233
|
+
const delta = nextVal - v2Val;
|
|
234
|
+
const pct = v2Val > 0 ? (delta / v2Val) * 100 : 0;
|
|
235
|
+
|
|
236
|
+
const isBetter = def.lowerBetter ? delta < 0 : delta > 0;
|
|
237
|
+
const deltaStr =
|
|
238
|
+
Math.abs(delta) < 1
|
|
239
|
+
? "≈"
|
|
240
|
+
: (delta >= 0 ? "+" : "") + def.format(Math.abs(delta)) + " " + def.unit;
|
|
241
|
+
const pctStr =
|
|
242
|
+
Math.abs(pct) < 0.5 ? "—" : (pct >= 0 ? "+" : "") + pct.toFixed(1) + "%";
|
|
243
|
+
const marker = Math.abs(delta) < 1 ? " " : isBetter ? "✓" : "✗";
|
|
244
|
+
|
|
245
|
+
console.log(
|
|
246
|
+
pad(def.label, COL.metric) +
|
|
247
|
+
pad(def.format(v2Val) + " " + def.unit, COL.v2, true) +
|
|
248
|
+
pad(def.format(nextVal) + " " + def.unit, COL.next, true) +
|
|
249
|
+
pad(deltaStr, COL.delta, true) +
|
|
250
|
+
pad(marker + " " + pctStr, COL.pct, true),
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
console.log(divider + "\n");
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
function printRunTable(runs: { v2: PerfMetrics | null; next: PerfMetrics | null }[]) {
|
|
258
|
+
console.log("\n── Per-Run Details ──\n");
|
|
259
|
+
const headers = ["Run", ...METRICS.flatMap((d) => [`v2 ${d.label}`, `next ${d.label}`])];
|
|
260
|
+
console.log(headers.map((h) => h.padStart(16)).join(""));
|
|
261
|
+
console.log("─".repeat(headers.length * 16));
|
|
262
|
+
|
|
263
|
+
for (let i = 0; i < runs.length; i++) {
|
|
264
|
+
const row = [`#${i + 1}`];
|
|
265
|
+
for (const def of METRICS) {
|
|
266
|
+
const v2Val = runs[i].v2 ? (runs[i].v2![def.key] as number) : 0;
|
|
267
|
+
const nextVal = runs[i].next ? (runs[i].next![def.key] as number) : 0;
|
|
268
|
+
row.push(def.format(v2Val) + " " + def.unit);
|
|
269
|
+
row.push(def.format(nextVal) + " " + def.unit);
|
|
270
|
+
}
|
|
271
|
+
console.log(row.map((c) => c.padStart(16)).join(""));
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
// ── Main ───────────────────────────────────────────────────
|
|
276
|
+
|
|
277
|
+
async function main() {
|
|
278
|
+
const { runs: numRuns, json, throttle } = parseArgs();
|
|
279
|
+
|
|
280
|
+
console.log(`\n🔍 squatch-js Performance Benchmark`);
|
|
281
|
+
console.log(` v2: ${V2_URL}`);
|
|
282
|
+
console.log(` next: ${NEXT_URL}`);
|
|
283
|
+
console.log(` Runs: ${numRuns}${throttle ? " (throttled)" : ""}`);
|
|
284
|
+
console.log(`\n ⚠ Note: Headless mode serves pages from localhost. The widget API`);
|
|
285
|
+
console.log(` may reject CORS requests, preventing full widget rendering.`);
|
|
286
|
+
console.log(` For full comparison, use the web UI: npm run perf:ui → open`);
|
|
287
|
+
console.log(` http://localhost:4000/perf-compare.html in your browser.\n`);
|
|
288
|
+
|
|
289
|
+
// Start local server to serve perf-frame.html
|
|
290
|
+
const demoDir = __scriptDir;
|
|
291
|
+
const { server, port } = await startServer(demoDir);
|
|
292
|
+
const baseUrl = `http://127.0.0.1:${port}`;
|
|
293
|
+
console.log(` Server: ${baseUrl}\n`);
|
|
294
|
+
|
|
295
|
+
const browser = await chromium.launch({ headless: true });
|
|
296
|
+
|
|
297
|
+
const allRuns: { v2: PerfMetrics | null; next: PerfMetrics | null }[] = [];
|
|
298
|
+
|
|
299
|
+
try {
|
|
300
|
+
for (let i = 0; i < numRuns; i++) {
|
|
301
|
+
process.stdout.write(` Run ${i + 1}/${numRuns}... `);
|
|
302
|
+
|
|
303
|
+
// Fresh context for each run to avoid caching
|
|
304
|
+
const context = await browser.newContext();
|
|
305
|
+
const pageV2 = await context.newPage();
|
|
306
|
+
const pageNext = await context.newPage();
|
|
307
|
+
|
|
308
|
+
let cdpV2: CDPSession | undefined;
|
|
309
|
+
let cdpNext: CDPSession | undefined;
|
|
310
|
+
|
|
311
|
+
if (throttle) {
|
|
312
|
+
cdpV2 = await context.newCDPSession(pageV2);
|
|
313
|
+
cdpNext = await context.newCDPSession(pageNext);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
// Run both versions in parallel
|
|
317
|
+
const [v2, next] = await Promise.all([
|
|
318
|
+
collectMetrics(pageV2, baseUrl, V2_URL, cdpV2),
|
|
319
|
+
collectMetrics(pageNext, baseUrl, NEXT_URL, cdpNext),
|
|
320
|
+
]);
|
|
321
|
+
|
|
322
|
+
allRuns.push({ v2, next });
|
|
323
|
+
|
|
324
|
+
const v2Stable = v2 ? v2.stable.toFixed(0) + "ms" : "failed";
|
|
325
|
+
const nextStable = next ? next.stable.toFixed(0) + "ms" : "failed";
|
|
326
|
+
console.log(`v2=${v2Stable} next=${nextStable}`);
|
|
327
|
+
|
|
328
|
+
await context.close();
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// ── Results ────────────────────────────────────────
|
|
332
|
+
const v2Avg = averageMetrics(allRuns.map((r) => r.v2));
|
|
333
|
+
const nextAvg = averageMetrics(allRuns.map((r) => r.next));
|
|
334
|
+
|
|
335
|
+
console.log("\n══════════════════════════════════════════════════════════");
|
|
336
|
+
console.log(" AVERAGED RESULTS (" + numRuns + " runs)");
|
|
337
|
+
console.log("══════════════════════════════════════════════════════════");
|
|
338
|
+
|
|
339
|
+
printComparisonTable(v2Avg, nextAvg);
|
|
340
|
+
|
|
341
|
+
if (numRuns > 1) {
|
|
342
|
+
printRunTable(allRuns);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
if (json) {
|
|
346
|
+
const output = {
|
|
347
|
+
config: { v2Url: V2_URL, nextUrl: NEXT_URL, runs: numRuns, throttle },
|
|
348
|
+
averages: { v2: v2Avg, next: nextAvg },
|
|
349
|
+
runs: allRuns,
|
|
350
|
+
};
|
|
351
|
+
console.log("\n── JSON Output ──\n");
|
|
352
|
+
console.log(JSON.stringify(output, null, 2));
|
|
353
|
+
}
|
|
354
|
+
} finally {
|
|
355
|
+
await browser.close();
|
|
356
|
+
server.close();
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
main().catch((err) => {
|
|
361
|
+
console.error("Benchmark failed:", err);
|
|
362
|
+
process.exit(1);
|
|
363
|
+
});
|