Merge pull request #316 from sveltejs/gh-40

[WIP] warn on onrender/onteardown, replace with oncreate/ondestroy

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 ) );
 			}
 		}
 

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 ) {
+		${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
-			this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
+			this.fire( 'teardown' );${templateProperties.ondestroy ? `\ntemplate.ondestroy.call( this );` : ``}
 
 			this._fragment.teardown( detach !== false );
 			this._fragment = null;

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 );

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} );` );
 		});
 	}

src/validate/index.js

@@ -36,8 +36,6 @@ export default function validate ( parsed, source, { onerror, onwarn, name, file
 			});
 		},
 
-		templateProperties: {},
-
 		names: [],
 
 		namespace: null

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 ) {
+			if ( templateProperties.namespace ) {
-				const ns = validator.templateProperties.namespace.value.value;
+				const ns = templateProperties.namespace.value.value;
 				validator.namespace = namespaces[ ns ] || ns;
 			}
 

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,

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 );
+		}
+	}
+}

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 );
+		}
+	}
+}

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' ) {
+	validator.warn( `'onrender' has been deprecated in favour of 'oncreate', and will cause an error in Svelte 2.x`, prop.start );
-		if ( usesThisOrArguments( prop.value.body ) ) {
+	oncreate( validator, prop );
-			validator.error( `'onrender' should be a function expression, not an arrow function expression`, prop.start );
-		}
-	}
 }

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' ) {
+	validator.warn( `'onteardown' has been deprecated in favour of 'ondestroy', and will cause an error in Svelte 2.x`, prop.start );
-		if ( usesThisOrArguments( prop.value.body ) ) {
+	ondestroy( validator, prop );
-			validator.error( `'onteardown' should be a function expression, not an arrow function expression`, prop.start );
-		}
-	}
 }

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();
 	});
 }
 

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, '' );
 					}
 				})

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();
 	}
 };

test/generator/component-binding-each-nested/_config.js

@@ -17,6 +17,6 @@ export default {
 			<p>blah, bar, baz</p>
 		` );
 		
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/component-binding-each/_config.js

@@ -17,6 +17,6 @@ export default {
 			<p>blah, bar, baz</p>
 		` );
 		
-		component.teardown();
+		component.destroy();
 	}
 };

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();
 	}
 };

test/generator/component-ref/Widget.html

@@ -2,7 +2,7 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			this.isWidget = true;
 		}
 	};

test/generator/component-yield-multiple-in-if/_config.js

@@ -7,6 +7,6 @@ export default {
 		component.set({ arriving: false });
 		assert.htmlEqual( target.innerHTML, `<div><p class='widget'>Goodbye</p></div>` );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/computed-values-default/_config.js

@@ -4,6 +4,6 @@ export default {
 	test ( assert, component, target ) {
 		component.set({ a: 2 });
 		assert.equal( target.innerHTML, '<p>4</p>' );
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/computed-values/_config.js

@@ -5,6 +5,6 @@ export default {
 		assert.equal( component.get( 'c' ), 5 );
 		assert.equal( component.get( 'cSquared' ), 25 );
 		assert.equal( target.innerHTML, '<p>3 + 2 = 5</p>\n<p>5 * 5 = 25</p>' );
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/deconflict-builtins/_config.js

@@ -3,6 +3,6 @@ export default {
 
 	test ( assert, component ) {
 		assert.equal( component.get( 'foo' ), 'got' );
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/destructuring/_config.js

@@ -22,6 +22,6 @@ export default {
 		assert.equal( count, 1 );
 		assert.equal( number, 42 );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/each-block-keyed/_config.js

@@ -23,6 +23,6 @@ export default {
 		assert.ok( !target.contains( p1 ), 'first <p> element should be removed' );
 		assert.equal( p2, p3, 'second <p> element should be retained' );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/events-custom/_config.js

@@ -12,6 +12,6 @@ export default {
 		component.fire( 'foo', expected );
 		assert.equal( count, 1 );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/events-lifecycle/_config.js

@@ -7,7 +7,7 @@ export default {
 			count += 1;
 		});
 
-		component.teardown();
+		component.destroy();
 		assert.equal( count, 1 );
 	}
 };

test/generator/hello-world/_config.js

@@ -9,7 +9,7 @@ export default {
 		component.set({ name: 'everybody' });
 		assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' );
 
-		component.teardown();
+		component.destroy();
 		assert.htmlEqual( target.innerHTML, '' );
 	}
 };

test/generator/if-block-elseif-text/_config.js

@@ -18,6 +18,6 @@ export default {
 			before-else-after
 		` );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/if-block-elseif/_config.js

