[REF] hooks: better implementation of onMounted/onWillUnmount

src/component/component.ts

@@ -84,6 +84,7 @@ interface Internal<T extends Env, Props> {
   observer: Observer | null;
   render: CompiledTemplate | null;
   mountedHandlers: { [key: number]: Function };
+  willUnmountCB: Function | null;
   classObj: { [key: string]: boolean } | null;
   refs: { [key: string]: Component<T, any> | HTMLElement | undefined } | null;
 }
@@ -185,6 +186,7 @@ export class Component<T extends Env, Props extends {}> {
       currentFiber: null,
       boundHandlers: {},
       mountedHandlers: {},
+      willUnmountCB: null,
       observer: null,
       render: null,
       classObj: null,
@@ -481,19 +483,22 @@ export class Component<T extends Env, Props extends {}> {
     }
     __owl__.isMounted = true;
     const handlers = __owl__.mountedHandlers;
-    for (let key in handlers) {
-      handlers[key]();
-    }
     try {
       this.mounted();
+      for (let key in handlers) {
+        handlers[key]();
+      }
     } catch (e) {
       errorHandler(e, this);
     }
   }
 
   __callWillUnmount() {
-    this.willUnmount();
     const __owl__ = this.__owl__;
+    if (__owl__.willUnmountCB) {
+      __owl__.willUnmountCB();
+    }
+    this.willUnmount();
     __owl__.isMounted = false;
     const children = __owl__.children;
     for (let id in children) {

src/hooks.ts

@@ -33,13 +33,11 @@ export function useState<T>(state: T): T {
  * Mounted hook. The callback will be called when the current component is
  * mounted.  Note that the component mounted method is called first.
  */
+let nextID = 1;
+
 export function onMounted(cb) {
   const component: Component<any, any> = Component._current;
-  const current = component.mounted;
-  component.mounted = function() {
-    current.call(component);
-    cb();
-  };
+  component.__owl__.mountedHandlers[`h${nextID++}`] = cb;
 }
 
 /**
@@ -48,11 +46,15 @@ export function onMounted(cb) {
  */
 export function onWillUnmount(cb) {
   const component: Component<any, any> = Component._current;
-  const current = component.willUnmount;
-  component.willUnmount = function() {
-    cb();
-    current.call(component);
-  };
+  if (component.__owl__.willUnmountCB) {
+    const current = component.__owl__.willUnmountCB;
+    component.__owl__.willUnmountCB = function() {
+      cb.call(component);
+      current.call(component);
+    };
+  } else {
+    component.__owl__.willUnmountCB = cb;
+  }
 }
 
 /**

tests/hooks.test.ts

@@ -61,6 +61,8 @@ describe("hooks", () => {
     }
     const component = new MyComponent(env);
     await component.mount(fixture);
+    expect(component).not.toHaveProperty("mounted");
+    expect(component).not.toHaveProperty("willUnmount");
     expect(fixture.innerHTML).toBe("<div>hey</div>");
     expect(steps).toEqual(["mounted"]);
     component.unmount();