diff --git a/src/transformers/JSXTransformer.ts b/src/transformers/JSXTransformer.ts index 1a3cfa41..21c648d1 100644 --- a/src/transformers/JSXTransformer.ts +++ b/src/transformers/JSXTransformer.ts @@ -97,12 +97,7 @@ export default class JSXTransformer extends Transformer { this.tokens.appendCode(`, {`); while (true) { if (this.tokens.matches2(tt.jsxName, tt.eq)) { - const keyName = this.tokens.identifierName(); - if (keyName.includes("-")) { - this.tokens.replaceToken(`'${keyName}'`); - } else { - this.tokens.copyToken(); - } + this.processPropKeyName(); this.tokens.replaceToken(": "); if (this.tokens.matches1(tt.braceL)) { this.tokens.replaceToken(""); @@ -114,7 +109,7 @@ export default class JSXTransformer extends Transformer { this.processStringPropValue(); } } else if (this.tokens.matches1(tt.jsxName)) { - this.tokens.copyToken(); + this.processPropKeyName(); this.tokens.appendCode(": true"); } else if (this.tokens.matches1(tt.braceL)) { this.tokens.replaceToken(""); @@ -132,6 +127,15 @@ export default class JSXTransformer extends Transformer { } } + processPropKeyName(): void { + const keyName = this.tokens.identifierName(); + if (keyName.includes("-")) { + this.tokens.replaceToken(`'${keyName}'`); + } else { + this.tokens.copyToken(); + } + } + processStringPropValue(): void { const token = this.tokens.currentToken(); const valueCode = this.tokens.code.slice(token.start + 1, token.end - 1); diff --git a/test/jsx-test.ts b/test/jsx-test.ts index b47b2c38..2b6fc247 100644 --- a/test/jsx-test.ts +++ b/test/jsx-test.ts @@ -92,6 +92,28 @@ describe("transform JSX", () => { ); }); + it("handles property keys that require quoting", () => { + assertResult( + ` + + `, + `${JSX_PREFIX} + React.createElement(A, { 'foo-bar': true, ${devProps(2)}} ) + `, + ); + }); + + it("handles shorthand property keys that require quoting", () => { + assertResult( + ` + + `, + `${JSX_PREFIX} + React.createElement(A, { 'foo-bar': true, ${devProps(2)}} ) + `, + ); + }); + it("handles inline comments", () => { assertResult( `