hyperscript

hyperscript module implements a function h() of Dominic Tarr's hyperscript. It is there mostly to reuse existing tooling, and existing code created for other implementations.

hyperscript(tag, [props, child...])

This function takes a description of a DOM node with optional properties, and optional children, and returns a created node.

The first parameter is assumed to be a node tag as a string suitable for create() (see create). All other parameters are optional, and can be one of two (in any order):

• a dictionary object — a bag of properties suitable for create.setProps() (see create).
• a child, which can be:
  • A DOM node — used as is.
  • a string, a number, a Boolean, a regular expression, or a date — converted to a string (using .toString()), and used to create a text node.
  • an array — its content is interpreted as a list of children.
  • anything else is ignored.

Example: a list

This example is similar to vdom example (see build).

var h = hyperscript;

var root = h('ul', {dataset: {sort: 'asc'}},
  h('li', 'one'), h('li.x', 'two'), h('li', 'three'));

It produces the same DOM tree:

<ul data-sort="asc">
  <li>one</li>
  <li class="x">two</li>
  <li>three</li>
</ul>

Example: a frag

This example is similar to the main example of build. Unfortunately hyperscript cannot return a DocumentFragment, so we will use div to serve as a single root.

var h = hyperscript;

function make (name) {
  var now = new Date();
  return h('div',
    h('h1.main', 'Hello, ' + name + '!'),
    h('p', {style: {'background-color': 'red'},
      'Today is ' + (now.getMonth() + 1) + '/' + now.getDate() + '/' + now.getFullYear()));
}

var root = make('Bob');

It produces the same DOM tree (skipping the outer div):

<h1 class="main">Hello, Bob!</h1>
<p style="background-color: red">
  Today is 12/31/2016.
</p>