virtual-dom - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

package.json

 {
   "name": "virtual-dom",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A batched diff-based DOM rendering strategy",
@@ -5,0 +5,0 @@ "keywords": [],

test/keys.js

@@ -228,3 +228,129 @@ var test = require("tape")
 
+test("add key to start", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
 
+    var rightNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rootNode = render(leftNode)
+    var childNodes = childNodesArray(rootNode)
+
+    var patches = diff(leftNode, rightNode)
+    assert.equal(patchCount(patches), 1)
+
+    var newRoot = patch(rootNode, patches)
+    assert.equal(newRoot, rootNode)
+
+    assert.equal(newRoot.childNodes.length, 3)
+
+    assert.equal(newRoot.childNodes[1], childNodes[0])
+    assert.equal(newRoot.childNodes[2], childNodes[1])
+    assert.end()
+})
+
+test("delete key at the end", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b")
+    ])
+
+    var rootNode = render(leftNode)
+    var childNodes = childNodesArray(rootNode)
+
+    var patches = diff(leftNode, rightNode)
+    assert.equal(patchCount(patches), 2)
+
+    var newRoot = patch(rootNode, patches)
+    assert.equal(newRoot, rootNode)
+
+    assert.equal(newRoot.childNodes.length, 2)
+
+    assert.equal(newRoot.childNodes[0], childNodes[0])
+    assert.equal(newRoot.childNodes[1], childNodes[1])
+    assert.end()
+})
+
+test("add key to end", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rootNode = render(leftNode)
+    var childNodes = childNodesArray(rootNode)
+
+    var patches = diff(leftNode, rightNode)
+    assert.equal(patchCount(patches), 1)
+
+    var newRoot = patch(rootNode, patches)
+    assert.equal(newRoot, rootNode)
+
+    assert.equal(newRoot.childNodes.length, 3)
+
+    assert.equal(newRoot.childNodes[0], childNodes[0])
+    assert.equal(newRoot.childNodes[1], childNodes[1])
+    assert.end()
+})
+
+test("adding multiple widgets", function (assert) {
+    function FooWidget(foo) {
+        this.foo = foo
+        this.counter = 0
+        this.key = foo
+    }
+
+    FooWidget.prototype.init = function () {
+        return render(h("div", String(this.foo)))
+    }
+
+    FooWidget.prototype.update = function (prev, elem) {
+        this.counter = prev.counter + 1
+        elem.textContent = this.foo + this.counter
+    }
+
+    var firstTree = h("div", [])
+    var rootNode = render(firstTree)
+
+    assert.equal(rootNode.tagName, "DIV")
+
+    var secondTree = h("div", [
+        new FooWidget("foo")
+    ])
+    rootNode = patch(rootNode, diff(firstTree, secondTree))
+
+    assert.equal(rootNode.tagName, "DIV")
+    assert.equal(rootNode.childNodes.length, 1)
+    assert.equal(rootNode.childNodes[0].tagName, "DIV")
+    assert.equal(rootNode.childNodes[0].childNodes[0].data, "foo")
+
+    var thirdTree = h("div", [
+        new FooWidget("foo"),
+        new FooWidget("bar")
+    ])
+    rootNode = patch(rootNode, diff(secondTree, thirdTree))
+
+    assert.equal(rootNode.tagName, "DIV")
+    assert.equal(rootNode.childNodes.length, 2)
+
+    assert.end()
+})
+
 function childNodesArray(node) {
@@ -231,0 +357,0 @@ var childNodes = []

vdom/patch-op.js

@@ -130,2 +130,3 @@ var applyProperties = require("./apply-properties")
             var node = children[move]
+            domNode.removeChild(node)
             domNode.insertBefore(node, childNodes[i])
@@ -132,0 +133,0 @@ }

vtree/diff.js

@@ -123,3 +123,4 @@ var isArray = require("x-is-array")
     var aChildren = a.children
-    var bChildren = b.children
+    var bChildren = reorder(aChildren, b.children)
+
     var aLen = aChildren.length
@@ -129,4 +130,2 @@ var bLen = bChildren.length
 
-    bChildren = reorder(aChildren, bChildren, len)
-
     for (var i = 0; i < len; i++) {
@@ -213,3 +212,4 @@ var leftNode = aChildren[i]
 // List diff, naive left to right reordering
-function reorder(aChildren, bChildren, len) {
+function reorder(aChildren, bChildren) {
+
     var bKeys = keyIndex(bChildren)
@@ -237,2 +237,5 @@
 
+    var aLen = aChildren.length
+    var bLen = bChildren.length
+    var len = aLen > bLen ? aLen : bLen
     var shuffle = []
@@ -252,3 +255,3 @@ var freeIndex = 0
         } else {
-            while (freeIndex in bMatch) {
+            while (bMatch[freeIndex] !== undefined) {
                 freeIndex++
@@ -255,0 +258,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81454

increased by4.45%

Lines of code

2179

increased by4.76%

No dependency changes