From 93b88cad8de285cff0b6731c7415643ad2c24aca Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Wed, 24 Nov 2021 07:48:44 +0100
Subject: [PATCH] [FIX] components: allow prop names that are not valid bare
 property name

---
 src/compiler/code_generator.ts                |  2 +-
 .../__snapshots__/props.test.ts.snap          | 27 +++++++++++++++++++
 tests/components/props.test.ts                | 17 ++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index 195563ea..69c2d2f9 100644
--- a/src/compiler/code_generator.ts
+++ b/src/compiler/code_generator.ts
@@ -967,7 +967,7 @@ export class CodeGenerator {
     const props: string[] = [];
     let hasSlotsProp = false;
     for (let p in ast.props) {
-      const propName = p.includes("-") ? `'${p}'` : p;
+      const propName = /^[a-z_]+$/i.test(p) ? p : `'${p}'`;
       props.push(`${propName}: ${this.captureExpression(ast.props[p]) || undefined}`);
       if (p === "slots") {
         hasSlotsProp = true;
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index ea2bcbef..235debe3 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/tests/components/__snapshots__/props.test.ts.snap
@@ -123,6 +123,33 @@ exports[`basics prop names can contain - 2`] = `
 }"
 `;
 
+exports[`basics support prop names that aren't valid bare object property names 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx['props'].onClick, ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics support prop names that aren't valid bare object property names 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {'some-dashed-prop': 5,'a.b': 'keyword prop'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/components/props.test.ts b/tests/components/props.test.ts
index c4aeb5e3..29a092c9 100644
--- a/tests/components/props.test.ts
+++ b/tests/components/props.test.ts
@@ -141,4 +141,21 @@ describe("basics", () => {
     expect(onClickArgs![0]).toBe(1);
     expect(onClickArgs![1]).toBeInstanceOf(MouseEvent);
   });
+
+  test("support prop names that aren't valid bare object property names", async () => {
+    expect.assertions(4);
+    class Child extends Component {
+      static template = xml`<button t-on-click="props.onClick"/>`;
+      setup() {
+        expect(this.props["some-dashed-prop"]).toBe(5);
+        expect(this.props["a.b"]).toBe("keyword prop");
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child some-dashed-prop="5" a.b="'keyword prop'"/>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+  });
 });