leao

Leao Virtual DOM

Virtual DOM implementation

Installation

---

$ npm install leao

Features

---

• Create nodes
• Update elements

---

create a node

const yourConstName = (
  Leao.h(type, props, children)
)

e.g

const a = (
  h('ul', { className: 'list' },
    h('li', {}, 'item 1'),
    h('li', {}, 'item 2')
  )
)

---

Update element

Leao.updateElement(parent, newNode, oldNode)

If there's no oldNode, it will display the newNode

---

e.g

---

install node-browserify to require leao in the browser

const Leao = require('leao');
 
const h = Leao.h;
 
const a = (
  h('ul', { className: 'list' },
    h('li', {}, 'item 1'),
    h('li', {}, 'item 2')
  )
)
 
const b = (
  h('ul', { className: 'list' },
    h('li', {}, 'item 1'),
    h('li', {}, 'item 3')
  )
)
 
// give the div the id of root
const $root = document.getElementById('root');
//create a button with the id reload
const $reload = document.getElementById('reload');
 
Leao.updateElement($root, a);
$reload.addEventListener('click', () => {
  Leao.updateElement($root, b, a);
});