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);

License

MIT License