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
- [x] variables
{{escaped}},{{{unescaped}}} - [x] variables dot notation
{{obj.prop}} - [x] helpers
{{loud lastname}} - [x] helpers literal arguments:
numbers,strings,true,false,nullandundefined - [x] basic block helpers
{{#bold}} - [x] built-in helpers:
if,unless,each,with - [x] helper hash arguments
- [x] comments
{{!comment}},{{!-- comment with }} --}} - [x] 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);