grapper/dist/plugins/template.engine.js

Data Visualization Microframework

/* grapper - 1.1.0-beta.3 [plugin.template.engine] */ (()=>{var dt="function",$t="undefined",U="object",xt="string",J="array",Y="number";var I=(t,e)=>typeof t===e;var E=t=>I(t,U),M=t=>I(t,xt),k=t=>I(t,dt),X=t=>I(t,Y)&&!isNaN(t),K=t=>!Number.isNaN(t),P=t=>I(t,$t);var _=t=>Array.isArray(t);var Z=t=>t.replace(/-([a-z0-9])/g,(e,n)=>n.toUpperCase());var G=new Map;var gt=async function(){}.constructor;function B(t,e,n=!1){let c=`${t.join(",")} ${e}`;if(G.has(c))return G.get(c);let u=new(n?gt:Function)(...t,e);return G.set(c,u),u}var W="animate",Nt="path",Q="d",tt="transform",rt="rotate",b="translate",et="inherit",nt="finished",yt=[rt,"skewX","skewY"],Et=[b,"width","height","x","y","cx","cy","r","rx","ry","dx","dy"],St=(t,e)=>["text","tspan"].includes(t)&&["x","y"].includes(e),H=!1;if(window.matchMedia){let t=window.matchMedia("(prefers-reduced-motion: reduce)");H=t.matches,t.addEventListener("change",()=>{H=t.matches})}var At=t=>t.replace(/([A-Z])/g,"-$1").toLowerCase();function bt(t,e={duration:200},n=null,c=null){let u=this.gSVG,f=o=>{let a=E(o)?{...o}:{duration:o};return H&&(a.duration=0),a.fill="none",a},p=o=>{o=_(o)?o:[o];let a=window.getComputedStyle(this._el),m=[],s=new Set;for(let x of o){let $={};for(let A in x){let g=Z(A);$[g]=l(x[A],g),!(g in a)||St(this.tagName(),g)?s.add(g):g===Q?$.d=`${Nt}("${$.d}")`:g===tt&&($.transform=h($.transform))}m.push($)}return i(s,m),m},r=[],i=(o,a)=>{if(o.size){let m=new KeyframeEffect(null,a).getKeyframes();for(let s of o){let x=u(W).attributeName(s).dur(C.duration+"ms").fill("freeze").begin("indefinite");if(a.length===1)x.to(a[0][s]);else{let $=[],A=[];for(let g in m){let ht=m[g];s in a[g]&&($.push(ht.computedOffset),A.push(a[g][s]))}$[0]!==0&&($.unshift(0),A.unshift(this[s]()||et)),$[$.length-1]!==1&&($.push(1),A.push(this[s]()||et)),x.keyTimes($.join(";")).values(A.join(";"))}r.push(x),x.attachTo(this),x.beginElementAt((C.delay||0)/1e3)}}},h=o=>{M(o)&&(o=JSON.parse("{"+o.replace(/\s*\(\s*/g,":[").replace(/\s*\)\s*/g,"],").split(/\s*,\s*|\s.*/).join(",").replace(/(\w+):/g,'"$1":').replace(/,$/,"")+"}"));let a="";for(let m in o)if(m===rt){let s=d(o[m]);s.length>1&&(a+=`${b}(${l(s[1],b)},${l(s[2],b)}) `),a+=`${m}(${l(s[0],m)}) `,s.length>1&&(a+=`${b}(-${l(s[1],b)},-${l(s[2],b)}) `)}else a+=`${m}(${d(o[m]).map(s=>l(s,m)).join(",")}) `;return a},d=o=>_(o)?o:String(o).split(/\s+|,/),l=(o,a)=>yt.includes(a)?o+"deg":Et.includes(a)?o+"px":o,S=o=>M(o)?o.replace(/(deg)|(px)/g,"").trim():o,T=o=>o.replace(/(path\s*\(\s*["'])|(["']\s*\)\s*$)/g,"").trim().replace(/([a-zA-Z])\s*/g,"$1").replace(/\s+/g,","),v=o=>{let a=/translate\((.*)px,(.*)px\) rotate\((.*)deg\) translate\((.*)px,(.*)px\)\s+/,m=a.exec(o);return m&&Number(m[1])===Number(m[4])*-1&&Number(m[2])===Number(m[5])*-1?o=o.replace(a,`rotate(${m[3]}, ${m[1]}, ${m[2]})`):o=S(o),o},C=f(e),y=p(t),w=this._el.animate(y,C);return w.ready.then(()=>k(n)&&n.call(this,w)),w.finished.then(()=>{let o=y[y.length-1];for(let s in o){let x=At(s);x.startsWith("text-")?this._el.style[s]=o[s]:s!=="offset"&&s in o&&this._el.setAttribute(x,x===Q?T(o[s]):x===tt?v(o[s]):S(o[s]))}r.forEach(s=>s[nt](!0));let a=this._el.querySelectorAll(W),m=this._el.querySelectorAll(`${W}[${nt}]`);a.length===m.length&&a.forEach(s=>s.remove()),k(c)&&c.call(this,w)}),this}function Tt(t){t.extendInstance({animateTo:bt})}var it=Tt;var O={},ot=Symbol(),ft=Symbol(),N=Symbol(),L=Symbol(),D=Symbol(),j=Symbol(),st=Symbol(),z="error",wt="unknown",ct='an invalid "g-for" expression',_t="undefined",Lt="NaN (Not a Number)",V=(t,e)=>new Error(`The expression "${t}" return ${e} value`),at="class",ut="style",Rt=(t,e,n)=>{throw new Error(t+` in ${e} `+n)},Ct=(t=>e=>t[e]||e)("attributeName attributeType baseFrequency calcMode clipPathUnits diffuseConstant edgeMode gradientTransform gradientUnits kernelMatrix kernelUnitLength lengthAdjust limitingConeAngle markerHeight markerUnits markerWidth maskContentUnits maskUnits numOctaves pathLength patternContentUnits patternTransform patternUnits pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits refX refY requiredExtensions requiredFeatures specularConstant specularExponent spreadMethod startOffset stdDeviation stitchTiles surfaceScale systemLanguage tableValues targetX targetY textLength viewBox xChannelSelector yChannelSelector zoomAndPan".split(" ").reduce((t,e)=>(t[e.toLowerCase()]=e,t),{}));function lt(t){if(!t?.el?.parentNode)return null;let e=document.createComment(" ref ");return t.parentNode().insertBefore(e,t.el),t.remove(),e[j]=t,e}function pt(t){try{return new Function(`let ${t} = 0`),!0}catch{return!1}}function It(t){let e=t[j];return t.parentNode.insertBefore(e.el,t),t.remove(),e}R({name:"g-content",exec(t,{expr:e,data:n,evalExpr:c}){let u={...n,$$:{fromURL:async i=>{let h=await fetch(i);if(h.status===200)return h.text();console.warn(`Failed to load URL: ${i} (${h.status})`)},element:t,currentContent:t.content}},f=c(e,u),p=new CustomEvent("load",{bubbles:!0,detail:t}),r=i=>P(i)?"":i;E(f)&&f.then?f.then(i=>{t.content(r(i)),t.dispatchEvent(p)}):(t.content(r(f)),t.dispatchEvent(p))}});R({name:"g-if",exec(t,{expr:e,data:n,evalExpr:c}){if(!c(e,n))return t[N]&&(t[N].forEach(u=>u.remove()),delete t[N]),lt(t)}});R({name:"g-bind",alias:":",arg:!0,exec(t,{expr:e,arg:n,data:c,evalExpr:u}){n=Ct(n);let f=t._el,p={...c,$$:["d","transform"].includes(n)?t["$"+n]:{}};Object.assign(p.$$,{get element(){return t},get attribute(){return n},currentValue(){return n===at?[...f.classList]:n===ut?[...f.style].reduce((i,h)=>(i[h]=f.style[h],i),{}):t[n]()},dynamic(i,h=200,d=0){return t.animateTo((_(i)?i:[i]).map(l=>E(l)&&"offset"in l?{[n]:l.value,offset:l.offset}:{[n]:l}),{duration:h,delay:d}),st}});let r=u(e,p);if(P(r))throw V(e,_t);if(n===at){let i=l=>t.classList.add(l),h=l=>t.classList.remove(l),d=l=>Object.entries(l).forEach(([S,T])=>T?i(S):h(S));if(_(r)){r.forEach(l=>M(l)?i(l):E(l)?d(l):void 0);return}if(E(r)){d(r);return}r&&i(r);return}if(n===ut){Object.entries(r).forEach(([i,h])=>t.style[i](h));return}r!==st&&t[n](r)}});R({name:"g-on",alias:"@",arg:!0,exec(t,{expr:e,arg:n,data:c,evalExpr:u,error:f,code:p}){t[D]=t[D]||{};let r=t[D][n]=t[D][n]||new Map;r.has(e)&&t.removeEventListener(n,r.get(e));let i=function(h){try{let d=u(e,c,t);k(d)&&d.call(t,h)}catch(d){f(d.message,{directive:"g-on",argument:n,expression:e,toString(){return`g-on:${n}="${e}"`}},p)}};t.addEventListener(n,i),r.set(e,i),n==="init"&&!t[ot]&&(t[ot]=!0,t.dispatchEvent(new Event("init")))}});R({name:"g-for",tmpl:!0,exec(t,{expr:e,data:n,error:c}){t[N]=t[N]||[];let u=t.gSVG(lt(t)),f=0;return Ut(e,n,p=>{if(t[N][f])F(t[N][f],p,c,!1);else{let r=t.gSVG(t.tagName());r[L]=t[L].filter(i=>i.name!=="g-for"),[...t.attributes()].forEach(i=>{i.name!=="g-for"&&r.setAttribute(i.name,i.value)}),t.children().forEach(i=>{r.add(i.cloneNode(!0))}),u.before(r),F(r,p,c),r[ft]=!0,t[N].push(r)}f++},p=>{for(;t[N].length>p.length;)t[N].pop().remove()}),!0}});function R({name:t,alias:e,arg:n,tmpl:c,exec:u}){let f=`^(${t}${n?":":""}${e?`|${e})`:")"}${n?"(.*)$":"$"}`,p=new RegExp(f,"i");O[t]={name:t,alias:e,arg:n,tmpl:c,exec:u,check:p}}function Mt(t){for(let e in O){let n=O[e],c=n.check.exec(t);if(c){let u=c[2];return{...n,arg:u}}}}function kt(t){return t.replace(/[{}()[\]]/g,"").split(",").map(e=>(e.includes(":")?e.split(":")[1].trim():e).trim())}function Ft(t,e){return t[Symbol.iterator]?e==="of"?{iterator:[...t],type:J}:{type:z}:X(t)?{iterator:Array(t<0?0:0|t).fill(0).map((n,c)=>c+(e==="of"?0:1)),type:Y}:E(t)?e==="in"?{iterator:Object.entries(t).map(n=>n.reverse()),type:U}:{type:z}:{iterator:t,type:wt}}function mt(t,e,n=null){let c=Object.keys(e).filter(pt),f=B(c,`return ( ${t} ); `).apply(n,c.map(p=>e[p]));if(!K(f))throw V(t,Lt);return f}function Ut(t,e,n,c){let u="__$$i",f="__$$c",p="__$$f",r=t.match(/^\s*([\s\S]+?)[\s*|)}\]](of|in)[\s*|({[]([\s\S]+?)\s*$/);if(!r)throw V(t,ct);let[,i,h,d]=r;h=h.trim(),i=i.trim(),d=d.trim();let l=mt(d,e)||[],{iterator:S,type:T}=Ft(l,h);if(T===z)throw V(t,ct);T===U&&!i.startsWith("[")&&(i=`[${i.replace(/(^\()|(\)$)/g,"")}]`);let v=kt(i),C=i.startsWith("(")?i:`(${i})`,y=Object.keys(e).filter(pt),w=` ${u}.forEach(${C} => { ${f}({${y}${y.length?",":""}${v.join(",")}}); }); ${p}(${u}); `;return B([...y,u,f,p],w)(...y.map(a=>e[a]),S,n,c)}function F(t,e,n,c=!0){if(c&&t[ft])return;let u=t.outerHTML();t[L]=t[L]||[];let f=t.attributes();for(let r of[...f]){let i=r.name,h=Mt(i);h&&(t[L].push({...h,expr:r.value}),t.removeAttribute(i))}let p=!1;for(let r of t[L]){p=r.tmpl||p;try{if(r.exec(t,{...r,data:e,evalExpr:mt,error:n,code:u}))return}catch(i){n(i.message,{directive:r.name,argument:r.arg,expression:r.expr,toString(){return`${r.name}${r.arg?":"+r.arg:""}="${r.expr}"`}},u)}}if(!p)for(let r of t.childNodes())r.el[j]?F(It(r.el),e,n):r.el?.nodeType===1&&F(r,e,n)}function Dt(t={},e=Rt){F(this,t,e),this.dispatchEvent(new Event("render"))}function Ot(){return this.outerHTML().replaceAll("<!-- ref -->","")}function Vt(t){t.install(it),t.extendInstance({render:Dt,source:Ot}),t.extendSetup({extendTemplate:{defineDirective:R,getDirective(e){return O[e]}}})}var q=Vt;globalThis.gSVG&&globalThis.gSVG.install(q);customElements.whenDefined("grapper-view").then(t=>{t.install(q)});})();