virtual-dom - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

h.js

@@ -1,3 +0,3 @@
-var h = require("./h/")
+var h = require("./h/index.js")
 
 module.exports = h

package.json

 {
   "name": "virtual-dom",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A batched diff-based DOM rendering strategy",
@@ -23,4 +23,3 @@ "keywords": [],
     "extend": "~1.2.1",
-    "global": "^3.0.0",
-    "semver": "~2.2.1",
+    "global": "git+https://github.com/Matt-Esch/global",
     "x-is-array": "^0.1.0",
@@ -35,3 +34,3 @@ "x-is-object": "^0.1.0",
     "tap-spec": "^0.1.8",
-    "tape": "^2.12.1"
+    "tape": "^2.12.3"
   },
@@ -54,6 +53,6 @@ "licenses": [
   "testling": {
-    "files": "test/index.js",
+    "files": "test/*.js",
     "browsers": [
       "ie/8..latest",
-      "firefox/16..latest",
+      "firefox/17..latest",
       "firefox/nightly",
@@ -60,0 +59,0 @@ "chrome/22..latest",

test/index.js

 var test = require("tape")
 
-var h = require("../h")
-var diff = require("../diff")
-var patch = require("../patch")
+var h = require("../h.js")
+var diff = require("../diff.js")
+var patch = require("../patch.js")
+var render = require("../create-element.js")
 var Node = require("../vtree/vnode")
-var render = require("../vdom/create-element")
+var TextNode = require("../vtree/vtext")
 var version = require("../vtree/version")
@@ -19,6 +20,17 @@
     assert.equal(Node.prototype.type, "VirtualNode")
-    assert.deepEqual(Node.prototype.version, version.split("."))
+    assert.deepEqual(Node.prototype.version, version)
     assert.end()
 })
 
+test("TextNode is a function", function (assert) {
+    assert.equal(typeof TextNode, "function")
+    assert.end()
+})
+
+test("TextNode type and version are set", function (assert) {
+    assert.equal(TextNode.prototype.type, "VirtualText")
+    assert.deepEqual(TextNode.prototype.version, version)
+    assert.end()
+})
+
 // h tests
@@ -127,3 +139,3 @@
 
-    assert.true(node instanceof Node, "node is a VirtualNode")
+    assert.ok(node instanceof Node, "node is a VirtualNode")
     assert.equal(node.tagName, tagName, "tag names are equal")
@@ -159,4 +171,4 @@ assert.deepEqual(node.properties, properties, "propeties are equal")
     assert.equal(dom.tagName, "SPAN")
-    assert.false(dom.id)
-    assert.false(dom.className)
+    assert.notOk(dom.id)
+    assert.notOk(dom.className)
     assert.equal(dom.childNodes.length, 1)
@@ -170,4 +182,4 @@ assert.equal(dom.childNodes[0].data, "hello")
     var dom = render(vdom)
-    assert.false(dom.id)
-    assert.false(dom.className)
+    assert.notOk(dom.id)
+    assert.notOk(dom.className)
     assert.equal(dom.tagName, "DIV")
@@ -182,3 +194,3 @@ assert.equal(dom.childNodes.length, 0)
     assert.equal(dom.id, "important")
-    assert.false(dom.className)
+    assert.notOk(dom.className)
     assert.equal(dom.tagName, "DIV")
@@ -192,3 +204,3 @@ assert.equal(dom.childNodes.length, 0)
     var dom = render(vdom)
-    assert.false(dom.id)
+    assert.notOk(dom.id)
     assert.equal(dom.className, "pretty")
@@ -219,4 +231,4 @@ assert.equal(dom.tagName, "DIV")
     assert.equal(dom.tagName, "DIV")
-    assert.equal(dom.style.border, "1px solid rgb(0, 0, 0)")
-    assert.equal(dom.style.padding, "2px")
+    assert.equal(dom.style.border, style("border", "1px solid rgb(0, 0, 0)"))
+    assert.equal(dom.style.padding, style("padding", "2px"))
     assert.equal(dom.childNodes.length, 0)
@@ -275,3 +287,3 @@ assert.end()
     assert.equal(dom.tagName, "DIV")
-    assert.equal(dom.style.cssText.trim(), "color: red;")
+    assert.equal(dom.style.cssText, style("cssText", "color: red;"))
     assert.equal(dom.childNodes.length, 0)
@@ -335,3 +347,3 @@ assert.end()
     assert.equal(dom.tagName, "DIV")
-    assert.equal(dom.style.cssText.trim(), "color: red;")
+    assert.equal(dom.style.cssText, style("cssText", "color: red;"))
     assert.equal(dom.childNodes.length, 0)
@@ -432,15 +444,35 @@ assert.equal(i, 2)
 test("dom node style", function (assert) {
-    var a = h("div", { style: { foo: "bar", bar: "oops" } })
-    var b = h("div", { style: { foo: "baz", bar: "oops" } })
+
+
+    var a = h("div", {
+        style: {
+            border: "none",
+            className: "oops",
+            display: "none"
+        }
+    })
+
+    var b = h("div", {
+        style: {
+            border: "1px solid #000",
+            className: "oops",
+            display: ""
+        }
+    })
+
     var rootNode = render(a)
-    assert.equal(rootNode.style.foo, "bar")
-    assert.equal(rootNode.style.bar, "oops")
+    assert.equal(rootNode.style.border, style("border", "none"))
+    assert.equal(rootNode.style.className, style("className", "oops"))
+    assert.equal(rootNode.style.display, style("display", "none"))
     var s1 = rootNode.style
     var equalNode = render(b)
-    assert.equal(equalNode.style.foo, "baz")
+    assert.equal(equalNode.style.border, style("border", "1px solid #000"))
+    assert.equal(equalNode.style.className, style("className", "oops"))
+    assert.equal(equalNode.style.display, style("display", ""))
     var newRoot = patch(rootNode, diff(a, b))
     var s2 = newRoot.style
     assertEqualDom(assert, newRoot, equalNode)
-    assert.equal(newRoot.style.foo, "baz")
-    assert.equal(newRoot.style.bar, "oops")
+    assert.equal(newRoot.style.border, style("border", "1px solid #000"))
+    assert.equal(newRoot.style.className, style("className", "oops"))
+    assert.equal(newRoot.style.display, style("display", ""))
     assert.equal(s1, s2)
@@ -468,2 +500,7 @@ assert.end()
 test("dom node attributes", function (assert) {
+    if (!setAttributes()) {
+        assert.skip("No support for setting attributes array directly")
+        return assert.end()
+    }
+
     var a = h("div", { attributes: { foo: "bar", bar: "oops" } })
@@ -597,3 +634,3 @@ var b = h("div", { attributes: { foo: "baz", bar: "oops" } })
     var patches = diff(leftTree, rightTree)
-    assert.equal(Object.keys(patches).length, 2)
+    assert.equal(patchCount(patches), 1)
     assert.equal(initCount, 1, "initCount after diff")
@@ -666,3 +703,3 @@ assert.equal(updateCount, 0, "updateCount after diff")
     var patches = diff(leftTree, rightTree)
-    assert.equal(Object.keys(patches).length, 2)
+    assert.equal(patchCount(patches), 1)
     assert.equal(initCount, 1, "initCount after diff")
@@ -697,4 +734,4 @@ assert.equal(updateCount, 0, "updateCount after diff")
 
-    assert.true(stateful.hasWidgets)
-    assert.false(pure.hasWidgets)
+    assert.ok(stateful.hasWidgets)
+    assert.notOk(pure.hasWidgets)
     assert.end()
@@ -824,2 +861,19 @@ })
 
+test("Create element respects namespace", function (assert) {
+    var svgURI = "http://www.w3.org/2000/svg"
+    var vnode = new Node("svg", {}, [], null, svgURI)
+    var node = render(vnode)
+
+    assert.equal(node.tagName, "svg")
+    assert.equal(node.namespaceURI, svgURI)
+    assert.end()
+})
+
+// Safely translates style values using the DOM in the browser
+function style(name, value) {
+    var node = render(h())
+    node.style[name] = value
+    return node.style[name]
+}
+
 function assertEqualDom(assert, a, b) {
@@ -849,2 +903,3 @@ assert.ok(areEqual(a, b) && areEqual(b, a), "Dom structures are equal")
             if (key === "ownerDocument") return a[key] === b[key]
+            if (key === "style") return equalStyle(a[key], b[key])
             if (typeof a === "object" || typeof a === "function") {
@@ -864,1 +919,51 @@ if (!areEqual(a[key], b[key])) {
 }
+
+// CssStyleDeclaration indexes the styles, which could be out of order
+// This is a left sided check. Note that we call equal(a, b) and equal(b, a)
+function equalStyle(a, b) {
+    var keys = []
+    for (var key in a) {
+        if ("" + parseInt(key, 10) === key) {
+            continue
+        } else {
+            keys.push(key)
+        }
+    }
+
+    keys.sort()
+
+    for (var i = 0; i < keys.length; i++) {
+        if (a[key] !== b[key]) {
+            return false
+        }
+    }
+
+    return true
+}
+
+function patchCount(patch) {
+    var count = 0
+
+    for (var key in patch) {
+        if (key !== "a" && patch.hasOwnProperty(key)) {
+            count++
+        }
+    }
+
+    return count
+}
+
+function setAttributes() {
+    var node = render(h())
+    var attr = "foo"
+    try {
+        if (!("attributes" in node)) {
+            node.attributes = {}
+        }
+
+        node.attributes[attr] = "bar"
+        return true
+    } catch (e) {
+        return false
+    }
+}

vdom/create-element.js

@@ -25,3 +25,6 @@ var document = require("global/document")
 
-    var node = doc.createElement(vnode.tagName)
+    var node = (vnode.namespace === null) ?
+        doc.createElement(vnode.tagName) :
+        doc.createElementNS(vnode.namespace, vnode.tagName)
+
     applyProperties(node, vnode.properties)
@@ -28,0 +31,0 @@ var children = vnode.children

vtree/diff.js

@@ -66,3 +66,3 @@ var isArray = require("x-is-array")
         var aValue = a[aKey]
-        var bValue = b[aKey] || nullProps
+		var bValue = aKey in b ? b[aKey] : nullProps
 
@@ -69,0 +69,0 @@ if (isObject(aValue)) {

vtree/is-vnode.js

 var version = require("./version")
-var major = version[0]
 
@@ -11,3 +10,3 @@ module.exports = isVirtualNode
 
-    return x.type === "VirtualNode" && x.version[0] === major
+    return x.type === "VirtualNode" && x.version === version
 }

vtree/is-vtext.js

 var version = require("./version")
-var major = version[0]
 
@@ -11,3 +10,3 @@ module.exports = isVirtualText
 
-    return x.type === "VirtualText" && x.version[0] === major
+    return x.type === "VirtualText" && x.version === version
 }

vtree/version.js

@@ -1,3 +0,1 @@
-var semver = require("semver")
-
-module.exports = semver.clean("0.1.0")
+module.exports = "1"

vtree/vnode.js

@@ -7,6 +7,8 @@ var version = require("./version")
 
-function VirtualNode(tagName, properties, children) {
+function VirtualNode(tagName, properties, children, key, namespace) {
     this.tagName = tagName
     this.properties = properties
     this.children = children
+    this.key = (typeof key === "string") ? key : null
+    this.namespace = (typeof namespace === "string") ? namespace : null
     this.count = countDescendants(children)
@@ -16,3 +18,3 @@ this.hasWidgets = hasWidgets(children)
 
-VirtualNode.prototype.version = version.split(".")
+VirtualNode.prototype.version = version
 VirtualNode.prototype.type = "VirtualNode"
@@ -19,0 +21,0 @@

vtree/vtext.js

@@ -9,3 +9,3 @@ var version = require("./version")
 
-VirtualText.prototype.version = version.split(".")
+VirtualText.prototype.version = version
 VirtualText.prototype.type = "VirtualText"

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

Git dependency

Supply chain risk

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable and can be used to inject untrusted code or reduce the likelihood of a reproducible install.

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

56771

increased by0.58%

Dependency count

7

decreased by-12.5%

Lines of code

1422

increased by0.78%

Worsened metrics

Number of package files

24

decreased by-4%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedsemver@~2.2.1

• - Removeddom-walk@0.1.2(transitive)

• - Removedglobal@3.0.2(transitive)

• - Removedmin-document@2.19.0(transitive)

• - Removedprocess@0.5.2(transitive)

• - Removedsemver@2.2.1(transitive)

• Updatedglobal@git+https://github.com/Matt-Esch/global