Merge pull request #1344 from sveltejs/gh-1197

Implement onstate and onupdate hooks

src/generators/Generator.ts

@@ -646,6 +646,14 @@ export default class Generator {
 					addDeclaration('ondestroy', templateProperties.ondestroy.value);
 				}
 
+				if (templateProperties.onstate && dom) {
+					addDeclaration('onstate', templateProperties.onstate.value);
+				}
+
+				if (templateProperties.onupdate && dom) {
+					addDeclaration('onupdate', templateProperties.onupdate.value);
+				}
+
 				if (templateProperties.preload) {
 					addDeclaration('preload', templateProperties.preload.value);
 				}

src/generators/dom/index.ts

@@ -171,6 +171,8 @@ export default function dom(
 
 	initialState.push(`options.data`);
 
+	const hasInitHooks = !!(templateProperties.oncreate || templateProperties.onstate || templateProperties.onupdate);
+
 	const constructorBody = deindent`
 		${options.dev && `this._debugName = '${debugName}';`}
 		${options.dev && !generator.customElement &&
@@ -199,6 +201,9 @@ export default function dom(
 		${generator.bindingGroups.length &&
 			`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
 
+		${templateProperties.onstate && `this._handlers.state = [%onstate];`}
+		${templateProperties.onupdate && `this._handlers.update = [%onupdate];`}
+
 		${(templateProperties.ondestroy || storeProps.length) && (
 			`this._handlers.destroy = [${
 				[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
@@ -216,9 +221,17 @@ export default function dom(
 			`if (!document.getElementById("${generator.stylesheet.id}-style")) @add_css();`)
 		}
 
-		${templateProperties.oncreate && `var _oncreate = %oncreate.bind(this);`}
+		${hasInitHooks && deindent`
+			var self = this;
+			var _oncreate = function() {
+				var changed = { ${expectedProperties.map(p => `${p}: 1`).join(', ')} };
+				${templateProperties.onstate && `%onstate.call(self, { changed: changed, current: self._state });`}
+				${templateProperties.oncreate && `%oncreate.call(self);`}
+				self.fire("update", { changed: changed, current: self._state });
+			};
+		`}
 
-		${(templateProperties.oncreate || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
+		${(hasInitHooks || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
 			if (!options.root) {
 				this._oncreate = [];
 				${(generator.hasComponents || generator.hasComplexBindings) && `this._beforecreate = [];`}
@@ -230,7 +243,7 @@ export default function dom(
 
 		this._fragment = @create_main_fragment(this, this._state);
 
-		${(templateProperties.oncreate) && deindent`
+		${hasInitHooks && deindent`
 			this.root._oncreate.push(_oncreate);
 		`}
 
@@ -253,10 +266,10 @@ export default function dom(
 					`}
 				this._mount(options.target, options.anchor);
 
-				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
+				${(generator.hasComponents || generator.hasComplexBindings || hasInitHooks || generator.hasIntroTransitions) && deindent`
 					${generator.hasComponents && `this._lock = true;`}
 					${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
-					${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+					${(generator.hasComponents || hasInitHooks) && `@callAll(this._oncreate);`}
 					${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
 					${generator.hasComponents && `this._lock = false;`}
 				`}

src/generators/nodes/Component.ts

@@ -275,6 +275,7 @@ export default class Component extends Node {
 				hasStoreBindings && 'newStoreState = {}',
 			].filter(Boolean).join(', ');
 
+			// TODO use component.on('state', ...) instead of _bind
 			componentInitProperties.push(deindent`
 				_bind: function(changed, childState) {
 					var ${initialisers};

src/shared/index.js

@@ -35,34 +35,19 @@ export function _differsImmutable(a, b) {
 	return a != a ? b == b : a !== b;
 }
 
-export function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 export function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ export function get(key) {
 }
 
 export function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,27 +65,20 @@ export function init(component, options) {
 }
 
 export function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 export function observeDev(key, callback, options) {
+	console.warn("this.observe(key, (newValue, oldValue) => {...}) is deprecated. Use\n\n  // runs before DOM updates\n  this.on('state', ({ changed, current, previous }) => {...});\n\n  // runs after DOM updates\n  this.on('update', ...);\n\n...or add the observe method from the svelte-extras package");
+
 	var c = (key = '' + key).search(/[.[]/);
 	if (c > -1) {
 		var message =
@@ -169,9 +146,9 @@ export function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

src/validate/js/propValidators/index.ts

@@ -3,6 +3,8 @@ import actions from './actions';
 import computed from './computed';
 import oncreate from './oncreate';
 import ondestroy from './ondestroy';
+import onstate from './onstate';
+import onupdate from './onupdate';
 import onrender from './onrender';
 import onteardown from './onteardown';
 import helpers from './helpers';
@@ -24,6 +26,8 @@ export default {
 	computed,
 	oncreate,
 	ondestroy,
+	onstate,
+	onupdate,
 	onrender,
 	onteardown,
 	helpers,

src/validate/js/propValidators/onstate.ts

@@ -0,0 +1,14 @@
+import usesThisOrArguments from '../utils/usesThisOrArguments';
+import { Validator } from '../../index';
+import { Node } from '../../../interfaces';
+
+export default function onstate(validator: Validator, prop: Node) {
+	if (prop.value.type === 'ArrowFunctionExpression') {
+		if (usesThisOrArguments(prop.value.body)) {
+			validator.error(prop, {
+				code: `invalid-onstate-property`,
+				message: `'onstate' should be a function expression, not an arrow function expression`
+			});
+		}
+	}
+}

src/validate/js/propValidators/onupdate.ts

@@ -0,0 +1,14 @@
+import usesThisOrArguments from '../utils/usesThisOrArguments';
+import { Validator } from '../../index';
+import { Node } from '../../../interfaces';
+
+export default function onupdate(validator: Validator, prop: Node) {
+	if (prop.value.type === 'ArrowFunctionExpression') {
+		if (usesThisOrArguments(prop.value.body)) {
+			validator.error(prop, {
+				code: `invalid-onupdate-property`,
+				message: `'onupdate' should be a function expression, not an arrow function expression`
+			});
+		}
+	}
+}

store.js

@@ -5,12 +5,14 @@ import {
 	_differsImmutable,
 	dispatchObservers,
 	get,
-	observe
+	observe,
+	on,
+	fire
 } from './shared.js';
 
 function Store(state, options) {
 	this._observers = { pre: blankObject(), post: blankObject() };
-	this._changeHandlers = [];
+	this._handlers = {};
 	this._dependents = [];
 
 	this._computed = blankObject();
@@ -105,21 +107,22 @@ assign(Store.prototype, {
 		this._sortComputedProperties();
 	},
 
+	fire: fire,
+
 	get: get,
 
+	// TODO remove this method
 	observe: observe,
 
-	onchange: function(callback) {
+	on: on,
-		this._changeHandlers.push(callback);
 
-		var store = this;
+	onchange: function(callback) {
+		// TODO remove this method
+		console.warn("store.onchange is deprecated in favour of store.on('state', event => {...})");
 
-		return {
+		return this.on('state', function(event) {
-			cancel: function() {
+			callback(event.current, event.changed);
-				var index = store._changeHandlers.indexOf(callback);
+		});
-				if (~index) store._changeHandlers.splice(index, 1);
-			}
-		};
 	},
 
 	set: function(newState) {
@@ -139,11 +142,11 @@ assign(Store.prototype, {
 			this._sortedComputedProperties[i].update(this._state, changed);
 		}
 
-		for (var i = 0; i < this._changeHandlers.length; i += 1) {
+		this.fire('state', {
-			this._changeHandlers[i](this._state, changed);
+			changed: changed,
-		}
+			current: this._state,
-
+			previous: oldState
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		});
 
 		var dependents = this._dependents.slice(); // guard against mutations
 		for (var i = 0; i < dependents.length; i += 1) {
@@ -162,7 +165,11 @@ assign(Store.prototype, {
 			if (dirty) dependent.component.set(componentState);
 		}
 
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire('update', {
+			changed: changed,
+			current: this._state,
+			previous: oldState
+		});
 	}
 });
 

test/js/samples/action/expected-bundle.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/collapses-text-around-comments/_actual-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/collapses-text-around-comments/expected-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/component-static-immutable/expected-bundle.js

@@ -27,34 +27,19 @@ function _differsImmutable(a, b) {
 	return a != a ? b == b : a !== b;
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -63,7 +48,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -73,24 +57,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -132,9 +107,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/component-static-immutable2/expected-bundle.js

@@ -27,34 +27,19 @@ function _differsImmutable(a, b) {
 	return a != a ? b == b : a !== b;
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -63,7 +48,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -73,24 +57,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -132,9 +107,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/component-static/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/computed-collapsed-if/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/css-media-query/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/css-shadow-dom-keyframes/expected-bundle.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/deconflict-builtins/_actual-bundle-v2.js

@@ -53,34 +53,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -89,7 +74,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -99,24 +83,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -158,9 +133,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/deconflict-builtins/expected-bundle-v2.js

@@ -53,34 +53,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -89,7 +74,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -99,24 +83,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -158,9 +133,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/deconflict-builtins/expected-bundle.js

@@ -53,34 +53,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -89,7 +74,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -99,24 +83,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -158,9 +133,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/deconflict-globals/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 
@@ -191,7 +166,12 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data_1(), options.data);
 
-	var _oncreate = oncreate.bind(this);
+	var self = this;
+	var _oncreate = function() {
+		var changed = {  };
+		oncreate.call(self);
+		self.fire("update", { changed: changed, current: self._state });
+	};
 
 	if (!options.root) {
 		this._oncreate = [];

test/js/samples/deconflict-globals/expected.js

@@ -30,7 +30,12 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data_1(), options.data);
 
-	var _oncreate = oncreate.bind(this);
+	var self = this;
+	var _oncreate = function() {
+		var changed = {  };
+		oncreate.call(self);
+		self.fire("update", { changed: changed, current: self._state });
+	};
 
 	if (!options.root) {
 		this._oncreate = [];

test/js/samples/dev-warning-missing-data-computed/_actual-bundle-v2.js

@@ -50,34 +50,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -86,7 +71,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -96,27 +80,20 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function observeDev(key, callback, options) {
+	console.warn("this.observe(key, (newValue, oldValue) => {...}) is deprecated. Use\n\n  // runs before DOM updates\n  this.on('state', ({ changed, current, previous }) => {...});\n\n  // runs after DOM updates\n  this.on('update', ...);\n\n...or add the observe method from the svelte-extras package");
+
 	var c = (key = '' + key).search(/[.[]/);
 	if (c > -1) {
 		var message =
@@ -180,9 +157,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dev-warning-missing-data-computed/expected-bundle-v2.js

@@ -50,34 +50,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -86,7 +71,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -96,27 +80,20 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function observeDev(key, callback, options) {
+	console.warn("this.observe(key, (newValue, oldValue) => {...}) is deprecated. Use\n\n  // runs before DOM updates\n  this.on('state', ({ changed, current, previous }) => {...});\n\n  // runs after DOM updates\n  this.on('update', ...);\n\n...or add the observe method from the svelte-extras package");
+
 	var c = (key = '' + key).search(/[.[]/);
 	if (c > -1) {
 		var message =
@@ -180,9 +157,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dev-warning-missing-data-computed/expected-bundle.js

@@ -50,34 +50,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -86,7 +71,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -96,27 +80,20 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function observeDev(key, callback, options) {
+	console.warn("this.observe(key, (newValue, oldValue) => {...}) is deprecated. Use\n\n  // runs before DOM updates\n  this.on('state', ({ changed, current, previous }) => {...});\n\n  // runs after DOM updates\n  this.on('update', ...);\n\n...or add the observe method from the svelte-extras package");
+
 	var c = (key = '' + key).search(/[.[]/);
 	if (c > -1) {
 		var message =
@@ -180,9 +157,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/do-use-dataset/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/do-use-dataset/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/do-use-dataset/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-legacy/_actual-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-legacy/expected-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-svg/_actual-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-svg/expected-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/dont-use-dataset-in-svg/expected-bundle.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/each-block-changed-check/_actual-bundle-v2.js

@@ -55,34 +55,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -91,7 +76,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -101,24 +85,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -160,9 +135,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/each-block-changed-check/expected-bundle-v2.js

@@ -55,34 +55,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -91,7 +76,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -101,24 +85,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -160,9 +135,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -55,34 +55,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -91,7 +76,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -101,24 +85,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -160,9 +135,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/head-no-whitespace/_actual-bundle-v2.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/head-no-whitespace/expected-bundle-v2.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/head-no-whitespace/expected-bundle.js

@@ -35,34 +35,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -71,7 +56,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -81,24 +65,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -140,9 +115,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-no-update/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-no-update/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-no-update/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-simple/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-simple/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/if-block-simple/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-multiple/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-multiple/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-multiple/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-url/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-url/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized-url/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-optimized/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-unoptimized/_actual-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-unoptimized/expected-bundle-v2.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/inline-style-unoptimized/expected-bundle.js

@@ -39,34 +39,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -75,7 +60,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -85,24 +69,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -144,9 +119,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/input-without-blowback-guard/expected-bundle.js

@@ -47,34 +47,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -83,7 +68,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -93,24 +77,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -152,9 +127,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/legacy-default/expected-bundle.js

@@ -57,34 +57,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -93,7 +78,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -103,24 +87,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -162,9 +137,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/legacy-input-type/expected-bundle.js

@@ -41,34 +41,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -77,7 +62,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -87,24 +71,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -146,9 +121,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/legacy-quote-class/expected-bundle.js

@@ -58,34 +58,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -94,7 +79,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -104,24 +88,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -163,9 +138,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/media-bindings/expected-bundle.js

@@ -51,34 +51,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -87,7 +72,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -97,24 +81,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -156,9 +131,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/non-imported-component/expected-bundle.js

@@ -37,34 +37,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -73,7 +58,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -83,24 +67,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -142,9 +117,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 
@@ -186,7 +161,12 @@ function SvelteComponent(options) {
 
 	this._handlers.destroy = [ondestroy];
 
-	var _oncreate = oncreate.bind(this);
+	var self = this;
+	var _oncreate = function() {
+		var changed = {  };
+		oncreate.call(self);
+		self.fire("update", { changed: changed, current: self._state });
+	};
 
 	if (!options.root) {
 		this._oncreate = [];

test/js/samples/onrender-onteardown-rewritten/expected.js

@@ -26,7 +26,12 @@ function SvelteComponent(options) {
 
 	this._handlers.destroy = [ondestroy];
 
-	var _oncreate = oncreate.bind(this);
+	var self = this;
+	var _oncreate = function() {
+		var changed = {  };
+		oncreate.call(self);
+		self.fire("update", { changed: changed, current: self._state });
+	};
 
 	if (!options.root) {
 		this._oncreate = [];

test/js/samples/setup-method/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/svg-title/expected-bundle.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/title/_actual-bundle-v2.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/title/expected-bundle-v2.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/title/expected-bundle.js

@@ -23,34 +23,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -59,7 +44,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -69,24 +53,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -128,9 +103,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/use-elements-as-anchors/_actual-bundle-v2.js

@@ -47,34 +47,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -83,7 +68,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -93,24 +77,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -152,9 +127,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/use-elements-as-anchors/expected-bundle-v2.js

@@ -47,34 +47,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -83,7 +68,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -93,24 +77,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -152,9 +127,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -47,34 +47,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -83,7 +68,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -93,24 +77,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -152,9 +127,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/window-binding-scroll/_actual-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/window-binding-scroll/expected-bundle-v2.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/js/samples/window-binding-scroll/expected-bundle.js

@@ -43,34 +43,19 @@ function _differs(a, b) {
 	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
 }
 
-function dispatchObservers(component, group, changed, newState, oldState) {
-	for (var key in group) {
-		if (!changed[key]) continue;
-
-		var newValue = newState[key];
-		var oldValue = oldState[key];
-
-		var callbacks = group[key];
-		if (!callbacks) continue;
-
-		for (var i = 0; i < callbacks.length; i += 1) {
-			var callback = callbacks[i];
-			if (callback.__calling) continue;
-
-			callback.__calling = true;
-			callback.call(component, newValue, oldValue);
-			callback.__calling = false;
-		}
-	}
-}
-
 function fire(eventName, data) {
 	var handlers =
 		eventName in this._handlers && this._handlers[eventName].slice();
 	if (!handlers) return;
 
 	for (var i = 0; i < handlers.length; i += 1) {
-		handlers[i].call(this, data);
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
 	}
 }
 
@@ -79,7 +64,6 @@ function get(key) {
 }
 
 function init(component, options) {
-	component._observers = { pre: blankObject(), post: blankObject() };
 	component._handlers = blankObject();
 	component._bind = options._bind;
 
@@ -89,24 +73,15 @@ function init(component, options) {
 }
 
 function observe(key, callback, options) {
-	var group = options && options.defer
+	var fn = callback.bind(this);
-		? this._observers.post
-		: this._observers.pre;
-
-	(group[key] || (group[key] = [])).push(callback);
 
 	if (!options || options.init !== false) {
-		callback.__calling = true;
+		fn(this.get()[key], undefined);
-		callback.call(this, this._state[key]);
-		callback.__calling = false;
 	}
 
-	return {
+	return this.on(options && options.defer ? 'update' : 'state', function(event) {
-		cancel: function() {
+		if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-			var index = group[key].indexOf(callback);
+	});
-			if (~index) group[key].splice(index, 1);
-		}
-	};
 }
 
 function on(eventName, handler) {
@@ -148,9 +123,9 @@ function _set(newState) {
 	if (this._bind) this._bind(changed, this._state);
 
 	if (this._fragment) {
-		dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
 		this._fragment.p(changed, this._state);
-		dispatchObservers(this, this._observers.post, changed, this._state, oldState);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
 	}
 }
 

test/runtime/samples/onstate-before-oncreate/_config.js

@@ -0,0 +1,8 @@
+export default {
+	'skip-ssr': true,
+
+	test(assert, component, target) {
+		assert.ok(component.onstateRanBeforeOncreate);
+		assert.ok(!component.onupdateRanBeforeOncreate);
+	}
+};

test/runtime/samples/onstate-before-oncreate/main.html

@@ -0,0 +1,16 @@
+<script>
+	export default {
+		onstate() {
+			this.onstateRan = true;
+		},
+
+		onupdate() {
+			this.onupdateRan = true;
+		},
+
+		oncreate() {
+			this.onstateRanBeforeOncreate = this.onstateRan;
+			this.onupdateRanBeforeOncreate = this.onupdateRan;
+		}
+	};
+</script>

test/runtime/samples/onstate-event/_config.js

@@ -0,0 +1,49 @@
+export default {
+	'skip-ssr': true,
+
+	data: {
+		foo: 'woo!'
+	},
+
+	html: `
+		<p>woo!</p>
+		<p>undefined</p>
+	`,
+
+	test(assert, component, target) {
+		const history = [];
+
+		component.on('state', ({ changed, current, previous }) => {
+			history.push({ changed, current, previous });
+			component.set({ bar: current.foo.toUpperCase() });
+		});
+
+		component.set({ foo: 'yeah!' });
+		assert.htmlEqual(target.innerHTML, `
+			<p>yeah!</p>
+			<p>YEAH!</p>
+		`);
+
+		component.set({ unused: 'x' });
+
+		assert.deepEqual(history, [
+			{
+				changed: { foo: true },
+				current: { foo: 'yeah!' },
+				previous: { foo: 'woo!' }
+			},
+			// this is NOT received, because Svelte will not allow
+			// an event handler to trigger itself recursively
+			// {
+			// 	changed: { bar: true },
+			// 	current: { foo: 'yeah!', bar: 'YEAH!' },
+			// 	previous: { foo: 'yeah!' }
+			// },
+			{
+				changed: { unused: true },
+				current: { foo: 'yeah!', bar: 'YEAH!', unused: 'x' },
+				previous: { foo: 'yeah!', bar: 'YEAH!' }
+			}
+		]);
+	}
+};

test/runtime/samples/onstate-event/main.html

@@ -0,0 +1,2 @@
+<p>{{foo}}</p>
+<p>{{bar}}</p>

test/runtime/samples/onstate/_config.js

@@ -0,0 +1,20 @@
+export default {
+	'skip-ssr': true,
+
+	data: {
+		foo: 'woo!'
+	},
+
+	html: `
+		<p>woo!</p>
+		<p>WOO!</p>
+	`,
+
+	test(assert, component, target) {
+		component.set({ foo: 'yeah!' });
+		assert.htmlEqual(target.innerHTML, `
+			<p>yeah!</p>
+			<p>YEAH!</p>
+		`);
+	}
+};

test/runtime/samples/onstate/main.html

@@ -0,0 +1,10 @@
+<p>{{foo}}</p>
+<p>{{bar}}</p>
+
+<script>
+	export default {
+		onstate({ current }) {
+			this.set({ bar: current.foo.toUpperCase() });
+		}
+	};
+</script>

test/runtime/samples/onupdate/_config.js

@@ -0,0 +1,20 @@
+export default {
+	'skip-ssr': true,
+
+	data: {
+		value: 'hello!'
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test(assert, component, target) {
+		component.set({ value: 'goodbye!' });
+		assert.htmlEqual(target.innerHTML, `
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`);
+	}
+};

test/runtime/samples/onupdate/main.html

@@ -0,0 +1,12 @@
+<p ref:a>{{value}}</p>
+<p ref:b></p>
+
+<script>
+	export default {
+		onupdate({ changed, current, previous }) {
+			if (changed.value) {
+				this.refs.b.textContent = this.refs.a.textContent;
+			}
+		}
+	};
+</script>

test/validator/samples/onstate-arrow-no-this/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/onstate-arrow-no-this/input.html

@@ -0,0 +1,5 @@
+<script>
+	export default {
+		onstate: () => console.log('updating')
+	};
+</script>

test/validator/samples/onstate-arrow-this/errors.json

@@ -0,0 +1,13 @@
+[{
+	"code": "invalid-onstate-property",
+	"message": "'onstate' should be a function expression, not an arrow function expression",
+	"pos": 29,
+	"loc": {
+		"line": 3,
+		"column": 2
+	},
+	"end": {
+		"line": 5,
+		"column": 3
+	}
+}]

test/validator/samples/onstate-arrow-this/input.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		onstate: () => {
+			this.set({ a: 1 });
+		}
+	};
+</script>

test/validator/samples/onupdate-arrow-no-this/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/onupdate-arrow-no-this/input.html

@@ -0,0 +1,5 @@
+<script>
+	export default {
+		onupdate: () => console.log('updating')
+	};
+</script>

test/validator/samples/onupdate-arrow-this/errors.json

@@ -0,0 +1,13 @@
+[{
+	"code": "invalid-onupdate-property",
+	"message": "'onupdate' should be a function expression, not an arrow function expression",
+	"pos": 29,
+	"loc": {
+		"line": 3,
+		"column": 2
+	},
+	"end": {
+		"line": 5,
+		"column": 3
+	}
+}]

test/validator/samples/onupdate-arrow-this/input.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		onupdate: () => {
+			this.set({ a: 1 });
+		}
+	};
+</script>