grips template examples #1 (v2)

Revision 2 of this benchmark created by Kyle Simpson on


Description

testing performance of rendering already-compiled template

Preparation HTML

<script>
/* grips (c) 2012 Kyle Simpson | http://getify.mit-license.org/ */
;Object.keys||(Object.keys=function(t){var n,r=[];for(n in t)t.hasOwnProperty(n)&&r.push(n);return r}),function(t){function r(){function e(){}function i(){var e=t.grips;return t.grips=n,e}function s(e){e in c||(c[e]={collection:"",extend:null,partials:{}})}function o(e,t){s(e),c[e].extend=t}function u(t){var n,r,i;if(typeof t=="object"){if(t===null)return t;if(Object.prototype.toString.call(t)==="[object Array]"){r=[];for(n=0;n<t.length;n++)typeof t[n]=="object"?i=u(t[n]):i=t[n],r.push(i)}else{t instanceof e?r=new e:r={};for(n in t)t.hasOwnProperty(n)&&(typeof (t[n]==="object")?i=u(t[n]):i=t[n],r[n]=i)}}else r=t;return r}function a(e,t){var n=t.match(/^(.+)#/);n&&(n=n[1]);if(!n)throw h;s(n),c[n].partials[t.replace(/^.*#/,"#")]=function(){var n;try{n=e.apply(l,arguments)}catch(r){throw h}if(n instanceof Error)throw n;return n}}function f(e,t,n){if(!e)return"";var r,i,s,o,u=[],a=!1,f=!1;r=e.match(/^(.+)#/),r&&(r=r[1],a=!0);if(!a&&p.length>0)r=p[p.length-1];else if(!a||p.length>0&&p[p.length-1]===r){if(!r)throw h}else p.push(r),f=!0;if(r in c){e=e.replace(/^(.+)#/,"#"),o=r+e,d.push(o);for(s=0;s<d.length-1;s++)if(d[s]===o)throw h;a?u.push(r):u=u.concat(p);if(!(e in c[r].partials)&&c[r].extend){o=c[r].extend;while(o&&o in c)u.push(o),o=c[o].extend}for(s=0;s<u.length;s++)if(e in c[u[s]].partials){i=c[u[s]].partials[e](t,n);break}}if(i)return d.pop(),f&&p.pop(),i;throw h}var l,c={},h=new Error("Unknown error"),p=[],d=[];return l={extend:o,cloneObj:u,definePartial:a,render:f,noConflict:i,sandbox:r,RangeLiteralHash:e},l}var n=t.grips;t.grips=r()}(this);
</script>

<script>
;(function(e){function t(e,t){return e-t}var n=e.definePartial,r=e.cloneObj,i=e.extend,s=new Error("Unknown error"),o=e.RangeLiteralHash,u="tmpl.master.html";n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return s+="<!DOCTYPE html>\n <html>\n        <head>\n        <title>grips Templating Engine</title>\n        \n      ",o=t,o=e.render("#styles",o,n),s+=o,s+='\n     </head>\n       \n      <body>\n\n      <div id="content">\n    ',o=t,o=e.render("#content",o,n),s+=o,s+="\n    </div>\n        \n      ",o=t,o=e.render("#footer",o,n),s+=o,s+="\n\n    this is {$ raw $} stuff! \n\n  </body>\n       </html>\n",s},"tmpl.master.html#master"),n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+='<link rel="stylesheet" type="text/css" href="master.css" />',i},"tmpl.master.html#styles")})(this.grips),function(e){function t(e,t){return e-t}var n=e.definePartial,r=e.cloneObj,i=e.extend,s=new Error("Unknown error"),o=e.RangeLiteralHash,u="tmpl.index.html";i(u,"tmpl.master.html"),n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return n.userdetails=t.full_name?"#userdetails":"#nouser",s+="\n      <h1>grips Template Engine</h1>\n\n      <p>This is how a grips Template works.</p>\n    \n      <p>\n    \n             <!-- start of a raw template tag, which disables template parsing inside -->\n          Here's how to put in some completely raw $} \n          {$/ unparsed /$} content!\n             <!-- here comes the end of the raw tag -->  \n  \n      </p>\n\n        <hr />\n        \n      <!-- let's include another template partial -->\n       ",o=t,o=e.render(n.userdetails,o,n),s+=o,s+="\n",s},"tmpl.index.html#content"),n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return n.info=t.info?"#info":"",n.mylinks=t.links.length?"#links":"#nolinks",s+='\n <div id="userdetails">\n                ',o=t,o=e.render("#controls",o,n),s+=o,s+="\n   \n              <h3>User Details</h3>\n\n               <p>Welcome back, ",s+=t.full_name,s+="!</p>\n           \n              ",o=t,o=e.render(n.info,o,n),s+=o,s+="\n                \n              <h3>Your Links</h3>\n           \n              ",o=t,o=e.render(n.mylinks,o,n),s+=o,s+="\n     </div>\n",s},"tmpl.index.html#userdetails"),n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return n.which_controls=t.full_name?"#logout":"tmpl.other.html#login",s+="\n   <p>",o=t,o=e.render(n.which_controls,o,n),s+=o,s+="</p>\n",s},"tmpl.index.html#controls"),n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+="\n    <h3>Random Info</h3>\n  \n      <p>",i+=e.info,i+="</p>\n",i},"tmpl.index.html#info"),n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+='<a class="controls logout" href="#">Logout</a>',i},"tmpl.index.html#logout"),n(function(n,i){n=r(n)||{},i=r(i)||{};var s,u="",a,f;return u+="\n   <ul>\n  \n      ",a=function(n,i,s){function u(t,n,i,s,o){var u,a="",f,l;return i==null?a:(t=r(t),n=r(n),l={value:i,key:s,index:o,even:o%2===0,odd:o%2===1,first:o===0,last:o===c-1},a+="\n             <!-- li:",a+=l.key,a+=" -->\n           ",f=l,f=e.render("#listitem",f,n),a+=f,a+=" <!-- set _ as the data context -->\n        ",a)}var f,l=0,c,h="",p,d;p=n.links;if(p==null)return"";if(Object.prototype.toString.call(p)==="[object Array]"){c=p.length;for(f=0;f<c;f++)a=u(n,i,p[f],""+f,f),h+=a}else if(typeof p=="object"){d=Object.keys(p),c=d.length;if(p instanceof o){d.sort(t);for(f=0;f<c;f++)a=u(n,i,p[d[f]],d[f],f),h+=a}else for(f in p)p.hasOwnProperty(f)&&(a=u(n,i,p[f],f,l++),h+=a)}else returnunerr;return h}(r(n),r(i),r(f)),u+=a,u+="\n  </ul>\n\n       Some numbers (* is my favorite):\n      ",a=function(e,t,n){function i(e,t,n,i,s){var u,a="",l,c;if(n==null)return a;e=r(e),t=r(t),c={value:n,key:i,index:s,even:s%2===0,odd:s%2===1,first:s===0,last:s===f-1},t.fave=new o;for(u=-1;u<=6;u++)t.fave[""+u]=e.favenum===u?"*":"";return a+=t.fave[c.value],a+=c.value,a+=" ",a}var s,u=0,f,l="",c,h;f=8;for(s=-1;s<=6;s++)a=i(e,t,s,""+s,u++),l+=a;return l}(r(n),r(i),r(f)),u+=a,u+="\n\n       Will I be going to the party:\n ",a=function(e,t,n){function i(e,t,n,i,s){var o,a="",f,l;if(n==null)return a;e=r(e),t=r(t),l={value:n,key:i,index:s,even:s%2===0,odd:s%2===1,first:s===0,last:s===u-1},t.chosen={};var c=["yes","no","maybe"];for(o=0;o<3;o++)t.chosen[c[o]]=e.mychoice===c[o]?"X":" ";return a+="\n            ",a+=t.chosen[l.value],a+=" ",a+=l.value,a+="\n ",a}var s,o=0,u,f="",l,c,h=["yes","no","maybe"];for(s=0;s<3;s++)u=h.length,a=i(e,t,h[s],""+s,s),f+=a;return f}(r(n),r(i),r(f)),u+=a,u+="\n",u},"tmpl.index.html#links"),n(function(e,n){e=r(e)||{},n=r(n)||{};var i,s="",u,a;return n.evenodd=e.even?"even":"odd",n.first=e.first?"first":"",n.last=e.last?"last":"",s+='\n     <li id="link_',s+=e.key,s+='" class="',s+=n.evenodd,s+=" ",s+=n.first,s+=" ",s+=n.last,s+='">\n         <a href="',s+=e.value,s+='">',s+=e.value,s+="</a>\n\n           \n              <div>context:</div>\n           <ul>\n          ",u=function(e,n,i){function s(e,t,n,i,s){var o,u="",a,f;return n==null?u:(e=r(e),t=r(t),f={value:n,key:i,index:s,even:s%2===0,odd:s%2===1,first:s===0,last:s===l-1},u+="\n                     <li>",u+=f.key,u+=": ",u+=f.value,u+="</li>\n           ",u)}var a,f=0,l,c="",h,p;h=e;if(h==null)return"";if(Object.prototype.toString.call(h)==="[object Array]"){l=h.length;for(a=0;a<l;a++)u=s(e,n,h[a],""+a,a),c+=u}else if(typeof h=="object"){p=Object.keys(h),l=p.length;if(h instanceof o){p.sort(t);for(a=0;a<l;a++)u=s(e,n,h[p[a]],p[a],a),c+=u}else for(a in h)h.hasOwnProperty(a)&&(u=s(e,n,h[a],a,f++),c+=u)}else returnunerr;return c}(r(e),r(n),r(a)),s+=u,s+="\n                </ul>\n </li>\n",s},"tmpl.index.html#listitem"),n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return s+="\n      ",o=t,o=e.render("#controls",o,n),s+=o,s+="\n",s},"tmpl.index.html#nouser"),n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+="\n  <p>-no links yet-</p>\n",i},"tmpl.index.html#nolinks"),n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+='\n<script src="grips.js"><\/script>\n<script src="template-bundle.js"><\/script>\n<script>\ndocument.getElementByID("content").innerHTML =\n     grips.render("tmpl.index.html#content",{/*...*/});\n<\/script>\n',i},"tmpl.index.html#footer"),n(function(t,n){t=r(t)||{},n=r(n)||{};var i,s="",o,u;return s+="\n       ",o=t,o=e.render("tmpl.master.html#styles",o,n),s+=o,s+='  <!-- Look, template inheritance/polymorphism!! -->\n <link rel="stylesheet" type="text/css" href="index.css" />\n',s},"tmpl.index.html#styles")}(this.grips),function(e){function t(e,t){return e-t}var n=e.definePartial,r=e.cloneObj,i=e.extend,s=new Error("Unknown error"),o=e.RangeLiteralHash,u="tmpl.other.html";n(function(e,t){e=r(e)||{},t=r(t)||{};var n,i="",s,o;return i+='<a class="controls login" href="#">Login</a>',i},"tmpl.other.html#login")}(this.grips);
</script>

<script>
var data;
</script>

Setup

data = {"full_name":"Kyle Simpson","info":"I'm a lawyer.","links":["http://getify.me","http://getify.com"],"favenum":3,"mychoice":"maybe","_rand":Math.random()};

Test runner

Ready to run.

Testing in
TestOps/sec
test 1
grips.render("tmpl.index.html#master",data);
ready
test 2
grips.render("tmpl.index.html#master",data);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Kyle Simpson on
  • Revision 2: published by Kyle Simpson on