snabbdom - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

package.json

 {
   "name": "snabbdom",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.",
@@ -5,0 +5,0 @@ "main": "snabbdom.js",

README.md

@@ -92,2 +92,3 @@ # Snabbdom
 * [Hero transitions](http://paldepind.github.io/snabbdom/examples/hero/)
+* [SVG Carousel](http://paldepind.github.io/snabbdom/examples/carousel-svg/)
 
@@ -453,3 +454,3 @@ ## Core documentation
 
-See also the [SVG example](./examples/svg).
+See also the [SVG example](./examples/svg) and the [SVG Carousel example](./examples/carousel-svg/).
 
@@ -456,0 +457,0 @@ ### Thunks

snabbdom.js

@@ -11,4 +11,5 @@ // jshint newcap: false
 
+// deal with case sensivity better than that
 function emptyNodeAt(elm) {
-  return VNode(elm.tagName, {}, [], undefined, elm);
+  return VNode(elm.tagName.toLowerCase(), {}, [], undefined, elm);
 }
@@ -49,6 +50,9 @@
   function createElm(vnode, insertedVnodeQueue) {
-    var i, data = vnode.data;
+    var i, thunk, data = vnode.data;
     if (isDef(data)) {
       if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode);
-      if (isDef(i = data.vnode)) vnode = i;
+      if (isDef(i = data.vnode)) {
+          thunk = vnode;
+          vnode = i;
+      }
     }
@@ -83,2 +87,3 @@ var elm, children = vnode.children, sel = vnode.sel;
     }
+    if (isDef(thunk)) thunk.elm = vnode.elm;
     return vnode.elm;
@@ -94,5 +99,5 @@ }
   function invokeDestroyHook(vnode) {
-    var i = vnode.data, j;
-    if (isDef(i)) {
-      if (isDef(i = i.hook) && isDef(i = i.destroy)) i(vnode);
+    var i, j, data = vnode.data;
+    if (isDef(data)) {
+      if (isDef(i = data.hook) && isDef(i = i.destroy)) i(vnode);
       for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
@@ -104,2 +109,3 @@ if (isDef(i = vnode.children)) {
       }
+      if (isDef(i = data.vnode)) invokeDestroyHook(i);
     }
@@ -191,5 +197,16 @@ }
     if (isDef(i = oldVnode.data) && isDef(i = i.vnode)) oldVnode = i;
-    if (isDef(i = vnode.data) && isDef(i = i.vnode)) vnode = i;
+    if (isDef(i = vnode.data) && isDef(i = i.vnode)) {
+      patchVnode(oldVnode, i, insertedVnodeQueue);
+      vnode.elm = i.elm;
+      return;
+    }
     var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children;
     if (oldVnode === vnode) return;
+    if (!sameVnode(oldVnode, vnode)) {
+      var parentElm = oldVnode.elm.parentElement;
+      elm = createElm(vnode, insertedVnodeQueue);
+      parentElm.insertBefore(elm, oldVnode.elm);
+      removeVnodes(parentElm, [oldVnode], 0, 0);
+      return;
+    }
     if (isDef(vnode.data)) {
@@ -220,16 +237,24 @@ for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
   return function(oldVnode, vnode) {
-    var i;
+    var i, elm, parent;
     var insertedVnodeQueue = [];
     for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
+
     if (oldVnode.nodeType === Node.ELEMENT_NODE) {
-      if (oldVnode.parentElement !== null) {
-        createElm(vnode, insertedVnodeQueue);
-        oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
-      } else {
-        oldVnode = emptyNodeAt(oldVnode);
-        patchVnode(oldVnode, vnode, insertedVnodeQueue);
+      oldVnode = emptyNodeAt(oldVnode);
+    }
+
+    if (sameVnode(oldVnode, vnode)) {
+      patchVnode(oldVnode, vnode, insertedVnodeQueue);
+    } else {
+      elm = oldVnode.elm;
+      parent = elm.parentElement;
+
+      createElm(vnode, insertedVnodeQueue);
+
+      if (parent !== null) {
+        parent.insertBefore(vnode.elm, elm.nextSibling);
+        removeVnodes(parent, [oldVnode], 0, 0);
       }
-    } else {
-      patchVnode(oldVnode, vnode, insertedVnodeQueue);
     }
+
     for (i = 0; i < insertedVnodeQueue.length; ++i) {
@@ -236,0 +261,0 @@ insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);

test/attachto.js

@@ -15,8 +15,9 @@ var assert = require('assert');
   it('adds element to target', function() {
-    patch(vnode0, h('div', [
-      h('div#wrapper', [
-        h('div', 'Some element'),
-        attachTo(elm, h('div#attached', 'Test')),
-      ]),
-    ]));
+    var vnode1 = h('div', [
+       h('div#wrapper', [
+         h('div', 'Some element'),
+         attachTo(elm, h('div#attached', 'Test')),
+       ]),
+    ]);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.children.length, 2);
@@ -37,5 +38,5 @@ });
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.children[0].innerHTML, 'First text');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     assert.equal(elm.children[0].innerHTML, 'New text');
@@ -57,5 +58,5 @@ });
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.children[0].innerHTML, 'Text');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     assert.equal(elm.children[0].innerHTML, 'Text');
@@ -75,5 +76,5 @@ });
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.children[0].innerHTML, 'First text');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     assert.equal(elm.children.length, 1);
@@ -83,5 +84,2 @@ });
     function rm(vnode, cb) {
-      console.log(vnode);
-      console.log(vnode.elm);
-      console.log(vnode.elm.parentElement);
       assert.equal(vnode.elm.tagName, 'DIV');
@@ -102,5 +100,5 @@ assert.equal(vnode.elm.innerHTML, 'First text');
     ]);
