can-view-live - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

lib/helpers.js

@@ -105,3 +105,3 @@ var domMutateNode = require('can-dom-mutate/node');
 				remove;
-			while(cur !== range.start) {
+			while(cur && cur !== range.start) {
 				remove = cur;
@@ -117,6 +117,7 @@ cur = cur.previousSibling;
 			var parentNode = range.start.parentNode;
-
-			domMutateNode.insertBefore.call(parentNode, frag, range.end);
-			// this makes it so `connected` events will be called immediately
-			domMutate.flushRecords();
+			if(parentNode) {
+				domMutateNode.insertBefore.call(parentNode, frag, range.end);
+				// this makes it so `connected` events will be called immediately
+				domMutate.flushRecords();
+			}
 		}
@@ -123,0 +124,0 @@ },

lib/html.js

@@ -82,3 +82,2 @@ "use strict";
 
-	var meta = {reasonLog: "live.html replace::"+observableName, element: range.start};
 	var useQueue = false;
@@ -106,3 +105,3 @@ new helpers.ListenUntilRemovedAndInitialize(compute,
 				helpers.range.remove(range);
-				queues.domQueue.enqueue(updateRange, null, [range, frag], meta);
+				updateRange(range, frag);
 			} else {
@@ -114,5 +113,5 @@ helpers.range.update(range, frag);
 		range.start,
-		"notify",
+		"dom",
 		"live.html replace::" + observableName, doNotUpdateRange);
 
 };

lib/list.js

@@ -76,2 +76,5 @@ "use strict";
 
+	// A mapping of each item to its pending patches.
+	this.domQueue = [];
+
 	this.isValueLike = canReflect.isValueLike(this.value);
@@ -82,2 +85,3 @@ this.isObservableLike = canReflect.isObservableLike(this.value);
 	this.onPatches = this.onPatches.bind(this);
+	this.processDomQueue = this.processDomQueue.bind(this);
 	this.teardownValueBinding = this.teardownValueBinding.bind(this);
@@ -141,3 +145,6 @@
 		}
-		var sortedPatches = patchSort(patches);
+		var sortedPatches = [];
+		patches.forEach(function(patch) {
+			sortedPatches.push.apply(sortedPatches, patchSort([patch]));
+		});
 		// adjust so things can happen
@@ -147,13 +154,16 @@ for (var i = 0, patchLen = sortedPatches.length; i < patchLen; i++) {
 			if (patch.type === "move") {
-				this.move(patch.toIndex, patch.fromIndex);
+				this.addToDomQueue(
+					this.move,
+					[patch.toIndex, patch.fromIndex]
+				);
 			} else {
 				if (patch.deleteCount) {
 					// Remove any items scheduled for deletion from the patch.
-					this.remove({
+					this.addToDomQueue(this.remove, [{
 						length: patch.deleteCount
-					}, patch.index, true);
+					}, patch.index]);
 				}
 				if (patch.insert && patch.insert.length) {
 					// Insert any new items at the index
-					this.addInDomQueue(patch.insert, patch.index);
+					this.addToDomQueue(this.add, [patch.insert, patch.index]);
 				}
@@ -164,5 +174,17 @@ }
 	},
-	addInDomQueue: function(items, index) {
-		queues.domQueue.enqueue(this.add, this, [items, index], this.meta);
+	addToDomQueue: function(fn, args) {
+		this.domQueue.push({
+			fn: fn,
+			args: args
+		});
+		queues.domQueue.enqueue(this.processDomQueue, this, [this.domQueue], this.meta);
 	},
+	processDomQueue: function() {
+		this.domQueue.forEach(function(queueItem) {
+			var fn = queueItem.fn;
+			var args = queueItem.args;
+			fn.apply(this, args);
+		}.bind(this));
+		this.domQueue = [];
+	},
 	add: function(items, index) {
@@ -261,3 +283,5 @@ //if (!afterPreviousEvents) {
 
-		helpers.range.remove({start: removeStart, end: removeEnd});
+		if (removeStart && removeEnd) {
+			helpers.range.remove({start: removeStart, end: removeEnd});
+		}
 
@@ -356,8 +380,2 @@ var indexMap = this.indexMap;
 		}
-	},
-	set: function(newVal, index) {
-		this.remove({
-			length: 1
-		}, index, true);
-		this.add([newVal], index);
 	}
@@ -364,0 +382,0 @@ };

