Fork me on GitHub

miTem - lightweight and fast javascript template engine with twig like syntax

Features

Usage

    const miTem = require('./mitem');

    const template = miTem.compile('{{ foo }}');
    let output = template({ foo: 'bar' });
    console.log(output);

    output = template({ foo: 'baz' });
    console.log(output);

Variables

Template:
Hello {{name}}
Data:
{"name": "world!"}
Output:

Filters

Filters are used to modify variables

Template:
Hello {{name|default('world')}}
Data:
{}
Output:

It's also possible to use object methods as filter

Template:
Hello {{name|toUpperCase}}
Data:
{"name": "world"}
Output:

Of course several filters can be applied to the same variable

Template:
{{ arr | join(',') | toUpperCase }}
Data:
{
    "arr": [
        "qw",
        "er"
    ]
}
Output:
How to add custom filter:

To use custom filter we need to register it

Javascript code:
miTem.filters["prefix"] = function(pref) {
    return pref + "_" + this;
}
Template:
{{str | prefix('asd')}}
Data:
{"str": "qwerty"}
Output:

'this' will be pointed to current value in filter function

Some additional tricks with custom filters:

Let's try format date using moment.js

Javascript code:
const moment = require('moment');
miTem.filters["moment_from_string"] = function(inputFormat) {
    return moment(this, inputFormat);
}
Template:
Date: {{ date_str | moment_from_string('YYYY-MM-DD') | subtract(6, 'days') | format('MMM Do YY, dddd') }}
Data:
{"date_str": "2019-03-18"}
Output:

What happened here: first we've created custom filter 'moment_from_str' that just parse string in specific format and return 'moment' object. Than we can use any moment methods as additional filters.

Builtin filters:
Filter Description
default Returns the passed default value if the value is undefined
abs The abs filter returns the absolute value
capitalize The capitalize filter capitalizes a value.
nl2br Replace newlines with <br /> tag
title The title filter returns a titlecased version of the value. Words will start with uppercase letters, all remaining characters are lowercase

IF statement

Template:

        {% if condition %} condition true {% else %} condition false {% endif %}
    
Data:
{"condition": true}
Output:

It's also possible to use {% else if %} tag

Template:

{% if cnd_1 %}
    cnd_1 true
{% else if cnd_2 %}
    cnd_1 false, but cnd_2 true
{% else %}
    cnd_1 and cnd_2 false
{% endif %}
    
Data:
{"cnd_1": false, "cnd_2": true}
Output:

FOR statement

Template:

        {% for item in arr %} {{item.foo}} {% endfor %}
    
Data:
{
    "arr": [
        {"foo":"test"},
        {"foo":"test2"}
    ]
}
Output:

It's also possible to iterate true object properties

Template:

        {% for item in arr %}key:{{loop.key}}; value:{{item}}; \n{% endfor %}
    
Data:
{
    "arr": {
        "a": 1,
        "b": 2
    }
}
Output:

As you can see there is new variable 'loop' inside FOR loop. This is a special variable to access some special data

Variable Description
loop.index The current iteration of the loop. (1 indexed)
loop.index0 The current iteration of the loop. (0 indexed)
loop.revindex The number of iterations from the end of the loop (1 indexed)
loop.revindex0 The number of iterations from the end of the loop (0 indexed)
loop.first True if first iteration
loop.last True if last iteration
loop.length The number of items in the sequence
loop.parent The parent context
loop.key The key of object property (in case of array equal to loop.index0)

Partials:

To use partial we need to register it

Javascript code:
const partial = miTem.compile("hello {{who}}");
miTem.registerPartial("hello", partial);
Template:
{% for item in arr %} {% partial hello item %} {% endfor %}
Data:
{
        "arr":[
            {"who": "test"},
            {"who": "test2"}
        ]
    }
Output:

Links

Sorce code:
https://github.com/ygorko/miTem
Author:
Ihor Yermolaiev aka ygorko
Issues:
https://github.com/ygorko/miTem/issues
License:

MIT license

Star Download Watch Issue