diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 77891d1c30..86453cd19f 100644 --- a/src/generators/dom/index.js +++ b/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 ] ) { - name = devHelperLookup[ name ]; + if ( this.options.dev && `${name}Dev` in shared ) { + 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; diff --git a/src/generators/dom/utils/devHelperLookup.js b/src/generators/dom/utils/devHelperLookup.js deleted file mode 100644 index 02a61bed5e..0000000000 --- a/src/generators/dom/utils/devHelperLookup.js +++ /dev/null @@ -1,2 +0,0 @@ -export default { -}; diff --git a/src/shared/methods.js b/src/shared/methods.js index 34bcdac498..10b112b803 100644 --- a/src/shared/methods.js +++ b/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 ); diff --git a/test/generator/index.js b/test/generator/index.js index 2588129cca..f52831b7c2 100644 --- a/test/generator/index.js +++ b/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' ); diff --git a/test/generator/samples/dev-warning-bad-observe-arguments/_config.js b/test/generator/samples/dev-warning-bad-observe-arguments/_config.js index 883b53062b..0b9183aeba 100644 --- a/test/generator/samples/dev-warning-bad-observe-arguments/_config.js +++ b/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'` ); } }; \ No newline at end of file diff --git a/test/generator/samples/dev-warning-destroy-not-teardown/_config.js b/test/generator/samples/dev-warning-destroy-not-teardown/_config.js index fd8577de54..7e9b391f4b 100644 --- a/test/generator/samples/dev-warning-destroy-not-teardown/_config.js +++ b/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` ] }; \ No newline at end of file diff --git a/test/generator/samples/events-lifecycle/_config.js b/test/generator/samples/events-lifecycle/_config.js index 3303728f51..ddd6223840 100644 --- a/test/generator/samples/events-lifecycle/_config.js +++ b/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; });