platter

dead simple micro templating pre-compiler

Template engine agnostic template compiler

Let's say you are using underscore templates.

<ul>
  <% _.each(models, function (model) { %>
    <li><a href='<%= model.url %>'><%= model.label %></a></li>
  <% }); %>
</ul>

if a basename of the template file is nav, then generate like following

// no-formatter actually. 
this.templates = {
  "nav"function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='<ul>\n  ';
     _.each(models, function (model) { 
    ;__p+='\n    <li><a href=\''+
    ( model.url )+
    '\'>'+
    ( model.label )+
    '</a></li>\n  ';
     }); 
    ;__p+='\n</ul>';
    }
    return __p;
  }
};

Multiple source will take id attribute

<script id='slider-view-template' type='text/template'>
  <% _.each(models, function (model, index) { %>
    <p><%= index %></p>
  <% }); %>
</script> 
<script id='tab-view-template' type='text/template'>
  <ul>
    <% _.each(models, function (model, index) { %>
      <li><a></a></li>
    <% }); %>
  </ul>
</script> 

will generate

this.templates = {
  "slider-view-template"function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='\n  ';
     _.each(models, function (modelindex) { 
    ;__p+='\n    <p>'+
    ( index )+
    '</p>\n  ';
     }); 
    ;__p+='\n';
    }
    return __p;
  },
 
  "tab-view-template"function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='\n  <ul>\n    ';
     _.each(models, function (modelindex) { 
    ;__p+='\n      <li><a></a></li>\n    ';
     }); 
    ;__p+='\n  </ul>\n';
    }
    return __p;
  }
};

it will import files by src attribute. The extension name should be .js

<script src='nav.js'></script>
<script id='slider-view-template' type='text/template'>
  <% _.each(models, function (model, index) { %>
    <p><%= index %></p>
  <% }); %>
</script> 
<script id='tab-view-template' type='text/template'>
  <ul>
    <% _.each(models, function (model, index) { %>
      <li><a></a></li>
    <% }); %>
  </ul>
</script> 

will generate a object which has three compiled template functions.

this.templates = {
  "slider-view-template": function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='\n  ';
     _.each(models, function (model, index) { 
    ;__p+='\n    <p>'+
    ( index )+
    '</p>\n  ';
     }); 
    ;__p+='\n';
    }
    return __p;
  },
 
  "tab-view-template": function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='\n  <ul>\n    ';
     _.each(models, function (model, index) { 
    ;__p+='\n      <li><a></a></li>\n    ';
     }); 
    ;__p+='\n  </ul>\n';
    }
    return __p;
  },
 
  "nav": function(obj){
    var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};
    with(obj||{}){
    __p+='<ul>\n  ';
     _.each(models, function (model) { 
    ;__p+='\n    <li><a href=\''+
    ( model.url )+
    '\'>'+
    ( model.label )+
    '</a></li>\n  ';
     }); 
    ;__p+='\n</ul>';
    }
    return __p;
  }
};
 
Usage: platter <command> [options]
 
 Options:
 
   -h, --help     output usage information
   -V, --version  output the version number
 
 
 Commands:
 
    help <command>       output help information of <command>
    engines              output available pre-defined engines
    compile [options]       compile template files to javascript
 
Usage: platter-compile [options] [files]
 
  Options:
 
    -h, --help               output usage information
    -n --name <name>         vaiable name to expose
    --selector <text>        selector to match templates
    --ext [extname]          extension name to match files
    -s, --src <dir>          sorce directory
    --engine <name>          set compiler function by template name
    --compiler <javascript>  javascript function to perform compile
    --wrap                   wrap by head and tail
    --head <javascript>      javascript wrapper header
    --body <javascript>      javascript body to expose templates
    --tail <javascript>      javascript wrapper tail
    -i, --include <path>     set options once for all, by specifying the filepath
    -o, --out <dir>          set output directory
 
  Notes:
    * compiler should be specified by `compiler` or `engine` option
    * when `out` option is specified, 
    * `src` option has different default when it's command line
        - command => `process.cwd()`
        - else    => `require("path").dirname(require.main.filename)`
 
  Defaults:
 
    --name         templates
    --selector     script[type="text/template"]
    --src          /Users/tom/Sites/platter
    --ext          .html
    --head         ;(function () {
    --body         this.%s
    --tail         }).call(this);
    --wrap         false
    --compiler     null
    --engine       null
 

Platter is implemented by Stream interface. platter() returns Readable Stream. which will start emitting data after convert or read method.

  • platter(options).read('template name') - read as JavaScript
  • platter(options).convert('filepath') - convert template source file
name         templates
selector     script[type="text/template"]
src          /Users/tom/Sites/platter
ext         [.html]
wrap         false
head         ;(function () {
body         this.%s
tail         }).call(this);
compiler     null
engine       null
  • out - false by defaults. That means it perform write to ServerResponse rather than fs.WriteStream. when you specify out directory, it'll write to the resolved filepath.

see examples directory

MIT