Merge pull request #57 from garth/tidy

Ensure that class, props and style artefacts are not left after re-render

modules/class.js

@@ -2,6 +2,11 @@ function updateClass(oldVnode, vnode) {
   var cur, name, elm = vnode.elm,
       oldClass = oldVnode.data.class || {},
       klass = vnode.data.class || {};
+  for (name in oldClass) {
+    if (!klass[name]) {
+      elm.classList.remove(name);
+    }
+  }
   for (name in klass) {
     cur = klass[name];
     if (cur !== oldClass[name]) {

modules/props.js

@@ -1,6 +1,11 @@
 function updateProps(oldVnode, vnode) {
   var key, cur, old, elm = vnode.elm,
       oldProps = oldVnode.data.props || {}, props = vnode.data.props || {};
+  for (key in oldProps) {
+    if (!props[key]) {
+      delete elm[key];
+    }
+  }
   for (key in props) {
     cur = props[key];
     old = oldProps[key];

modules/style.js

@@ -10,6 +10,11 @@ function updateStyle(oldVnode, vnode) {
       oldStyle = oldVnode.data.style || {},
       style = vnode.data.style || {},
       oldHasDel = 'delayed' in oldStyle;
+  for (name in oldStyle) {
+    if (!style[name]) {
+      elm.style[name] = '';
+    }
+  }
   for (name in style) {
     cur = style[name];
     if (name === 'delayed') {

test/core.js

@@ -103,6 +103,10 @@ describe('snabbdom', function() {
       assert.equal(elm.childNodes[0].tagName, 'SPAN');
       assert.equal(elm.childNodes[1].textContent, 'I am a string');
     });
+    it('can create elements with props', function() {
+      patch(vnode0, h('a', {props: {src: 'http://localhost/'}}));
+      assert.equal(elm.src, 'http://localhost/');
+    });
   });
   describe('pathing an element', function() {
     it('changes the elements classes', function() {
@@ -123,6 +127,29 @@ describe('snabbdom', function() {
       assert(elm.classList.contains('am'));
       assert(!elm.classList.contains('horse'));
     });
+    it('removes missing classes', function() {
+      var vnode1 = h('i', {class: {i: true, am: true, horse: true}});
+      var vnode2 = h('i', {class: {i: true, am: true}});
+      patch(vnode0, vnode1);
+      patch(vnode1, vnode2);
+      assert(elm.classList.contains('i'));
+      assert(elm.classList.contains('am'));
+      assert(!elm.classList.contains('horse'));
+    });
+    it('changes an elements props', function() {
+      var vnode1 = h('a', {props: {src: 'http://other/'}});
+      var vnode2 = h('a', {props: {src: 'http://localhost/'}});
+      patch(vnode0, vnode1);
+      patch(vnode1, vnode2);
+      assert.equal(elm.src, 'http://localhost/');
+    });
+    it('removes an elements props', function() {
+      var vnode1 = h('a', {props: {src: 'http://other/'}});
+      var vnode2 = h('a');
+      patch(vnode0, vnode1);
+      patch(vnode1, vnode2);
+      assert.equal(elm.src, undefined);
+    });
     describe('updating children with keys', function() {
       function spanNum(n) {
         if (typeof n === 'string') {

test/style.js

@@ -32,6 +32,28 @@ describe('style', function() {
     assert.equal(elm.style.fontSize, '10px');
     assert.equal(elm.style.display, 'block');
   });
+  it('explicialy removes styles', function() {
+    var vnode1 = h('i', {style: {fontSize: '14px'}});
+    var vnode2 = h('i', {style: {fontSize: ''}});
+    var vnode3 = h('i', {style: {fontSize: '10px'}});
+    patch(vnode0, vnode1);
+    assert.equal(elm.style.fontSize, '14px');
+    patch(vnode1, vnode2);
+    assert.equal(elm.style.fontSize, '');
+    patch(vnode2, vnode3);
+    assert.equal(elm.style.fontSize, '10px');
+  });
+  it('implicially removes styles from element', function() {
+    var vnode1 = h('div', [h('i', {style: {fontSize: '14px'}})]);
+    var vnode2 = h('div', [h('i')]);
+    var vnode3 = h('div', [h('i', {style: {fontSize: '10px'}})]);
+    patch(vnode0, vnode1);
+    assert.equal(elm.firstChild.style.fontSize, '14px');
+    patch(vnode1, vnode2);
+    assert.equal(elm.firstChild.style.fontSize, '');
+    patch(vnode2, vnode3);
+    assert.equal(elm.firstChild.style.fontSize, '10px');
+  });
   it('updates delayed styles in next frame', function() {
     var patch = snabbdom.init([
       require('../modules/style'),