Add onunmount hook (#1212)

src/generators/Generator.ts

@@ -605,7 +605,9 @@ export default class Generator {
 				if (templateProperties.oncreate && dom) {
 					addDeclaration('oncreate', templateProperties.oncreate.value);
 				}
-
+				if (templateProperties.onunmount && dom) {
+					addDeclaration('onunmount', templateProperties.onunmount.value);
+				}
 				if (templateProperties.onteardown) templateProperties.ondestroy = templateProperties.onteardown; // remove after v2
 				if (templateProperties.ondestroy && dom) {
 					addDeclaration('ondestroy', templateProperties.ondestroy.value);

src/generators/dom/Block.ts

@@ -121,6 +121,10 @@ export default class Block {
 		if (this.key) this.aliases.set('key', this.getUniqueName('key'));
 
 		this.hasUpdateMethod = false; // determined later
+
+		if (this.generator.templateProperties.onunmount) {
+			this.builders.unmount.addLine(`%onunmount.call(#component${this.key ? `, ${this.getUniqueName('key')}` : ''})`);
+		}
 	}
 
 	addDependencies(dependencies: string[]) {

src/generators/dom/index.ts

@@ -225,6 +225,11 @@ export default function dom(
 				[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
 			}];`
 		)}
+		${(templateProperties.onunmount || storeProps.length) && (
+			`this._handlers.unmount = [${
+				[templateProperties.onunmount && `%onunmount`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
+			}];`
+		)}
 
 		${generator.slots.size && `this._slotted = options.slots || {};`}
 

src/validate/js/propValidators/index.ts

@@ -1,6 +1,7 @@
 import data from './data';
 import computed from './computed';
 import oncreate from './oncreate';
+import onunmount from './onunmount';
 import ondestroy from './ondestroy';
 import onrender from './onrender';
 import onteardown from './onteardown';
@@ -21,6 +22,7 @@ export default {
 	data,
 	computed,
 	oncreate,
+	onunmount,
 	ondestroy,
 	onrender,
 	onteardown,

src/validate/js/propValidators/onunmount.ts

@@ -0,0 +1,14 @@
+import usesThisOrArguments from '../utils/usesThisOrArguments';
+import { Validator } from '../../';
+import { Node } from '../../../interfaces';
+
+export default function onunmont(validator: Validator, prop: Node) {
+	if (prop.value.type === 'ArrowFunctionExpression') {
+		if (usesThisOrArguments(prop.value.body)) {
+			validator.error(
+				`'onunmont' should be a function expression, not an arrow function expression`,
+				prop.start
+			);
+		}
+	}
+}

test/runtime/samples/lifecycle-events/Nested.html

@@ -0,0 +1,17 @@
+<div ref:div></div>
+
+<script>
+  export default {
+    oncreate() {
+      this.events = {create: this.refs.div.parentNode === null};
+    },
+
+    onunmount() {
+      this.events.unmount = this.refs.div.parentNode === null;
+    },
+
+    ondestroy() {
+      this.events.destroy = this.refs.div.parentNode === null;
+    }
+  }
+</script>

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

@@ -1,7 +1,11 @@
 export default {
 	test(assert, component) {
+		const nested = component.refs.nested;
+
 		assert.deepEqual(component.events, ['create']);
+		assert.deepEqual(nested.events, { create: false });
 		component.destroy();
-		assert.deepEqual(component.events, ['create', 'destroy']);
+		assert.deepEqual(component.events, ['create', 'destroy', 'unmount']);
+		assert.deepEqual(nested.events, { create: false, unmount: false, destroy: true });
 	}
 };

test/runtime/samples/lifecycle-events/main.html

@@ -1,11 +1,19 @@
-<div></div>
+<Nested ref:nested />
 
 <script>
+	import Nested from './Nested.html';
 	export default {
+		components: {
+			Nested,
+		},
 		oncreate() {
 			this.events = ['create'];
 		},
 
+		onunmount() {
+			this.events.push('unmount');
+		},
+
 		ondestroy() {
 			this.events.push('destroy');
 		}