html-engine
Compile HTML templates into JS
Description
HTML Engine is a library designed to compile HTML templates into JS. It analyses the template and generates an optimal rendering function that can be used on the client and the server. The compilation process should ideally happen in a build step (for the client) or the output could be memoized after first usage (for the server).
The syntax of the template should be easy to read and write. There are two types of tags: curly and html tags.
Status: Alpha
Curly Tags
{name} is a curly tag
Curly tags can contain expressions, e.g. {1 + 2} is a valid tag.
They can also contain additional modifiers like {name | capitalize}
HTML Tags
<if> is an html tag
HTML tags can contain additional attributes, e.g. <if limit is a number> is a valid tag. The attribute syntax follows the natural language principles.
Usage
npm install @buxlabs/html-engine
const { compile } = require('@buxlabs/html-engine')
const template = compile('<div>{foo}</div>')
assert(template({ foo: 'bar' }) === '<div>bar</div>')Features
- conditional tags: if, else, elseif, unless, elseunless
- loops: for, each, foreach
- import and require tags
- modifiers for strings, numbers, arrays, objects and more
- special attributes, e.g. inline for asset inline, width="auto" for auto sizing and more
- built-in i18n support (translate tag and modifier)
- compiler tag for scripts (allows custom compilers)
Input / Output Examples
<if foo is present>{bar}</if>
function render(__o, __e) {
var __t = "";
if (__o.foo !== void 0) {
__t += __e(__o.bar);
}
return __t;
}<for month in months>{month}</for>
function render(__o, __e) {
var __t = "";
for (var a = 0, b = __o.months.length; a < b; a += 1) {
var month = __o.months[a];
__t += __e(month);
}
return __t;
}<foreach month in months>{month}</foreach>
function render(__o, __e) {
var __t = "";
__o.months.forEach(function (month) {
__t += __e(month);
});
return __t;
}Benchmarks
npm run benchmark
html-engine x 3,504,768 ops/sec ±1.80% (85 runs sampled)
underscore x 210,428 ops/sec ±1.60% (90 runs sampled)
lodash x 249,232 ops/sec ±1.10% (91 runs sampled)
handlebars x 1,883,683 ops/sec ±1.70% (84 runs sampled)
mustache x 450,925 ops/sec ±2.56% (87 runs sampled)
Fastest is html-engine
License
MIT