Tiny template engine powered by es6 template literals
- Super small (< 30 lines).
- Pure JavaScript syntax.
- Template includes
npm install tljs
import tl from 'tljs';
// template
const t = tl`
<div>
${' if (username) { '}
<p>${' echo(username) '}</p>
${' } '}
</div>`;
// render
t({ username: 'theJian' });
// output
<div>
<p>theJian</p>
</div>
/////////////////////////// Generate JSON ////////////////////////////////
const jsonTl = tl`
{
username: ${' echo(username) '}
}`;
jsonTl({ username: 'theJian' });
Instead of defining some fancy syntax for inserting variables to the output, echo
, a good old JavaScript function, has provided to handle this job.
`Here is the ${' echo(username) '}`
To insert contents from another file.
<div>
${' include("./header.js", { title: title }) '}
${' posts.forEach(post => { '}
<p>
${ 'include("./post.js", { post: post }) '}
</p>
${' } '}
</div>
To use this feature you have to pass a require
function when rendering. See Example.
The first argument is the path of included file, the second is the values passed to it.
MIT@theJian