@triskel/template
Simple, customizable template engine for JavaScript, based on @triskeljs/con-text
Installation
npm install @triskel/template --saveExample data
var data = {
foo: 'bar',
crash: {
test: 'dummy'
},
list: ['foo', 'bar', 'foobar'],
map: {
hi: 'all',
bye: 'nobody'
}
};Caching templates
template.put('partial-map', '$each{ item,key in map }[${foo}:${key}:${item}]{/}');
template.put('partial-list', '$each{ item,i in list }[${foo}:${i}:${item}]{/}');
// cached templates can be invoked with $include{}
console.log( template('$if{ foo !== \'bar\' }whoops{:}map: $include{\'partial-map\'} {/}', data) );
// returns 'map: [bar:hi:all][bar:bye:nobody]'
console.log( template('$if{ foo !== \'bar\' }whoops{:}list: $include{\'partial-list\'} {/}', data) );
// returns 'list: [bar:0:foo][bar:1:bar][bar:2:foobar]'Filters
template.filter('months', function (nMonths) {
return nMonths + (nMonths > 1 ? ' meses' : ' mes' );
});
console.log( template('${ nMonths | months }')({ nMonths: 5 }) );
// returns '5 meses'
console.log( template('${ nMonths | months }')({ nMonths: 1 }) );
// returns '1 mes'
var messages {
greeting: template('Hi ${name}!')
};
template.filter('message', function (key, data) {
return messages[key](data);
});
console.log( template('${ person.last_name }: ${ \'greeting\' | message: { name: person.first_name } }')({
person: {
first_name: 'John',
last_name: 'Smith'
}
}) );
// returns 'Smith: Hi John!'HTML Example
<!DOCTYPE html>
<html lang="${ lang }">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Hi! My name is ${ profile.first_name }</p>
<ul>
$each{ text in list }<li>${ text }</li>{/}
</ul>
$if{ is_dev }
<script type="application/javascript">
(function (h,s) {
s.type='text/javascript';s.src='//' + location.hostname + ':35729/livereload.js';h.appendChild(s);
})(document.getElementsByTagName('head')[0], document.createElement('script') );
</script>
{/}
</body>
</html>processing HTML (template TESTS)
var fs = require('fs'),
triskel = require('triskel');
var html = fs.readFileSync( 'src/index.html', { encoding: 'utf8' }),
renderTemplate = triskel(html);
fs.writeFileSync( 'public/index.html' , renderTemplate({
lang: 'en-US',
is_dev: true,
profile: {
first_name: 'John'
},
list: [
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
'Aliquam tincidunt mauris eu risus.',
'Vestibulum auctor dapibus neque.',
'Nunc dignissim risus id metus.',
'Cras ornare tristique elit.',
'Vivamus vestibulum ntulla nec ante.',
'Praesent placerat risus quis eros.',
'Fusce pellentesque suscipit nibh.',
'Integer vitae libero ac risus egestas placerat.',
'Vestibulum commodo felis quis tortor.',
'Ut aliquam sollicitudin leo.',
'Cras iaculis ultricies nulla.',
'Donec quis dui at dolor tempor interdum.',
]
}), { encoding: 'utf8' });Resulting HTML (tests/example-result.html)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<p>Hi! My name is John</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
<li>Cras iaculis ultricies nulla.</li>
<li>Donec quis dui at dolor tempor interdum.</li>
</ul>
<script type="application/javascript">
(function (h,s) {
s.type='text/javascript';s.src='//' + location.hostname + ':35729/livereload.js';h.appendChild(s);
})(document.getElementsByTagName('head')[0], document.createElement('script') );
</script>
</body>
</html>