Virtual-dom

JavaScript libraries

See https://www.npmjs.com/package/virtual-dom

1
2
3
4
var h = require('virtual-dom/h')
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom/patch')
var createElement = require('virtual-dom/create-element')

Rendering

1
2
3
tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])
el = createElement(tree)
document.body.appendChild(root)

Updating

1
2
3
tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])
delta = diff(tree, tree2)
el = patch(el, delta) // patch() modifies el