hyperstache

Hyperstache

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

Why?

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

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

Features

• 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}}

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"
    ]
  ]
]
 */

API

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