[IMP] support modifiers with t-on directive

Supported modifiers are stop, prevent and self.

Closes #115.

doc/qweb.md

@@ -361,6 +361,25 @@ is what makes a template _alive_. There are two different use cases.
    The suffix (`click` in this example) is simply the name of the actual DOM
    event.
 
+   In order to remove the DOM event details from the event handlers (like calls
+   to `event.preventDefault`) and let them focus on data logic, _modifiers_ can
+   be specified as additional suffixes of the `t-on` directive.
+
+   | Modifier   | Description                                                       |
+   | ---------- | ----------------------------------------------------------------- |
+   | `.stop`    | calls `event.stopPropagation()` before calling the method         |
+   | `.prevent` | calls `event.preventDefault()` before calling the method          |
+   | `.self`    | calls the method only if the `event.target` is the element itself |
+
+   ```xml
+   <button t-on-click.stop="someMethod">Do something</button>
+   ```
+
+   Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
+   the order may matter. For instance `t-on-click.prevent.self` will prevent all
+   clicks while `t-on-click.self.prevent` will only prevent clicks on the
+   element itself.
+
 2. Register an event handler on a component. This will not capture a DOM event,
    but rather a _business_ event:
 

src/qweb_extensions.ts

@@ -16,33 +16,56 @@ import { QWeb, UTILS } from "./qweb_core";
 //------------------------------------------------------------------------------
 // t-on
 //------------------------------------------------------------------------------
