I can render html with no handlebars, no handlebars, no handlebars...

.gitignore

@@ -4,5 +4,4 @@
 
 # not shared with .npmignore
 /public/app.js
-/public/views.js
 /public/app.css

build

@@ -2,4 +2,3 @@
 mkdir -p public
 ./node_modules/.bin/stylus -o public/ -c --include-css src/client/styles
 ./node_modules/.bin/browserify src/client/app.js --outfile public/app.js
-./node_modules/.bin/handlebars -f public/views.js src/client/views/

package.json

@@ -41,7 +41,6 @@
     "multiparty": "^3.2.3"
   },
   "devDependencies": {
-    "handlebars": "1.0.7",
     "stylus": "^0.42.3",
     "browserify": "~3.32.0"
   },

src/client/app.js

@@ -1,5 +1,4 @@
 var $ = window.$;
-var Handlebars = window.Handlebars;
 
 var shuffle = require('mess');
 var querystring = require('querystring');
@@ -902,13 +901,61 @@ function render(){
   handleResize();
 }
 
-function genericToggleExpansion($li, options){
+function renderArtist($ul, albumList) {
+  albumList.forEach(function(album) {
+    $ul.append(
+      '<li>' +
+        '<div class="clickable expandable" data-type="album">' +
+          '<div class="ui-icon ui-icon-triangle-1-e"></div>' +
+          '<span></span>' +
+        '</div>' +
+        '<ul style="display: none;"></ul>' +
+      '</li>');
+    var liDom = $ul.get(0).lastChild;
+    var divDom = liDom.children[0];
+    divDom.setAttribute('id', toAlbumId(album.key));
+    divDom.setAttribute('data-key', album.key);
+    var spanDom = divDom.children[1];
+    spanDom.textContent = album.name || '[Unknown Album]';
+
+    var artistUlDom = liDom.children[1];
+    var $artistUlDom = $(artistUlDom);
+    album.trackList.forEach(function(track) {
+      $artistUlDom.append(
+        '<li>' +
+          '<div class="clickable" data-type="track">' +
+            '<span></span>' +
+          '</div>' +
+        '</li>');
+      var trackLiDom = artistUlDom.lastChild;
+      var trackDivDom = trackLiDom.children[0];
+      trackDivDom.setAttribute('id', toTrackId(track.key));
+      trackDivDom.setAttribute('data-key', track.key);
+      var trackSpanDom = trackDivDom.children[0];
+      var caption = "";
+      if (track.track) {
+        caption += track.track + ". ";
+      }
+      if (track.compilation) {
+        caption += track.artistName + " - ";
+      }
+      caption += track.name;
+      trackSpanDom.textContent = caption;
+    });
+  });
+}
+
+function toggleLibraryExpansion($li){
   var $div = $li.find("> div");
   var $ul = $li.find("> ul");
-  if ($div.attr('data-type') === options.top_level_type) {
+  if ($div.attr('data-type') === 'artist') {
     if (!$li.data('cached')) {
       $li.data('cached', true);
-      $ul.html(options.template(options.context($div.attr('data-key'))));
+      var artistKey = $div.attr('data-key');
+      var albumList = player.searchResults.artistTable[artistKey].albumList;
+
+      renderArtist($ul, albumList);
+
       $ul.toggle();
       refreshSelection();
     }
@@ -924,18 +971,6 @@ function genericToggleExpansion($li, options){
   $div.find("div").removeClass(old_class).addClass(new_class);
 }
 
-function toggleLibraryExpansion($li){
-  return genericToggleExpansion($li, {
-    top_level_type: 'artist',
-    template: Handlebars.templates.albums,
-    context: function(key){
-      return {
-        albumList: player.searchResults.artistTable[key].albumList
-      };
-    }
-  });
-}
-
 function confirmDelete(keysList) {
   var fileList = keysList.map(function(key) {
     return player.library.trackTable[key].file;
@@ -2197,17 +2232,15 @@ function setUpUi(){
   setUpUploadUi();
   setUpSettingsUi();
 }
-function initHandlebars(){
+
-  Handlebars.registerHelper('artistid', function(s){
+function toAlbumId(s) {
-    return "lib-artist-" + toHtmlId(s);
-  });
-  Handlebars.registerHelper('albumid', function(s){
   return "lib-album-" + toHtmlId(s);
-  });
-  Handlebars.registerHelper('trackid', function(s){
-    return "lib-track-" + toHtmlId(s);
-  });
 }
+
+function toTrackId(s) {
+  return "lib-track-" + toHtmlId(s);
+}
+
 function handleResize(){
   $nowplaying.width(MARGIN);
   $pl_window.height(MARGIN);
@@ -2291,7 +2324,6 @@ $document.ready(function(){
     render();
   });
   setUpUi();
-  initHandlebars();
   streaming.init(player, socket);
   render();
   $window.resize(handleResize);

src/client/views/albums.handlebars

@@ -1,17 +0,0 @@
-{{#albumList}}
-  <li>
-    <div class="clickable expandable" id="{{albumid key}}" data-key="{{key}}" data-type="album">
-      <div class="ui-icon ui-icon-triangle-1-e"></div>
-      <span>{{#if name}}{{name}}{{else}}[Unknown Album]{{/if}}</span>
-    </div>
-    <ul style="display: none;">
-      {{#trackList}}
-        <li>
-          <div class="clickable" id="{{trackid key}}" data-key="{{key}}" data-type="track">
-            <span>{{#if track}}{{track}}. {{/if}}{{#if compilation}}{{artistName}} - {{/if}}{{name}}</span>
-          </div>
-        </li>
-      {{/trackList}}
-    </ul>
-  </li>
-{{/albumList}}

src/public/index.html

@@ -312,8 +312,6 @@
   </ul>
   <script src="vendor/jquery-2.1.0.min.js"></script>
   <script src="vendor/jquery-ui-1.10.4.custom.min.js"></script>
-  <script src="vendor/handlebars.runtime.js"></script>
-  <script src="views.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

src/public/vendor/handlebars.runtime.js

@@ -1,243 +0,0 @@
-// lib/handlebars/base.js
-
-/*jshint eqnull:true*/
-this.Handlebars = {};
-
-(function() {
-
-Handlebars.VERSION = "1.0.rc.1";
-
-Handlebars.helpers  = {};
-Handlebars.partials = {};
-
-Handlebars.registerHelper = function(name, fn, inverse) {
-  if(inverse) { fn.not = inverse; }
-  this.helpers[name] = fn;
-};
-
-Handlebars.registerPartial = function(name, str) {
-  this.partials[name] = str;
-};
-
-Handlebars.registerHelper('helperMissing', function(arg) {
-  if(arguments.length === 2) {
-    return undefined;
-  } else {
-    throw new Error("Could not find property '" + arg + "'");
-  }
-});
-
-var toString = Object.prototype.toString, functionType = "[object Function]";
-
-Handlebars.registerHelper('blockHelperMissing', function(context, options) {
-  var inverse = options.inverse || function() {}, fn = options.fn;
-
-
-  var ret = "";
-  var type = toString.call(context);
-
-  if(type === functionType) { context = context.call(this); }
-
-  if(context === true) {
-    return fn(this);
-  } else if(context === false || context == null) {
-    return inverse(this);
-  } else if(type === "[object Array]") {
-    if(context.length > 0) {
-      for(var i=0, j=context.length; i<j; i++) {
-        ret = ret + fn(context[i]);
-      }
-    } else {
-      ret = inverse(this);
-    }
-    return ret;
-  } else {
-    return fn(context);
-  }
-});
-
-Handlebars.K = function() {};
-
-Handlebars.createFrame = Object.create || function(object) {
-  Handlebars.K.prototype = object;
-  var obj = new Handlebars.K();
-  Handlebars.K.prototype = null;
-  return obj;
-};
-
-Handlebars.registerHelper('each', function(context, options) {
-  var fn = options.fn, inverse = options.inverse;
-  var ret = "", data;
-
-  if (options.data) {
-    data = Handlebars.createFrame(options.data);
-  }
-
-  if(context && context.length > 0) {
-    for(var i=0, j=context.length; i<j; i++) {
-      if (data) { data.index = i; }
-      ret = ret + fn(context[i], { data: data });
-    }
-  } else {
-    ret = inverse(this);
-  }
-  return ret;
-});
-
-Handlebars.registerHelper('if', function(context, options) {
-  var type = toString.call(context);
-  if(type === functionType) { context = context.call(this); }
-
-  if(!context || Handlebars.Utils.isEmpty(context)) {
-    return options.inverse(this);
-  } else {
-    return options.fn(this);
-  }
-});
-
-Handlebars.registerHelper('unless', function(context, options) {
-  var fn = options.fn, inverse = options.inverse;
-  options.fn = inverse;
-  options.inverse = fn;
-
-  return Handlebars.helpers['if'].call(this, context, options);
-});
-
-Handlebars.registerHelper('with', function(context, options) {
-  return options.fn(context);
-});
-
-Handlebars.registerHelper('log', function(context) {
-  Handlebars.log(context);
-});
-
-}());
-;
-// lib/handlebars/utils.js
-Handlebars.Exception = function(message) {
-  var tmp = Error.prototype.constructor.apply(this, arguments);
-
-  for (var p in tmp) {
-    if (tmp.hasOwnProperty(p)) { this[p] = tmp[p]; }
-  }
-
-  this.message = tmp.message;
-};
-Handlebars.Exception.prototype = new Error();
-
-// Build out our basic SafeString type
-Handlebars.SafeString = function(string) {
-  this.string = string;
-};
-Handlebars.SafeString.prototype.toString = function() {
-  return this.string.toString();
-};
-
-(function() {
-  var escape = {
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#x27;",
-    "`": "&#x60;"
-  };
-
-  var badChars = /&(?!\w+;)|[<>"'`]/g;
-  var possible = /[&<>"'`]/;
-
-  var escapeChar = function(chr) {
-    return escape[chr] || "&amp;";
-  };
-
-  Handlebars.Utils = {
-    escapeExpression: function(string) {
-      // don't escape SafeStrings, since they're already safe
-      if (string instanceof Handlebars.SafeString) {
-        return string.toString();
-      } else if (string == null || string === false) {
-        return "";
-      }
-
-      if(!possible.test(string)) { return string; }
-      return string.replace(badChars, escapeChar);
-    },
-
-    isEmpty: function(value) {
-      if (typeof value === "undefined") {
-        return true;
-      } else if (value === null) {
-        return true;
-      } else if (value === false) {
-        return true;
-      } else if(Object.prototype.toString.call(value) === "[object Array]" && value.length === 0) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  };
-})();;
-// lib/handlebars/runtime.js
-Handlebars.VM = {
-  template: function(templateSpec) {
-    // Just add water
-    var container = {
-      escapeExpression: Handlebars.Utils.escapeExpression,
-      invokePartial: Handlebars.VM.invokePartial,
-      programs: [],
-      program: function(i, fn, data) {
-        var programWrapper = this.programs[i];
-        if(data) {
-          return Handlebars.VM.program(fn, data);
-        } else if(programWrapper) {
-          return programWrapper;
-        } else {
-          programWrapper = this.programs[i] = Handlebars.VM.program(fn);
-          return programWrapper;
-        }
-      },
-      programWithDepth: Handlebars.VM.programWithDepth,
-      noop: Handlebars.VM.noop
-    };
-
-    return function(context, options) {
-      options = options || {};
-      return templateSpec.call(container, Handlebars, context, options.helpers, options.partials, options.data);
-    };
-  },
-
-  programWithDepth: function(fn, data, $depth) {
-    var args = Array.prototype.slice.call(arguments, 2);
-
-    return function(context, options) {
-      options = options || {};
-
-      return fn.apply(this, [context, options.data || data].concat(args));
-    };
-  },
-  program: function(fn, data) {
-    return function(context, options) {
-      options = options || {};
-
-      return fn(context, options.data || data);
-    };
-  },
-  noop: function() { return ""; },
-  invokePartial: function(partial, name, context, helpers, partials, data) {
-    var options = { helpers: helpers, partials: partials, data: data };
-
-    if(partial === undefined) {
-      throw new Handlebars.Exception("The partial " + name + " could not be found");
-    } else if(partial instanceof Function) {
-      return partial(context, options);
-    } else if (!Handlebars.compile) {
-      throw new Handlebars.Exception("The partial " + name + " could not be compiled when running in runtime-only mode");
-    } else {
-      partials[name] = Handlebars.compile(partial);
-      return partials[name](context, options);
-    }
-  }
-};
-
-Handlebars.template = Handlebars.VM.template;
-;