[FIX] compiler: multiple modifiers on t-custom

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
 >;

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(".").slice(1);
       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}`

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;

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"]);
   });
 });