Merge branch 'perf' into next

mithril.js

@@ -127,7 +127,7 @@ var m = (function app(window, undefined) {
 			//5) copy unkeyed items into their respective gaps
 			var DELETION = 1, INSERTION = 2 , MOVE = 3;
 			var existing = {}, unkeyed = [], shouldMaintainIdentities = false;
-			for (var i = 0, len = cached.length; i < len; i++) {
+			for (var i = 0; i < cached.length; i++) {
 				if (cached[i] && cached[i].attrs && cached[i].attrs.key != null) {
 					shouldMaintainIdentities = true;
 					existing[cached[i].attrs.key] = {action: DELETION, index: i}
@@ -135,52 +135,65 @@ var m = (function app(window, undefined) {
 			}
 			if (shouldMaintainIdentities) {
 				if (data.indexOf(null) > -1) data = data.filter(function(x) {return x != null})
-				for (var i = 0, len = data.length; i < len; i++) {
+				
-					if (data[i] && data[i].attrs) {
+				var keysDiffer = false
-						if (data[i].attrs.key != null) {
+				if (data.length != cached.length) keysDiffer = true
-							var key = data[i].attrs.key;
+				else for (var i = 0, cachedCell, dataCell; cachedCell = cached[i], dataCell = data[i]; i++) {
-							if (!existing[key]) existing[key] = {action: INSERTION, index: i};
+					if (cachedCell.attrs && dataCell.attrs && cachedCell.attrs.key != dataCell.attrs.key) {
-							else existing[key] = {
+						keysDiffer = true
-								action: MOVE,
+						break
-								index: i,
+					}
-								from: existing[key].index,
+				}
-								element: parentElement.childNodes[existing[key].index] || $document.createElement("div")
+				
+				if (keysDiffer) {
+					for (var i = 0, len = data.length; i < len; i++) {
+						if (data[i] && data[i].attrs) {
+							if (data[i].attrs.key != null) {
+								var key = data[i].attrs.key;
+								if (!existing[key]) existing[key] = {action: INSERTION, index: i};
+								else existing[key] = {
+									action: MOVE,
+									index: i,
+									from: existing[key].index,
+									element: parentElement.childNodes[existing[key].index] || $document.createElement("div")
+								}
 							}
+							else unkeyed.push({index: i, element: parentElement.childNodes[i] || $document.createElement("div")})
 						}
-						else unkeyed.push({index: i, element: parentElement.childNodes[i] || $document.createElement("div")})
 					}
-				}
+					var actions = []
-				var actions = Object.keys(existing).map(function(key) {return existing[key]});
+					for (var prop in existing) actions.push(existing[prop])
-				var changes = actions.sort(function(a, b) {return a.action - b.action || a.index - b.index});
+					var changes = actions.sort(sortChanges);
-				var newCached = cached.slice();
+					var newCached = new Array(cached.length)
 
-				for (var i = 0, change; change = changes[i]; i++) {
+					for (var i = 0, change; change = changes[i]; i++) {
-					if (change.action === DELETION) {
+						if (change.action === DELETION) {
-						clear(cached[change.index].nodes, cached[change.index]);
+							clear(cached[change.index].nodes, cached[change.index]);
-						newCached.splice(change.index, 1)
+							newCached.splice(change.index, 1)
-					}
+						}
-					if (change.action === INSERTION) {
+						if (change.action === INSERTION) {
-						var dummy = $document.createElement("div");
+							var dummy = $document.createElement("div");
-						dummy.key = data[change.index].attrs.key;
+							dummy.key = data[change.index].attrs.key;
-						parentElement.insertBefore(dummy, parentElement.childNodes[change.index] || null);
+							parentElement.insertBefore(dummy, parentElement.childNodes[change.index] || null);
-						newCached.splice(change.index, 0, {attrs: {key: data[change.index].attrs.key}, nodes: [dummy]})
+							newCached.splice(change.index, 0, {attrs: {key: data[change.index].attrs.key}, nodes: [dummy]})
-					}
+						}
-
+
-					if (change.action === MOVE) {
+						if (change.action === MOVE) {
-						if (parentElement.childNodes[change.index] !== change.element && change.element !== null) {
+							if (parentElement.childNodes[change.index] !== change.element && change.element !== null) {
-							parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null)
+								parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null)
+							}
+							newCached[change.index] = cached[change.from]
 						}
-						newCached[change.index] = cached[change.from]
 					}
+					for (var i = 0, len = unkeyed.length; i < len; i++) {
+						var change = unkeyed[i];
+						parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null);
+						newCached[change.index] = cached[change.index]
+					}
+					cached = newCached;
+					cached.nodes = new Array(parentElement.childNodes.length);
+					for (var i = 0, child; child = parentElement.childNodes[i]; i++) cached.nodes[i] = child
 				}
-				for (var i = 0, len = unkeyed.length; i < len; i++) {
-					var change = unkeyed[i];
-					parentElement.insertBefore(change.element, parentElement.childNodes[change.index] || null);
-					newCached[change.index] = cached[change.index]
-				}
-				cached = newCached;
-				cached.nodes = [];
-				for (var i = 0, child; child = parentElement.childNodes[i]; i++) cached.nodes.push(child)
 			}
 			//end key algorithm
 
@@ -218,7 +231,7 @@ var m = (function app(window, undefined) {
 			if (!data.attrs) data.attrs = {};
 			if (!cached.attrs) cached.attrs = {};
 
-			var dataAttrKeys = Object.keys(data.attrs);
+			var dataAttrKeys = Object.keys(data.attrs)
 			var hasKeys = dataAttrKeys.length > ("key" in data.attrs ? 1 : 0)
 			//if an element is different enough from the one in cache, recreate it
 			if (data.tag != cached.tag || dataAttrKeys.join() != Object.keys(cached.attrs).join() || data.attrs.id != cached.attrs.id) {
@@ -237,7 +250,7 @@ var m = (function app(window, undefined) {
 				cached = {
 					tag: data.tag,
 					//set attributes first, then create children
-					attrs: dataAttrKeys.length ? setAttributes(node, data.tag, data.attrs, {}, namespace) : {},
+					attrs: hasKeys ? setAttributes(node, data.tag, data.attrs, {}, namespace) : data.attrs,
 					children: data.children != null && data.children.length > 0 ?
 						build(node, data.tag, undefined, undefined, data.children, cached.children, true, 0, data.attrs.contenteditable ? node : editable, namespace, configs) :
 						data.children,
@@ -250,7 +263,7 @@ var m = (function app(window, undefined) {
 			}
 			else {
 				node = cached.nodes[0];
-				if (dataAttrKeys.length) setAttributes(node, data.tag, data.attrs, cached.attrs, namespace);
+				if (hasKeys) setAttributes(node, data.tag, data.attrs, cached.attrs, namespace);
 				cached.children = build(node, data.tag, undefined, undefined, data.children, cached.children, false, 0, data.attrs.contenteditable ? node : editable, namespace, configs);
 				cached.nodes.intact = true;
 				if (shouldReattach === true && node != null) parentElement.insertBefore(node, parentElement.childNodes[index] || null)
@@ -312,6 +325,7 @@ var m = (function app(window, undefined) {
 
 		return cached
 	}
+	function sortChanges(a, b) {return a.action - b.action || a.index - b.index}
 	function setAttributes(node, tag, dataAttrs, cachedAttrs, namespace) {
 		for (var attrName in dataAttrs) {
 			var dataAttr = dataAttrs[attrName];
@@ -320,8 +334,7 @@ var m = (function app(window, undefined) {
 				cachedAttrs[attrName] = dataAttr;
 				try {
 					//`config` isn't a real attributes, so ignore it
-					//we don't ignore `key` because it must be unique and having it on the DOM helps debugging
+					if (attrName === "config" || attrName == "key") continue;
-					if (attrName === "config") continue;
 					//hook event handlers to the auto-redrawing system
 					else if (typeof dataAttr === FUNCTION && attrName.indexOf("on") === 0) {
 						node[attrName] = autoredraw(dataAttr, node)

tests/mithril-tests.js

@@ -509,55 +509,55 @@ function testMithril(mock) {
 		//https://github.com/lhorie/mithril.js/issues/98
 		//insert at beginning
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
+		m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)])
 		var firstBefore = root.childNodes[0]
-		m.render(root, [m("a", {key: 4}), m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
+		m.render(root, [m("a", {key: 4}, 4), m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)])
 		var firstAfter = root.childNodes[1]
-		return firstBefore == firstAfter && root.childNodes[0].key == 4 && root.childNodes.length == 4
+		return firstBefore == firstAfter && root.childNodes[0].childNodes[0].nodeValue == "4" && root.childNodes.length == 4
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/98
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
+		m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)])
 		var firstBefore = root.childNodes[0]
-		m.render(root, [m("a", {key: 4}), m("a", {key: 1}), m("a", {key: 2})])
+		m.render(root, [m("a", {key: 4}, 4), m("a", {key: 1}, 1), m("a", {key: 2}, 2)])
 		var firstAfter = root.childNodes[1]
-		return firstBefore == firstAfter && root.childNodes[0].key == 4 && root.childNodes.length == 3
+		return firstBefore == firstAfter && root.childNodes[0].childNodes[0].nodeValue == 4 && root.childNodes.length == 3
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/98
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3})])
+		m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3)])
 		var firstBefore = root.childNodes[1]
-		m.render(root, [m("a", {key: 2}), m("a", {key: 3}), m("a", {key: 4})])
+		m.render(root, [m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4)])
 		var firstAfter = root.childNodes[0]
-		return firstBefore == firstAfter && root.childNodes[0].key === "2" && root.childNodes.length === 3
+		return firstBefore == firstAfter && root.childNodes[0].childNodes[0].nodeValue === "2" && root.childNodes.length === 3
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/98
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3}), m("a", {key: 4}), m("a", {key: 5})])
+		m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4), m("a", {key: 5}, 5)])
 		var firstBefore = root.childNodes[0]
 		var secondBefore = root.childNodes[1]
 		var fourthBefore = root.childNodes[3]
-		m.render(root, [m("a", {key: 4}), m("a", {key: 10}), m("a", {key: 1}), m("a", {key: 2})])
+		m.render(root, [m("a", {key: 4}, 4), m("a", {key: 10}, 10), m("a", {key: 1}, 1), m("a", {key: 2}, 2)])
 		var firstAfter = root.childNodes[2]
 		var secondAfter = root.childNodes[3]
 		var fourthAfter = root.childNodes[0]
-		return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].key == "10" && root.childNodes.length === 4
+		return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].childNodes[0].nodeValue == "10" && root.childNodes.length === 4
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/98
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1}), m("a", {key: 2}), m("a", {key: 3}), m("a", {key: 4}), m("a", {key: 5})])
+		m.render(root, [m("a", {key: 1}, 1), m("a", {key: 2}, 2), m("a", {key: 3}, 3), m("a", {key: 4}, 4), m("a", {key: 5}, 5)])
 		var firstBefore = root.childNodes[0]
 		var secondBefore = root.childNodes[1]
 		var fourthBefore = root.childNodes[3]
