From 055bfde1bb8b2464146d731036c05fd7be7fb685 Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Mon, 25 Nov 2024 15:27:27 +0100
Subject: [PATCH] [FIX] compiler: multiple modifiers on t-custom

Since [1] it's possible to have a custom directive, this directive only
supported one modifier. This commit, add the support to have multiple
modifiers on a t-custom directive.

[1] : https://github.com/odoo/owl/commit/7e687234bf40bdcf5e6598401d8604d66b14ad32
---
 src/common/types.ts                                |  2 +-
 src/compiler/parser.ts                             |  4 ++--
 tests/compiler/__snapshots__/t_custom.test.ts.snap |  2 +-
 tests/compiler/t_custom.test.ts                    | 12 +++++++-----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/common/types.ts b/src/common/types.ts
index 0a900bdb8..5752bb3db 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -1,4 +1,4 @@
 export type customDirectives = Record<
   string,
-  (node: Element, value: string, modifier?: string) => void
+  (node: Element, value: string, modifier?: string[]) => void
 >;
diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index dc5c3ee79..d3c92c280 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -299,10 +299,10 @@ function parseTCustom(node: Element, ctx: ParsingContext): AST | null {
         throw new OwlError(`Custom directive "${directiveName}" is not defined`);
       }
       const value = node.getAttribute(attr)!;
-      const modifier = attr.split(".").length > 1 ? attr.split(".")[1] : undefined;
+      const modifiers = attr.split(".").length > 1 ? attr.split(".").slice(1) : undefined;
       node.removeAttribute(attr);
       try {
-        customDirective(node, value, modifier);
+        customDirective(node, value, modifiers);
       } catch (error) {
         throw new OwlError(
           `Custom directive "${directiveName}" throw the following error: ${error}`
diff --git a/tests/compiler/__snapshots__/t_custom.test.ts.snap b/tests/compiler/__snapshots__/t_custom.test.ts.snap
index 4d16e4768..d5769badd 100644
--- a/tests/compiler/__snapshots__/t_custom.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_custom.test.ts.snap
@@ -14,7 +14,7 @@ exports[`t-custom can use t-custom directive on a node 1`] = `
 }"
 `;
 
-exports[`t-custom can use t-custom directive with modifier on a node 1`] = `
+exports[`t-custom can use t-custom directive with modifiers on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
diff --git a/tests/compiler/t_custom.test.ts b/tests/compiler/t_custom.test.ts
index abfb745f7..1a7aba80a 100644
--- a/tests/compiler/t_custom.test.ts
+++ b/tests/compiler/t_custom.test.ts
@@ -31,25 +31,27 @@ describe("t-custom", () => {
     expect(steps).toEqual(["clicked"]);
   });
 
-  test("can use t-custom directive with modifier on a node", async () => {
+  test("can use t-custom directive with modifiers on a node", async () => {
     const steps: string[] = [];
     class SomeComponent extends Component {
-      static template = xml`<div t-custom-plop.mouse="click" class="my-div"/>`;
+      static template = xml`<div t-custom-plop.mouse.stop="click" class="my-div"/>`;
       click() {
         steps.push("clicked");
       }
     }
     const app = new App(SomeComponent, {
       customDirectives: {
-        plop: (node, value, modifier) => {
+        plop: (node, value, modifiers) => {
           node.setAttribute("t-on-click", value);
-          steps.push(modifier || "");
+          for (let mod of modifiers || []) {
+            steps.push(mod);
+          }
         },
       },
     });
     await app.mount(fixture);
     expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
     fixture.querySelector("div")!.click();
-    expect(steps).toEqual(["mouse", "clicked"]);
+    expect(steps).toEqual(["mouse", "stop", "clicked"]);
   });
 });