fix bugs of index counting

yyh1102 · May 31, 2017 · b695732 · b695732
1 parent 07dec7f
commit b695732
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -9,11 +9,46 @@ A reconstruction version of [simple-virtual-dom](https://github.com/livoras/simp
 - Use ES6&ES7 to reconstruct the code.
     - remove redundancy codes.
     - more readable.
-- Add test of 'Root reordering and replacing'.
+- 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
+I prefer you to use [simple-virtual-dom](https://github.com/livoras/simple-virtual-dom).
+
+npm:
+```bash
+$ npm install virtual-doml --save-dev
+```
+or script:
+```html
+<script src='/dist/virtualDom.js'></script>
+```
+
 ## Usage
-Please visit [doc](https://github.com/livoras/simple-virtual-dom#simple-virtual-dom)
+```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

diff --git a/dist/virtualDom.js b/dist/virtualDom.js
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Demo</title>
+</head>
+<body>
+<div id="demo"></div>
+<script src="../dist/virtualDom.js"></script>
+<script>
+    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)
+
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "virtual-dom",
-  "version": "1.0.1",
+  "name": "virtual-doml",
+  "version": "1.0.2",
   "description": "A simple virtual dom solution",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/diff/index.js b/src/diff/index.js
@@ -10,8 +10,11 @@ import listDiff from 'list-diff2';
  */
 class Diff{
     constructor(oldTree,newTree,patches=new Patches()){
+        if(!patches instanceof Patches){
+            throw new Error('Invalid patches\'s type:it should be {Patches}.');
+        }
         this.patches=patches;
-        this.index=-1;
+        this.index=0;
         this.diffNode(oldTree,newTree);
     }
 
@@ -21,7 +24,6 @@ class Diff{
 
     // DFS travel
     diffNode(oldNode,newNode){
-        this.index++;
         let currPatches=[];
         let currIndex=this.index;
         // if text node
@@ -44,6 +46,7 @@ class Diff{
             }
         }
         else{   // replace item
+            this.index+=oldNode.count;
             currPatches.push({
                 type:Patches.REPLACE,
                 node:newNode
@@ -93,6 +96,7 @@ class Diff{
         // diff children
         for(let i=0,len=oldChildren.length;i<len;i++){
             if(!newChildren[i]) break;
+            this.index++;
             this.diffNode(oldChildren[i],newChildren[i]);
         }
     }

diff --git a/src/element/index.js b/src/element/index.js
@@ -18,6 +18,17 @@ class Element{
             this.children = toArray(children);
         }
         this.key=props.key;
+
+        let count=0;
+        this.children.forEach((child)=>{
+            if(child instanceof Element){
+                count+=child.count+1;
+            }
+            else{
+                count++;
+            }
+        })
+        this.count=count;
     }
 
     render(){

diff --git a/src/index.js b/src/index.js
@@ -2,9 +2,11 @@ import Element,{el} from './element';
 import Patches from './patch';
 import {diff} from './diff';
 
-window.vdom = {
+window.vdom={
     el,
     Element,
     Patches,
     diff
-}
+}
+
+export default window.vdom;
diff --git a/src/patch/patchUtils.js b/src/patch/patchUtils.js
@@ -6,7 +6,9 @@ import {toArray} from '../utils';
  * @param {Element} el - new element
  */
 export function replaceNode(node,el){
-    let newNode=el.render();
+    let newNode;
+    if(typeof el === 'string') newNode=document.createTextNode(el);
+    else newNode=el.render();
     node.parentNode.replaceChild(newNode,node);
 }
 

diff --git a/src/utils.js b/src/utils.js
@@ -5,8 +5,10 @@
  * @return {Array}
  */
 export function toArray(arrayLike){
-    arrayLike = arrayLike || [];
-    if(!arrayLike.hasOwnProperty('length')) throw new Error('Parameter 1 should be array-like object');
+    if(!arrayLike) return [];
+    if(!('length' in arrayLike)) {
+        throw new Error('Parameter 1 should be array-like object');
+    }
     let list=[];
     for(let i=0,len=arrayLike.length;i<len;i++){
         list.push(arrayLike[i]);