-		m.render(root, [m("a", {key: 4}), m("a", {key: 10}), m("a", {key: 2}), m("a", {key: 1}), m("a", {key: 6}), m("a", {key: 7})])
+		m.render(root, [m("a", {key: 4}, 4), m("a", {key: 10}, 10), m("a", {key: 2}, 2), m("a", {key: 1}, 1), m("a", {key: 6}, 6), m("a", {key: 7}, 7)])
 		var firstAfter = root.childNodes[3]
 		var secondAfter = root.childNodes[2]
 		var fourthAfter = root.childNodes[0]
-		return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].key == "10" && root.childNodes[4].key == "6" && root.childNodes[5].key == "7" && root.childNodes.length === 6
+		return firstBefore === firstAfter && secondBefore === secondAfter && fourthBefore === fourthAfter && root.childNodes[1].childNodes[0].nodeValue == "10" && root.childNodes[4].childNodes[0].nodeValue == "6" && root.childNodes[5].childNodes[0].nodeValue == "7" && root.childNodes.length === 6
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/149
@@ -580,11 +580,11 @@ function testMithril(mock) {
 		//https://github.com/lhorie/mithril.js/issues/246
 		//insert at beginning with non-keyed in the middle
 		var root = mock.document.createElement("div")
-		m.render(root, [m("a", {key: 1})])
+		m.render(root, [m("a", {key: 1}, 1)])
 		var firstBefore = root.childNodes[0]
-		m.render(root, [m("a", {key: 2}), m("br"), m("a", {key: 1})])
+		m.render(root, [m("a", {key: 2}, 2), m("br"), m("a", {key: 1}, 1)])
 		var firstAfter = root.childNodes[2]
-		return firstBefore == firstAfter && root.childNodes[0].key == 2 && root.childNodes.length == 3
+		return firstBefore == firstAfter && root.childNodes[0].childNodes[0].nodeValue == 2 && root.childNodes.length == 3
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/134
@@ -687,9 +687,9 @@ function testMithril(mock) {
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/157
 		var root = mock.document.createElement("div")
-		m.render(root, m("ul", [m("li", {key: 0}), m("li", {key: 2}), m("li", {key: 4})]))
+		m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 2}, 2), m("li", {key: 4}, 4)]))
-		m.render(root, m("ul", [m("li", {key: 0}), m("li", {key: 1}), m("li", {key: 2}), m("li", {key: 3}), m("li", {key: 4}), m("li", {key: 5})]))
+		m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)]))
-		return root.childNodes[0].childNodes.map(function(n) {return n.key}).join("") == "012345"
+		return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join("") == "012345"
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/157
@@ -708,17 +708,17 @@ function testMithril(mock) {
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/194
 		var root = mock.document.createElement("div")
-		m.render(root, m("ul", [m("li", {key: 0}), m("li", {key: 1}), m("li", {key: 2}), m("li", {key: 3}), m("li", {key: 4}), m("li", {key: 5})]))
+		m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)]))
-		m.render(root, m("ul", [m("li", {key: 0}), m("li", {key: 1}), m("li", {key: 2}), m("li", {key: 4}), m("li", {key: 5})]))
+		m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 4}, 4), m("li", {key: 5}, 5)]))
-		return root.childNodes[0].childNodes.map(function(n) {return n.key}).join("") == "01245"
+		return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join("") == "01245"
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/194
 		var root = mock.document.createElement("div")
