Improve performance for text-only elements

snabbdom.js

@@ -30,12 +30,14 @@ var frag = document.createDocumentFragment();
 var emptyNode = VNode(undefined, {style: {}, class: {}}, [], undefined);
 
 function h(selector, b, c) {
-  var props = {}, children, tag, i;
+  var props = {}, children, tag, text, i;
   if (arguments.length === 3) {
-    props = b; children = isPrimitive(c) ? [c] : c;
+    props = b;
+    if (isArr(c)) { children = c; }
+    else if (isPrimitive(c)) { text = c; }
   } else if (arguments.length === 2) {
     if (isArr(b)) { children = b; }
-    else if (isPrimitive(b)) { children = [b]; }
+    else if (isPrimitive(b)) { text = b; }
     else { props = b; }
   }
   // Parse selector
@@ -52,7 +54,7 @@ function h(selector, b, c) {
       if (isPrimitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
     }
   }
-  return VNode(tag, props, children, undefined, undefined);
+  return VNode(tag, props, children, text, undefined);
 }
 
 function updateProps(elm, oldProps, props) {
@@ -81,7 +83,7 @@ function updateProps(elm, oldProps, props) {
 
 function createElm(vnode) {
   var elm;
-  if (isUndef(vnode.text)) {
+  if (!isUndef(vnode.tag)) {
     elm = document.createElement(vnode.tag);
     updateProps(elm, emptyNode.props, vnode.props);
     var children = vnode.children;
@@ -89,6 +91,8 @@ function createElm(vnode) {
       for (var i = 0; i < vnode.children.length; ++i) {
         elm.appendChild(createElm(children[i]));
       }
+    } else if (isPrimitive(vnode.text)) {
+      elm.textContent = vnode.text;
     }
   } else {
     elm = document.createTextNode(vnode.text);
@@ -199,8 +203,8 @@ function updateChildren(parentElm, oldCh, newCh) {
 
 function patchElm(oldVnode, newVnode) {
   var elm = newVnode.elm = oldVnode.elm;
+  updateProps(elm, oldVnode.props, newVnode.props);
   if (isUndef(newVnode.text)) {
-    updateProps(elm, oldVnode.props, newVnode.props);
     updateChildren(elm, oldVnode.children, newVnode.children);
   } else {
     if (oldVnode.text !== newVnode.text) {

test/index.js

@@ -59,16 +59,15 @@ describe('snabbdom', function() {
     });
     it('can create vnode with text content in string', function() {
       var vnode = h('a', 'I am a string');
-      assert.equal(vnode.children[0].text, 'I am a string');
+      assert.equal(vnode.text, 'I am a string');
     });
     it('can create vnode with props and text content in string', function() {
       var vnode = h('a', {}, 'I am a string');
-      assert.equal(vnode.children[0].text, 'I am a string');
+      assert.equal(vnode.text, 'I am a string');
     });
     it('can create empty vnode at element', function() {
       var elm = document.createElement('div');
       var vnode = snabbdom.emptyNodeAt(elm);
-      console.log(vnode);
       assert.equal(vnode.elm, elm);
     });
   });
@@ -103,6 +102,11 @@ describe('snabbdom', function() {
       var elm = createElm(h('a', ['I am a string']));
       assert.equal(elm.innerHTML, 'I am a string');
     });
+    it('can create elements with span and text content', function() {
+      var elm = createElm(h('a', [h('span'), 'I am a string']));
+      assert.equal(elm.childNodes[0].tagName, 'SPAN');
+      assert.equal(elm.childNodes[1].textContent, 'I am a string');
+    });
   });
   describe('pathing an element', function() {
     it('changes the elements classes', function() {