diff --git a/src/generators/Generator.js b/src/generators/Generator.js index 20618ee60e..6c27163ecf 100644 --- a/src/generators/Generator.js +++ b/src/generators/Generator.js @@ -243,7 +243,7 @@ export default class Generator { } defaultExport.declaration.properties.forEach( prop => { - templateProperties[ prop.key.name ] = prop.value; + templateProperties[ prop.key.name ] = prop; }); this.code.prependRight( js.content.start, 'var template = (function () {' ); @@ -255,7 +255,7 @@ export default class Generator { [ 'helpers', 'events', 'components' ].forEach( key => { if ( templateProperties[ key ] ) { - templateProperties[ key ].properties.forEach( prop => { + templateProperties[ key ].value.properties.forEach( prop => { this[ key ][ prop.key.name ] = prop.value; }); } @@ -264,7 +264,7 @@ export default class Generator { if ( templateProperties.computed ) { const dependencies = new Map(); - templateProperties.computed.properties.forEach( prop => { + templateProperties.computed.value.properties.forEach( prop => { const key = prop.key.name; const value = prop.value; @@ -286,7 +286,7 @@ export default class Generator { computations.push({ key, deps }); } - templateProperties.computed.properties.forEach( prop => visit( prop.key.name ) ); + templateProperties.computed.value.properties.forEach( prop => visit( prop.key.name ) ); } } diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 815d053cb3..69105e8b2a 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -156,6 +156,19 @@ export default function dom ( parsed, source, options, names ) { const { computations, templateProperties } = generator.parseJs(); + // Remove these after version 2 + if ( templateProperties.onrender ) { + const { key } = templateProperties.onrender; + generator.code.overwrite( key.start, key.end, 'oncreate', true ); + templateProperties.oncreate = templateProperties.onrender; + } + + if ( templateProperties.onteardown ) { + const { key } = templateProperties.onteardown; + generator.code.overwrite( key.start, key.end, 'ondestroy', true ); + templateProperties.ondestroy = templateProperties.onteardown; + } + generator.imports.forEach( node => { node.specifiers.forEach( specifier => { generator.importedNames[ specifier.local.name ] = true; @@ -164,7 +177,7 @@ export default function dom ( parsed, source, options, names ) { let namespace = null; if ( templateProperties.namespace ) { - const ns = templateProperties.namespace.value; + const ns = templateProperties.namespace.value.value; namespace = namespaces[ ns ] || ns; // TODO remove the namespace property from the generated code, it's unused past this point @@ -281,12 +294,12 @@ export default function dom ( parsed, source, options, names ) { builders._set.addBlock( statement ); } - if ( templateProperties.onrender ) { + if ( templateProperties.oncreate ) { builders.init.addBlock( deindent` if ( options._root ) { - options._root._renderHooks.push({ fn: template.onrender, context: this }); + options._root._renderHooks.push({ fn: template.oncreate, context: this }); } else { - template.onrender.call( this ); + template.oncreate.call( this ); } ` ); } @@ -342,13 +355,14 @@ export default function dom ( parsed, source, options, names ) { ${name}.prototype._flush = ${shared._flush}; ` ); + // TODO deprecate component.teardown() builders.main.addBlock( deindent` ${name}.prototype._set = function _set ( newState ) { ${builders._set} }; - ${name}.prototype.teardown = function teardown ( detach ) { - this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``} + ${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) { + this.fire( 'teardown' );${templateProperties.ondestroy ? `\ntemplate.ondestroy.call( this );` : ``} this._fragment.teardown( detach !== false ); this._fragment = null; diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js index a7d114cbe6..edd6a5209c 100644 --- a/src/generators/dom/visitors/Component.js +++ b/src/generators/dom/visitors/Component.js @@ -137,7 +137,7 @@ export default { ` ); } - generator.current.builders.teardown.addLine( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` ); + generator.current.builders.teardown.addLine( `${name}.destroy( ${isToplevel ? 'detach' : 'false'} );` ); generator.current.builders.init.addBlock( local.init ); if ( !local.update.isEmpty() ) generator.current.builders.update.addBlock( local.update ); diff --git a/src/generators/server-side-rendering/index.js b/src/generators/server-side-rendering/index.js index a12366cc2d..0e42b49dfa 100644 --- a/src/generators/server-side-rendering/index.js +++ b/src/generators/server-side-rendering/index.js @@ -114,7 +114,7 @@ export default function ssr ( parsed, source, options, names ) { } ` ); - templateProperties.components.properties.forEach( prop => { + templateProperties.components.value.properties.forEach( prop => { builders.renderCss.addLine( `addComponent( template.components.${prop.key.name} );` ); }); } diff --git a/src/validate/index.js b/src/validate/index.js index 6e34a50f88..d16c83708a 100644 --- a/src/validate/index.js +++ b/src/validate/index.js @@ -36,8 +36,6 @@ export default function validate ( parsed, source, { onerror, onwarn, name, file }); }, - templateProperties: {}, - names: [], namespace: null diff --git a/src/validate/js/index.js b/src/validate/js/index.js index bc3ab784f1..0e6d0488f1 100644 --- a/src/validate/js/index.js +++ b/src/validate/js/index.js @@ -23,10 +23,21 @@ export default function validateJs ( validator, js ) { checkForComputedKeys( validator, node.declaration.properties ); checkForDupes( validator, node.declaration.properties ); + const templateProperties = {}; + node.declaration.properties.forEach( prop => { - validator.templateProperties[ prop.key.name ] = prop; + templateProperties[ prop.key.name ] = prop; }); + // Remove these checks in version 2 + if ( templateProperties.oncreate && templateProperties.onrender ) { + validator.error( 'Cannot have both oncreate and onrender', templateProperties.onrender.start ); + } + + if ( templateProperties.ondestroy && templateProperties.onteardown ) { + validator.error( 'Cannot have both ondestroy and onteardown', templateProperties.onteardown.start ); + } + // ensure all exported props are valid node.declaration.properties.forEach( prop => { const propValidator = propValidators[ prop.key.name ]; @@ -45,8 +56,8 @@ export default function validateJs ( validator, js ) { } }); - if ( validator.templateProperties.namespace ) { - const ns = validator.templateProperties.namespace.value.value; + if ( templateProperties.namespace ) { + const ns = templateProperties.namespace.value.value; validator.namespace = namespaces[ ns ] || ns; } diff --git a/src/validate/js/propValidators/index.js b/src/validate/js/propValidators/index.js index 655df8d3cc..0d5f6d8ffc 100644 --- a/src/validate/js/propValidators/index.js +++ b/src/validate/js/propValidators/index.js @@ -1,5 +1,7 @@ import data from './data.js'; import computed from './computed.js'; +import oncreate from './oncreate.js'; +import ondestroy from './ondestroy.js'; import onrender from './onrender.js'; import onteardown from './onteardown.js'; import helpers from './helpers.js'; @@ -11,6 +13,8 @@ import namespace from './namespace.js'; export default { data, computed, + oncreate, + ondestroy, onrender, onteardown, helpers, diff --git a/src/validate/js/propValidators/oncreate.js b/src/validate/js/propValidators/oncreate.js new file mode 100644 index 0000000000..3d863ec726 --- /dev/null +++ b/src/validate/js/propValidators/oncreate.js @@ -0,0 +1,9 @@ +import usesThisOrArguments from '../utils/usesThisOrArguments.js'; + +export default function oncreate ( validator, prop ) { + if ( prop.value.type === 'ArrowFunctionExpression' ) { + if ( usesThisOrArguments( prop.value.body ) ) { + validator.error( `'oncreate' should be a function expression, not an arrow function expression`, prop.start ); + } + } +} diff --git a/src/validate/js/propValidators/ondestroy.js b/src/validate/js/propValidators/ondestroy.js new file mode 100644 index 0000000000..3471034178 --- /dev/null +++ b/src/validate/js/propValidators/ondestroy.js @@ -0,0 +1,9 @@ +import usesThisOrArguments from '../utils/usesThisOrArguments.js'; + +export default function ondestroy ( validator, prop ) { + if ( prop.value.type === 'ArrowFunctionExpression' ) { + if ( usesThisOrArguments( prop.value.body ) ) { + validator.error( `'ondestroy' should be a function expression, not an arrow function expression`, prop.start ); + } + } +} diff --git a/src/validate/js/propValidators/onrender.js b/src/validate/js/propValidators/onrender.js index 33693be8f1..4f0cad4fbb 100644 --- a/src/validate/js/propValidators/onrender.js +++ b/src/validate/js/propValidators/onrender.js @@ -1,9 +1,6 @@ -import usesThisOrArguments from '../utils/usesThisOrArguments.js'; +import oncreate from './oncreate.js'; export default function onrender ( validator, prop ) { - if ( prop.value.type === 'ArrowFunctionExpression' ) { - if ( usesThisOrArguments( prop.value.body ) ) { - validator.error( `'onrender' should be a function expression, not an arrow function expression`, prop.start ); - } - } + validator.warn( `'onrender' has been deprecated in favour of 'oncreate', and will cause an error in Svelte 2.x`, prop.start ); + oncreate( validator, prop ); } diff --git a/src/validate/js/propValidators/onteardown.js b/src/validate/js/propValidators/onteardown.js index 7ce61e223d..c1038d4365 100644 --- a/src/validate/js/propValidators/onteardown.js +++ b/src/validate/js/propValidators/onteardown.js @@ -1,9 +1,6 @@ -import usesThisOrArguments from '../utils/usesThisOrArguments.js'; +import ondestroy from './ondestroy.js'; export default function onteardown ( validator, prop ) { - if ( prop.value.type === 'ArrowFunctionExpression' ) { - if ( usesThisOrArguments( prop.value.body ) ) { - validator.error( `'onteardown' should be a function expression, not an arrow function expression`, prop.start ); - } - } + validator.warn( `'onteardown' has been deprecated in favour of 'ondestroy', and will cause an error in Svelte 2.x`, prop.start ); + ondestroy( validator, prop ); } diff --git a/test/formats.js b/test/formats.js index a712c4b7a4..9b803cadcc 100644 --- a/test/formats.js +++ b/test/formats.js @@ -17,7 +17,7 @@ function testAmd ( code, expectedId, dependencies, html ) { assert.htmlEqual( main.innerHTML, html ); - component.teardown(); + component.destroy(); } define.amd = true; @@ -44,7 +44,7 @@ function testCjs ( code, dependencyById, html ) { assert.htmlEqual( main.innerHTML, html ); - component.teardown(); + component.destroy(); }); } @@ -59,7 +59,7 @@ function testIife ( code, name, globals, html ) { assert.htmlEqual( main.innerHTML, html ); - component.teardown(); + component.destroy(); }); } diff --git a/test/generate.js b/test/generate.js index 7adba3c61d..1f5bafcd01 100644 --- a/test/generate.js +++ b/test/generate.js @@ -98,7 +98,7 @@ describe( 'generate', () => { if ( config.test ) { config.test( assert, component, target, window ); } else { - component.teardown(); + component.destroy(); assert.equal( target.innerHTML, '' ); } }) diff --git a/test/generator/binding-select-initial-value/_config.js b/test/generator/binding-select-initial-value/_config.js index b49c1135af..f6b685fd7e 100644 --- a/test/generator/binding-select-initial-value/_config.js +++ b/test/generator/binding-select-initial-value/_config.js @@ -24,6 +24,6 @@ export default { assert.equal( select.value, 'b' ); assert.ok( options[1].selected ); - component.teardown(); + component.destroy(); } }; diff --git a/test/generator/component-binding-each-nested/_config.js b/test/generator/component-binding-each-nested/_config.js index ab5cbef585..536996e869 100644 --- a/test/generator/component-binding-each-nested/_config.js +++ b/test/generator/component-binding-each-nested/_config.js @@ -17,6 +17,6 @@ export default {
blah, bar, baz
` ); - component.teardown(); + component.destroy(); } }; diff --git a/test/generator/component-binding-each/_config.js b/test/generator/component-binding-each/_config.js index 3cb8d05bc9..d42460aff0 100644 --- a/test/generator/component-binding-each/_config.js +++ b/test/generator/component-binding-each/_config.js @@ -17,6 +17,6 @@ export default {blah, bar, baz
` ); - component.teardown(); + component.destroy(); } }; diff --git a/test/generator/component-events-each/_config.js b/test/generator/component-events-each/_config.js index 25635556a0..e7efe6fbff 100644 --- a/test/generator/component-events-each/_config.js +++ b/test/generator/component-events-each/_config.js @@ -22,6 +22,6 @@ export default { buttons[2].dispatchEvent( event ); assert.deepEqual( clicks, [ 'a', 'c' ]); - component.teardown(); + component.destroy(); } }; diff --git a/test/generator/component-ref/Widget.html b/test/generator/component-ref/Widget.html index c5a462601a..c8cf786cc8 100644 --- a/test/generator/component-ref/Widget.html +++ b/test/generator/component-ref/Widget.html @@ -2,7 +2,7 @@ diff --git a/test/validator/onrender-arrow-this/errors.json b/test/validator/oncreate-arrow-this/errors.json similarity index 57% rename from test/validator/onrender-arrow-this/errors.json rename to test/validator/oncreate-arrow-this/errors.json index 5cc9b2c78d..06d020a4f8 100644 --- a/test/validator/onrender-arrow-this/errors.json +++ b/test/validator/oncreate-arrow-this/errors.json @@ -1,5 +1,5 @@ [{ - "message": "'onrender' should be a function expression, not an arrow function expression", + "message": "'oncreate' should be a function expression, not an arrow function expression", "pos": 29, "loc": { "line": 3, diff --git a/test/validator/onrender-arrow-this/input.html b/test/validator/oncreate-arrow-this/input.html similarity index 77% rename from test/validator/onrender-arrow-this/input.html rename to test/validator/oncreate-arrow-this/input.html index e4283e60ba..36d36b698d 100644 --- a/test/validator/onrender-arrow-this/input.html +++ b/test/validator/oncreate-arrow-this/input.html @@ -1,6 +1,6 @@ diff --git a/test/validator/ondestroy-arrow-this/errors.json b/test/validator/ondestroy-arrow-this/errors.json new file mode 100644 index 0000000000..98e176f58f --- /dev/null +++ b/test/validator/ondestroy-arrow-this/errors.json @@ -0,0 +1,8 @@ +[{ + "message": "'ondestroy' should be a function expression, not an arrow function expression", + "pos": 29, + "loc": { + "line": 3, + "column": 2 + } +}] diff --git a/test/validator/onteardown-arrow-this/input.html b/test/validator/ondestroy-arrow-this/input.html similarity index 75% rename from test/validator/onteardown-arrow-this/input.html rename to test/validator/ondestroy-arrow-this/input.html index ac2f1d7e8b..2f5df93962 100644 --- a/test/validator/onteardown-arrow-this/input.html +++ b/test/validator/ondestroy-arrow-this/input.html @@ -1,6 +1,6 @@ diff --git a/test/validator/onteardown-arrow-no-this/input.html b/test/validator/onteardown-arrow-no-this/input.html deleted file mode 100644 index a742898edb..0000000000 --- a/test/validator/onteardown-arrow-no-this/input.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/test/validator/onteardown-arrow-this/errors.json b/test/validator/onteardown-arrow-this/errors.json deleted file mode 100644 index 0596578b95..0000000000 --- a/test/validator/onteardown-arrow-this/errors.json +++ /dev/null @@ -1,8 +0,0 @@ -[{ - "message": "'onteardown' should be a function expression, not an arrow function expression", - "pos": 29, - "loc": { - "line": 3, - "column": 2 - } -}]