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(
`