added velocity animations, before removing options for performance testing

Author: johan-gorter

API.md

@@ -0,0 +1,73 @@
+API
+=========
+
+Domsetter
+---------
+The domsetter object is the main object. It is either bound to window.domsetter or it can be obtained using requirejs.
+
+Domsetter.h
+-----------
+    function h(
+      string selector, 
+      [object properties], 
+      [array children]
+    )
+
+The h method is used to create a virtual DOM node. This method is largely inspired by the mercuryjs and mithril frameworks.
+The `selector` parameter contains the tagName, id and fixed css classnames in CSS selector format. 
+It is formatted as follows: `tagname.cssclass1.cssclass2#id`. 
+The properties parameter is an object literal that contains the properties to set on the DOM nodes. 
+Additional conditional css classes can be provided using a `properties.classes` object with className properties with
+boolean values. For example: `h('div', {classes: {class1: true, class2: false} }, [])`
+The `children` parameter is an array of virtual DOM nodes to add as children. This array may contain nested arrays and null or undefined values.
+Nested arrays are flattened and null and undefined values will be skipped.
+
+In order for domsetter to be able to apply transitions and achieve high performance there are additional 
+requirements to meet:
+
+* All children should either have a unique selector, or have a unique `key` property in their properties object. 
+* The `properties` object must always have the same keys in subsequent renderings. 
+When properties are to be cleared, they must be set to null or undefined.
+* The `properties.classes` object must always have the same keys in subsequent renderings.
+
+Domsetter.createDom
+-------------------
+    function createDom(
+      VNode vnode, 
+      [object options]
+    ) : Mount
+
+The createDom method creates a real DOM given a VNode. It returns a Mount object. VNodes may only be mounted once.
+this method returns a Mount object. The resulting DOM node will be present under mount.domNode.
+This is a low-level method. Users wil typically use Domsetter.renderLoop instead.
+
+Domsetter.mergeDom
+------------------
+    function mergeDom(
+      Element element, 
+      VNode vnode, 
+      [object options]
+    )
+
+The mergeDom method created the real DOM from the VNode. The resulting
+
+Mount
+-----
+
+The mount object represents a VNode tree that has been converted to a real DOM tree. It provides the following methods:
+
+Mount.update
+------------
+
+    function update(
+      VNode updatedVNode
+    )
+
+This function updates the mounted VNode to another VNode from a subsequent rendering.
+
+Mount.domNode
+-------------
+    Node domNode
+
+The Mount.domNode provides access to the DOM Node that has been rendered.
+

bower.json

@@ -24,5 +24,8 @@
     "test",
     "tests",
     "examples"
-  ]
+  ],
+  "dependencies": {
+    "velocity": "~1.1.0"
+  }
 }

index.html demo.htmlindex.html renamed to demo.html

@@ -19,52 +19,34 @@
     }
   </style>
   <script src="domsetter.js"></script>
+  <script src="bower_components/velocity/velocity.js"></script>
+  <script src="bower_components/velocity/velocity.ui.js"></script>
+  <script src="velocity-transitions.js"></script>
   <script src="showStats.js"></script>
   <script>
     var h = window.domsetter.h;
 
-    var simplisticDiff = {
-      nodeToRemove: function (node) {
-        node.classList.add("removed");
-        setTimeout(function () {
-          node.parentNode.removeChild(node);
-        }, 500);
-      },
-      nodeAdded: function (node) {
-        node.classList.add("added");
-        setTimeout(function () {
-          node.classList.remove("added");
-        }, 500);
-      },
-      nodeUpdated: function (node) {
-        node.classList.add("updated");
-        setTimeout(function () {
-          node.classList.remove("updated");
-        }, 500);
-      }
-    };
-
     document.addEventListener('DOMContentLoaded', function () {
       var items = [];
       for (var i = 0; i < 20; i++) {
         items.push({ title: "Item " + i, visible: i % 2 === 0, id: i });
       }
       var render = function () {
         return h("div", {}, items.filter(function (item) { return item.visible; }).map(function (item) {
-          return h("div.item", { key: "item-" + item.id }, [item.title]);
+          return h("div.item", { key: "item-" + item.id, enterAnimation: "slideDown", exitAnimation: "slideUp" }, [item.title]);
         }));
       };
 
-      var mount = window.domsetter.createDom(render());
+      var mount = window.domsetter.createDom(render(), { transitions: window.velocityTransitions });
       document.body.appendChild(mount.domNode);
 
       setTimeout(function () {
         items[16].visible = false;
-        mount.update(render(), simplisticDiff);
+        mount.update(render());
         setTimeout(function () {
           items[1].visible = true;
           items[16].visible = true;
-          mount.update(render(), simplisticDiff);
+          mount.update(render());
         }, 700);
       }, 300);
     });

