👨🦰 Handlebars just got a trim, alternative JS template engine, 2kb gzip
Logic-less templates to template literals transformer.
Hyperstache includes a full parser and runtime.
It uses no eval
and minimal regex for the best performance.
It's largely compatible with Handlebars and Mustache templates.
npm: npm install hyperstache --save
cdn: https://unpkg.com/hyperstache
module: https://unpkg.com/hyperstache?module
The goal is to make projects invested in Handlebars templates adopt a tagged templates only solution easily or add an additional layer of logic-less templates on top of any tagged template library.
hyperstache
by the numbers:🚙 2.07kB when used directly in the browser
🏍 1.74kB hyperstache/mini
version (built-in helpers)
🏎 1.07kB if compiled using babel-plugin-hyperstache
{{escaped}}
, {{{unescaped}}}
{{obj.prop}}
{{loud lastname}}
numbers
, strings
, true
, false
, null
and undefined
{{#bold}}
if
, unless
, each
, with
{{!comment}}
, {{!-- comment with }} --}}
{{~ trimStart }}
{{>partial}}
import { compile } from "hyperstache";
const o = (...args) => args;
const template = compile.bind(o)`
<p>
Hello, my name is {{name}}.
I am from {{hometown}}. I have {{kids.length}} kids:
</p>
<ul>
{{#each kids}}
<li>{{name}} is {{age}}</li>
{{/kids}}
</ul>
`;
const data = {
name: "Alan",
hometown: "Somewhere, TX",
kids: [{ name: "Jimmy", age: "12" }, { name: "Sally", age: "4" }]
};
console.log(template(data));
/** =>
[
[
"<p>↵ Hello, my name is ",
". ↵ I am from ",
". I have ",
" kids:↵ </p>↵ <ul>",
"</ul>"
],
"Alan",
"Somewhere, TX",
2,
[
["", "", ""],
[
["<li>", " is ", "</li>"],
"Jimmy",
"12"
],
[
["<li>", " is ", "</li>"],
"Sally",
"4"
]
]
]
*/
compile(statics, ...exprs)
registerHelper(name, fn)
escapeExpression(str)
new SafeString(htmlStr)
import { html } from "sinuous";
import { compile } from "hyperstache";
const template = compile.bind(html)`
<p>
Hello, my name is {{name}}.
I am from {{hometown}}. I have {{kids.length}} kids:
</p>
<ul>
{{#each kids}}
<li>{{name}} is {{age}}</li>
{{/kids}}
</ul>
`;
const data = {
name: "Alan",
hometown: "Somewhere, TX",
kids: [{ name: "Jimmy", age: "12" }, { name: "Sally", age: "4" }]
};
const dom = template(data);
document.body.append(dom);