-    patch(vnode0, vnode1);
-    patch(vnode1, vnode2);
+    elm = patch(vnode0, vnode1).elm;
+    elm = patch(vnode1, vnode2).elm;
   });
 });

test/core.js

@@ -60,3 +60,3 @@ var assert = require('assert');
     it('has tag', function() {
-      patch(vnode0, h('div'));
+      elm = patch(vnode0, h('div')).elm;
       assert.equal(elm.tagName, 'DIV');
@@ -68,16 +68,16 @@ });
       var vnode1 = h('span#id');
-      patch(elm, vnode1);
-      assert.equal(vnode1.elm.tagName, 'SPAN');
-      assert.equal(vnode1.elm.id, 'id');
+      elm = patch(elm, vnode1).elm;
+      assert.equal(elm.tagName, 'SPAN');
+      assert.equal(elm.id, 'id');
     });
     it('has id', function() {
-      patch(vnode0, h('div', [h('div#unique')]));
+      elm = patch(vnode0, h('div', [h('div#unique')])).elm;
       assert.equal(elm.firstChild.id, 'unique');
     });
     it('has correct namespace', function() {
-      patch(vnode0, h('div', [h('div', {ns: 'http://www.w3.org/2000/svg'})]));
+      elm = patch(vnode0, h('div', [h('div', {ns: 'http://www.w3.org/2000/svg'})])).elm;
       assert.equal(elm.firstChild.namespaceURI, 'http://www.w3.org/2000/svg');
     });
     it('is recieves classes in selector', function() {
-      patch(vnode0, h('div', [h('i.am.a.class')]));
+      elm = patch(vnode0, h('div', [h('i.am.a.class')])).elm;
       assert(elm.firstChild.classList.contains('am'));
@@ -88,3 +88,3 @@ assert(elm.firstChild.classList.contains('a'));
     it('is recieves classes in class property', function() {
-      patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}}));
+      elm = patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}})).elm;
       assert(elm.classList.contains('am'));
