hyperscript

Create HyperText with JavaScript, on client or server.

npm install hyperscript
31 downloads in the last day
231 downloads in the last week
1 194 downloads in the last month

HyperScript

Create HyperText with JavaScript, on client or server.

[testling badge] (https://ci.testling.com/dominictarr/hyperscript)

Interactive Demo

Example

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p', 
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p', 
      "the intension is for this to be used to create\n",
      "reusable, interactive html widgets. "))

on the server

you can still use hyperscript on the server, the limitation is that events don't make sense any more, but you can use it to generate html:

console.log(h('h1', 'hello!').outerHTML)
=> '<h1>hello!</h1>'

h (tag, attrs, [text?, Elements?,...])

Create an HTMLElement. The first argument must be the tag name, you may use a fully qualified tagname for building e.g. XML documents: `h('ns:tag').

classes & id

If the tag name is of form name.class1.class2#id that is a short cut for setting the class and id.

default tag name

If the tag name begins with a class or id, it defaults to a <div>.

Attributes

If an {} object is passed in, it's values will be used to set attributes.

var h = require('hyperscript')
h('a', {href: 'https://npm.im/hyperscript'}, 'hyperscript')

events

If an attribute is a function, then it will be registered as an event listener.

var h = require('hyperscript')
h('a', {href: '#', 
  onclick: function (e) {
    alert('you are 1,000,000th visitor!')
    e.preventDefault()
  }
}, 'click here to win a prize')

styles

If an attribute has a style property, then that will be handled specially.

var h = require('hyperscript')
h('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!')

or as a string

var h = require('hyperscript')
h('h1.fun', {style: 'font-family: Comic Sans MS'}}, 'Happy Birthday!')

You may pass in attributes in multiple positions, it's no problem!

children - string

If an argument is a string, a TextNode is created in that position.

children - HTMLElement

If a argument is a Node (or HTMLElement), for example, the return value of a call to h thats cool too.

children - null.

This is just ignored.

children - Array

Each item in the array is treated like a ordinary child. (string or HTMLElement) this is uesful when you want to iterate over an object:

var h = require('hyperscript')
var obj = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Durian',
  e: 'Elder Berry'
}
h('table',
  h('tr', h('th', 'letter'), h('th', 'fruit')),
  Object.keys(obj).map(function (k) {
    return h('tr', 
      h('th', k),
      h('td', obj[k])
    )
  })
)

Cleaning Up

If you need to clean up a widget created using hyperscript - deregistering all its event handlers and observable listeners, you can use context().

var h = require('hyperscript').context()
var o = require('observable')
var text = o()
text('click here to win a prize')
h('a', {href: '#', 
  onclick: function (e) {
    text('you are 1,000,000th visitor!')
    e.preventDefault()
  }
}, text)

// then if you want to remove this widget from the page
// to cleanup
h.cleanup()

License

MIT

npm loves you