Allows fragment updates to happen after state updates

Proposed fix for #1520. Provides a starting point for discussion.

src/shared/index.js

@@ -107,17 +107,30 @@ export function set(newState) {
 	flush(this.root);
 }
 
-export function _set(newState) {
+export function _set(newState, options) {
 	var oldState = this._state,
 		changed = {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty && !this._changed) return false;
 
 	this._state = assign(assign({}, oldState), newState);
+
+	if (options && options.skipRender) {
+		if (!this._oldState) this._oldState = oldState;
+		this._changed = assign(changed, this._changed);
+		return true;
+	}
+
+	if (this._changed) {
+		oldState = this._oldState;
+		changed = assign(changed, this._changed),
+		this._changed = this._oldState = null;
+	}
+
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
@@ -126,6 +139,7 @@ export function _set(newState) {
 		this._fragment.p(changed, this._state);
 		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
+	return true;
 }
 
 export function setDev(newState) {

store.js

@@ -61,8 +61,9 @@ assign(Store.prototype, {
 		});
 
 		const dependents = this._dependents.slice(); // guard against mutations
-		for (let i = 0; i < dependents.length; i += 1) {
-			const dependent = dependents[i];
+		const options = { skipRender: true };
+		const empty = {};
+		const dirtyDependents = dependents.filter(dependent => {
 			const componentState = {};
 			let dirty = false;
 
@@ -74,8 +75,12 @@ assign(Store.prototype, {
 				}
 			}
 
-			if (dirty) dependent.component.set(componentState);
-		}
+			if (dirty) {
+				return dependent.component._set(componentState, options);
+			}
+		});
+
+		dirtyDependents.forEach(dependent => dependent.component.set(empty));
 
 		this.fire('update', {
 			changed,

test/cli/samples/amd/expected/Main.js

@@ -135,17 +135,30 @@ define("test", function() { "use strict";
 		flush(this.root);
 	}
 
-	function _set(newState) {
+	function _set(newState, options) {
 		var oldState = this._state,
 			changed = {},
 			dirty = false;
 
 		for (var key in newState) {
 			if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 		}
-		if (!dirty) return;
+		if (!dirty && !this._changed) return false;
 
 		this._state = assign(assign({}, oldState), newState);
+
+		if (options && options.skipRender) {
+			if (!this._oldState) this._oldState = oldState;
+			this._changed = assign(changed, this._changed);
+			return true;
+		}
+
+		if (this._changed) {
+			oldState = this._oldState;
+			changed = assign(changed, this._changed),
+			this._changed = this._oldState = null;
+		}
+
 		this._recompute(changed, this._state);
 		if (this._bind) this._bind(changed, this._state);
 
@@ -154,6 +167,7 @@ define("test", function() { "use strict";
 			this._fragment.p(changed, this._state);
 			this.fire("update", { changed: changed, current: this._state, previous: oldState });
 		}
+		return true;
 	}
 
 	function _mount(target, anchor) {

test/cli/samples/basic/expected/Main.js

@@ -135,17 +135,30 @@ function set(newState) {
 	flush(this.root);
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
 		changed = {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty && !this._changed) return false;
 
 	this._state = assign(assign({}, oldState), newState);
+
+	if (options && options.skipRender) {
+		if (!this._oldState) this._oldState = oldState;
+		this._changed = assign(changed, this._changed);
+		return true;
+	}
+
+	if (this._changed) {
+		oldState = this._oldState;
+		changed = assign(changed, this._changed),
+		this._changed = this._oldState = null;
+	}
+
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
@@ -154,6 +167,7 @@ function _set(newState) {
 		this._fragment.p(changed, this._state);
 		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
+	return true;
 }
 
 function _mount(target, anchor) {

test/cli/samples/custom-element/expected/Main.js

@@ -156,17 +156,30 @@ function set(newState) {
 	flush(this.root);
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
 		changed = {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty && !this._changed) return false;
 
 	this._state = assign(assign({}, oldState), newState);
+
+	if (options && options.skipRender) {
+		if (!this._oldState) this._oldState = oldState;
+		this._changed = assign(changed, this._changed);
+		return true;
+	}
+
+	if (this._changed) {
+		oldState = this._oldState;
+		changed = assign(changed, this._changed),
+		this._changed = this._oldState = null;
+	}
+
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
@@ -175,6 +188,7 @@ function _set(newState) {
 		this._fragment.p(changed, this._state);
 		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
+	return true;
 }
 
 function _mount(target, anchor) {

test/cli/samples/dev/expected/Main.js

@@ -161,17 +161,30 @@ function setDev(newState) {
 	set.call(this, newState);
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
 		changed = {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty && !this._changed) return false;
 
 	this._state = assign(assign({}, oldState), newState);
+
+	if (options && options.skipRender) {
+		if (!this._oldState) this._oldState = oldState;
+		this._changed = assign(changed, this._changed);
+		return true;
+	}
+
+	if (this._changed) {
+		oldState = this._oldState;
+		changed = assign(changed, this._changed),
+		this._changed = this._oldState = null;
+	}
+
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
@@ -180,6 +193,7 @@ function _set(newState) {
 		this._fragment.p(changed, this._state);
 		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
+	return true;
 }
 
 function _mount(target, anchor) {

test/cli/samples/dir-subdir/expected/Main.js

@@ -137,17 +137,30 @@ function set(newState) {
 	flush(this.root);
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
 		changed = {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty && !this._changed) return false;
 
 	this._state = assign(assign({}, oldState), newState);
+
+	if (options && options.skipRender) {
+		if (!this._oldState) this._oldState = oldState;
+		this._changed = assign(changed, this._changed);
+		return true;
+	}
+
+	if (this._changed) {
+		oldState = this._oldState;
+		changed = assign(changed, this._changed),
+		this._changed = this._oldState = null;
+	}
+
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
@@ -156,6 +169,7 @@ function _set(newState) {
 		this._fragment.p(changed, this._state);
 		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
+	return true;
 }
 
 function _mount(target, anchor) {