@@ -96,3 +96,3 @@ assert(elm.classList.contains('a'));
     it('handles classes from both selector and property', function() {
-      patch(vnode0, h('div', [h('i.has', {class: {classes: true}})]));
+      elm = patch(vnode0, h('div', [h('i.has', {class: {classes: true}})])).elm;
       assert(elm.firstChild.classList.contains('has'));
@@ -102,7 +102,7 @@ assert(elm.firstChild.classList.contains('classes'));
     it('can create elements with text content', function() {
-      patch(vnode0, h('div', ['I am a string']));
+      elm = patch(vnode0, h('div', ['I am a string'])).elm;
       assert.equal(elm.innerHTML, 'I am a string');
     });
     it('can create elements with span and text content', function() {
-      patch(vnode0, h('a', [h('span'), 'I am a string']));
+      elm = patch(vnode0, h('a', [h('span'), 'I am a string'])).elm;
       assert.equal(elm.childNodes[0].tagName, 'SPAN');
@@ -112,3 +112,3 @@ 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/'}}));
+      elm = patch(vnode0, h('a', {props: {src: 'http://localhost/'}})).elm;
       assert.equal(elm.src, 'http://localhost/');
@@ -138,3 +138,3 @@ });
       patch(vnode0, vnode1);
-      patch(vnode1, vnode2);
+      elm = patch(vnode1, vnode2).elm;
       assert(elm.classList.contains('i'));
@@ -148,3 +148,3 @@ assert(elm.classList.contains('am'));
       patch(vnode0, vnode1);
-      patch(vnode1, vnode2);
+      elm = patch(vnode1, vnode2).elm;
       assert(elm.classList.contains('i'));
@@ -158,3 +158,3 @@ assert(elm.classList.contains('am'));
       patch(vnode0, vnode1);
-      patch(vnode1, vnode2);
+      elm = patch(vnode1, vnode2).elm;
       assert(elm.classList.contains('i'));
@@ -168,3 +168,3 @@ assert(elm.classList.contains('am'));
       patch(vnode0, vnode1);
-      patch(vnode1, vnode2);
+      elm = patch(vnode1, vnode2).elm;
       assert.equal(elm.src, 'http://localhost/');
@@ -191,5 +191,5 @@ });
           var vnode2 = h('span', [1, 2, 3].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 1);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 3);
@@ -202,5 +202,5 @@ assert.equal(elm.children[1].innerHTML, '2');
           var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 2);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
@@ -211,6 +211,6 @@ });
           var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 4);
           assert.equal(elm.children.length, 4);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
@@ -221,5 +221,5 @@ });
           var vnode2 = h('span', [1, 2, 3, 4, 5].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 3);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['1', '2', '3', '4', '5']);
@@ -230,5 +230,5 @@ });
           var vnode2 = h('span', {key: 'span'}, [1, 2, 3].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 0);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['1', '2', '3']);
@@ -239,5 +239,5 @@ });
           var vnode2 = h('span', {key: 'span'});
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.deepEqual(map(inner, elm.children), ['1', '2', '3']);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 0);
@@ -250,5 +250,5 @@ });
           var vnode2 = h('span', [3, 4, 5].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 5);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['3', '4', '5']);
@@ -259,5 +259,5 @@ });
           var vnode2 = h('span', [1, 2, 3].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 5);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 3);
@@ -271,5 +271,5 @@ assert.equal(elm.children[0].innerHTML, '1');
           var vnode2 = h('span', [1, 2, 4, 5].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 5);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 4);
@@ -287,5 +287,5 @@ assert.deepEqual(elm.children[0].innerHTML, '1');
           var vnode2 = h('span', [2, 3, 1, 4].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 4);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 4);
@@ -300,5 +300,5 @@ assert.equal(elm.children[0].innerHTML, '2');
           var vnode2 = h('span', [2, 3, 1].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 3);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 3);
@@ -312,5 +312,5 @@ assert.equal(elm.children[0].innerHTML, '2');
           var vnode2 = h('span', [1, 4, 2, 3].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 4);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 4);
@@ -325,5 +325,5 @@ assert.equal(elm.children[0].innerHTML, '1');
           var vnode2 = h('span', [4, 2, 3, 1].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 4);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 4);
@@ -340,5 +340,5 @@ assert.equal(elm.children[0].innerHTML, '4');
           var vnode2 = h('span', [4, 1, 2, 3, 6].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 5);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 5);
@@ -354,5 +354,5 @@ assert.equal(elm.children[0].innerHTML, '4');
           var vnode2 = h('span', [4, 6].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 3);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.deepEqual(map(inner, elm.children), ['4', '6']);