-		m.render(root, m("ul", [m("li", {key: 0}), m("li", {key: 1}), m("li", {key: 2}), m("li", {key: 3}), m("li", {key: 4}), m("li", {key: 5})]))
+		m.render(root, m("ul", [m("li", {key: 0}, 0), m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5)]))
-		m.render(root, m("ul", [m("li", {key: 1}), m("li", {key: 2}), m("li", {key: 3}), m("li", {key: 4}), m("li", {key: 5}), m("li", {key: 6})]))
+		m.render(root, m("ul", [m("li", {key: 1}, 1), m("li", {key: 2}, 2), m("li", {key: 3}, 3), m("li", {key: 4}, 4), m("li", {key: 5}, 5), m("li", {key: 6}, 6)]))
-		m.render(root, m("ul", [m("li", {key: 12}), m("li", {key: 13}), m("li", {key: 14}), m("li", {key: 15}), m("li", {key: 16}), m("li", {key: 17})]))
+		m.render(root, m("ul", [m("li", {key: 12}, 12), m("li", {key: 13}, 13), m("li", {key: 14}, 14), m("li", {key: 15}, 15), m("li", {key: 16}, 16), m("li", {key: 17}, 17)]))
-		return root.childNodes[0].childNodes.map(function(n) {return n.key}).join(",") == "12,13,14,15,16,17"
+		return root.childNodes[0].childNodes.map(function(n) {return n.childNodes[0].nodeValue}).join(",") == "12,13,14,15,16,17"
 	})
 	test(function() {
 		//https://github.com/lhorie/mithril.js/issues/206