Add onunmount hook (#1212)

src/compile/Compiler.ts

@@ -656,6 +656,10 @@ export default class Compiler {
 					addDeclaration('oncreate', templateProperties.oncreate.value);
 				}
 
+				if (templateProperties.onunmount && dom) {
+					addDeclaration('onunmount', templateProperties.onunmount.value);
+				}
+
 				if (templateProperties.ondestroy && dom) {
 					addDeclaration('ondestroy', templateProperties.ondestroy.value);
 				}

src/compile/dom/Block.ts

@@ -77,6 +77,7 @@ export default class Block {
 			claim: new CodeBuilder(),
 			hydrate: new CodeBuilder(),
 			mount: new CodeBuilder(),
+			unmount: new CodeBuilder(),
 			measure: new CodeBuilder(),
 			fix: new CodeBuilder(),
 			animate: new CodeBuilder(),
@@ -100,6 +101,10 @@ export default class Block {
 		if (this.key) this.aliases.set('key', this.getUniqueName('key'));
 
 		this.hasUpdateMethod = false; // determined later
+
+		if (this.compiler.templateProperties.onunmount) {
+			this.builders.unmount.addLine(`%onunmount.call(#component${this.key ? `, ${this.getUniqueName('key')}` : ''})`);
+		}
 	}
 
 	addDependencies(dependencies: Set<string>) {

src/compile/dom/index.ts

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

src/shared/index.js

@@ -15,6 +15,7 @@ export function blankObject() {
 
 export function destroy(detach) {
 	this.destroy = noop;
+	this.fire('unmount');
 	this.fire('destroy');
 	this.set = noop;
 

src/validate/js/propValidators/index.ts

@@ -3,6 +3,7 @@ import actions from './actions';
 import animations from './animations';
 import computed from './computed';
 import oncreate from './oncreate';
+import onunmount from './onunmount';
 import ondestroy from './ondestroy';
 import onstate from './onstate';
 import onupdate from './onupdate';
@@ -27,6 +28,7 @@ export default {
 	animations,
 	computed,
 	oncreate,
+	onunmount,
 	ondestroy,
 	onstate,
 	onupdate,

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,12 @@
 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', 'unmount', 'destroy']);
+		assert.deepEqual(nested.events, { create: false, unmount: false, destroy: false });
 	}
 };

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