@@ -363,5 +363,5 @@ });
           var vnode2 = h('span', [4, 5, 3].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.children.length, 3);
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.children.length, 3);
@@ -375,6 +375,6 @@ assert.equal(elm.children[0].innerHTML, '4');
           var vnode2 = h('span', ['d', 'a', 'b', 'c', 1, 'e'].map(spanNum));
-          patch(vnode0, vnode1);
+          elm = patch(vnode0, vnode1).elm;
           assert.equal(elm.childNodes.length, 4);
           assert.equal(elm.textContent, '1abc');
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           assert.equal(elm.childNodes.length, 6);
@@ -387,5 +387,5 @@ assert.equal(elm.textContent, 'dabc1e');
         var vnode2 = h('span', [8, 7, 6, 5, 4, 3, 2, 1].map(spanNum));
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.equal(elm.children.length, 8);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(inner, elm.children), ['8', '7', '6', '5', '4', '3', '2', '1']);
@@ -396,5 +396,5 @@ });
         var vnode2 = h('span', [4, 3, 2, 1, 5, 0].map(spanNum));
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.equal(elm.children.length, 6);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(inner, elm.children), ['4', '3', '2', '1', '5', '0']);
@@ -414,3 +414,3 @@ });
           var elm = document.createElement('div');
-          patch(elm, vnode1);
+          elm = patch(elm, vnode1).elm;
           for (i = 0; i < elms; ++i) {
@@ -423,3 +423,3 @@ assert.equal(elm.children[i].innerHTML, i.toString());
           }));
-          patch(vnode1, vnode2);
+          elm = patch(vnode1, vnode2).elm;
           for (i = 0; i < elms; ++i) {
@@ -436,5 +436,5 @@ assert.equal(elm.children[i].innerHTML, shufArr[i].toString());
         var vnode2 = h('div', [h('span', 'Hello'), h('span', 'World')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.deepEqual(map(inner, elm.children), ['Hello']);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
@@ -445,5 +445,5 @@ });
         var vnode2 = h('div', ['Text', h('span', 'Span')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.equal(elm.childNodes[0].textContent, 'Text');
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.equal(elm.childNodes[0].textContent, 'Text');
@@ -454,5 +454,5 @@ });
         var vnode2 = h('div', ['Text2', h('span', 'Span')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.equal(elm.childNodes[0].textContent, 'Text');
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.equal(elm.childNodes[0].textContent, 'Text2');
@@ -463,5 +463,5 @@ });
         var vnode2 = h('div', [h('span', 'Hello'), h('span', 'World')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.deepEqual(map(inner, elm.children), ['World']);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
@@ -472,5 +472,5 @@ });
         var vnode2 = h('div', [h('div', 'Hello'), h('span', 'World')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.deepEqual(map(inner, elm.children), ['World']);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(prop('tagName'), elm.children), ['DIV', 'SPAN']);
@@ -482,5 +482,5 @@ assert.deepEqual(map(inner, elm.children), ['Hello', 'World']);
         var vnode2 = h('div', [h('span', 'One'), h('span', 'Three')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.deepEqual(map(inner, elm.children), ['One', 'Two', 'Three']);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(inner, elm.children), ['One', 'Three']);
@@ -502,3 +502,2 @@ });
         patch(vnode1, vnode2);
-        console.log(elm.childNodes);
         assert.deepEqual(map(prop('textContent'), elm.childNodes), ['Two', 'Three']);
@@ -519,5 +518,5 @@ });
         var vnode2 = h('div', [h('b', 'Three'), h('span', 'One'), h('div', 'Two')]);
-        patch(vnode0, vnode1);
+        elm = patch(vnode0, vnode1).elm;
         assert.deepEqual(map(inner, elm.children), ['One', 'Two', 'Three']);
-        patch(vnode1, vnode2);
+        elm = patch(vnode1, vnode2).elm;
         assert.deepEqual(map(prop('tagName'), elm.children), ['B', 'SPAN', 'DIV']);
@@ -676,2 +675,19 @@ assert.deepEqual(map(inner, elm.children), ['Three', 'One', 'Two']);
       });
