Compile HTML templates into JS
Pure 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 / Proof of concept
{name} is a curly tag
Curly tags can contain expressions, e.g. {1 + 2} is a valid tag.
They can also contain additional filters like {name | capitalize}
<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.
npm install pure-engine escape-html
const { compile } = import 'pure-engine'
const escape = import 'escape-html'
// ... later, inside of an async function
const template = await compile('<div>{foo}</div>')
expect(template({ foo: 'bar' })).to.equal('<div>bar</div>')- import and require tags
<import layout from="./layouts/default.html"/>
<import form from="./components/form.html"/>
<import input from="./components/input.html"/>
<import button from="./components/button.html"/>
<layout>
<h1>Hello, world!</h1>
<form>
<input name="foo" />
<button>Submit</button>
</form>
</layout>- conditional tags: if, else, elseif, unless, elseunless
<if foo>bar</if>- loops: for, each, foreach
<for car in cars>
{car.brand}
</for>- filters
{title | capitalize}- special attributes
<img src="./foo.png" inline>- built-in i18n support (translate tag and filter)
<i18n yaml>
hello:
- 'Hej!'
- 'Hello!'
</i18n>
<h1><translate hello /></h1>- compiler tag for scripts
<div id="app"></div>
<script compiler="preact">
import { render } from "preact"
const Foo = ({ bar }) => {
return (<span>{bar}</span>)
}
render(
<Foo bar="baz" />,
document.getElementById("app")
)
</script>- error handling: rescue tag
<h1>{person.title}</h1>
<rescue>:(</rescue><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;
}npm run benchmark
pure-engine x 4,053,839 ops/sec ±0.91% (87 runs sampled)
underscore x 161,728 ops/sec ±0.88% (91 runs sampled)
lodash x 204,561 ops/sec ±0.73% (90 runs sampled)
handlebars x 1,699,469 ops/sec ±1.12% (85 runs sampled)
mustache x 447,168 ops/sec ±1.09% (82 runs sampled)
Fastest is pure-engine
MIT