Sketchy coffee-script that generates precompiled Hogan templates from a HTML file containing script tags of type `text/x-mustache-template'.

temple.coffee

FS = require("fs")
Path = require("path")

Cheerio = require("cheerio")
Hogan = require("hogan.js")

htmlFile = process.argv[2]

html = FS.readFileSync process.argv[2], encoding: "utf8"
# console.log html

$ = Cheerio.load html
$templates = $("script[type='text/x-mustache-template']")

templates = {}
$templates.each (element) ->
  templates[@attr("id")] = Hogan.compile @text(), asString: true
# console.log templates

js = []
js.push "window.compiledTemplates = {}"
for own name, code of templates
  js.push "compiledTemplates[\"#{name}\"] = new Hogan.Template(#{code});"
js = js.join("\n")

jsDir = Path.dirname(htmlFile)
jsName = Path.basename(htmlFile, Path.extname(htmlFile))
jsFile = Path.join(jsDir, jsName + "-templates.js")

FS.writeFileSync jsFile, js

Usage

    coffee temple.coffee main.html

will generate main-template.js file with precompiled templates in HTML files which may in turn have been generated from another format (like jade).

Requirements

    npm install cheerio hogan.js

Example output file main-templates.js:

  window.compiledTemplates = {}
  compiledTemplates["dialog-template"] = new Hogan.Template(function(c,p,i){var _=this;_.b(i=i||"");_.b("<div class=\"modal hide\"><div class=\"modal-header\"><a class=\"cancel close\">×</a><img src=\"/img/brand.png\" class=\"modal-logo\"><div class=\"modal-title\">");_.b(_.v(_.f("title",c,p,0)));_.b("</div></div></div>");return _.fl();;});
  compiledTemplates["alert-dialog-subtemplate"] = new Hogan.Template(function(c,p,i){var _=this;_.b(i=i||"");_.b("<div class=\"modal-body\"><center>");_.b(_.v(_.f("message",c,p,0)));_.b("</center></div><div class=\"modal-footer\"><center><button class=\"ok btn btn-primary\">    OK    </button></center></div>");return _.fl();;});
  compiledTemplates["confirm-dialog-subtemplate"] = new Hogan.Template(function(c,p,i){var _=this;_.b(i=i||"");_.b("<div class=\"modal-body\"><center>");_.b(_.v(_.f("message",c,p,0)));_.b("</center></div><div class=\"modal-footer\"><button class=\"cancel btn\">Cancel</button><button class=\"ok btn btn-primary\">");_.b(_.v(_.f("confirm",c,p,0)));_.b("</button></div>");return _.fl();;});
  compiledTemplates["prompt-dialog-subtemplate"] = new Hogan.Template(function(c,p,i){var _=this;_.b(i=i||"");_.b("<div class=\"modal-body\"><form class=\"form-horizontal\"><div class=\"control-group\"><label class=\"control-label\">");_.b(_.v(_.f("message",c,p,0)));_.b("</label><div class=\"controls\"><input type=\"text\" placeholder=\"");_.b(_.v(_.f("placeholder",c,p,0)));_.b("\" class=\"answer\"></div></div></form></div><div class=\"modal-footer\"><button class=\"cancel btn\">Cancel</button><button class=\"ok btn btn-primary\">");_.b(_.v(_.f("confirm",c,p,0)));_.b("</button></div>");return _.fl();;});

Example input file core-dialogs.jade which is used to generate main.html file:

script#dialog-template(type='text/x-mustache-template')
  .modal.hide
    .modal-header
      a.cancel.close ×
      img.modal-logo(src='/img/brand.png')
      .modal-title {{title}}

script#alert-dialog-subtemplate(type='text/x-mustache-template')
  .modal-body
    center {{message}}
  .modal-footer
    center
      button.ok.btn.btn-primary     OK    

script#confirm-dialog-subtemplate(type='text/x-mustache-template')
  .modal-body
    center {{message}}
  .modal-footer
    button.cancel.btn Cancel
    button.ok.btn.btn-primary {{confirm}}

script#prompt-dialog-subtemplate(type='text/x-mustache-template')
  .modal-body
    form.form-horizontal
      .control-group
        label.control-label {{message}}
        .controls
          input.answer(type="text", placeholder="{{placeholder}}")
  .modal-footer
    button.cancel.btn Cancel
    button.ok.btn.btn-primary {{confirm}}