+      it('calls `init` and `prepatch` listeners on root', function() {
+          var count = 0;
+          function init(vnode) {
+            assert.strictEqual(vnode, vnode2);
+            count += 1;
+          }
+          function prepatch(oldVnode, vnode) {
+            assert.strictEqual(vnode, vnode1);
+            count += 1;
+          }
+          var vnode1 = h('div', {hook: {init: init, prepatch: prepatch}});
+          patch(vnode0, vnode1);
+          assert.equal(1, count);
+          var vnode2 = h('span', {hook: {init: init, prepatch: prepatch}});
+          patch(vnode1, vnode2);
+          assert.equal(2, count);
+      });
       it('removes element when all remove listeners are done', function() {
@@ -684,5 +700,6 @@ var rm1, rm2, rm3;
         var vnode1 = h('div', [h('a', {hook: {remove: function(_, rm) { rm3 = rm; }}})]);
-        patch(vnode0, vnode1);
+	var vnode2 = h('div', []);
+        elm = patch(vnode0, vnode1).elm;
         assert.equal(elm.children.length, 1);
-        patch(vnode1, vnode0);
+        elm = patch(vnode1, vnode2).elm;
         assert.equal(elm.children.length, 1);
@@ -696,2 +713,23 @@ rm1();
       });
+      it('invokes remove hook on replaced root', function() {
+        var result = [];
+        var parent = document.createElement('div');
+        var vnode0 = document.createElement('div');
+	parent.appendChild(vnode0);
+        function cb(vnode, rm) {
+          result.push(vnode);
+          rm();
+        }
+        var vnode1 = h('div', {hook: {remove: cb}}, [
+          h('b', 'Child 1'),
+          h('i', 'Child 2'),
+        ]);
+        var vnode2 = h('span', [
+          h('b', 'Child 1'),
+          h('i', 'Child 2'),
+        ]);
+        patch(vnode0, vnode1);
+        patch(vnode1, vnode2);
+        assert.equal(1, result.length);
+      });
     });
@@ -719,4 +757,5 @@ describe('module hooks', function() {
         ]);
+	var vnode2 = h('div');
         patch(vnode0, vnode1);
-        patch(vnode1, vnode0);
+        patch(vnode1, vnode2);
         assert.equal(result.length, 1);
@@ -746,4 +785,5 @@ });
         ]);
+	var vnode2 = h('div');
         patch(vnode0, vnode1);
-        patch(vnode1, vnode0);
+        patch(vnode1, vnode2);
         assert.equal(created, 4);
@@ -764,4 +804,5 @@ assert.equal(destroyed, 4);
         ]);
+	var vnode2 = h('div');
         patch(vnode0, vnode1);
-        patch(vnode1, vnode0);
+        patch(vnode1, vnode2);
         assert.equal(created, 2);
@@ -784,4 +825,5 @@ assert.equal(removed, 2);
         ]);
+	var vnode2 = h('div');
         patch(vnode0, vnode1);
-        patch(vnode1, vnode0);
+        patch(vnode1, vnode2);
         assert.equal(created, 4);
@@ -788,0 +830,0 @@ assert.equal(destroyed, 4);

test/eventlisteners.js

@@ -21,3 +21,3 @@ var assert = require('assert');
     ]);
-    patch(vnode0, vnode);
+    elm = patch(vnode0, vnode).elm;
     elm.click();
@@ -35,5 +35,5 @@ assert.equal(1, result.length);
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     elm.click();
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     elm.click();
@@ -48,3 +48,3 @@ assert.deepEqual(result, [1, 2]);
     ]);
-    patch(vnode0, vnode);
+    elm = patch(vnode0, vnode).elm;
     elm.click();
@@ -65,7 +65,7 @@ assert.deepEqual(result, [1]);
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     elm.click();
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     elm.click();
-    patch(vnode2, vnode3);
+    elm = patch(vnode2, vnode3).elm;
     elm.click();
@@ -86,7 +86,7 @@ assert.deepEqual(result, [1, 2, 3]);
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     elm.click();
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     elm.click();
-    patch(vnode2, vnode3);
+    elm = patch(vnode2, vnode3).elm;
     elm.click();
@@ -93,0 +93,0 @@ assert.deepEqual(result, [[1, 2, 3], [1, 2], [2, 3]]);

