grapper/dist/module/plugins/template.engine.js

Data Visualization Microframework

/* grapper - 1.1.0-beta.3 [module:plugin.template.engine] */ var ht="function",dt="undefined",U="object",$t="string",q="array",v="number";var I=(t,e)=>typeof t===e;var E=t=>I(t,U),M=t=>I(t,$t),k=t=>I(t,ht),J=t=>I(t,v)&&!isNaN(t),X=t=>!Number.isNaN(t),P=t=>I(t,dt);var _=t=>Array.isArray(t);var K=t=>t.replace(/-([a-z0-9])/g,(e,n)=>n.toUpperCase());var B=new Map;var xt=async function(){}.constructor;function G(t,e,n=!1){let c=`${t.join(",")} ${e}`;if(B.has(c))return B.get(c);let u=new(n?xt:Function)(...t,e);return B.set(c,u),u}var W="animate",Nt="path",Z="d",Q="transform",nt="rotate",b="translate",tt="inherit",et="finished",gt=[nt,"skewX","skewY"],yt=[b,"width","height","x","y","cx","cy","r","rx","ry","dx","dy"],Et=(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 St(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 S in x){let N=K(S);$[N]=l(x[S],N),!(N in a)||Et(this.tagName(),N)?s.add(N):N===Z?$.d=`${Nt}("${$.d}")`:N===Q&&($.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 $=[],S=[];for(let N in m){let mt=m[N];s in a[N]&&($.push(mt.computedOffset),S.push(a[N][s]))}$[0]!==0&&($.unshift(0),S.unshift(this[s]()||tt)),$[$.length-1]!==1&&($.push(1),S.push(this[s]()||tt)),x.keyTimes($.join(";")).values(S.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===nt){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)=>gt.includes(a)?o+"deg":yt.includes(a)?o+"px":o,A=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,","),Y=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=A(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===Z?T(o[s]):x===Q?Y(o[s]):A(o[s]))}r.forEach(s=>s[et](!0));let a=this._el.querySelectorAll(W),m=this._el.querySelectorAll(`${W}[${et}]`);a.length===m.length&&a.forEach(s=>s.remove()),k(c)&&c.call(this,w)}),this}function bt(t){t.extendInstance({animateTo:St})}var rt=bt;var D={},it=Symbol(),ut=Symbol(),g=Symbol(),L=Symbol(),O=Symbol(),j=Symbol(),ot=Symbol(),z="error",Tt="unknown",st='an invalid "g-for" expression',wt="undefined",_t="NaN (Not a Number)",V=(t,e)=>new Error(`The expression "${t}" return ${e} value`),ct="class",at="style",Lt=(t,e,n)=>{throw new Error(t+` in ${e} `+n)},Rt=(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 ft(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 lt(t){try{return new Function(`let ${t} = 0`),!0}catch{return!1}}function Ct(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[g]&&(t[g].forEach(u=>u.remove()),delete t[g]),ft(t)}});R({name:"g-bind",alias:":",arg:!0,exec(t,{expr:e,arg:n,data:c,evalExpr:u}){n=Rt(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===ct?[...f.classList]:n===at?[...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}),ot}});let r=u(e,p);if(P(r))throw V(e,wt);if(n===ct){let i=l=>t.classList.add(l),h=l=>t.classList.remove(l),d=l=>Object.entries(l).forEach(([A,T])=>T?i(A):h(A));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===at){Object.entries(r).forEach(([i,h])=>t.style[i](h));return}r!==ot&&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[O]=t[O]||{};let r=t[O][n]=t[O][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[it]&&(t[it]=!0,t.dispatchEvent(new Event("init")))}});R({name:"g-for",tmpl:!0,exec(t,{expr:e,data:n,error:c}){t[g]=t[g]||[];let u=t.gSVG(ft(t)),f=0;return Ft(e,n,p=>{if(t[g][f])F(t[g][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[ut]=!0,t[g].push(r)}f++},p=>{for(;t[g].length>p.length;)t[g].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");D[t]={name:t,alias:e,arg:n,tmpl:c,exec:u,check:p}}function It(t){for(let e in D){let n=D[e],c=n.check.exec(t);if(c){let u=c[2];return{...n,arg:u}}}}function Mt(t){return t.replace(/[{}()[\]]/g,"").split(",").map(e=>(e.includes(":")?e.split(":")[1].trim():e).trim())}function kt(t,e){return t[Symbol.iterator]?e==="of"?{iterator:[...t],type:q}:{type:z}:J(t)?{iterator:Array(t<0?0:0|t).fill(0).map((n,c)=>c+(e==="of"?0:1)),type:v}:E(t)?e==="in"?{iterator:Object.entries(t).map(n=>n.reverse()),type:U}:{type:z}:{iterator:t,type:Tt}}function pt(t,e,n=null){let c=Object.keys(e).filter(lt),f=G(c,`return ( ${t} ); `).apply(n,c.map(p=>e[p]));if(!X(f))throw V(t,_t);return f}function Ft(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,st);let[,i,h,d]=r;h=h.trim(),i=i.trim(),d=d.trim();let l=pt(d,e)||[],{iterator:A,type:T}=kt(l,h);if(T===z)throw V(t,st);T===U&&!i.startsWith("[")&&(i=`[${i.replace(/(^\()|(\)$)/g,"")}]`);let Y=Mt(i),C=i.startsWith("(")?i:`(${i})`,y=Object.keys(e).filter(lt),w=` ${u}.forEach(${C} => { ${f}({${y}${y.length?",":""}${Y.join(",")}}); }); ${p}(${u}); `;return G([...y,u,f,p],w)(...y.map(a=>e[a]),A,n,c)}function F(t,e,n,c=!0){if(c&&t[ut])return;let u=t.outerHTML();t[L]=t[L]||[];let f=t.attributes();for(let r of[...f]){let i=r.name,h=It(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:pt,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(Ct(r.el),e,n):r.el?.nodeType===1&&F(r,e,n)}function Ut(t={},e=Lt){F(this,t,e),this.dispatchEvent(new Event("render"))}function Ot(){return this.outerHTML().replaceAll("<!-- ref -->","")}function Dt(t){t.install(rt),t.extendInstance({render:Ut,source:Ot}),t.extendSetup({extendTemplate:{defineDirective:R,getDirective(e){return D[e]}}})}var Ht=Dt;export{Ht as default};