https://github.com/lowesyang/virtual-dom

A reconstruction of simple-virtual-dom
https://github.com/lowesyang/virtual-dom

reconstruction virtual-dom

Last synced: 1 day ago
JSON representation

A reconstruction of simple-virtual-dom

• Host: GitHub
• URL: https://github.com/lowesyang/virtual-dom
• Owner: lowesyang
• License: mit
• Created: 2017-05-30T08:19:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-05T09:05:47.000Z (over 7 years ago)
• Last Synced: 2024-08-08T15:24:34.098Z (3 months ago)
• Topics: reconstruction, virtual-dom
• Language: JavaScript
• Size: 40 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Virtual-Dom

[![Build Status](https://travis-ci.org/yyh1102/virtual-dom.svg?branch=master)](https://travis-ci.org/yyh1102/virtual-dom)

[![Coverage Status](https://coveralls.io/repos/github/yyh1102/Virtual-Dom/badge.svg?branch=master)](https://coveralls.io/github/yyh1102/Virtual-Dom?branch=master)

[![npm](https://img.shields.io/npm/l/express.svg)](https://opensource.org/licenses/mit-license.php)

A reconstruction version of [simple-virtual-dom](https://github.com/livoras/simple-virtual-dom)

## Feature

- Use ES6&ES7 to reconstruct the code.

    - remove redundancy codes.

    - more readable.

- Add test of 'Root reordering and child replacing'.

- Add test of 'Root reordering,and children adding and removing'.

- The size of dist file has been compressed by 38%.

## Install

npm:

```bash

$ npm install virtual-doml --save-dev

```

or script:

```html

```

or you can use reference project [simple-virtual-dom](https://github.com/livoras/simple-virtual-dom).

## Usage

```javascript

var vdom=require('virtual-doml');

var el=vdom.el;

var diff=vdom.diff;

var tree=el('div',{'id':'container'},[

    el('p',{name:'lowesyang'},['Hello vdom']),

    el('ul',[el('li',['item1']),el('li',['item2'])])

])

var newTree=el('div',{'id':'container'},[

    el('h1',{style:'color:red'},['Hello LowesYang']),

    el('p',{name:'lowesyang'},['Hello vdom']),

    el('ul',[el('li',['item2'])])

])

var patches=diff(tree,newTree);

var root=tree.render();

document.querySelector('#demo').appendChild(root);

setTimeout(()=>{

    patches.apply(root);

},2000)

```

## License

MIT