dev warnings for bad arguments to component.observe (#369), and component.on("teardown") (#365)

src/generators/dom/index.js

@@ -6,7 +6,6 @@ import processCss from '../shared/processCss.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
 import * as shared from '../../shared/index.js';
-import devHelperLookup from './utils/devHelperLookup.js';
 
 class DomGenerator extends Generator {
 	constructor ( parsed, source, name, names, visitors, options ) {
@@ -133,9 +132,10 @@ class DomGenerator extends Generator {
 	}
 
 	helper ( name ) {
-		if ( this.options.dev && devHelperLookup[ name ] ) {
+		if ( this.options.dev && `${name}Dev` in shared ) {
-			name = devHelperLookup[ name ];
+			name = `${name}Dev`;
 		}
+
 		this.uses[ name ] = true;
 
 		if ( !( name in this.aliases ) ) {
@@ -373,7 +373,7 @@ export default function dom ( parsed, source, options, names ) {
 		if ( sharedPath ) {
 			builders.main.addLine( `${name}.prototype.${methodName} = ${generator.helper( methodName )};` );
 		} else {
-			const fn = shared[ options.dev && devHelperLookup[ methodName ] ? devHelperLookup[ methodName ] : methodName ]; // eslint-disable-line import/namespace
+			const fn = shared[ options.dev && `${methodName}Dev` in shared ? `${methodName}Dev` : methodName ]; // eslint-disable-line import/namespace
 			builders.main.addLine( `${name}.prototype.${methodName} = ${fn};` );
 		}
 	});
@@ -385,7 +385,7 @@ export default function dom ( parsed, source, options, names ) {
 		};
 
 		${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
-			this.fire( 'teardown' );${templateProperties.ondestroy ? `\ntemplate.ondestroy.call( this );` : ``}
+			this.fire( 'destroy' );${templateProperties.ondestroy ? `\ntemplate.ondestroy.call( this );` : ``}
 
 			this._fragment.teardown( detach !== false );
 			this._fragment = null;

src/generators/dom/utils/devHelperLookup.js

@@ -1,2 +0,0 @@
-export default {
-};

src/shared/methods.js

@@ -30,7 +30,53 @@ export function observe ( key, callback, options ) {
 	};
 }
 
+export function observeDev ( key, callback, options ) {
+	var c = ( key = '' + key ).search( /[^\w]/ );
+	if ( c > -1 ) {
+		var message = "The first argument to component.observe(...) must be the name of a top-level property";
+		if ( c > 0 ) message += ", i.e. '" + key.slice( 0, c ) + "' rather than '" + key + "'";
+
+		throw new Error( message );
+	}
+
+	var group = ( options && options.defer ) ? this._observers.pre : this._observers.post;
+
+	( group[ key ] || ( group[ key ] = [] ) ).push( callback );
+
+	if ( !options || options.init !== false ) {
+		callback.__calling = true;
+		callback.call( this, this._state[ key ] );
+		callback.__calling = false;
+	}
+
+	return {
+		cancel: function () {
+			var index = group[ key ].indexOf( callback );
+			if ( ~index ) group[ key ].splice( index, 1 );
+		}
+	};
+}
+
 export function on ( eventName, handler ) {
+	if ( eventName === 'teardown' ) return this.on( 'destroy', handler );
+
+	var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] );
+	handlers.push( handler );
+
+	return {
+		cancel: function () {
+			var index = handlers.indexOf( handler );
+			if ( ~index ) handlers.splice( index, 1 );
+		}
+	};
+}
+
+export function onDev ( eventName, handler ) {
+	if ( eventName === 'teardown' ) {
+		console.warn( "Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated and will be unsupported in Svelte 2" );
+		return this.on( 'destroy', handler );
+	}
+
 	var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] );
 	handlers.push( handler );
 

test/generator/index.js

@@ -96,18 +96,21 @@ describe( 'generate', () => {
 					// Put the constructor on window for testing
 					window.SvelteComponent = SvelteComponent;
 
+					const target = window.document.querySelector( 'main' );
+
 					const warnings = [];
-					window.console.warn = warning => {
+					const warn = console.warn;
+					console.warn = warning => {
 						warnings.push( warning );
 					};
 
-					const target = window.document.querySelector( 'main' );
-
 					const component = new SvelteComponent({
 						target,
 						data: config.data
 					});
 
+					console.warn = warn;
+
 					if ( config.error ) {
 						unintendedError = true;
 						throw new Error( 'Expected a runtime error' );

test/generator/samples/dev-warning-bad-observe-arguments/_config.js

@@ -2,6 +2,6 @@ export default {
 	dev: true,
 
 	error ( assert, err ) {
-		assert.equal( err.message, `The fisrt argument to component.observe(...) must be the name of a top-level property, i.e. 'nested' rather than 'nested.data'` );
+		assert.equal( err.message, `The first argument to component.observe(...) must be the name of a top-level property, i.e. 'nested' rather than 'nested.data'` );
 	}
 };

test/generator/samples/dev-warning-destroy-not-teardown/_config.js

@@ -2,6 +2,6 @@ export default {
 	dev: true,
 
 	warnings: [
-		`Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated`
+		`Use component.on('destroy', ...) instead of component.on('teardown', ...) which has been deprecated and will be unsupported in Svelte 2`
 	]
 };

test/generator/samples/events-lifecycle/_config.js

@@ -2,7 +2,7 @@ export default {
 	test ( assert, component ) {
 		let count = 0;
 
-		component.on( 'teardown', function () {
+		component.on( 'destroy', function () {
 			assert.equal( this, component );
 			count += 1;
 		});