warn on onrender/onteardown, replace with oncreate/ondestroy (#40)

Author: Rich-Harris

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 );
 			}
 		` );
 	}
@@ -348,7 +361,7 @@ export default function dom ( parsed, source, options, names ) {
 		};
 
 		${name}.prototype.teardown = function teardown ( 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/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 ) {
-				const ns = validator.templateProperties.namespace.value.value;
+			if ( templateProperties.namespace ) {
+				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 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 );
+		}
+	}
+}

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

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