[FIX] component: merge hooks properly

Before this commit, creating a sub component with
t-att-style/t-att-class attributes or with t-on- event handlers would
override the *hook* object rendered by the sub component.

This is an issue for some directives, such as t-ref, which defines
hook functions.

This commit fixes the issue by checking for an override, and wrapping
the hooks in a function that calls each defined hook.

closes #638

src/component/directive.ts

@@ -23,6 +23,26 @@ QWeb.utils.defineProxy = function defineProxy(target, source) {
   }
 };
 
+QWeb.utils.assignHooks = function assignHooks(dataObj, hooks) {
+  if ("hook" in dataObj) {
+    const hookObject = dataObj.hook;
+    for (let name in hooks) {
+      const current = hookObject[name];
+      const fn = hooks[name];
+      if (current) {
+        hookObject[name] = (...args) => {
+          current(...args);
+          fn(...args);
+        };
+      } else {
+        hookObject[name] = fn;
+      }
+    }
+  } else {
+    dataObj.hook = hooks;
+  }
+};
+
 /**
  * The t-component directive is certainly a complicated and hard to maintain piece
  * of code.  To help you, fellow developer, if you have to maintain it, I offer
@@ -291,7 +311,7 @@ QWeb.addDirective({
         .join("");
       const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
       const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
-      createHook = `vnode.data.hook = {create(_, vn){${styleCode}${eventsCode}}};`;
+      createHook = `utils.assignHooks(vnode.data, {create(_, vn){${styleCode}${eventsCode}}});`;
     }
 
     ctx.addLine(