domsetter.js

@@ -3,7 +3,7 @@
   "use strict";
 
   // constant flags
-  var delayInsertDom = false; // To be verified which is fastest
+  var delayInsertDom = false; // don't care
   var skipUniqueSelectorCheck = false;
   var clearOldProperties = false; // only for nodes without a key
   var checkEqualsBeforeAssigningProperty = true; // true is fastest!
@@ -28,36 +28,37 @@
 
   // Hyperscript helper functions
 
-  var flattenInto = function (parentSelector, insertions, main, mainIndex) {
+  var flattenInto = function (parentSelector, insertions, main, mainIndex, selectorsThusFar) {
     for (var i = 0; i < insertions.length; i++) {
       var item = insertions[i];
       if (Array.isArray(item)) {
         mainIndex = flattenInto(item, main, mainIndex);
       } else {
-        checkForDuplicates(parentSelector, main, item, mainIndex);
+        checkForDuplicateSelectors(parentSelector, item, selectorsThusFar);
         main.splice(mainIndex, 0, item);
         mainIndex++;
       }
     }
     return mainIndex;
   };
 
-  var checkForDuplicates = function (parentSelector, children, sameAs, endAt) {
+  var checkForDuplicateSelectors = function (parentSelector, sameAs, selectorsThusFar) {
     if (skipUniqueSelectorCheck) {
       return;
     }
-    if (sameAs.hasOwnProperty("text")) {
+    var selector = sameAs.vnodeSelector;
+    if (selector === "") {
       return; // textnodes can be safely ignored.
     }
-    for (var i = 0; i < endAt; i++) {
-      if (same(children[0], sameAs)) {
-        if (!sameAs.properties || !sameAs.properties.key) {
-          throw new Error("[" + parentSelector + "] contains undistinguishable child nodes [" + sameAs.vnodeSelector + "], please add a key property.");
-        } else {
-          throw new Error("[" + parentSelector + "] contains two children with the same key:" + sameAs.properties.key);
-        }
+    if(sameAs.properties && sameAs.properties.key) {
+      return; // uniqueness of keys is not checked for performance sake
+    }
+    for (var i = 0; i < selectorsThusFar.length; i++) {
+      if (selector === selectorsThusFar[i]) {
+        throw new Error("[" + parentSelector + "] contains undistinguishable child nodes [" + selector + "], please add unique key properties.");
       }
     }
+    selectorsThusFar.push(selector);
   };
 
   var toTextVNode = function (data) {
@@ -81,15 +82,16 @@
       }
     }
     var index = 0;
+    var selectorsThusFar = [];
     while (index < children.length) {
       var child = children[index];
       if (!child) {
         children.splice(index, 1);
       } else if (Array.isArray(child)) {
         children.splice(index, 1);
-        index = flattenInto(parentSelector, child, children, index);
+        index = flattenInto(parentSelector, child, children, index, selectorsThusFar);
       } else if (child.hasOwnProperty("vnodeSelector")) {
-        checkForDuplicates(parentSelector, children, child, index);
+        checkForDuplicateSelectors(parentSelector, child, selectorsThusFar);
         index++;
       } else {
         children[index] = toTextVNode(child);
@@ -103,7 +105,7 @@
 
   var classIdSplit = /([\.#]?[a-zA-Z0-9_:-]+)/;
 
-  var immediateDiff = {
+  var immediateTransitions = {
     nodeToRemove: function (node) {
       node.parentNode.removeChild(node);
     },
@@ -113,7 +115,7 @@
 
   var defaultOptions = {
     namespace: null,
-    diff: immediateDiff
+    transitions: immediateTransitions
   };
 
   var applyDefaultOptions = function (options) {
@@ -259,7 +261,7 @@
     }
     oldChildren = oldChildren || emptyArray;
     newChildren = newChildren || emptyArray;
-    var diff = options.diff;
+    var transitions = options.transitions;
 
     var oldIndex = 0;
     var newIndex = 0;
@@ -275,7 +277,7 @@
         if (findOldIndex >= 0) {
           // Remove preceding missing children
           for (i = oldIndex; i < findOldIndex; i++) {
-            diff.nodeToRemove(oldChildren[i].domNode);
+            transitions.nodeToRemove(oldChildren[i].domNode);
           }
           updateDom(oldChildren[findOldIndex], newChild, options);
           oldIndex = findOldIndex + 1;
@@ -289,23 +291,23 @@
               domNode.appendChild(childDomNode);
             }
           }, options);
-          diff.nodeAdded(newChild.domNode);
+          transitions.nodeAdded(newChild.domNode);
         }
       }
       newIndex++;
     }
     if (oldChildren.length > oldIndex) {
       // Remove child fragments
       for (i = oldIndex; i < oldChildren.length; i++) {
-        diff.nodeToRemove(oldChildren[i].domNode);
+        transitions.nodeToRemove(oldChildren[i].domNode);
       }
     }
   };
 
   var createDom = function (vnode, afterCreate, options) {
     if (vnode.vnodeSelector === "") {
       vnode.domNode = document.createTextNode(vnode.text);
-      !delayInsertDom && afterCreate(vnode.domNode);
+      afterCreate(vnode.domNode);
     } else {
       var domNode, part, i, type;
       var tagParts = vnode.vnodeSelector.split(classIdSplit);

examples/todomvc/benchmark.html

@@ -37,39 +37,54 @@
         return window.renderTodosView(viewModel);
       }, { /* No render options */ });
 
-      var i;
       var newTodo = document.querySelector("#new-todo");
       newTodo.focus();
 
-      var start = window.performance.now();
-      console.log("Adding todos");
-      for (i = 0; i < 50; i++) {
-        var inputEvent = document.createEvent('Event');
-        inputEvent.initEvent('input', true, true);
-        newTodo.value = 'Domsetter ------- Something to do ' + i;
-        newTodo.dispatchEvent(inputEvent);
+      var run = function () {
+        var i;
+        var start = window.performance.now();
+        console.log("Adding todos");
+        for(i = 0; i < 50; i++) {
+          var inputEvent = document.createEvent('Event');
+          inputEvent.initEvent('input', true, true);
+          newTodo.value = 'Domsetter ------- Something to do ' + i;
+          newTodo.dispatchEvent(inputEvent);
 
-        var keydownEvent = document.createEvent('Event');
-        keydownEvent.initEvent('keypress', true, true);
-        keydownEvent.keyCode = 13; // VK_ENTER
-        newTodo.dispatchEvent(keydownEvent);
-      }
+          var keydownEvent = document.createEvent('Event');
+          keydownEvent.initEvent('keypress', true, true);
+          keydownEvent.keyCode = 13; // VK_ENTER
+          newTodo.dispatchEvent(keydownEvent);
+        }
 
-      console.log("Clicking checkboxes");
-      var checkboxes = document.querySelectorAll('.toggle');
-      for(i = 0; i < checkboxes.length; i++) {
-        checkboxes[i].click();
-      }
+        console.log("Clicking checkboxes");
+        var checkboxes = document.querySelectorAll('.toggle');
+        for(i = 0; i < checkboxes.length; i++) {
+          checkboxes[i].click();
+        }
 
-      console.log("Deleting items");
-      var deleteButtons = document.querySelectorAll('.destroy');
-      for(i = deleteButtons.length - 1; i > -1; i--) {
-        deleteButtons[i].click();
-      }
-      console.log("Deleting done");
-      console.log("Running time: "+(window.performance.now() - start));
+        console.log("Deleting items");
+        var deleteButtons = document.querySelectorAll('.destroy');
+        for(i = deleteButtons.length - 1; i > -1; i--) {
+          deleteButtons[i].click();
+        }
+        console.log("Deleting done");
+        var result = (window.performance.now() - start);
+        console.log("Running time: " + result);
+        return result;
+      };
+
+      run();
+      run();
+      run();
+      var result = 0;
+      for (var i = 0; i < 10; i++) {
+        result = result * i + run();
+        result = result / (i + 1);
+      };
+      console.log("FINAL RESULT: " + result);
     });
 
+
   </script>
 
 </body>