npm install --save stejs
There is a webpack loader for this: stejs-loader.
You feed it a template, a context object with variables you want to access in your template and you get a processed file. Simple as that.
const fs = require('fs');
const stejs = require('stejs');
const inputStr = fs.readFileSync(__dirname + '/input.txt').toString();
const context = {
myVar: 'hello!',
myList: ['simple', 'template', 'engine']
}
const output = stejs(inputStr, context);
console.log(output);
input.txt
:
$myVar$
$for item of myList$
$item$
$efor$
$for i in myList$
$i$ -> $myList[i]$
$efor$
$if myVar == 'henlo'$
hi!
$fi$
Output:
hello!
simple
template
engine
0 -> simple
1 -> template
2 -> engine
STEJS tags are limited by two $
, everything in between that is processed by STEJS. Depending on the structure of the content in the tag it will have a different behavior.
Expressions in STEJS are evaluated and the result is converted to a string and pasted in the place of the tag.
Template:
<span>$post.publishDate$</span>
<span>$post.getAuthor().name$</span>
<span>$5 + 2$</span>
Context:
{
post: {
publishDate: '2020-06-24',
getAuthor() { /*Some code and stuff */},
}
}
Output:
<span>2020-06-24</span>
<span>ItsaMeTuni</span>
<span>7</span>
If the content of the tag matches a for loop it will repeat everything between it and a $efor$
tag. You can use either for of
loops or for in
loops. While loops are not supported yet.
Template:
<div>
$for el of ['some', 'text', 'here']$
<p></p>
$efor$
</div>
Output:
<div>
<p>some</p>
<p>text</p>
<p>here</p>
</div>
If the content of the tag matches the structure of an if statement everything between it and its $fi$
ending tag will only be rendered in the output if the result of the expression in the if statement is true.
Template:
$if 1 + 2 == 3$
<input type="button" />
$fi$
Output:
<input type="button" />
Parentheses are not needed. Else and else if statements are not supported yet.
Includes are a simple way of, well, including templates in other templates. When the template engine is run the include tags are just replaced with the contents of the included template. The context of the included template is the same context of the include tag that included it.
To include a template just $include('path')$
.
Template:
<div class="content">
Some content here blah blah blah
</div>
$include('src/footer.html')$
src/footer.html
:
<div class="footer">
Some footer info
</div>
Output:
<div class="content">
Some content here blah blah blah
</div>
<div class="footer">
Some footer info
</div>
The path is relative to where STEJS is running.
STEJS templates can have any file extension, as long as they are plain text files.