anduin
v0.4.1
Published
simple virtual-dom
Downloads
2
Readme
Anduin
A simple virtual-dom
Install
$ npm install -S anduin
Example
import { h, diff, patch } from 'anduin'
// use `h(tagName, [attribute], children)` to create a virtual dom tree.
let vdom1 = h("div", {}, [
h("h1", {}, 0),
h("button", { }, "-"),
h("button", { }, "+"),
h("ul", {}, [
h("li", { key: 'a' }, 'a'),
h('li', { key: 'b' }, 'b'),
h("li", { key: 'c' }, 'c'),
h('li', { key: 'd' }, 'd'),
])
])
let vdom2 = h("div", {}, [
h("h1", {}, 1),
h("button", { props: 'hashKey' }, "-"),
h("button", { }, "+"),
h("ul", {}, [
h('li', { key: 'f' }, 'f'),
h("li", { key: 'a' }, 'a'),
h('li', { key: 'b' }, 'b'),
h('li', { key: 'd' }, 'd'),
h("li", { key: 'c' }, 'c'),
h('li', { key: 'e' }, 'e'),
])
])
// generate a real dom from virtual dom.
let root = vdom1.render()
document.body.appendChild(root)
// diff two virtual dom trees and apply patches to real dom
patch(vdom1, vdom2, root)
You can checkout full codes in example
folder.