package.json

 {
   "name": "can-view-live",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "",
@@ -73,3 +73,3 @@ "homepage": "https://canjs.com/doc/can-view-live.html",
     "jshint": "^2.9.1",
-    "steal": "^1.2.10",
+    "steal": "^1.12.6",
     "steal-qunit": "^2.0.0",
@@ -76,0 +76,0 @@ "test-saucelabs": "0.0.6",

test/html-test.js

@@ -182,6 +182,6 @@ var live = require('can-view-live');
 			.whatIChange
-			.derive
+			.mutate
 			.valueDependencies,
 		new Set([div.firstChild]),
-		'whatChangesMe(<observation>) shows the div'
+		'whatIChange(<observation>) shows the div'
 	);
@@ -188,0 +188,0 @@

test/list-test.js

@@ -257,2 +257,72 @@ var live = require('can-view-live');
 
+QUnit.test('can insert at multiple list indexes when flusing batch (#150)', function(assert) {
+	var partial = document.createElement('div');
+	var placeholderElement = document.createElement('span');
+	var list = new DefineList([ 'one', 'two' ]);
+	var renderer = function(item) {
+		// batches can be flushed in renderers (such as those using helpers like `#each`)
+        // though this should VERY rarely happen
+        // this should NEVER happen anymore because notify is always fired immediately ... there's no "flush"
+        // that gets passed the update queue
+		queues.flush();
+		return '<span>' + item.get() + '</span>';
+	};
+
+	partial.appendChild(placeholderElement);
+
+	live.list(placeholderElement, list, renderer, {});
+
+	assert.equal(partial.getElementsByTagName('span').length, 2, 'should be two items');
+	assert.equal(partial.getElementsByTagName('span')[0].firstChild.data, 'one', 'list item 0 is "one"');
+	assert.equal(partial.getElementsByTagName('span')[1].firstChild.data, 'two', 'list item 1 is "two"');
+
+	queues.batch.start();
+	list.splice(0, 0, 'zero'); // add 0 at the start
+	list.splice(2, 0, 'one and a half'); // remove one as
+	list.splice(4, 0, 'three'); // add 3 in position 4
+
+    queues.batch.stop();
+
+	assert.equal(partial.getElementsByTagName('span').length, 5, 'should be five items');
+	assert.equal(partial.getElementsByTagName('span')[0].firstChild.data, 'zero', 'list item 0 is "zero"');
+	assert.equal(partial.getElementsByTagName('span')[1].firstChild.data, 'one', 'list item 1 is "one"');
+	assert.equal(partial.getElementsByTagName('span')[2].firstChild.data, 'one and a half', 'list item 1 is "one"');
+	assert.equal(partial.getElementsByTagName('span')[3].firstChild.data, 'two', 'list item 0 is "two"');
+	assert.equal(partial.getElementsByTagName('span')[4].firstChild.data, 'three', 'list item 1 is "three"');
+});
+
+QUnit.test('can remove and insert at multiple list indexes when flusing batch', function(assert) {
+	var partial = document.createElement('div');
+	var placeholderElement = document.createElement('span');
+	var list = new DefineList([ 'one', 'two' ]);
+	var renderer = function(item) {
+		// batches can be flushed in renderers (such as those using helpers like `#each`)
+        // though this should VERY rarely happen
+        // this should NEVER happen anymore because notify is always fired immediately ... there's no "flush"
+        // that gets passed the update queue
+		queues.flush();
+		return '<span>' + item.get() + '</span>';
+	};
+
+	partial.appendChild(placeholderElement);
+
+	live.list(placeholderElement, list, renderer, {});
+
+	assert.equal(partial.getElementsByTagName('span').length, 2, 'should be two items');
+	assert.equal(partial.getElementsByTagName('span')[0].firstChild.data, 'one', 'list item 0 is "one"');
+	assert.equal(partial.getElementsByTagName('span')[1].firstChild.data, 'two', 'list item 1 is "two"');
+
+	queues.batch.start();
+	list.splice(0, 0, 'zero'); // add 0 at the start
+	list.splice(1, 1, 'one and a half'); // remove one as
+	list.splice(2, 1, 'three'); // add 3 in position 4
+
+    queues.batch.stop();
+
+	assert.equal(partial.getElementsByTagName('span').length, 3, 'should be three items');
+	assert.equal(partial.getElementsByTagName('span')[0].firstChild.data, 'zero', 'list item 0 is "zero"');
+	assert.equal(partial.getElementsByTagName('span')[1].firstChild.data, 'one and a half', 'list item 1 is "one"');
+	assert.equal(partial.getElementsByTagName('span')[2].firstChild.data, 'three', 'list item 1 is "three"');
+});
+
 QUnit.test('Works with Observations - .list', function(assert) {
@@ -259,0 +329,0 @@ var div = document.createElement('div'),

No alert changes

Improved metrics

Total package byte prevSize

94611

8.1%

Number of package files

29

3.57%

Lines of code

2346

3.26%

No dependency changes