[FIX] props: prop names can contain -

src/compiler/code_generator.ts

@@ -967,7 +967,8 @@ export class CodeGenerator {
     const props: string[] = [];
     let hasSlotsProp = false;
     for (let p in ast.props) {
-      props.push(`${p}: ${this.captureExpression(ast.props[p]) || undefined}`);
+      const propName = p.includes("-") ? `'${p}'` : p;
+      props.push(`${propName}: ${this.captureExpression(ast.props[p]) || undefined}`);
       if (p === "slots") {
         hasSlotsProp = true;
       }

tests/components/__snapshots__/props.test.ts.snap

@@ -96,6 +96,33 @@ exports[`basics explicit object prop 2`] = `
 }"
 `;
 
+exports[`basics prop names can contain - 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(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props']['prop-name'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics prop names can contain - 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\`, {'prop-name': 7}, 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
 ) {

tests/components/props.test.ts

@@ -30,6 +30,20 @@ describe("basics", () => {
     expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
   });
 
+  test("prop names can contain -", async () => {
+    class Child extends Component {
+      static template = xml`<div><t t-esc="props['prop-name']"/></div>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child prop-name="7"/>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div>7</div>");
+  });
+
   test("accept ES6-like syntax for props (with getters)", async () => {
     class Child extends Component {
       static template = xml`<span><t t-esc="props.greetings"/></span>`;