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.
🚙 2.07kB when used directly in the browser
🏍 1.74kB hyperstache/mini version (built-in helpers)
🏎 1.07kB if compiled using babel-plugin-hyperstache
- variables
{{escaped}},{{{unescaped}}} - variables dot notation
{{obj.prop}} - helpers
{{loud lastname}} - helpers literal arguments:
numbers,strings,true,false,nullandundefined - basic block helpers
{{#bold}} - built-in helpers:
if,unless,each,with - helper hash arguments
- comments
{{!comment}},{{!-- comment with }} --}} - whitespace control
{{~ trimStart }} - helper block parameters
- subexpressions
- partials
{{>partial}}
Usage (CodeSandbox)
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)
Real world (CodeSandbox)
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);