snabbdom - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

package.json

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

README.md

@@ -52,5 +52,6 @@ # Snabbdom
 * Features in modules
-  * Features for doing complex animations.
+  * Features for doing complex CSS animations.
   * Powerful event listener functionality
   * Thunks to optimize the diff and patch process even further
+  * JSX support thanks to [snabbdom-jsx](https://github.com/yelouafi/snabbdom-jsx)
 
@@ -71,3 +72,3 @@ ## Inline example
   ' and this is just normal text',
-  h('a', {props: {href: '/foo'}, 'I\'ll take you places!'})
+  h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
 ]);
@@ -123,3 +124,3 @@ var container = document.getElementById('container');
 
-It is recommended that you use `snabbdom/h` to create VNodes. `h` accepts a a
+It is recommended that you use `snabbdom/h` to create VNodes. `h` accepts a
 tag/selector as a string, an optional data object and an optional string or
@@ -170,2 +171,10 @@ array of children.
 
+#### The `insert` hook
+
+This hook is invoked once the DOM element to a vnode has been inserted into the
+document _and_ the rest of the patch cycle is done. This means that you can do
+DOM measurements (like using [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+in this hook safely knowing that no elements will be changed afterwards which
+could affect the position of the inserted elements.
+
 #### The `remove` hook
@@ -183,2 +192,26 @@
 
+#### The `destroy` hook
+
+This hook is invoked whenever an element removed from the DOM or the child
+to an element that is being removed.
+
+
+To see the difference between this hook and the `remove` hook consider an
+example.
+
+```js
+var vnode1 = h('div', [h('div', [h('span', 'Hello')])]);
+var vnode2 = h('div', []);
+patch(container, vnode1);
+patch(vnode1, vnode2);
+```
+
+Here `destroy` is triggered for both the inner `div` element _and_ the `span`
+element it contains. `remove` on the other hand is only triggered on the `div`
+element because it is the only element being detached from its parent.
+
+You can for instance use `remove` to trigger an animation when an element is
+being removed and use the `destroy` hook to additionally animate the
+disappearance of the removed elements children.
+
 ## Modules documentation
@@ -238,2 +271,12 @@
 
+Note that the style module does not remove style attributes if they are removed
+as properties from the style object. To remove a style you should instead set
+it to the empty string.
+
+```javascript
+h('div', {
+  style: {position: shouldFollow ? 'fixed' : ''}
+}, 'I, I follow, I follow you');
+```
+
 #### Delayed properties
@@ -246,3 +289,3 @@
 h('span', {
-  style: {opacity: '0', transitionDuration: 'opacity 1s', delayed: {opacity: '1'}}
+  style: {opacity: '0', transition: 'opacity 1s', delayed: {opacity: '1'}}
 }, 'Imma fade right in!');
@@ -262,4 +305,4 @@ ```
 h('span', {
-  style: {opacity: '1', transitionDuration: 'opacity 1s',
-          remove: {opacity: '1'}}
+  style: {opacity: '1', transition: 'opacity 1s',
+          remove: {opacity: '0'}}
 }, 'It\'s better to fade out than to burn away');
@@ -274,4 +317,4 @@ ```
 h('span', {
-  style: {opacity: '1', transitionDuration: 'opacity 1s',
-          destroy: {opacity: '1'}}
+  style: {opacity: '1', transition: 'opacity 1s',
+          destroy: {opacity: '0'}}
 }, 'It\'s better to fade out than to burn away');
@@ -278,0 +321,0 @@ ```

snabbdom.js

@@ -17,4 +17,2 @@ // jshint newcap: false
 
-var insertedVnodeQueue;
-
 function sameVnode(vnode1, vnode2) {
@@ -50,3 +48,3 @@ return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
 
-  function createElm(vnode) {
+  function createElm(vnode, insertedVnodeQueue) {
     var i, data = vnode.data;
@@ -71,3 +69,3 @@ if (isDef(data)) {
         for (i = 0; i < children.length; ++i) {
-          elm.appendChild(createElm(children[i]));
+          elm.appendChild(createElm(children[i], insertedVnodeQueue));
         }
@@ -89,5 +87,5 @@ } else if (is.primitive(vnode.text)) {
 
-  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
+  function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
     for (; startIdx <= endIdx; ++startIdx) {
-      parentElm.insertBefore(createElm(vnodes[startIdx]), before);
+      parentElm.insertBefore(createElm(vnodes[startIdx], insertedVnodeQueue), before);
     }
@@ -130,3 +128,3 @@ }
 
-  function updateChildren(parentElm, oldCh, newCh) {
+  function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
     var oldStartIdx = 0, newStartIdx = 0;
@@ -147,11 +145,11 @@ var oldEndIdx = oldCh.length - 1;
       } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode);
+        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
         oldStartVnode = oldCh[++oldStartIdx];
         newStartVnode = newCh[++newStartIdx];
       } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode);
+        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
         oldEndVnode = oldCh[--oldEndIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode);
+        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
         parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
@@ -161,3 +159,3 @@ oldStartVnode = oldCh[++oldStartIdx];
       } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode);
+        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
         parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
@@ -170,7 +168,7 @@ oldEndVnode = oldCh[--oldEndIdx];
         if (isUndef(idxInOld)) { // New element
-          parentElm.insertBefore(createElm(newStartVnode), oldStartVnode.elm);
+          parentElm.insertBefore(createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
           newStartVnode = newCh[++newStartIdx];
         } else {
           elmToMove = oldCh[idxInOld];
-          patchVnode(elmToMove, newStartVnode);
+          patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
           oldCh[idxInOld] = undefined;
@@ -184,3 +182,3 @@ parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
       before = isUndef(newCh[newEndIdx+1]) ? null : newCh[newEndIdx+1].elm;
-      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
     } else if (newStartIdx > newEndIdx) {
@@ -191,3 +189,3 @@ removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
 
-  function patchVnode(oldVnode, vnode) {
+  function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
     var i, hook;
@@ -208,5 +206,5 @@ if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
       if (isDef(oldCh) && isDef(ch)) {
-        if (oldCh !== ch) updateChildren(elm, oldCh, ch);
+        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
       } else if (isDef(ch)) {
-        addVnodes(elm, null, ch, 0, ch.length - 1);
+        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
       } else if (isDef(oldCh)) {
@@ -221,3 +219,2 @@ removeVnodes(elm, oldCh, 0, oldCh.length - 1);
     }
-    return vnode;
   }
@@ -227,14 +224,14 @@
     var i;
-    insertedVnodeQueue = [];
+    var insertedVnodeQueue = [];
     for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
     if (oldVnode instanceof Element) {
       if (oldVnode.parentElement !== null) {
-        createElm(vnode);
+        createElm(vnode, insertedVnodeQueue);
         oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
       } else {
         oldVnode = emptyNodeAt(oldVnode);
-        patchVnode(oldVnode, vnode);
+        patchVnode(oldVnode, vnode, insertedVnodeQueue);
       }
     } else {
-      patchVnode(oldVnode, vnode);
+      patchVnode(oldVnode, vnode, insertedVnodeQueue);
     }
@@ -244,3 +241,2 @@ for (i = 0; i < insertedVnodeQueue.length; ++i) {
     }
-    insertedVnodeQueue = undefined;
     for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
@@ -247,0 +243,0 @@ return vnode;

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

265141

increased by0.71%

Number of lines in readme file

353

increased by13.87%

Worsened metrics

Lines of code

6942

decreased by-0.04%

No dependency changes