Hilang

Hilang - Hiccup-like syntax for JavaScript

Highlights:

Hilang can be used for VueJS, ReactJS or any other templates that expect single line html
It is an alternative to JSX or es6 template literals without need of compilation step
Written in ES5 and thus works in any browser
No dependencies
Clean syntax that uses native JavaScript array and object notation
Hilang is JavaScript! So you can do with your html everything what you can do with JavaScript!
Tiny script 972b minified

1 form: var yourTemplate = hilang(['div', 'your text']) -> first argument is html tag, second what goes between the tags
2 form: var yourTemplate = hilang(['div', {attrs: 'class="hide"'}, 'your text']) -> first argument is html tag, second object with 'attrs:' property that takes any string of html attributes, third what goes between the tags

We can compose hilang components:

hilang(['div',
  ['div', 'your 1 text'],
  ['div', 'your 2 text']])

Produces html: <div><div>your 1 text</div><div>your 2 text</div></div>

Which means you can use JavaScript to generate html:

var headers =
 [
 'first',
 'second',
 'third'
 ].map(function(h){ return [ 'th', h ]; })
;
var template = hilang(['thead'].concat(headers));

Or with Lodash.js -> var template = hilang([ 'thead', _.flatten(headers) ]);

Add support for self-closing tags