+// these are pieces of code that will be injected into the event handler if
+// modifiers are specified
+const MODS_CODE = {
+  prevent: "e.preventDefault();",
+  self: "if (e.target !== this.elm) {return}",
+  stop: "e.stopPropagation();"
+};
+
 QWeb.addDirective({
   name: "on",
   priority: 90,
   atNodeCreation({ ctx, fullName, value, nodeID }) {
     ctx.rootContext.shouldDefineOwner = true;
-    const eventName = fullName.slice(5);
+    const [eventName, ...mods] = fullName.slice(5).split(".");
     if (!eventName) {
       throw new Error("Missing event name with t-on directive");
     }
     let extraArgs;
-    let handler = value.replace(/\(.*\)/, function(args) {
+    let handlerName = value.replace(/\(.*\)/, function(args) {
       extraArgs = args.slice(1, -1);
       return "";
     });
-    let error = `(function () {throw new Error('Missing handler \\'' + '${handler}' + \`\\' when evaluating template '${ctx.templateName.replace(
+    ctx.addIf(`!context['${handlerName}']`);
+    ctx.addLine(
+      `throw new Error('Missing handler \\'' + '${handlerName}' + \`\\' when evaluating template '${ctx.templateName.replace(
         /`/g,
         "'"
-    )}'\`)})()`;
+      )}'\`)`
-    if (extraArgs) {
-      ctx.addLine(
-        `p${nodeID}.on['${eventName}'] = (context['${handler}'] || ${error}).bind(owner, ${ctx.formatExpression(
-          extraArgs
-        )});`
     );
+    ctx.closeIf();
+    let params = extraArgs
+      ? `owner, ${ctx.formatExpression(extraArgs)}`
+      : "owner";
+    let handler;
+    if (mods.length > 0) {
+      handler = `function (e) {`;
+      handler += mods
+        .map(function(mod) {
+          return MODS_CODE[mod];
+        })
+        .join("");
+      handler += `context['${handlerName}'].call(${params}, e);}`;
+    } else {
+      handler = `context['${handlerName}'].bind(${params})`;
+    }
+    if (extraArgs) {
+      ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
     } else {
       ctx.addLine(
-        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || (context['${handler}'] || ${error}).bind(owner);`
+        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
       );
       ctx.addLine(
         `p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`

tests/__snapshots__/qweb.test.ts.snap

@@ -1154,7 +1154,10 @@ exports[`t-on can bind event handler 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
     c1.push({text: \`Click\`});
     return vn1;
@@ -1168,7 +1171,10 @@ exports[`t-on can bind handlers with arguments 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, 5);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['add'].bind(owner, 5);
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1181,7 +1187,10 @@ exports[`t-on can bind handlers with empty object (with non empty inner string 1
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['doSomething'].bind(owner, {});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1194,7 +1203,10 @@ exports[`t-on can bind handlers with empty object 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['doSomething'].bind(owner, {});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1226,7 +1238,10 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
         let c6 = [], p6 = {key:6,on:{}};
         var vn6 = h('a', p6, c6);
         c5.push(vn6);
-        p6.on['click'] = (context['activate'] || (function () {throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, context['action']);
+        if (!context['activate']) {
+            throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)
+        }
+        p6.on['click'] = context['activate'].bind(owner, context['action']);
         c6.push({text: \`link\`});
     }
     return vn1;
@@ -1240,7 +1255,10 @@ exports[`t-on can bind handlers with object arguments 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {val: 5});
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['add'].bind(owner, {val: 5});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1253,9 +1271,15 @@ exports[`t-on can bind two event handlers 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['handleClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['handleClick']) {
+        throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['handleClick'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
-    extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || (context['handleDblClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['handleDblClick']) {
+        throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || context['handleDblClick'].bind(owner);
     p1.on['dblclick'] = extra.handlers['dblclick' + 1];
     c1.push({text: \`Click\`});
     return vn1;
@@ -1269,13 +1293,135 @@ exports[`t-on handler is bound to proper owner 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
     c1.push({text: \`Click\`});
     return vn1;
 }"
 `;
 
+exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();if (e.target !== this.elm) {return}context['onClick'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClickPrevented']) {
+        throw new Error('Missing handler \\\\'' + 'onClickPrevented' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();context['onClickPrevented'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    c2.push({text: \`Button 1\`});
+    let c3 = [], p3 = {key:3,on:{}};
+    var vn3 = h('button', p3, c3);
+    c1.push(vn3);
+    if (!context['onClickStopped']) {
+        throw new Error('Missing handler \\\\'' + 'onClickStopped' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.stopPropagation();context['onClickStopped'].call(owner, e);};
+    p3.on['click'] = extra.handlers['click' + 3];
+    c3.push({text: \`Button 2\`});
+    let c4 = [], p4 = {key:4,on:{}};
+    var vn4 = h('button', p4, c4);
+    c1.push(vn4);
+    if (!context['onClickPreventedAndStopped']) {
+        throw new Error('Missing handler \\\\'' + 'onClickPreventedAndStopped' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'].call(owner, e);};
+    p4.on['click'] = extra.handlers['click' + 4];
+    c4.push({text: \`Button 3\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (e.target !== this.elm) {return}e.preventDefault();context['onClick'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with self modifier 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    let c4 = [], p4 = {key:4,on:{}};
+    var vn4 = h('button', p4, c4);
+    c1.push(vn4);
+    if (!context['onClickSelf']) {
+        throw new Error('Missing handler \\\\'' + 'onClickSelf' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (e.target !== this.elm) {return}context['onClickSelf'].call(owner, e);};
+    p4.on['click'] = extra.handlers['click' + 4];
+    let c5 = [], p5 = {key:5};
+    var vn5 = h('span', p5, c5);
+    c4.push(vn5);
+    c5.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
 exports[`t-raw literal 1`] = `
 "function anonymous(context,extra
 ) {

tests/qweb.test.ts

@@ -969,6 +969,118 @@ describe("t-on", () => {
     const node = renderToDOM(qweb, "test", owner, { handlers: [] });
     (<HTMLElement>node).click();
   });
+
+  test("t-on with prevent and/or stop modifiers", async () => {
+    expect.assertions(7);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.prevent="onClickPrevented">Button 1</button>
+        <button t-on-click.stop="onClickStopped">Button 2</button>
+        <button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
+      </div>`
+    );
+    let owner = {
+      onClickPrevented(e) {
+        expect(e.defaultPrevented).toBe(true);
+        expect(e.cancelBubble).toBe(false);
+      },
+      onClickStopped(e) {
+        expect(e.defaultPrevented).toBe(false);
+        expect(e.cancelBubble).toBe(true);
+      },
+      onClickPreventedAndStopped(e) {
+        expect(e.defaultPrevented).toBe(true);
+        expect(e.cancelBubble).toBe(true);
+      }
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+
+    const buttons = (<HTMLElement>node).getElementsByTagName("button");
+    buttons[0].click();
+    buttons[1].click();
+    buttons[2].click();
+  });
+
+  test("t-on with self modifier", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click="onClick"><span>Button</span></button>
+        <button t-on-click.self="onClickSelf"><span>Button</span></button>
+      </div>`
+    );
+    let steps: string[] = [];
+    let owner = {
+      onClick(e) {
+        steps.push("onClick");
+      },
+      onClickSelf(e) {
+        steps.push("onClickSelf");
+      }
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+
+    const buttons = (<HTMLElement>node).getElementsByTagName("button");
+    const spans = (<HTMLElement>node).getElementsByTagName("span");
+    spans[0].click();
+    spans[1].click();
+    buttons[0].click();
+    buttons[1].click();
+
+    expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);
+  });
+
+  test("t-on with self and prevent modifiers (order matters)", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.self.prevent="onClick"><span>Button</span></button>
+      </div>`
+    );
+    let steps: boolean[] = [];
+    let owner = {
+      onClick() {}
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+    (<HTMLElement>node).addEventListener("click", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+    const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+    span.click();
+    button.click();
+
+    expect(steps).toEqual([false, true]);
+  });
+
+  test("t-on with prevent and self modifiers (order matters)", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.prevent.self="onClick"><span>Button</span></button>
+      </div>`
+    );
+    let steps: boolean[] = [];
+    let owner = {
+      onClick() {}
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+    (<HTMLElement>node).addEventListener("click", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+    const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+    span.click();
+    button.click();
+
+    expect(steps).toEqual([true, true]);
+  });
 });
 
 describe("t-ref", () => {