Allows fragment updates to happen after state updates

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

src/compile/dom/index.ts

@@ -132,7 +132,7 @@ export default function dom(
 		? `@proto`
 		: deindent`
 		{
-			${['destroy', 'get', 'fire', 'on', 'set', '_set', '_mount', '_differs']
+			${['destroy', 'get', 'fire', 'on', 'set', '_set', '_updateFragment', '_mount', '_differs']
 				.map(n => `${n}: @${n}`)
 				.join(',\n')}
 		}`;

src/shared/index.js

@@ -96,20 +96,36 @@ export function set(newState) {
 	this.root._lock = false;
 }
 
-export function _set(newState) {
+export function _set(newState, options) {
 	var oldState = this._state,
-		changed = {},
+		changed = this._changed || {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty) return false;
 
 	this._state = assign(assign({}, oldState), newState);
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
+	if (!this._changed) {
+		this._changed = changed;
+		this._oldState = oldState;
+	}
+
+	if (!options || !options.skipUpdate) this._updateFragment();
+
+	return true;
+}
+
+export function _updateFragment() {
+	if (!this._changed) return;
+	var changed = this._changed,
+		oldState = this._oldState;
+	this._changed = this._oldState = null;
+
 	if (this._fragment) {
 		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
@@ -152,6 +168,7 @@ export var proto = {
 	set,
 	_recompute: noop,
 	_set,
+	_updateFragment,
 	_mount,
 	_differs
 };
@@ -164,6 +181,7 @@ export var protoDev = {
 	set: setDev,
 	_recompute: noop,
 	_set,
+	_updateFragment,
 	_mount,
 	_differs
 };

store.js

@@ -61,8 +61,8 @@ 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 = { skipUpdate: true };
+		const dirtyDependents = dependents.filter(dependent => {
 			const componentState = {};
 			let dirty = false;
 
@@ -74,8 +74,13 @@ assign(Store.prototype, {
 				}
 			}
 
-			if (dirty) dependent.component.set(componentState);
-		}
+			if (dirty) {
+				dependent.component._set(componentState, options);
+				return true;
+			}
+		});
+
+		dirtyDependents.forEach(dependent => dependent.component._updateFragment());
 
 		this.fire('update', {
 			changed,

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

@@ -43,6 +43,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_updateFragment: _updateFragment,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -132,20 +133,36 @@ function set(newState) {
 	this.root._lock = false;
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
-		changed = {},
+		changed = this._changed || {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty) return false;
 
 	this._state = assign(assign({}, oldState), newState);
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
+	if (!this._changed) {
+		this._changed = changed;
+		this._oldState = oldState;
+	}
+
+	if (!options || !options.skipUpdate) this._updateFragment();
+
+	return true;
+}
+
+function _updateFragment() {
+	if (!this._changed) return;
+	var changed = this._changed,
+		oldState = this._oldState;
+	this._changed = this._oldState = null;
+
 	if (this._fragment) {
 		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);

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

@@ -57,6 +57,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_updateFragment: _updateFragment,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -153,20 +154,36 @@ function set(newState) {
 	this.root._lock = false;
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
-		changed = {},
+		changed = this._changed || {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty) return false;
 
 	this._state = assign(assign({}, oldState), newState);
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
+	if (!this._changed) {
+		this._changed = changed;
+		this._oldState = oldState;
+	}
+
+	if (!options || !options.skipUpdate) this._updateFragment();
+
+	return true;
+}
+
+function _updateFragment() {
+	if (!this._changed) return;
+	var changed = this._changed,
+		oldState = this._oldState;
+	this._changed = this._oldState = null;
+
 	if (this._fragment) {
 		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);

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

@@ -50,6 +50,7 @@ assign(Main.prototype, {
  	on: on,
  	set: setDev,
  	_set: _set,
+ 	_updateFragment: _updateFragment,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -154,20 +155,36 @@ function setDev(newState) {
 	set.call(this, newState);
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
-		changed = {},
+		changed = this._changed || {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty) return false;
 
 	this._state = assign(assign({}, oldState), newState);
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
+	if (!this._changed) {
+		this._changed = changed;
+		this._oldState = oldState;
+	}
+
+	if (!options || !options.skipUpdate) this._updateFragment();
+
+	return true;
+}
+
+function _updateFragment() {
+	if (!this._changed) return;
+	var changed = this._changed,
+		oldState = this._oldState;
+	this._changed = this._oldState = null;
+
 	if (this._fragment) {
 		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);

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

@@ -59,6 +59,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_updateFragment: _updateFragment,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -140,20 +141,36 @@ function set(newState) {
 	this.root._lock = false;
 }
 
-function _set(newState) {
+function _set(newState, options) {
 	var oldState = this._state,
-		changed = {},
+		changed = this._changed || {},
 		dirty = false;
 
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
-	if (!dirty) return;
+	if (!dirty) return false;
 
 	this._state = assign(assign({}, oldState), newState);
 	this._recompute(changed, this._state);
 	if (this._bind) this._bind(changed, this._state);
 
+	if (!this._changed) {
+		this._changed = changed;
+		this._oldState = oldState;
+	}
+
+	if (!options || !options.skipUpdate) this._updateFragment();
+
+	return true;
+}
+
+function _updateFragment() {
+	if (!this._changed) return;
+	var changed = this._changed,
+		oldState = this._oldState;
+	this._changed = this._oldState = null;
+
 	if (this._fragment) {
 		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);