diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index 5201d0e5..195563ea 100644
--- a/src/compiler/code_generator.ts
+++ b/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;
}
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index 9eaa95a8..ea2bcbef 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/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(\`
\`);
+
+ 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
) {
diff --git a/tests/components/props.test.ts b/tests/components/props.test.ts
index a7cfc2aa..c4aeb5e3 100644
--- a/tests/components/props.test.ts
+++ b/tests/components/props.test.ts
@@ -30,6 +30,20 @@ describe("basics", () => {
expect(fixture.innerHTML).toBe("42
");
});
+ test("prop names can contain -", async () => {
+ class Child extends Component {
+ static template = xml`
`;
+ }
+
+ class Parent extends Component {
+ static template = xml``;
+ static components = { Child };
+ }
+
+ await mount(Parent, fixture);
+ expect(fixture.innerHTML).toBe("7
");
+ });
+
test("accept ES6-like syntax for props (with getters)", async () => {
class Child extends Component {
static template = xml``;