virtual-dom - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

package.json

 {
   "name": "virtual-dom",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A batched diff-based DOM rendering strategy",
@@ -22,4 +22,4 @@ "keywords": [],
     "is-object": "0.1.2",
-    "vdom": "0.0.3",
-    "vtree": "0.0.3",
+    "vdom": "0.0.5",
+    "vtree": "0.0.4",
     "x-is-array": "0.1.0",
@@ -26,0 +26,0 @@ "x-is-string": "0.1.0"

README.md

@@ -5,3 +5,3 @@ # Virtual DOM and diffing algorithm
 
-There was a [great article][1] about how react implements it's
+There was a [great article][1] about how react implements its
   virtual DOM. There are some really interesting ideas in there
@@ -18,6 +18,6 @@ but they are deeply buried in the implementation of the React
   templates as plain javascript functions that take in our
-  current application state and returns a visual representation
+  current application state and return a visual representation
   of the view for that state.
 
-However normally when you do this, you would have to re-create
+However, normally when you do this, you would have to re-create
   the entire DOM for that view each time the state changed and
@@ -36,3 +36,3 @@ swap out the root node for your view. This is terrible for
   **module** and it **should do one thing well**. The virtual DOM
-  is only concerned with representing the virtual DOM. The `diff`
+  is only concerned with representing the virtual DOM. The `diff`,
   `batch` and `patch` functions are only concerned with the
@@ -39,0 +39,0 @@ relevant algorithms for the virtual dom.

test/nested-properties.js

@@ -94,3 +94,3 @@ var test = require("tape")
 test("null properties", function (assert) {
-    var prev = h("div", { propA: "bar" })
+    var prev = h("div", { propA: "bar", propC: {} })
     var curr = h("div", { propB: "apples" })
@@ -100,3 +100,4 @@
 
-    assert.equal(elem.propA, null)
+    assert.equal(elem.propA, "")
+    assert.equal(elem.propC, null)
     assert.equal(elem.propB, "apples")
@@ -103,0 +104,0 @@

test/undefined-properties.js

 var test = require("tape")
+var isObject = require("is-object")
 
@@ -8,3 +9,10 @@ var h = require("../h.js")
 
-test("undefined ignored for value", function (assert) {
+test("undefined props are not set in create-element", function (assert) {
+    var node = h("div", { special: undefined })
+    var rootNode = render(node)
+    assert.ok(!("special" in rootNode))
+    assert.end()
+})
+
+test("undefined defaults string prop to empty string", function (assert) {
     var leftNode = h("input", { value: "hello" })
@@ -15,7 +23,26 @@ var rightNode = h("input", { value: undefined })
 
-    assert.equal(rootNode.value, "hello")
+    assert.equal(rootNode.value, "")
     assert.end()
 })
 
-test("undefined ignored for objects", function (assert) {
+test("undefined removes all previous styles", function (assert) {
+    var leftNode = h("div", {
+        style: {
+            display: "none",
+            border: "1px solid #000"
+        }
+    })
+
+    var rightNode = h("div", {
+        style: undefined
+    })
+
+    var rootNode = createAndPatch(leftNode, rightNode)
+
+    assert.equal(rootNode.style.display, style("display", ""))
+    assert.equal(rootNode.style.border, style("border", ""))
+    assert.end();
+})
+
+test("undefined style removes individual styles", function (assert) {
     var leftNode = h("div", { "style": { "display": "none" }})
@@ -26,3 +53,3 @@ var rightNode = h("div", { "style": undefined })
 
-    assert.equal(rootNode.style.display, style("display", "none"))
+    assert.equal(rootNode.style.display, style("display", ""))
     assert.end()
@@ -37,4 +64,4 @@ })
         var value = this.value
-        if (value !== rootNode.value) {
-            rootNode.value = value
+        if (value !== rootNode[propName]) {
+            rootNode[propName] = value
         }
@@ -55,2 +82,16 @@ }
 
+test("undefined nulls other complex types", function (assert) {
+    var leftNode = h("input", { special: {} })
+    var rightNode = h("input", { special: null })
+
+    var rootNode = render(leftNode)
+    assert.ok(isObject(rootNode.special))
+
+
+    newRoot = patch(rootNode, diff(leftNode, rightNode))
+    assert.equal(newRoot.special, null)
+
+    assert.end()
+})
+
 test("null not ignored for value", function (assert) {
@@ -82,3 +123,3 @@ var leftNode = h("input", { value: "hello" })
         var value = this.value
-        if (value !== rootNode.value) {
+        if (value !== rootNode[propName]) {
             rootNode.value = value
@@ -113,3 +154,3 @@ }
 
-// Safely transaltes node property using the DOM in the brosert
+// Safely transaltes node property using the DOM in the browser
 function property(tag, prop, value) {
@@ -116,0 +157,0 @@ var node = render(h(tag))

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

68852

increased by4.47%

Number of package files

21

increased by5%

Lines of code

1708

increased by1.91%

Dependency changes

• + Addedvdom@0.0.5(transitive)

• + Addedvtree@0.0.4(transitive)

• - Removedvdom@0.0.3(transitive)

• - Removedvtree@0.0.3(transitive)

• Updatedvdom@0.0.5

• Updatedvtree@0.0.4