Quote shorthand prop keys that contain a hyphen (#292)

Fixes #291
alangpierce · Jul 3, 2018 · 2fcb23d · 2fcb23d
1 parent c77dcfe
commit 2fcb23d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git 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
@@ -92,6 +92,28 @@ describe("transform JSX", () => {
     );
   });
 
+  it("handles property keys that require quoting", () => {
+    assertResult(
+      `
+      <A foo-bar={true} />
+    `,
+      `${JSX_PREFIX}
+      React.createElement(A, { 'foo-bar': true, ${devProps(2)}} )
+    `,
+    );
+  });
+
+  it("handles shorthand property keys that require quoting", () => {
+    assertResult(
+      `
+      <A foo-bar />
+    `,
+      `${JSX_PREFIX}
+      React.createElement(A, { 'foo-bar': true, ${devProps(2)}} )
+    `,
+    );
+  });
+
   it("handles inline comments", () => {
     assertResult(
       `