https://github.com/luwes/hyperstache

👨‍🦰 Handlebars just got a trim, alternative JS template engine, 2kb gzip
https://github.com/luwes/hyperstache

handlebars mustache tagged-template template-literals

Last synced: 9 days ago
JSON representation

👨‍🦰 Handlebars just got a trim, alternative JS template engine, 2kb gzip

• Host: GitHub
• URL: https://github.com/luwes/hyperstache
• Owner: luwes
• Created: 2019-10-18T02:40:00.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-07-15T21:11:15.000Z (4 months ago)
• Last Synced: 2024-10-21T00:58:30.578Z (19 days ago)
• Topics: handlebars, mustache, tagged-template, template-literals
• Language: JavaScript
• Homepage:
• Size: 918 KB
• Stars: 39
• Watchers: 3
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Hyperstache

[![Build Status](https://img.shields.io/travis/com/luwes/hyperstache/master.svg?style=flat-square&label=Travis+CI)](https://travis-ci.com/luwes/hyperstache)

![Badge size](https://img.badgesize.io/https://unpkg.com/hyperstache/dist/hyperstache.min.js?compression=gzip&label=gzip&style=flat-square)

[![codecov](https://img.shields.io/codecov/c/github/luwes/hyperstache.svg?style=flat-square)](https://codecov.io/gh/luwes/hyperstache)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/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](https://github.com/wycats/handlebars.js/) and [Mustache](https://github.com/janl/mustache.js/) 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](https://github.com/luwes/sinuous/) ([CodeSandbox](https://codesandbox.io/s/hyperstache-sinuous-5j4u9))

- [htm](https://github.com/developit/htm) ([CodeSandbox](https://codesandbox.io/s/hyperstache-htm-ju83x))

- [Lighterhtml](https://github.com/WebReflection/lighterhtml) ([CodeSandbox](https://codesandbox.io/s/hyperstache-lighterhtml-qnesy))

- [lit-html](https://github.com/Polymer/lit-html) ([CodeSandbox](https://codesandbox.io/s/hyperstache-lithtml-xip2v))

## `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](./packages/babel-plugin-hyperstache)

## Features

- [x] variables `{{escaped}}`, `{{{unescaped}}}`

- [x] variables dot notation `{{obj.prop}}`

- [x] helpers `{{loud lastname}}`

- [x] helpers literal arguments: `numbers`, `strings`, `true`, `false`, `null` and `undefined`

- [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](https://codesandbox.io/s/boring-breeze-y3od0))

```js

import { compile } from "hyperstache";

const o = (...args) => args;

const template = compile.bind(o)`

  


    Hello, my name is {{name}}. 

    I am from {{hometown}}. I have {{kids.length}} kids:

  

  


    {{#each kids}}

      
{{name}} is {{age}}

    {{/kids}}

  

`;


const data = {

  name: "Alan",

  hometown: "Somewhere, TX",

  kids: [{ name: "Jimmy", age: "12" }, { name: "Sally", age: "4" }]

};

console.log(template(data));

/** =>

[

  [

    "
↵    Hello, my name is ",

    ". ↵    I am from ",

    ". I have ",

    " kids:↵  
↵  
",

    "
"

  ],

  "Alan",

  "Somewhere, TX",

  2,

  [

    ["", "", ""],

    [

      ["
", " is ", "
"],

      "Jimmy",

      "12"

    ],

    [

      ["
", " is ", "
"],

      "Sally",

      "4"

    ]

  ]

]

 */

```


## API

`compile(statics, ...exprs)`

`registerHelper(name, fn)`

`escapeExpression(str)`

`new SafeString(htmlStr)`

## Real world ([CodeSandbox](https://codesandbox.io/s/damp-wave-5j4u9))

```js

import { html } from "sinuous";

import { compile } from "hyperstache";

const template = compile.bind(html)`

  


    Hello, my name is {{name}}. 

    I am from {{hometown}}. I have {{kids.length}} kids:

  

  


    {{#each kids}}

      
{{name}} is {{age}}

    {{/kids}}

  

`;


const data = {

  name: "Alan",

  hometown: "Somewhere, TX",

  kids: [{ name: "Jimmy", age: "12" }, { name: "Sally", age: "4" }]

};

const dom = template(data);

document.body.append(dom);

```