@@ -18,6 +18,6 @@ export default {
 			<p>x is between 5 and 10</p>
 		` );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/lifecycle-events/_config.js

@@ -1,7 +1,7 @@
 export default {
 	test ( assert, component ) {
 		assert.deepEqual( component.events, [ 'render' ]);
-		component.teardown();
+		component.destroy();
 		assert.deepEqual( component.events, [ 'render', 'teardown' ]);
 	}
 };

test/generator/lifecycle-events/main.html

@@ -2,11 +2,11 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			this.events = [ 'render' ];
 		},
 
-		onteardown () {
+		ondestroy () {
 			this.events.push( 'teardown' );
 		}
 	};

test/generator/onrender-chain/Item.html

@@ -7,7 +7,7 @@
 				foo: 'XX'
 			};
 		},
-		onrender () {
+		oncreate () {
 			this.observe( 'item', item => {
 				this.set({ foo: item });
 			});

test/generator/onrender-chain/_config.js

@@ -12,6 +12,6 @@ export default {
 			<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
 		` );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/onrender-fires-when-ready-nested/Widget.html

@@ -2,7 +2,7 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			this.set({ inDocument: document.contains( this.refs.x ) })
 		}
 	};

test/generator/onrender-fires-when-ready-nested/_config.js

@@ -1,5 +1,5 @@
 export default {
-	'skip-ssr': true, // uses onrender
+	'skip-ssr': true, // uses oncreate
 
 	html: `<div><p>true</p>\n<p>true</p></div>`
 };

test/generator/onrender-fires-when-ready/Widget.html

@@ -2,7 +2,7 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			this.set({ inDocument: document.contains( this.refs.x ) })
 		}
 	};

test/generator/onrender-fires-when-ready/_config.js

