tpl2module

A command line tool that compiles templates into JSON or JS module.

Getting Started

In modern AJAX applications, it is a very common to use client side template rendering for html generation. There are a bunch of great JS templating engines, like mustache.js, underscore.js template utility, etc.

However, there are no good way to mention how to load templates. We could definately embed templates in the code, but that compromise readibility of the code, especially when the template is very large.

You could save your template file as html / txt file, and get them using AJAX one by one. Nonetheless, this solution would ended up in-efficient if there are many template files.

Or, use tpl2module. It allows you to compile all your template files into one JSON file or JS module ( AMDJS / require.js module or your customized module format). So you can get all your templates in one AJAX call, which could reduce the network overhead and loading time.

Installation

Install the module with: npm install tpl2module

Example - Compile templates into JSON file.

For example you have following folder structure.

[templates]
   |- tpl1.html
   |- tpl2.html
   |- [a]
       |- tpl3.html
       |-[b]
          |- tpl4.html

Execute the following command.

$> tpl2module -s templates --json
writing to templates.json

It would compile into templates.json with following content.

{
    "tpl1": "<!-- tpl1 -->\n<p>{{tpl1}}</p>",
    "tpl2": "<!-- tpl2-->\n<p>{{tpl2}}</p>",
    "a.tpl3": "<!-- tpl3 -->\n<p>{{tpl3}}</p>",
    "a.b.tpl4": "<!-- tpl4 -->\n<p>{{tpl4}}</p>"
}

tpl2module will search through the folder recursively, and collect the content of every single file and compile them to one single JSON file.

tpl3.html resides in folder a, and it is stored with key a.tpl3. tpl4.html resides in folder a/b, and it is stored with key a.b.tpl4. In order to keep the key neat, the prefix of the file is omitted.

Example - Compile templates into require.js module.

When using require.js, it is very common to use text plugin to load your template.

tpl2module just provides a alternative way, probably a better way to handle templates.

If you run tpl2module with '-a / --amdjs', it would compile tempaltes into AMDJS / require.js module. By doing so, you do not need text plugin anymore, just load your templates as a normal require.js module.

$> tpl2module -s templates --amdjs
writing (with amdjs format) to templates.js

templates.js

//generated by tpl2js - http://github.com/tly1980/tpl2modue
define({"tpl1":"<!-- tpl1 -->\n<p>{{tpl1}}</p>","tpl2":"<!-- tpl2-->\n<p>{{tpl2}}</p>","a.tpl3":"<!-- tpl3 -->\n<p>{{tpl3}}</p>","a.b.tpl4":"<!-- tpl4 -->\n<p>{{tpl4}}</p>"});

And you can just get your templates as a normal require.js module.

var templates = require('apps/templates');
console.log(templates['a.b.tpl4']);

Here is the output:

"<!-- tpl4 -->
<p>{{tpl4}}</p>"

Most of the time you would just run tpl2module from command line. It is possible to call it from API as a node.js lib, please checkout the source code in unit testcases if you are interested.

License

Copyright (c) 2013 Tom Tang
Licensed under the MIT license.