Skip to content

πŸ‘¨β€πŸ¦° Handlebars just got a trim, alternative JS template engine, 2kb gzip

Notifications You must be signed in to change notification settings

luwes/hyperstache

Repository files navigation

Hyperstache

Build Status Badge size codecov code style: prettier

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.

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

About

πŸ‘¨β€πŸ¦° Handlebars just got a trim, alternative JS template engine, 2kb gzip

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published