A DSL for creating virtual trees
npm install virtual-hyperscriptA DSL for creating virtual trees
``js
var h = require('virtual-hyperscript')
var tree = h('div.foo#some-id', [
h('span', 'some text'),
h('input', { type: 'text', value: 'foo' })
])
`
See hyperscript which has the
same interface.
Except virtual-hyperscript returns a virtual DOM tree instead of a DOM
element.
h() takes a selector, an optional properties object and anspan.foo.bar#some-id
optional array of children or a child that is a string.
If you pass it a selector like it willid
parse the selector and change the and classNameproperties
properties of the object.children
If you pass it an array of it will have childh()
nodes, normally ou want to create children with .
If you pass it a string it will create an array containing
a single child node that is a text element.
#### key
If you call h with h('div', { key: someKey }) it willVNode
set a key on the return . This key is not a normal
DOM property but is a virtual-dom optimization hint.
It basically tells virtual-dom to re-order DOM nodes instead of
mutating them.
#### namespace
If you call h with h('div', { namespace: "http://www.w3.org/2000/svg" })VNode
it will set the namespace on the returned . Thisnamespace
is not a normal DOM property, instead it willvdom
cause to create a DOM element with a namespace.
#### data-*
If you call h with h('div', { data-foo: "bar" }) it willdata-foo
set to be a VHook that set's a DataSet propertyfoo
named with the value "bar" on the actual dom element.
It will not set a property data-foo on the dom element.
This means that somewhere else in your code you can use
DataSet(elem).foo to read this property.
#### ev-*
If you call h with h('div', { ev-click: function (ev) { } }) it'ev-foo'
will store the event handler on the dom element. It will not
set a property on the DOM element.
This means that dom-delegator will recognise the event handler
on that element and correctly call your handler when an a click
event happens.
npm install virtual-hyperscript`
- Raynos
[1]: https://secure.travis-ci.org/Raynos/virtual-hyperscript.png
[2]: https://travis-ci.org/Raynos/virtual-hyperscript
[3]: https://badge.fury.io/js/virtual-hyperscript.png
[4]: https://badge.fury.io/js/virtual-hyperscript
[5]: https://coveralls.io/repos/Raynos/virtual-hyperscript/badge.png
[6]: https://coveralls.io/r/Raynos/virtual-hyperscript
[7]: https://gemnasium.com/Raynos/virtual-hyperscript.png
[8]: https://gemnasium.com/Raynos/virtual-hyperscript
[9]: https://david-dm.org/Raynos/virtual-hyperscript.png
[10]: https://david-dm.org/Raynos/virtual-hyperscript
[11]: https://ci.testling.com/Raynos/virtual-hyperscript.png
[12]: https://ci.testling.com/Raynos/virtual-hyperscript