[IMP] qweb: add support for event capture

In this commit, we uses the "!" as suffix to designate an event that
should be captured.  This is inspired by the Vue source code.

This solves the issue of communicating additional information to the
underlying virtual dom.  However, this will most likely disappear when
we rewrite the vdom as a virtual block system.

closes #650

tests/component/__snapshots__/component.test.ts.snap

@@ -742,6 +742,44 @@ exports[`other directives with t-component t-on method call in t-foreach 1`] = `
 }"
 `;
 
+exports[`other directives with t-component t-on with .capture modifier 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"__template__2\\"
+    let utils = this.constructor.utils;
+    let QWeb = this.constructor;
+    let parent = context;
+    let scope = Object.create(context);
+    let h = this.h;
+    let c1 = [], p1 = {key:1};
+    let vn1 = h('div', p1, c1);
+    // Component 'Child'
+    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
+    let props2 = {};
+    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+        w2.destroy();
+        w2 = false;
+    }
+    if (w2) {
+        w2.__updateProps(props2, extra.fiber, undefined);
+        let pvnode = w2.__owl__.pvnode;
+        c1.push(pvnode);
+    } else {
+        let componentKey2 = \`Child\`;
+        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
+        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+        w2 = new W2(parent, props2);
+        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('click', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['capture'](e);}, true);}});});
+        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
+        c1.push(pvnode);
+        w2.__owl__.pvnode = pvnode;
+    }
+    w2.__owl__.parentLastFiberId = extra.fiber.id;
+    return vn1;
+}"
+`;
+
 exports[`other directives with t-component t-on with getter as handler 1`] = `
 "function anonymous(context, extra
 ) {

tests/component/component.test.ts

@@ -2192,6 +2192,30 @@ describe("other directives with t-component", () => {
     expect(steps).toEqual(["click"]);
   });
 
+  test("t-on with .capture modifier", async () => {
+    const steps: string[] = [];
+
+    class Child extends Component {
+      static template = xml`<div><span t-on-click="click">hey</span></div>`;
+      click() {
+        steps.push("click");
+      }
+    }
+    class ParentWidget extends Component {
+      static components = { Child };
+      static template = xml`<div><Child t-on-click.capture="capture"/></div>`;
+      capture() {
+        steps.push("captured");
+      }
+    }
+    const widget = new ParentWidget();
+    await widget.mount(fixture);
+
+    fixture.querySelector("span")!.click();
+    expect(env.qweb.templates[ParentWidget.template].fn.toString()).toMatchSnapshot();
+    expect(steps).toEqual(["captured", "click"]);
+  });
+
   test("t-on on destroyed components", async () => {
     const steps: string[] = [];
     let child;