hyperscript-html

Hyperscript-html provides a simple, fast, and lightweight hyperscript function to generate HTML.

Example

Input

var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.

var h = HyperScript()

var html = 
h('div#id.cls.cls2[attr1=val1][style=background-color:#ff0000; position:relative]',
  h('h1', {class: ['title']}, 'The Title'),
  h('p.content', 'The content'),
)

Input with wrapped elements

var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.

var {div, h1, p} = wrap({div: 'div', h1: 'h1', p: 'p'})

var html = 
div({id: 'id', class: ['cls', 'cls2'], style: {backgroundColor: '#ff0000', position: 'relative'}},
  h1({class: ['title']}, 'The Title'),
  p({class: ['content']}, 'The content'),
)

Output

<div
 class="cls cls2"
 style="background-color:#ff0000; position:relative;"
 id="id"
 attr1="val1">
	<h1
	 class="title">
		The Title
	</h1>
	<p
	 class="content">
		The content
	</p>
</div>

API

HyperScript([options])

The hyperscript constructor, takes optional options object argument, returns a hyperscript function.

var h = HyperScript()

// or with options
var h = HyperScript({tab:'\t', nl:'\n', attrsNewLine:true, prettyPrint:true,
  flexibleArgs:true, voidElements:true, shortHand:true})

hyperscript(tag[, attrs[, ...children]])

The hyperscript function returned from the HyperScript constructor, takes a required tag name (eg. 'div'), and optional attributes object, and optional children. The children can be added as an array or multiple arguments, or a combination of arrays and arguments.

// tag
h('div')

// tag and attributes
h('div', {id: 'id', class: ['cls']})

// If the `shortHand` option is `true` (default),
// you can supply a CSS selector like string for the tag
// and the values will be extracted to their respective attributes.
h('div#id.cls[attr1=val][attr2]')

// tag with child arguments
h('div', 'hello', h('b', 'world'))

// tag with child array
h('div', ['hello', h('b', 'world')])

// tag with attributes and child arguments
h('div', {class: ['cls']}, 'hello', h('b', 'world'))

wrap(elements[, options])

The wrap function creates shorthand hyperscript functions. It takes an object of elements with mapping function name : element tag (eg. {div: 'div', BOX: 'div}), and an optional options object (the same options that HyperScript takes). It returns an object of bound shorthand hyperscript functions.

var {box, h1, p} = wrap({box: 'div', h1: 'h1', p: 'p'})

box(
  h1('Title'),
  p('Content'),
)

options object

Option | Default value | Description ---:|:---|:--- tab | '\t' | What to use as the tab. nl | '\n' | What to use as the line break. prettyPrint | true | Format the HTML output nicely with newlines and tabs, set to false for faster rendering. attrsNewLine | true | Put attributes on a new line when prettyPrint is true. shortHand | true, always false for wrap fn | Use CSS like selector syntax in tag names for shorthand id, class and attributes values. Set to false for faster rendering. voidElements | true | Leave the closing tag off of empty void elements. flexibleArgs | true | Make the hyperscript functions interface flexible, if false you must provide a value for attributes argument or null if you supply children (eg. h('div', null, 'child text').