Skip to content

A fast, simple, hyperscript implementation for generating HTML.

License

Notifications You must be signed in to change notification settings

arccoza/hyperscript-html

Repository files navigation

hyperscript-html Travis Build Status

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').