templr

Templr Compiles html files containing special <tpl> tags to javascript strings for use as client side templates. Templr also supports recursive imports of other html files with the special <import> tag. The stringifyed html is compressed by removing comments and unnecessary white space by default.

Templr is handy if you do a lot of client side view rendering and are sick of having one giant html file and using a bunch of <script type="text/template"> tags to write your client side templates. Templr assumes that your app is being bundeled up for the client using something like browserify, so the tpls object containing your stringifyed html templates is assigned to module.exports by default. If you'd rather just run the compiled template script directly in the browser and assign the tpls object to window, just use the -b, --browser flag.

example

Lets say you have the following html files:

templates_a.html which contains:

<import updir/templates_b>

<tpl name="file-a-tpl-a">
	<div>
		<h1>Hello form tpl A of file templates_a.html!</h1>
	</div>
</tpl>
<tpl name="file-a-tpl-b">
	<div>
		<h1>hello from tpl B of file templates_a.html!</h1>
	</div>
</tpl>

updir/templates_b.html which contains:

<tpl name="file-b-tpl-a">
	<div>
		<h1>Hello form tpl A of file templates_b.html!</h1>
	</div>
</tpl>

and main.html which contains:

<import templates_a>

<tpl name="main-a">
	<div>
		<a class="a" id="a" href="/url">Hello from tpl A of the root html file</a>
	</div>
</tpl>
<tpl name="main-b">
	<div>
		<h1>Hello from tpl B of the root html file</h1>
	</div>
</tpl>

Now, to compile all the templates from your main html file --along with any templates from any imported files-- to a tpls object in to results.js just run templr main.html -o results.js. results.js will contain:

var tpls = {};

tpls.main-a="<div><a class=\"a\"id=\"a\"href=\"/url\">Hello from tpl A of the root html file</a></div>";tpls.main-b="<div><h1>Hello from tpl B of the root html file</h1></div>";tpls.file-a-tpl-a="<div><h1>Hello form tpl A of file templates_a.html!</h1></div>";tpls.file-a-tpl-b="<div><h1>hello from tpl B of file templates_a.html!</h1></div>";tpls.file-b-tpl-a="<div><h1>Hello form tpl A of file templates_b.html!</h1></div>";

module.exports = tpls;

Or to compile without compression, and target the browser run templr main.html -nc -b -o results.js. results.js will contain:

var tpls = {};


tpls.main-a="
	<div>
		<a class=\"a\" id=\"a\" href=\"/url\">Hello from tpl A of the root html file</a>
	</div>
";

tpls.main-b="
	<div>
		<h1>Hello from tpl B of the root html file</h1>
	</div>
";

tpls.file-a-tpl-a="
	<div>
		<h1>Hello form tpl A of file templates_a.html!</h1>
	</div>
";

tpls.file-a-tpl-b="
	<div>
		<h1>hello from tpl B of file templates_a.html!</h1>
	</div>
";
tpls.file-b-tpl-a="
	<div>
		<h1>Hello form tpl A of file templates_b.html!</h1>
	</div>
";

window.tpls = tpls;

usage

Usage: templr [root.html] {OPTIONS}

Options:
  --outfile, -o  		Write the the resulting javascript tpl object to the outfile given.
                 		If unspecified, templr will write a js file in the same dir, with the same name as the entry html file
  --watch, -w    		Watch the entry html file, aswell as all files in the import heirarchy for changes, recompiling on change.
  --no-compress, -nc 	Compile to output file without removing comments and unnecessary white space.
  --browser, -b 		Assign the tpl object in resulting js file to the window object for use in the browser.
  						If unspecified, the resulting tpl object will be assigned to module.exports.
  --help, -h     		Show this message                                 

install

npm install templr -g