[WIP]

src/compiler/parser.ts

@@ -293,13 +293,14 @@ function parseTUser(node: Element, ctx: ParsingContext): AST | null {
       throw new OwlError("Missing user directive name with t-user directive");
     }
     if (attr.startsWith("t-user-")) {
-      const userDirective = userDirectives[attr.slice(7)];
+      const userDirective = userDirectives[attr.split(".")[0].slice(7)];
       if(!userDirective) {
         throw new OwlError("User directive not defined");
       }
       const value = node.getAttribute(attr)!;
+      const modifier = attr.split(".").length > 1 ? attr.split(".")[1] : undefined;
       node.removeAttribute(attr);
-      node = userDirective(node, value);
+      node = userDirective(node, value, modifier);
       return parseNode(node, ctx);
     }
   }

src/runtime/template_set.ts

@@ -8,7 +8,7 @@ import { parseXML } from "../common/utils";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
-export type userDirectives = Record<string, (node: Element, value: string) => Element>;
+export type userDirectives = Record<string, (node: Element, value: string, modifier?: string) => Element>;
 
 export interface TemplateSetConfig {
   dev?: boolean;

tests/compiler/__snapshots__/t_user.test.ts.snap

@@ -13,3 +13,17 @@ exports[`t-user can use t-user directive on a node 1`] = `
   }
 }"
 `;
+
+exports[`t-user can use t-user directive with modifier on a node 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"my-div\\" block-handler-0=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['click'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;

tests/compiler/t_user.test.ts

@@ -31,4 +31,27 @@ test("can use t-user directive on a node", async () => {
     fixture.querySelector("div")!.click();
     expect(steps).toEqual(["clicked"]);
   });
+
+  test("can use t-user directive with modifier on a node", async () => {
+    const steps: string[] = [];
+    class SomeComponent extends Component {
+      static template = xml`<div t-user-plop.mouse="click" class="my-div"/>`;
+      click() {
+        steps.push("clicked");
+      }
+    }
+    const app = new App(SomeComponent, {
+      userDirectives: {
+        plop: (node, value, modifier) => {
+            node.setAttribute("t-on-click", value)
+            steps.push(modifier || "");
+            return node;
+        }
+      },
+    });
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
+    fixture.querySelector("div")!.click();
+    expect(steps).toEqual(["mouse", "clicked"]);
+  });
 });