@@ -1,5 +1,5 @@
 export default {
-	'skip-ssr': true, // uses onrender
+	'skip-ssr': true, // uses oncreate
 
 	html: `<div><p>true</p></div>`,
 
@@ -7,6 +7,6 @@ export default {
 		component.set({ foo: true });
 		assert.htmlEqual( target.innerHTML, `<div><p>true</p>\n<p>true</p></div>` );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/raw-mustaches-preserved/_config.js

@@ -16,6 +16,6 @@ export default {
 		assert.equal( target.innerHTML, `<div>${ns}<p>does not change</p>${ns}</div>` );
 		assert.strictEqual( target.querySelector( 'p' ), p );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/raw-mustaches/_config.js

@@ -14,7 +14,7 @@ export default {
 		assert.equal( target.innerHTML, `before${ns}${ns}after` );
 		component.set({ raw: 'how about <strong>unclosed elements?' });
 		assert.equal( target.innerHTML, `before${ns}how about <strong>unclosed elements?</strong>${ns}after` );
-		component.teardown();
+		component.destroy();
 		assert.equal( target.innerHTML, '' );
 	}
 };

test/generator/select/_config.js

@@ -25,7 +25,7 @@ export default {
 
 		assert.equal( target.querySelector( 'select' ).value, 'a' );
 
-		component.teardown();
+		component.destroy();
 		assert.htmlEqual( target.innerHTML, '' );
 	}
 };

test/generator/set-in-observe-dedupes-renders/Widget.html

@@ -2,7 +2,7 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			this.observe( 'foo', foo => {
 				const bar = this.get( 'bar' );
 				if ( foo.x !== bar.x ) throw new Error( 'mismatch' );

test/generator/set-in-observe-dedupes-renders/_config.js

@@ -3,6 +3,6 @@ export default {
 
 	test ( assert, component ) {
 		component.set({ foo: { x: 2 } });
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/set-in-observe-dedupes-renders/main.html

@@ -11,7 +11,7 @@
 			}
 		},
 
-		onrender () {
+		oncreate () {
 			this.observe( 'foo', foo => {
 				this.set({ bar: foo });
 			});

test/generator/set-in-observe/_config.js

@@ -1,5 +1,5 @@
 export default {
-	'skip-ssr': true, // uses onrender
+	'skip-ssr': true, // uses oncreate
 
 	html: `
 		<p>1</p>

test/generator/set-in-observe/main.html

@@ -7,7 +7,7 @@
 			foo: 1
 		}),
 
-		onrender () {
+		oncreate () {
 			this.observe( 'foo', foo => {
 				this.set({ bar: foo * 2 });
 			});

test/generator/set-in-onrender/_config.js

@@ -1,5 +1,5 @@
 export default {
-	'skip-ssr': true, // uses onrender
+	'skip-ssr': true, // uses oncreate
 
 	html: '<p>2</p>'
 };

test/generator/set-in-onrender/main.html

@@ -6,7 +6,7 @@
 			foo: 1
 		}),
 
-		onrender () {
+		oncreate () {
 			this.set({ foo: 2 });
 		}
 	};

test/generator/svg-attributes/_config.js

@@ -10,6 +10,6 @@ export default {
 	test ( assert, component, target ) {
 		const circle = target.querySelector( 'circle' );
 		assert.equal( circle.getAttribute( 'class' ), 'red' );
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/svg-class/_config.js

@@ -9,6 +9,6 @@ export default {
 		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
 		assert.equal( svg.getAttribute( 'class' ), 'foo' );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/svg-each-block-namespace/_config.js

@@ -10,6 +10,6 @@ export default {
 		assert.equal( circles[0].namespaceURI, 'http://www.w3.org/2000/svg' );
 		assert.equal( circles[1].namespaceURI, 'http://www.w3.org/2000/svg' );
 		assert.equal( circles[2].namespaceURI, 'http://www.w3.org/2000/svg' );
-		component.teardown();
+		component.destroy();
 	}
 };

test/generator/svg-xlink/_config.js

@@ -14,6 +14,6 @@ export default {
 
 		assert.equal( href.namespaceURI, 'http://www.w3.org/1999/xlink' );
 
-		component.teardown();
+		component.destroy();
 	}
 };

test/sourcemaps/script/input.html

@@ -2,7 +2,7 @@
 
 <script>
 	export default {
-		onrender () {
+		oncreate () {
 			console.log( 42 );
 		}
 	}

test/validator/oncreate-arrow-no-this/input.html

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

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,

test/validator/oncreate-arrow-this/input.html

@@ -1,6 +1,6 @@
 <script>
 	export default {
-		onrender: () => {
+		oncreate: () => {
 			this.set({ a: 1 });
 		}
 	};

test/validator/ondestroy-arrow-no-this/input.html

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

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
+	}
+}]

test/validator/ondestroy-arrow-this/input.html

@@ -1,6 +1,6 @@
 <script>
 	export default {
-		onteardown: () => {
+		ondestroy: () => {
 			this.set({ a: 1 });
 		}
 	};

test/validator/onrender-arrow-no-this/input.html

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

test/validator/onteardown-arrow-no-this/input.html

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

test/validator/onteardown-arrow-this/errors.json

@@ -1,8 +0,0 @@
-[{
-	"message": "'onteardown' should be a function expression, not an arrow function expression",
-	"pos": 29,
-	"loc": {
-		"line": 3,
-		"column": 2
-	}
-}]