test/style.js

@@ -18,3 +18,3 @@ var assert = require('assert');
   it('is being styled', function() {
-    patch(vnode0, h('div', {style: {fontSize: '12px'}}));
+    elm = patch(vnode0, h('div', {style: {fontSize: '12px'}})).elm;
     assert.equal(elm.style.fontSize, '12px');
@@ -26,9 +26,9 @@ });
     var vnode3 = h('i', {style: {fontSize: '10px', display: 'block'}});
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.style.fontSize, '14px');
     assert.equal(elm.style.display, 'inline');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     assert.equal(elm.style.fontSize, '12px');
     assert.equal(elm.style.display, 'block');
-    patch(vnode2, vnode3);
+    elm = patch(vnode2, vnode3).elm;
     assert.equal(elm.style.fontSize, '10px');
@@ -41,3 +41,3 @@ assert.equal(elm.style.display, 'block');
     var vnode3 = h('i', {style: {fontSize: '10px'}});
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.style.fontSize, '14px');
@@ -66,3 +66,3 @@ patch(vnode1, vnode2);
     var vnode2 = h('i', {style: {fontSize: '18px', delayed: {fontSize: '20px'}}});
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
     assert.equal(elm.style.fontSize, '14px');
@@ -72,3 +72,3 @@ fakeRaf.step();
     assert.equal(elm.style.fontSize, '16px');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
     assert.equal(elm.style.fontSize, '18px');
@@ -75,0 +75,0 @@ fakeRaf.step();

test/thunk.js

@@ -12,4 +12,3 @@ var assert = require('assert');
   beforeEach(function() {
-    elm = document.createElement('div');
-    vnode0 = elm;
+    elm = vnode0 = document.createElement('div');
   });
@@ -59,10 +58,130 @@ it('returns vnode with data and render function', function() {
     ]);
-    patch(vnode0, vnode1);
+    elm = patch(vnode0, vnode1).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
     assert.equal(elm.firstChild.innerHTML, 'Number is 1');
-    patch(vnode1, vnode2);
+    elm = patch(vnode1, vnode2).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
     assert.equal(elm.firstChild.innerHTML, 'Number is 1');
-    patch(vnode2, vnode3);
+    elm = patch(vnode2, vnode3).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
     assert.equal(elm.firstChild.innerHTML, 'Number is 2');
     assert.equal(called, 2);
   });
