Merge pull request #1691 from sveltejs/gh-1520-alt

Alternative approach to #1520

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', '_stage', '_mount', '_differs']
 				.map(n => `${n}: @${n}`)
 				.join(',\n')}
 		}`;

src/shared/index.js

@@ -73,6 +73,7 @@ export function init(component, options) {
 	component._handlers = blankObject();
 	component._slots = blankObject();
 	component._bind = options._bind;
+	component._staged = {};
 
 	component.options = options;
 	component.root = options.root || component;
@@ -108,6 +109,9 @@ export function _set(newState) {
 		changed = {},
 		dirty = false;
 
+	newState = assign(this._staged, newState);
+	this._staged = {};
+
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
@@ -124,6 +128,10 @@ export function _set(newState) {
 	}
 }
 
+export function _stage(newState) {
+	assign(this._staged, newState);
+}
+
 export function setDev(newState) {
 	if (typeof newState !== 'object') {
 		throw new Error(
@@ -159,6 +167,7 @@ export var proto = {
 	set,
 	_recompute: noop,
 	_set,
+	_stage,
 	_mount,
 	_differs
 };
@@ -171,6 +180,7 @@ export var protoDev = {
 	set: setDev,
 	_recompute: noop,
 	_set,
+	_stage,
 	_mount,
 	_differs
 };

store.js

@@ -60,22 +60,27 @@ assign(Store.prototype, {
 			current: this._state
 		});
 
-		const dependents = this._dependents.slice(); // guard against mutations
-		for (let i = 0; i < dependents.length; i += 1) {
-			const dependent = dependents[i];
-			const componentState = {};
-			let dirty = false;
-
-			for (let j = 0; j < dependent.props.length; j += 1) {
-				const prop = dependent.props[j];
-				if (prop in changed) {
-					componentState['$' + prop] = this._state[prop];
-					dirty = true;
+		this._dependents
+			.filter(dependent => {
+				const componentState = {};
+				let dirty = false;
+
+				for (let j = 0; j < dependent.props.length; j += 1) {
+					const prop = dependent.props[j];
+					if (prop in changed) {
+						componentState['$' + prop] = this._state[prop];
+						dirty = true;
+					}
 				}
-			}
 
-			if (dirty) dependent.component.set(componentState);
-		}
+				if (dirty) {
+					dependent.component._stage(componentState);
+					return true;
+				}
+			})
+			.forEach(dependent => {
+				dependent.component.set({});
+			});
 
 		this.fire('update', {
 			changed,

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

@@ -43,6 +43,7 @@ define("test", function() { "use strict";
 	 	on: on,
 	 	set: set,
 	 	_set: _set,
+	 	_stage: _stage,
 	 	_mount: _mount,
 	 	_differs: _differs
 	 });
@@ -67,6 +68,7 @@ define("test", function() { "use strict";
 		component._handlers = blankObject();
 		component._slots = blankObject();
 		component._bind = options._bind;
+		component._staged = {};
 
 		component.options = options;
 		component.root = options.root || component;
@@ -140,6 +142,9 @@ define("test", function() { "use strict";
 			changed = {},
 			dirty = false;
 
+		newState = assign(this._staged, newState);
+		this._staged = {};
+
 		for (var key in newState) {
 			if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 		}
@@ -156,6 +161,10 @@ define("test", function() { "use strict";
 		}
 	}
 
+	function _stage(newState) {
+		assign(this._staged, newState);
+	}
+
 	function _mount(target, anchor) {
 		this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 	}

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

@@ -43,6 +43,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_stage: _stage,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -67,6 +68,7 @@ function init(component, options) {
 	component._handlers = blankObject();
 	component._slots = blankObject();
 	component._bind = options._bind;
+	component._staged = {};
 
 	component.options = options;
 	component.root = options.root || component;
@@ -140,6 +142,9 @@ function _set(newState) {
 		changed = {},
 		dirty = false;
 
+	newState = assign(this._staged, newState);
+	this._staged = {};
+
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
@@ -156,6 +161,10 @@ function _set(newState) {
 	}
 }
 
+function _stage(newState) {
+	assign(this._staged, newState);
+}
+
 function _mount(target, anchor) {
 	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }

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

@@ -57,6 +57,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_stage: _stage,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -88,6 +89,7 @@ function init(component, options) {
 	component._handlers = blankObject();
 	component._slots = blankObject();
 	component._bind = options._bind;
+	component._staged = {};
 
 	component.options = options;
 	component.root = options.root || component;
@@ -161,6 +163,9 @@ function _set(newState) {
 		changed = {},
 		dirty = false;
 
+	newState = assign(this._staged, newState);
+	this._staged = {};
+
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
@@ -177,6 +182,10 @@ function _set(newState) {
 	}
 }
 
+function _stage(newState) {
+	assign(this._staged, newState);
+}
+
 function _mount(target, anchor) {
 	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }

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

@@ -50,6 +50,7 @@ assign(Main.prototype, {
  	on: on,
  	set: setDev,
  	_set: _set,
+ 	_stage: _stage,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -91,6 +92,7 @@ function init(component, options) {
 	component._handlers = blankObject();
 	component._slots = blankObject();
 	component._bind = options._bind;
+	component._staged = {};
 
 	component.options = options;
 	component.root = options.root || component;
@@ -166,6 +168,9 @@ function _set(newState) {
 		changed = {},
 		dirty = false;
 
+	newState = assign(this._staged, newState);
+	this._staged = {};
+
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
@@ -182,6 +187,10 @@ function _set(newState) {
 	}
 }
 
+function _stage(newState) {
+	assign(this._staged, newState);
+}
+
 function _mount(target, anchor) {
 	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }

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

@@ -49,6 +49,7 @@ assign(Main.prototype, {
  	on: on,
  	set: set,
  	_set: _set,
+ 	_stage: _stage,
  	_mount: _mount,
  	_differs: _differs
  });
@@ -61,6 +62,7 @@ function init(component, options) {
 	component._handlers = blankObject();
 	component._slots = blankObject();
 	component._bind = options._bind;
+	component._staged = {};
 
 	component.options = options;
 	component.root = options.root || component;
@@ -142,6 +144,9 @@ function _set(newState) {
 		changed = {},
 		dirty = false;
 
+	newState = assign(this._staged, newState);
+	this._staged = {};
+
 	for (var key in newState) {
 		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
 	}
@@ -158,6 +163,10 @@ function _set(newState) {
 	}
 }
 
+function _stage(newState) {
+	assign(this._staged, newState);
+}
+
 function _mount(target, anchor) {
 	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
 }