initial commit

caolan · Oct 25, 2010 · 170b3e2 · 170b3e2
commit 170b3e2
Show file tree

Hide file tree

Showing 33 changed files with 9,405 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/nbproject
diff --git a/Makefile b/Makefile
@@ -0,0 +1,19 @@
+#
+# Run all tests
+#
+test:
+	node test/server.js
+
+#
+# Run the benchmarks
+#
+bench:
+	node benchmark/server.js
+
+#
+# Build the docs
+#
+docs:
+	node docs/build.js
+
+.PHONY: test docs bench
diff --git a/README.md b/README.md
diff --git a/benchmark/index.html b/benchmark/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>shootout</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style type="text/css">
+      body {
+        background-color: #eee;
+        font-family: Helvetica, Arial, sans-serif;
+        margin: 0 10%;
+        text-shadow: white 1px 1px 0px;
+      }
+
+      p {
+        color: #777;
+      }
+
+      #header p {
+        color: #555;
+        font-size: 1.1em;
+        font-weight: bold;
+      }
+
+      h1 {
+        font-size: 7em;
+        font-weight: bold;
+        color: #333;
+        margin-top: 0.10em;
+        margin-bottom: -0.25em;
+      }
+
+      .chart {
+        border: 4px solid #ccc;
+        float: left;
+        margin-right: 1em;
+        margin-bottom: 1em;
+      }
+
+      #control {
+        margin-bottom: 1em;
+      }
+
+      #progress {
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        border: 1px solid #aaa;
+        padding: 2px;
+      }
+
+      #progress div {
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        height: 25px;
+        width: 0%;
+        background-color: #888;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header">
+      <h1>shootout</h1>
+      <p>Template benchmarks (ops per millisecond)</p>
+    </div>
+
+    <div id="control">
+      <div id="progress"><div></div></div>
+      <button id="run" style="display:none;">Run</button>
+    </div>
+
+    <div id="content">
+      <div id="charts"></div>
+      <p style="clear: both">Targets: <a href="http://akdubya.github.com/dustjs">Dust</a>, <a href="http://github.com/wycats/handlebars.js">Handlebars</a>, <a href="http://mustache.github.com/">Mustache</a>, <a href="http://api.jquery.com/tmpl/">jquery-tmpl</a>. Each benchmark runs once using an adaptive test cycles algorithm similar to the one found in <a href="http://github.com/broofa/jslitmus">jslitmus</a>.</p>
+    </div>
+
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="uubench.js"></script>
+    <script src="../lib/parser.js"></script>
+    <script src="../lib/compiler.js"></script>
+    <script src="../lib/dust.js"></script>
+    <script src="suites/dust_suite.js"></script>
+    <script src="suites/mustache_suite.js"></script>
+    <script src="suites/handlebars_suite.js"></script>
+    <script src="suites/jquery_suite.js"></script>
+    <script src="http://github.com/wycats/handlebars.js/raw/master/lib/handlebars.js"></script>
+    <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"</script>
+    <script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+      google.load('visualization', '1.0', {packages: ['imagechart']});
+    </script>
+
+    <script>
+      $(document).ready(function(){
+        var testQueue = [];
+        var $bar = $('#progress > div');
+        var tick;
+
+        function runAll() {
+          $bar.css('width', "0%");
+          $('#progress').show();
+          for (var key in dustBench.benches) { testQueue.push(key) }
+          tick = 100 / testQueue.length;
+          $('#charts').empty();
+          next();
+        }
+
+        function next() {
+          var test = testQueue.shift();
+          if (test) {
+            runSuite(test);
+          } else {
+            $('#progress').fadeOut(1000, function() {
+              $('#run').fadeIn();
+            });
+          }
+        }
+
+        function runSuite(type) {
+          var rows = [];
+          var suite = new uubench.Suite({
+            iterations: 1000,
+            result: function(name, stats) {
+              var opms = stats.iterations/stats.elapsed;
+              rows.push([name, opms]);
+            },
+            start: function() {
+              $('#charts').append("<div id=\"" + type + "\" class=\"chart\"></div>");
+            },
+            done: function() {
+              var pct = parseFloat($bar.css('width')) + tick;
+              drawBarChart(type, rows);
+              $('#progress > div').css('width', pct + "%");
+              next();
+            }
+          });
+          dustBench(suite, type, "dust");
+          handlebarsBench(suite, type, "handlebars");
+          mustacheBench(suite, type, "mustache");
+          jqueryBench(suite, type, "jquery");
+          suite.run();
+        }
+
+        function drawBarChart(type, rows) {
+          var dataTable = new google.visualization.DataTable();
+          dataTable.addColumn("string", "engine");
+          dataTable.addColumn("number", "ops");
+          dataTable.addRows(rows);
+
+          var chart = new google.visualization.ImageChart(document.getElementById(type));
+          chart.draw(dataTable, {title: type, cht: 'bhs', chs: '420x175'});
+        }
+
+        $('#run').click(function() {
+          $('#run').hide();
+          runAll();
+          return false;
+        });
+
+        runAll();
+      });
+    </script>
+  </body>
+</html>
diff --git a/benchmark/server.js b/benchmark/server.js
@@ -0,0 +1,31 @@
+var uubench    = require('./uubench'),
+    dust       = require('../lib/dust'),
+    dustBench  = require('./suites/dust_suite').dustBench;
+
+uubench.nextTick = process.nextTick;
+
+var suite = new uubench.Suite({
+  iterations: 10000,
+  result: function(name, stats) {
+    var opms = stats.iterations/stats.elapsed;
+    console.log(pad(12, name + ": "), pad(5, Math.round(opms), true));
+  }
+});
+
+function pad(amt, val, pre) {
+  val = String(val);
+  var len = amt - val.length, out = '';
+  for (var i=0; i<len; i++) {
+    out += ' ';
+  }
+  return pre ? out + val : val + out;
+}
+
+console.log("ops/ms");
+console.log("------");
+
+for (var key in dustBench.benches) {
+  dustBench(suite, key);
+}
+
+suite.run();
diff --git a/benchmark/suites/dust_suite.js b/benchmark/suites/dust_suite.js
@@ -0,0 +1,111 @@
+(function(exports){
+
+var benches = {
+
+  string: {
+    source:  "Hello World!",
+    context: {}
+  },
+
+  replace: {
+    source:  "Hello {name}! You have {count} new messages.",
+    context: { name: "Mick", count: 30 }
+  },
+
+  array: {
+    source:  "{#names}{name}{/names}",
+    context: { names: [
+                 { name: "Moe" },
+                 { name: "Larry" },
+                 { name: "Curly" },
+                 { name: "Shemp" }
+               ]
+             }
+  },
+
+  object: {
+    source:  "{#person}{name}{age}{/person}",
+    context: { person: { name: "Larry", age: 45 } }
+  },
+
+  partial: {
+    source:  "{#peeps}{>replace/}{/peeps}",
+    context: { peeps: [
+                 { name: "Moe", count: 15 },
+                 { name: "Larry", count: 5 },
+                 { name: "Curly", count: 0 }
+               ]
+             }
+  },
+
+  recursion: {
+    source:  "{name}{#kids}{>recursion:./}{/kids}",
+    context: {
+                name: '1',
+                kids: [
+                  {
+                    name: '1.1',
+                    kids: [
+                      {name: '1.1.1'}
+                    ]
+                  }
+                ]
+             }
+  },
+
+  filter: {
+    source:  "{#filter}foo {bar}{/filter}",
+    context: {
+                filter: function(chunk, context, bodies) {
+                  return chunk.tap(function(data) {
+                    return data.toUpperCase();
+                  }).render(bodies.block, context).untap();
+                },
+                bar: "bar"
+             }
+  },
+
+  complex: {
+    source:  "<h1>{header}</h1>\n"                             +
+             "{?items}\n"                                      +
+             "  <ul>\n"                                        +
+             "    {#items}\n"                                  +
+             "      {#current}\n"                              +
+             "        <li><strong>{name}</strong></li>\n"      +
+             "      {:else}\n"                                 +
+             "        <li><a href=\"{url}\">{name}</a></li>\n" +
+             "      {/current}\n"                              +
+             "    {/items}\n"                                  +
+             "  </ul>\n"                                       +
+             "{:else}\n"                                       +
+             "  <p>The list is empty.</p>\n"                   +
+             "{/items}",
+    context: {
+               header: function() {
+                 return "Colors";
+               },
+               items: [
+                 {name: "red", current: true, url: "#Red"},
+                 {name: "green", current: false, url: "#Green"},
+                 {name: "blue", current: false, url: "#Blue"}
+               ]
+             }
+  }
+
+}
+
+exports.dustBench = function(suite, name, id) {
+  var bench = benches[name],
+      ctx = bench.context;
+
+  dust.loadSource(dust.compile(bench.source, name));
+  suite.bench(id || name, function(next) {
+    dust.render(name, ctx, function() {
+      next();
+    });
+  });
+};
+
+exports.dustBench.benches = benches;
+
+})(typeof exports !== "undefined" ? exports : window);