[REF] qweb: improve t-on generated code

and deduplicate logic between directive t-on applied on a node and on a
component

src/component/directive.ts

@@ -1,6 +1,6 @@
 import { QWeb } from "../qweb/index";
 import { INTERP_REGEXP } from "../qweb/compilation_context";
-import { MODS_CODE } from "../qweb/extensions";
+import { makeHandlerCode, MODS_CODE } from "../qweb/extensions";
 
 //------------------------------------------------------------------------------
 // t-component
@@ -197,7 +197,7 @@ QWeb.addDirective({
     let hasDynamicProps = node.getAttribute("t-props") ? true : false;
 
     // t-on- events and t-transition
-    const events: [string, string[], string, string][] = [];
+    const events: [string, string][] = [];
     let transition: string = "";
     const attributes = (<Element>node).attributes;
     const props: { [key: string]: string } = {};
@@ -205,13 +205,7 @@ QWeb.addDirective({
       const name = attributes[i].name;
       const value = attributes[i].textContent!;
       if (name.startsWith("t-on-")) {
-        const [eventName, ...mods] = name.slice(5).split(".");
+        events.push([name, value]);
-        let extraArgs;
-        let handlerValue = value.replace(/\(.*\)/, function(args) {
-          extraArgs = args.slice(1, -1);
-          return "";
-        });
-        events.push([eventName, mods, handlerValue, extraArgs]);
       } else if (name === "t-transition") {
         transition = value;
       } else if (!name.startsWith("t-")) {
@@ -284,32 +278,9 @@ QWeb.addDirective({
         }
       }
       let eventsCode = events
-        .map(function([eventName, mods, handlerValue, extraArgs]) {
+        .map(function([name, value]) {
-          let params = "context";
+          const { event, handler } = makeHandlerCode(ctx, name, value, false, T_COMPONENT_MODS_CODE);
-          if (extraArgs) {
+          return `vn.elm.addEventListener('${event}', ${handler});`;
-            if (ctx.loopNumber) {
-              let argId = ctx.generateID();
-              // we need to evaluate the arguments now, because the handler will
-              // be set asynchronously later when the widget is ready, and the
-              // context might be different.
-              ctx.addLine(`let arg${argId} = ${ctx.formatExpression(extraArgs)};`);
-              params = `context, arg${argId}`;
-            } else {
-              params = `context, ${ctx.formatExpression(extraArgs)}`;
-            }
-          }
-          let handler = `function (e) {if(!context.__owl__.isMounted){return}`;
-          handler += mods
-            .map(function(mod) {
-              return T_COMPONENT_MODS_CODE[mod];
-            })
-            .join("");
-          if (handlerValue) {
-            handler += `const fn = context['${handlerValue}'];`;
-            handler += `if (fn) { fn.call(${params}, e); } else { context.${handlerValue}; }`;
-          }
-          handler += `}`;
-          return `vn.elm.addEventListener('${eventName}', ${handler});`;
         })
         .join("");
       const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);

src/qweb/compilation_context.ts

@@ -46,12 +46,12 @@ export class CompilationContext {
    * Such a key is necessary when we need to associate an id to some element
    * generated by a template (for example, a component)
    */
-  generateTemplateKey(): string {
+  generateTemplateKey(prefix: string = ""): string {
     const id = this.generateID();
     if (this.loopNumber === 0 && !this.currentKey) {
-      return `'__${id}__'`;
+      return `'${prefix}__${id}__'`;
     }
-    let locationExpr = `\`__${id}__`;
+    let locationExpr = `\`${prefix}__${id}__`;
     for (let i = 0; i < this.loopNumber - 1; i++) {
       locationExpr += `\${i${i + 1}}__`;
     }

src/qweb/extensions.ts

@@ -26,48 +26,64 @@ export const MODS_CODE = {
   stop: "e.stopPropagation();"
 };
 
+interface HandlerInfo {
+  event: string;
+  handler: string;
+}
+
+const FNAMEREGEXP = /^[$A-Z_][0-9A-Z_$]*$/i;
+
+export function makeHandlerCode(
+  ctx,
+  fullName,
+  value,
+  putInCache: boolean,
+  modcodes = MODS_CODE
+): HandlerInfo {
+  const [event, ...mods] = fullName.slice(5).split(".");
+  if (!event) {
+    throw new Error("Missing event name with t-on directive");
+  }
+  let code: string;
+  // check if it is a method with no args, a method with args or an expression
+  let args: string = "";
+  const name: string = value.replace(/\(.*\)/, function(_args) {
+    args = _args.slice(1, -1);
+    return "";
+  });
+  const isMethodCall = name.match(FNAMEREGEXP);
+
+  // then generate code
+  if (isMethodCall) {
+    if (args) {
+      let argId = ctx.generateID();
+      ctx.addLine(`let args${argId} = [${ctx.formatExpression(args)}];`);
+      code = `context['${name}'](...args${argId}, e);`;
+      putInCache = false;
+    } else {
+      code = `context['${name}'](e);`;
+    }
+  } else {
+    // if we get here, then it is an expression
+    putInCache = false;
+    code = ctx.formatExpression(value);
+  }
+  const modCode = mods.map(mod => modcodes[mod]).join("");
+  let handler = `function (e) {if (!context.__owl__.isMounted){return}${modCode}${code}}`;
+  if (putInCache) {
+    const key = ctx.generateTemplateKey(event);
+    ctx.addLine(`extra.handlers[${key}] = extra.handlers[${key}] || ${handler};`);
+    handler = `extra.handlers[${key}]`;
+  }
+  return { event, handler };
+}
+
 QWeb.addDirective({
   name: "on",
   priority: 90,
   atNodeCreation({ ctx, fullName, value, nodeID }) {
-    const [eventName, ...mods] = fullName.slice(5).split(".");
+    const { event, handler } = makeHandlerCode(ctx, fullName, value, true);
-    if (!eventName) {
+    ctx.addLine(`p${nodeID}.on['${event}'] = ${handler};`);
-      throw new Error("Missing event name with t-on directive");
-    }
-    let extraArgs;
-    let handlerName = value.replace(/\(.*\)/, function(args) {
-      extraArgs = args.slice(1, -1);
-      return "";
-    });
-    let params = extraArgs ? `context, ${ctx.formatExpression(extraArgs)}` : "context";
-    let handler = `function (e) {if (!context.__owl__.isMounted){return}`;
-    handler += mods
-      .map(function(mod) {
-        return MODS_CODE[mod];
-      })
-      .join("");
-    if (handlerName) {
-      if (!extraArgs) {
-        handler += `const fn = context['${handlerName}'];`;
-        handler += `if (fn) { fn.call(${params}, e); } else { context.${handlerName}; }`;
-        handler += `}`;
-        ctx.addLine(
-          `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
-        );
-        ctx.addLine(`p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`);
-      } else {
-        const handlerKey = `handler${ctx.generateID()}`;
-        ctx.addLine(
-          `const ${handlerKey} = context['${handlerName}'] && context['${handlerName}'].bind(${params});`
-        );
-        handler += `if (${handlerKey}) { ${handlerKey}(e); } else { context.${value}; }`;
-        handler += `}`;
-        ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
-      }
-    } else {
-      handler += "}";
-      ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
-    }
   }
 });
 

src/qweb/qweb.ts

@@ -353,7 +353,9 @@ export class QWeb extends EventBus {
       if (node.nodeType === 3) {
         node.textContent = escape(node.textContent);
       }
-      for (let n of node.childNodes) { escapeTextNodes(n) }
+      for (let n of node.childNodes) {
+        escapeTextNodes(n);
+      }
     }
     escapeTextNodes(elem);
     return elem.outerHTML;

src/utils.ts

@@ -58,7 +58,7 @@ export function escape(str: string | number | undefined): string {
   if (typeof str === "number") {
     return String(str);
   }
-  const p = document.createElement('p');
+  const p = document.createElement("p");
   p.textContent = str;
   return p.innerHTML;
 }

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

@@ -499,7 +499,7 @@ exports[`other directives with t-component t-on with getter as handler 1`] = `
         if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
         w3 = new W3(parent, props3);
         parent.__owl__.cmap['__4__'] = w3.__owl__.id;
-        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['handler'];if (fn) { fn.call(context, e); } else { context.handler; }});}};});
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['handler'](e);});}};});
         let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
@@ -521,6 +521,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     // Component 'child'
+    let args4 = [3];
     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) {
@@ -537,7 +538,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, 3, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -559,6 +560,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     // Component 'child'
+    let args4 = [{}];
     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) {
@@ -575,7 +577,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {}, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -597,6 +599,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     // Component 'child'
+    let args4 = [{}];
     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) {
@@ -613,7 +616,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {}, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -635,6 +638,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     // Component 'child'
+    let args4 = [{val:3}];
     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) {
@@ -651,7 +655,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {val:3}, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -693,7 +697,7 @@ exports[`other directives with t-component t-on with inline statement 1`] = `
         if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
         w3 = new W3(parent, props3);
         parent.__owl__.cmap['__4__'] = w3.__owl__.id;
-        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['state.counter++'];if (fn) { fn.call(context, e); } else { context.state.counter++; }});}};});
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}scope['state'].counter++});}};});
         let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
@@ -731,7 +735,7 @@ exports[`other directives with t-component t-on with no handler (only modifiers)
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -769,7 +773,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}context['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -807,7 +811,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();context['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -845,7 +849,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv1'];if (fn) { fn.call(context, e); } else { context.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if(!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}const fn = context['onEv2'];if (fn) { fn.call(context, e); } else { context.onEv2; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}context['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}context['onEv2'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -883,7 +887,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if(!context.__owl__.isMounted){return}e.stopPropagation();const fn = context['onEv1'];if (fn) { fn.call(context, e); } else { context.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if(!context.__owl__.isMounted){return}e.preventDefault();const fn = context['onEv2'];if (fn) { fn.call(context, e); } else { context.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {if(!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();const fn = context['onEv3'];if (fn) { fn.call(context, e); } else { context.onEv3; }});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();context['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onEv2'](e);});vn.elm.addEventListener('ev-3', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();context['onEv3'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -976,7 +980,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
         const nodeKey6 = scope['item'];
         // Component 'Child'
         let k8 = \`__8__\` + nodeKey6;
-        let arg9 = scope['item'];
+        let args9 = [scope['item']];
         let w7 = k8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k8]] : false;
         let props7 = {};
         if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) {
@@ -993,7 +997,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
             if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
             w7 = new W7(parent, props7);
             parent.__owl__.cmap[k8] = w7.__owl__.id;
-            let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, arg9, e); } else { context.onEv; }});}};});
+            let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args9, e);});}};});
             let pvnode = h('dummy', {key: k8, hook: {remove() {},destroy(vn) {w7.destroy();}}});
             c1.push(pvnode);
             w7.__owl__.pvnode = pvnode;

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

@@ -191,15 +191,15 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
     let c8 = [], p8 = {key:8,on:{}};
     var vn8 = h('button', p8, c8);
     c1.push(vn8);
-    extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }};
+    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](e);};
-    p8.on['click'] = extra.handlers['click' + 8];
+    p8.on['click'] = extra.handlers['click__9__'];
-    const ref9 = \`myButton\`;
+    const ref10 = \`myButton\`;
     p8.hook = {
       create: (_, n) => {
-        context.__owl__.refs[ref9] = n.elm;
+        context.__owl__.refs[ref10] = n.elm;
       },
       destroy: () => {
-        delete context.__owl__.refs[ref9];
+        delete context.__owl__.refs[ref10];
       },
     };
     c8.push({text: \`do something\`});
@@ -215,8 +215,8 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
     let c8 = [], p8 = {key:8,on:{}};
     var vn8 = h('button', p8, c8);
     c1.push(vn8);
-    extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }};
+    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](e);};
-    p8.on['click'] = extra.handlers['click' + 8];
+    p8.on['click'] = extra.handlers['click__9__'];
     c8.push({text: \`do something\`});
 }"
 `;

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -2083,8 +2083,8 @@ exports[`t-on can bind event handler 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['add'];if (fn) { fn.call(context, e); } else { context.add; }};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['add'](e);};
-    p1.on['click'] = extra.handlers['click' + 1];
+    p1.on['click'] = extra.handlers['click__2__'];
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2098,8 +2098,8 @@ exports[`t-on can bind handlers with arguments 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    const handler2 = context['add'] && context['add'].bind(context, 5);
+    let args2 = [5];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler2) { handler2(e); } else { context.add(5); }};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['add'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2113,8 +2113,8 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    const handler2 = context['doSomething'] && context['doSomething'].bind(context, {});
+    let args2 = [{}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler2) { handler2(e); } else { context.doSomething({ }); }};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2128,8 +2128,8 @@ exports[`t-on can bind handlers with empty object 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    const handler2 = context['doSomething'] && context['doSomething'].bind(context, {});
+    let args2 = [{}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler2) { handler2(e); } else { context.doSomething({}); }};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2166,8 +2166,8 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
         let c8 = [], p8 = {key:nodeKey6,on:{}};
         var vn8 = h('a', p8, c8);
         c7.push(vn8);
-        const handler9 = context['activate'] && context['activate'].bind(context, scope['action']);
+        let args9 = [scope['action']];
-        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler9) { handler9(e); } else { context.activate(action); }};
+        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['activate'](...args9, e);};
         c8.push({text: \`link\`});
     }
     scope = _origScope5;
@@ -2183,8 +2183,8 @@ exports[`t-on can bind handlers with object arguments 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    const handler2 = context['add'] && context['add'].bind(context, {val:5});
+    let args2 = [{val:5}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler2) { handler2(e); } else { context.add({val: 5}); }};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['add'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2197,10 +2197,10 @@ exports[`t-on can bind two event handlers 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['handleClick'];if (fn) { fn.call(context, e); } else { context.handleClick; }};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['handleClick'](e);};
-    p1.on['click'] = extra.handlers['click' + 1];
+    p1.on['click'] = extra.handlers['click__2__'];
-    extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['handleDblClick'];if (fn) { fn.call(context, e); } else { context.handleDblClick; }};
+    extra.handlers['dblclick__3__'] = extra.handlers['dblclick__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['handleDblClick'](e);};
-    p1.on['dblclick'] = extra.handlers['dblclick' + 1];
+    p1.on['dblclick'] = extra.handlers['dblclick__3__'];
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2213,8 +2213,8 @@ exports[`t-on handler is bound to proper owner 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['add'];if (fn) { fn.call(context, e); } else { context.add; }};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['add'](e);};
-    p1.on['click'] = extra.handlers['click' + 1];
+    p1.on['click'] = extra.handlers['click__2__'];
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2231,11 +2231,11 @@ exports[`t-on t-on combined with t-esc 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['onClick'];if (fn) { fn.call(context, e); } else { context.onClick; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
-    var _3 = scope['text'];
+    var _4 = scope['text'];
-    if (_3 || _3 === 0) {
+    if (_4 || _4 === 0) {
-        c2.push({text: _3});
+        c2.push({text: _4});
     }
     return vn1;
 }"
@@ -2253,11 +2253,11 @@ exports[`t-on t-on combined with t-raw 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['onClick'];if (fn) { fn.call(context, e); } else { context.onClick; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
-    var _3 = scope['html'];
+    var _4 = scope['html'];
-    if (_3 || _3 === 0) {
+    if (_4 || _4 === 0) {
-        c2.push(...utils.htmlToVDOM(_3));
+        c2.push(...utils.htmlToVDOM(_4));
     }
     return vn1;
 }"
@@ -2267,6 +2267,7 @@ exports[`t-on t-on with empty handler (only modifiers) 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
@@ -2287,8 +2288,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    const handler2 = context['state.incrementCounter'] && context['state.incrementCounter'].bind(context, 2);
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}scope['state'].incrementCounter(2)};
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}if (handler2) { handler2(e); } else { context.state.incrementCounter(2); }};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2298,11 +2298,11 @@ exports[`t-on t-on with inline statement 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['state.counter++'];if (fn) { fn.call(context, e); } else { context.state.counter++; }};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}scope['state'].counter++};
-    p1.on['click'] = extra.handlers['click' + 1];
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2318,12 +2318,12 @@ exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== this.elm) {return}const fn = context['onClick'];if (fn) { fn.call(context, e); } else { context.onClick; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== this.elm) {return}context['onClick'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
-    let c3 = [], p3 = {key:3};
+    let c4 = [], p4 = {key:4};
-    var vn3 = h('span', p3, c3);
+    var vn4 = h('span', p4, c4);
-    c2.push(vn3);
+    c2.push(vn4);
-    c3.push({text: \`Button\`});
+    c4.push({text: \`Button\`});
     return vn1;
 }"
 `;
@@ -2338,21 +2338,21 @@ exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();const fn = context['onClickPrevented'];if (fn) { fn.call(context, e); } else { context.onClickPrevented; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onClickPrevented'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
     c2.push({text: \`Button 1\`});
-    let c3 = [], p3 = {key:3,on:{}};
-    var vn3 = h('button', p3, c3);
-    c1.push(vn3);
-    extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();const fn = context['onClickStopped'];if (fn) { fn.call(context, e); } else { context.onClickStopped; }};
-    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);
-    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();e.stopPropagation();const fn = context['onClickPreventedAndStopped'];if (fn) { fn.call(context, e); } else { context.onClickPreventedAndStopped; }};
+    extra.handlers['click__5__'] = extra.handlers['click__5__'] || function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();context['onClickStopped'](e);};
-    p4.on['click'] = extra.handlers['click' + 4];
+    p4.on['click'] = extra.handlers['click__5__'];
-    c4.push({text: \`Button 3\`});
+    c4.push({text: \`Button 2\`});
+    let c6 = [], p6 = {key:6,on:{}};
+    var vn6 = h('button', p6, c6);
+    c1.push(vn6);
+    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'](e);};
+    p6.on['click'] = extra.handlers['click__7__'];
+    c6.push({text: \`Button 3\`});
     return vn1;
 }"
 `;
@@ -2386,8 +2386,8 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
         let c8 = [], p8 = {key:nodeKey6,attrs:{href: _7},on:{}};
         var vn8 = h('a', p8, c8);
         c1.push(vn8);
-        const handler9 = context['onEdit'] && context['onEdit'].bind(context, scope['project'].id);
+        let args9 = [scope['project'].id];
-        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (handler9) { handler9(e); } else { context.onEdit(project.id); }};
+        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onEdit'](...args9, e);};
         c8.push({text: \` Edit \`});
         var _10 = scope['project'].name;
         if (_10 || _10 === 0) {
@@ -2409,12 +2409,12 @@ exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}e.preventDefault();const fn = context['onClick'];if (fn) { fn.call(context, e); } else { context.onClick; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}e.preventDefault();context['onClick'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
-    let c3 = [], p3 = {key:3};
+    let c4 = [], p4 = {key:4};
-    var vn3 = h('span', p3, c3);
+    var vn4 = h('span', p4, c4);
-    c2.push(vn3);
+    c2.push(vn4);
-    c3.push({text: \`Button\`});
+    c4.push({text: \`Button\`});
     return vn1;
 }"
 `;
@@ -2429,21 +2429,21 @@ exports[`t-on t-on with self modifier 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['onClick'];if (fn) { fn.call(context, e); } else { context.onClick; }};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
-    p2.on['click'] = extra.handlers['click' + 2];
+    p2.on['click'] = extra.handlers['click__3__'];
-    let c3 = [], p3 = {key:3};
+    let c4 = [], p4 = {key:4};
-    var vn3 = h('span', p3, c3);
+    var vn4 = h('span', p4, c4);
-    c2.push(vn3);
+    c2.push(vn4);
-    c3.push({text: \`Button\`});
+    c4.push({text: \`Button\`});
-    let c4 = [], p4 = {key:4,on:{}};
+    let c5 = [], p5 = {key:5,on:{}};
-    var vn4 = h('button', p4, c4);
+    var vn5 = h('button', p5, c5);
-    c1.push(vn4);
+    c1.push(vn5);
-    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}const fn = context['onClickSelf'];if (fn) { fn.call(context, e); } else { context.onClickSelf; }};
+    extra.handlers['click__6__'] = extra.handlers['click__6__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}context['onClickSelf'](e);};
-    p4.on['click'] = extra.handlers['click' + 4];
+    p5.on['click'] = extra.handlers['click__6__'];
-    let c5 = [], p5 = {key:5};
+    let c7 = [], p7 = {key:7};
-    var vn5 = h('span', p5, c5);
+    var vn7 = h('span', p7, c7);
-    c4.push(vn5);
+    c5.push(vn7);
-    c5.push({text: \`Button\`});
+    c7.push({text: \`Button\`});
     return vn1;
 }"
 `;

tests/qweb/qweb.test.ts

@@ -122,7 +122,9 @@ describe("t-esc", () => {
 
   test("escaping", () => {
     qweb.addTemplate("test", `<span><t t-esc="var"/></span>`);
-    expect(renderToString(qweb, "test", { var: "<ok>abc</ok>" })).toBe("<span>&amp;lt;ok&amp;gt;abc&amp;lt;/ok&amp;gt;</span>");
+    expect(renderToString(qweb, "test", { var: "<ok>abc</ok>" })).toBe(
+      "<span>&amp;lt;ok&amp;gt;abc&amp;lt;/ok&amp;gt;</span>"
+    );
   });
 
   test("escaping on a node", () => {
@@ -636,7 +638,7 @@ describe("attributes", () => {
       baz: 1,
       qux: { qux: "<>" }
     });
-    const expected =  "<div foo=\"<foo\" bar=\"0\" baz=\"<1>\" qux=\"<>\"></div>";
+    const expected = '<div foo="<foo" bar="0" baz="<1>" qux="<>"></div>';
     expect(result).toBe(expected);
   });
 
@@ -883,9 +885,10 @@ describe("t-call (template calling", () => {
   });
 
   test("t-call, conditional and t-set in t-call body", () => {
-    QWeb.registerTemplate("callee1", '<div>callee1</div>');
+    QWeb.registerTemplate("callee1", "<div>callee1</div>");
     QWeb.registerTemplate("callee2", '<div>callee2 <t t-esc="v"/></div>');
-    QWeb.registerTemplate("caller",
+    QWeb.registerTemplate(
+      "caller",
       `<div>
         <t t-set="v1" t-value="'elif'"/>
         <t t-if="v1 === 'if'" t-call="callee1" />
@@ -1117,7 +1120,7 @@ describe("misc", () => {
   });
 });
 
-describe("t-on", () => {
+describe.only("t-on", () => {
   test("can bind event handler", () => {
     qweb.addTemplate("test", `<button t-on-click="add">Click</button>`);
     let a = 1;

tests/router/__snapshots__/link.test.ts.snap

@@ -11,11 +11,11 @@ exports[`Link component can render simple cases 1`] = `
     var _5 = scope['href'];
     let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
     var vn6 = h('a', p6, c6);
-    extra.handlers['click' + 6] = extra.handlers['click' + 6] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['navigate'];if (fn) { fn.call(context, e); } else { context.navigate; }};
+    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}context['navigate'](e);};
-    p6.on['click'] = extra.handlers['click' + 6];
+    p6.on['click'] = extra.handlers['click__7__'];
-    const slot7 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot7) {
+    if (slot8) {
-        slot7.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c6, parent: extra.parent || context}));
+        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c6, parent: extra.parent || context}));
     }
     return vn6;
 }"