easydom
A simple virtual DOM implementation, include create vnode, diff and patch.
Preview Online: https://wangchi.github.io/easydom/
English | 中文文档
Introduction
Easydom include the following methods:
-
createElement
create a virtual dom tree -
createDOM
parse virtual dom to HTML elements -
render
append HTML elements to page or target element -
diff
diff the differents between old VNode tree and new VNode tree, and return differents as patches -
patch
update the patches to HTML elements
About diff types:
-
INSERT
insert elements -
REMOVE
remove elements -
REPLACE
replace elements -
ORDER
record the order of child nodes, then replace or move -
PROPS
update attributes -
TEXT
replace text content
Usage
Install easydom
npm i easydom --save
Examples:
import easydom from 'easydom';
// use @babel/plugin-transform-react-jsx to parse jsx
let vtree = (
<div id="box">
<p className="message" style={{ color: '#36f' }}>
hello walker
</p>
<ul className="lists">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
);
// compile vnode to HTML elements
let rootNode = easydom.createDOM(vtree);
// append the elements to page
easydom.render(rootNode, document.getElementById('app'));
Create a new vtree, then update the patches to HTML elements.
let newVtree = (
<div id="box" className="new-box">
<h1 id="title">This is title</h1>
<p style={{ color: '#f80' }}>hello walker, nick to meet you</p>
<ul className="lists new-lists">
<li>Item 1</li>
<li>Item 4</li>
</ul>
</div>
);
// diff
let patches = easydom.diff(vtree, newVtree);
console.log('patches: ', patches);
// update the patches to HTML elements
easydom.patch(rootNode, patches);