anduin
simple virtual-dom
Last updated 2 years ago by jelewine .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install anduin 
SYNC missed versions from official npm registry.

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.

Reference

snabbdom

Current Tags

  • 0.4.1                                ...           latest (2 years ago)

5 Versions

  • 0.4.1                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |