Create HyperText with JavaScript, on client or server.
npm install hyperscriptCreate HyperText with JavaScript, on client or server.
![testling badge]
(https://ci.testling.com/dominictarr/hyperscript)
See also mercury is a modular ui
framework influenced by hyperscript but much more heavily optimized.
`` js`
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. "))
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:
` js`
console.log(h('h1', 'hello!').outerHTML)
=> 'hello!
'
Create an HTMLElement. The first argument must be the tag name, you may use ah('ns:tag').
fully qualified tagname for building e.g. XML documents:
If the tag name is of form name.class1.class2#id that is a short cut
for setting the class and id.
If the tag name begins with a class or id, it defaults to a If an `` Note that hyperscript sets properties on the DOM element object, not If an attribute is a function, then it will be registered as an event listener. ` If an attribute has a style property, then that will be handled specially. ` or as a string ` You may pass in attributes in multiple positions, it's no problem! If an argument is a string, a TextNode is created in that position. If a argument is a Node This is just ignored. Each item in the array is treated like a ordinary child. (string or HTMLElement) ` If you need to clean up a widget created using hyperscript - deregistering all its event handlers and observable listeners, you can use context() ` // then if you want to remove this widget from the page ` * html2hscript - Parse HTML into hyperscript MIT.$3
{} object is passed in it will be used to set attributes. js`
var h = require('hyperscript')
h('a', {href: 'https://npm.im/hyperscript'}, 'hyperscript')
attributes on the HTML element. This makes for better consistency across
browsers and a nicer API for booleans. There are some gotchas, however.
Attributes such as colspan are camel cased to colSpan, and for on thehtmlFor
label element is to avoid collision with the language keyword. See the
DOM HTML specification
for details.$3
js`
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')$3
js`
var h = require('hyperscript')
h('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!') js`
var h = require('hyperscript')
h('h1.fun', {style: 'font-family: Comic Sans MS'}, 'Happy Birthday!')$3
$3
(or HTMLElement), for example, the return value of a call to h
thats cool too.$3
$3
this is useful when you want to iterate over an object: js`
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])
)
})
)$3
. js
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)
// to cleanup
h.cleanup()Ecosystem
* dom2hscript - Frontend library for parsing HTML into hyperscript using the browser's built in parser.
* html2hscript.herokuapp.com - Online Tool that converts html snippets to hyperscript
* html2hyperscript - Original commandline utility to convert legacy HTML markup into hyperscript
* hyperscript-helpers - write div(h1('hello') instead of h('div', h('h1', 'hello'))`
* react-hyperscript - use hyperscript with React.License