grips template examples #1

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=deepClone2(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,n){var r=t.match(/^(.+)#/);r&&(r=r[1]);if(!r)throw h;s(r),c[r].partials[t.replace(/^.*#/,"#")]=function(){var n,r;try{r=e.apply(l,arguments)}catch(i){throw h}if(r instanceof Error)throw r;return r}}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(G){ function __sort_fn__(a,b){ return a-b; } var partial = G.definePartial, clone = G.cloneObj, extend = G.extend, RLH = G.RangeLiteralHash, cID = "tmpl.master.html"; partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "<!DOCTYPE html>\n    <html>\n        <head>\n        <title>grips Templating Engine</title>\n        \n      "; ret2 = $; ret2 = G.render("#styles",ret2,_); ret += ret2; ret += "\n </head>\n       \n      <body>\n        \n      <div id=\"content\">\n  "; ret2 = $; ret2 = G.render("#content",ret2,_); ret += ret2; ret += "\n        </div>\n        \n      "; ret2 = $; ret2 = G.render("#footer",ret2,_); ret += ret2; ret += "\n </body>\n       </html>\n"; return ret; },"tmpl.master.html#master"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "<link rel=\"stylesheet\" type=\"text/css\" href=\"master.css\" />"; return ret; },"tmpl.master.html#styles"); })(this.grips); (function(G){ function __sort_fn__(a,b){ return a-b; } var partial = G.definePartial, clone = G.cloneObj, extend = G.extend, RLH = G.RangeLiteralHash, cID = "tmpl.index.html"; extend(cID,"tmpl.master.html"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; _.userdetails = $.full_name ? "#userdetails" : "#nouser"; ret += "\n    <h1>grips Template Engine</h1>\n\n      <p>This is how a grips Template works.</p>\n    \n      \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       "; ret2 = $; ret2 = G.render(_.userdetails,ret2,_); ret += ret2; ret += "\n"; return ret; },"tmpl.index.html#content"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; _.info = $.info ? "#info" : ""; _.mylinks = $.links.length ? "#links" : "#nolinks"; ret += "\n        <div id=\"userdetails\">\n              "; ret2 = $; ret2 = G.render("#controls",ret2,_); ret += ret2; ret += "\n       \n              <h3>User Details</h3>\n\n               <p>Welcome back, "; ret += $.full_name; ret += "!</p>\n         \n              "; ret2 = $; ret2 = G.render(_.info,ret2,_); ret += ret2; ret += "\n            \n              <h3>Your Links</h3>\n           \n              "; ret2 = $; ret2 = G.render(_.mylinks,ret2,_); ret += ret2; ret += "\n </div>\n"; return ret; },"tmpl.index.html#userdetails"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; _.which_controls = $.full_name ? "#logout" : "tmpl.other.html#login"; ret += "\n     <p>"; ret2 = $; ret2 = G.render(_.which_controls,ret2,_); ret += ret2; ret += "</p>\n"; return ret; },"tmpl.index.html#controls"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\n <h3>Random Info</h3>\n  \n      <p>"; ret += $.info; ret += "</p>\n"; return ret; },"tmpl.index.html#info"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "<a class=\"controls logout\" href=\"#\">Logout</a>"; return ret; },"tmpl.index.html#logout"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\n       <ul>\n  \n      "; ret2 = (function($,_,$$){ function __iter__($,_,value,key,index){ var i, ret = "", ret2, $$; if (value == null) return ret; $ = clone($); _ = clone(_); $$ = { value: value, key: key, index: index, even: (index % 2) === 0, odd: (index % 2) === 1, first: (index === 0), last: (index === len - 1) }; ret += "\n          <!-- li:"; ret += $$.key; ret += " -->\n                "; ret2 = $$; ret2 = G.render("#listitem",ret2,_); ret += ret2; ret += " <!-- set $$ as the data context -->\n  "; return ret; } var i, j = 0, len, ret = "", it, tmp; it = $.links; if (it == null) { return ""; } if (Object.prototype.toString.call(it) === "[object Array]") { len = it.length; for (i=0; i<len; i++) { ret2 = __iter__($,_,it[i],""+i,i); ret += ret2; } } else if (typeof it === "object") { tmp = Object.keys(it); len = tmp.length; if (it instanceof RLH) { tmp.sort(__sort_fn__); for (i=0; i<len; i++) { ret2 = __iter__($,_,it[tmp[i]],tmp[i],i); ret += ret2; } } else { for (i in it) { if (it.hasOwnProperty(i)) { ret2 = __iter__($,_,it[i],i,j++); ret += ret2; }} } } else { return new Error("Unknown error"); } return ret; })(clone($),clone(_),clone($$)); ret += ret2; ret += "\n        </ul>\n"; return ret; },"tmpl.index.html#links"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; _.evenodd = $.even ? "even" : "odd"; _.first = $.first ? "first" : ""; _.last = $.last ? "last" : ""; ret += "\n    <li id=\"link_"; ret += $.key; ret += "\" class=\""; ret += _.evenodd; ret += " "; ret += _.first; ret += " "; ret += _.last; ret += "\">\n             <a href=\""; ret += $.value; ret += "\">"; ret += $.value; ret += "</a>\n\n             \n              <div>context:</div>\n           <ul>\n          "; ret2 = (function($,_,$$){ function __iter__($,_,value,key,index){ var i, ret = "", ret2, $$; if (value == null) return ret; $ = clone($); _ = clone(_); $$ = { value: value, key: key, index: index, even: (index % 2) === 0, odd: (index % 2) === 1, first: (index === 0), last: (index === len - 1) }; ret += "\n                  <li>"; ret += $$.key; ret += ": "; ret += $$.value; ret += "</li>\n             "; return ret; } var i, j = 0, len, ret = "", it, tmp; it = $; if (it == null) { return ""; } if (Object.prototype.toString.call(it) === "[object Array]") { len = it.length; for (i=0; i<len; i++) { ret2 = __iter__($,_,it[i],""+i,i); ret += ret2; } } else if (typeof it === "object") { tmp = Object.keys(it); len = tmp.length; if (it instanceof RLH) { tmp.sort(__sort_fn__); for (i=0; i<len; i++) { ret2 = __iter__($,_,it[tmp[i]],tmp[i],i); ret += ret2; } } else { for (i in it) { if (it.hasOwnProperty(i)) { ret2 = __iter__($,_,it[i],i,j++); ret += ret2; }} } } else { return new Error("Unknown error"); } return ret; })(clone($),clone(_),clone($$)); ret += ret2; ret += "\n              </ul>\n </li>\n"; return ret; },"tmpl.index.html#listitem"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\n       "; ret2 = $; ret2 = G.render("#controls",ret2,_); ret += ret2; ret += "\n"; return ret; },"tmpl.index.html#nouser"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\n       <p>-no links yet-</p>\n"; return ret; },"tmpl.index.html#nolinks"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\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"; return ret; },"tmpl.index.html#footer"); partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "\n      "; ret2 = $; ret2 = G.render("tmpl.master.html#styles",ret2,_); ret += ret2; ret += "  <!-- Look, template inheritance/polymorphism!! -->\n     <link rel=\"stylesheet\" type=\"text/css\" href=\"index.css\" />\n"; return ret; },"tmpl.index.html#styles"); })(this.grips); (function(G){ function __sort_fn__(a,b){ return a-b; } var partial = G.definePartial, clone = G.cloneObj, extend = G.extend, RLH = G.RangeLiteralHash, cID = "tmpl.other.html"; partial(function($,_){ $ = clone($) || {}; _ = clone(_) || {}; var i, ret = "", ret2, $$; ret += "<a class=\"controls login\" href=\"#\">Login</a>"; return ret; },"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"],"_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