+  it('renders correctly child thunk', function() {
+      function oddEven(n) {
+        var oddEvenSel = (n % 2) ? 'span.odd' : 'span.even';
+        return h(oddEvenSel, n);
+      }
+      function numberInSpan(n) {
+          return h('span.number', ['Number is ', thunk('oddeven', oddEven, n)]);
+      }
+      var vnode1 = thunk('num', numberInSpan, 1);
+      var vnode2 = thunk('num', numberInSpan, 2);
+      elm = patch(vnode0, vnode1).elm;
+      assert.equal(elm.tagName.toLowerCase(), 'span');
+      assert.equal(elm.className, 'number');
+      assert.equal(elm.childNodes[1].tagName.toLowerCase(), 'span');
+      assert.equal(elm.childNodes[1].className, 'odd');
+      elm = patch(vnode1, vnode2).elm;
+      assert.equal(elm.tagName.toLowerCase(), 'span');
+      assert.equal(elm.className, 'number');
+      assert.equal(elm.childNodes[1].tagName.toLowerCase(), 'span');
+      assert.equal(elm.childNodes[1].className, 'even');
+  });
+  /* NOT WORKING YET
+  it('renders correctly nested thunk', function() {
+      function oddEven(n) {
+        var oddEvenSel = (n % 2) ? 'span.odd' : 'span.even';
+        return h(oddEvenSel, n);
+      }
+      function nested(n) {
+          return thunk('oddeven', oddEven, n);
+      }
+      var vnode1 = thunk('num', nested, 1);
+      var vnode2 = thunk('num', nested, 2);
+      elm = patch(vnode0, vnode1).elm;
+      assert.equal(elm.tagName.toLowerCase(), 'span');
+      assert.equal(elm.className, 'odd');
+      elm = patch(vnode1, vnode2).elm;
+      assert.equal(elm.tagName.toLowerCase(), 'span');
+      assert.equal(elm.className, 'even');
+  });
+  */
+  it('renders correctly when root', function() {
+    var called = 0;
+    function numberInSpan(n) {
+      called++;
+      return h('span', 'Number is ' + n);
+    }
+    var vnode1 = thunk('num', numberInSpan, 1);
+    var vnode2 = thunk('num', numberInSpan, 1);
+    var vnode3 = thunk('num', numberInSpan, 2);
+
+    elm = patch(vnode0, vnode1).elm;
+    assert.equal(elm.tagName.toLowerCase(), 'span');
+    assert.equal(elm.innerHTML, 'Number is 1');
+
+    elm = patch(vnode1, vnode2).elm;
+    assert.equal(elm.tagName.toLowerCase(), 'span');
+    assert.equal(elm.innerHTML, 'Number is 1');
+
+    elm = patch(vnode2, vnode3).elm;
+    assert.equal(elm.tagName.toLowerCase(), 'span');
+    assert.equal(elm.innerHTML, 'Number is 2');
+    assert.equal(called, 2);
+  });
+  it('can mutate its root tag', function() {
+    function oddEven(n) {
+      var oddEvenSel = (n % 2) ? 'div.odd' : 'p.even';
+      return h(oddEvenSel, n);
+    }
+    var vnode1 = h('div', [thunk('oddEven', oddEven, 1)]);
+    var vnode2 = h('div', [thunk('oddEven', oddEven, 4)]);
+
+    elm = patch(vnode0, vnode1).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'div');
+    assert.equal(elm.firstChild.className, 'odd');
+
+    elm = patch(vnode1, vnode2).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'p');
+    assert.equal(elm.firstChild.className, 'even');
+  });
+  it('can be replaced and removed', function() {
+    function numberInSpan(n) {
+      return h('span.numberInSpan', 'Number is ' + n);
+    }
+    function oddEven(n) {
+      var oddEvenClass = (n % 2) ? '.odd' : '.even';
+      return h('div' + oddEvenClass, 'Number is ' + n);
+    }
+    var vnode1 = h('div', [thunk('num', numberInSpan, 1)]);
+    var vnode2 = h('div', [thunk('oddEven', oddEven, 4)]);
+
+    elm = patch(vnode0, vnode1).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'span');
+    assert.equal(elm.firstChild.className, 'numberInSpan');
+
+    elm = patch(vnode1, vnode2).elm;
+    assert.equal(elm.firstChild.tagName.toLowerCase(), 'div');
+    assert.equal(elm.firstChild.className, 'even');
+  });
+  it('can be replaced and removed when root', function() {
+    function numberInSpan(n) {
+      return h('span.numberInSpan', 'Number is ' + n);
+    }
+    function oddEven(n) {
+      var oddEvenClass = (n % 2) ? '.odd' : '.even';
+      return h('div' + oddEvenClass, 'Number is ' + n);
+    }
+    var vnode1 = thunk('num', numberInSpan, 1);
+    var vnode2 = thunk('oddEven', oddEven, 4);
+
+    elm = patch(vnode0, vnode1).elm;
+    assert.equal(elm.tagName.toLowerCase(), 'span');
+    assert.equal(elm.className, 'numberInSpan');
+
+    elm = patch(vnode1, vnode2).elm;
+    assert.equal(elm.tagName.toLowerCase(), 'div');
+    assert.equal(elm.className, 'even');
+  });
 });

thunk.js

@@ -12,3 +12,3 @@ var h = require('./h');
   cur.vnode = old.vnode;
-  if (oldArgs.length !== args.length) {
+  if (old.fn !== cur.fn || oldArgs.length !== args.length) {
     cur.vnode = cur.fn.apply(undefined, args);
@@ -15,0 +15,0 @@ return;

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

334290

increased by9.53%

Number of package files

40

increased by11.11%

Lines of code

8322

increased by9.86%

Number of lines in readme file

509

increased by0.2%

Worsened metrics

Number of low supply chain risk alerts

12

increased by20%

No dependency changes