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.

• Sinuous (CodeSandbox)
• htm (CodeSandbox)
• Lighterhtml (CodeSandbox)
• lit-html (CodeSandbox)

🚙 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, null and undefined
• 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}}

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);