README
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 treecreateDOM
parse virtual dom to HTML elementsrender
append HTML elements to page or target elementdiff
diff the differents between old VNode tree and new VNode tree, and return differents as patchespatch
update the patches to HTML elements
About diff types:
INSERT
insert elementsREMOVE
remove elementsREPLACE
replace elementsORDER
record the order of child nodes, then replace or movePROPS
update attributesTEXT
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);