From 8f0ef38b240938967472998e9d38195c23ba6d5a Mon Sep 17 00:00:00 2001
From: Nick <nschaubeck@gmail.com>
Date: Mon, 10 Mar 2014 18:50:18 -0400
Subject: [PATCH 1/3] Allow jsx to write tags with bracket, instead of dot,
 notation.

This will allow for hyphenated tags in the future as something like
`React.DOM["font-face"](content, mountNode)`
instead of the invalid
`React.DOM.font-face.(content, mountNode)`
Many SVG tags have hyphenated tags so this would be a good thing to have.
---
 vendor/fbtransform/transforms/react.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js
index 9b6019a634bf7..a6d8b2d64f3ac 100644
--- a/vendor/fbtransform/transforms/react.js
+++ b/vendor/fbtransform/transforms/react.js
@@ -61,10 +61,13 @@ function visitReactTag(traverse, object, path, state) {
   }
 
   var isFallbackTag = FALLBACK_TAGS.hasOwnProperty(nameObject.name);
-  utils.append(
-    (isFallbackTag ? jsxObjIdent + '.' : '') + (nameObject.name) + '(',
-    state
-  );
+  var tagOpening;
+  if (isFallbackTag) {
+    tagOpening = jsxObjIdent + '["' + (nameObject.name) + '"]' + '('
+  } else {
+    tagOpening = nameObject.name + '('
+  }
+  utils.append(tagOpening, state);
 
   utils.move(nameObject.range[1], state);
 

From fe540ed3292d3f9de85a4a92ad3dd47c7c62bcf9 Mon Sep 17 00:00:00 2001
From: Nick <nschaubeck@gmail.com>
Date: Mon, 10 Mar 2014 19:19:20 -0400
Subject: [PATCH 2/3] Only use bracket notation if tag is invalid.

Also centralize validity logic in xjs.js.
---
 vendor/fbtransform/transforms/react.js | 10 ++++++++--
 vendor/fbtransform/transforms/xjs.js   |  7 ++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js
index a6d8b2d64f3ac..1ceb21cdcb88e 100644
--- a/vendor/fbtransform/transforms/react.js
+++ b/vendor/fbtransform/transforms/react.js
@@ -24,6 +24,7 @@ var renderXJSExpressionContainer =
   require('./xjs').renderXJSExpressionContainer;
 var renderXJSLiteral = require('./xjs').renderXJSLiteral;
 var quoteAttrName = require('./xjs').quoteAttrName;
+var isValidIdentifier = require('./xjs').isValidIdentifier;
 
 /**
  * Customized desugar processor.
@@ -63,10 +64,15 @@ function visitReactTag(traverse, object, path, state) {
   var isFallbackTag = FALLBACK_TAGS.hasOwnProperty(nameObject.name);
   var tagOpening;
   if (isFallbackTag) {
-    tagOpening = jsxObjIdent + '["' + (nameObject.name) + '"]' + '('
+    if (isValidIdentifier(nameObject.name)) {
+      tagOpening = jsxObjIdent + '.' + (nameObject.name);
+    } else {
+      tagOpening = jsxObjIdent + '["' + (nameObject.name) + '"]';
+    }
   } else {
-    tagOpening = nameObject.name + '('
+    tagOpening = nameObject.name;
   }
+  tagOpening += '(';
   utils.append(tagOpening, state);
 
   utils.move(nameObject.range[1], state);
diff --git a/vendor/fbtransform/transforms/xjs.js b/vendor/fbtransform/transforms/xjs.js
index 27a8020f5ce5e..556ec90f1a48d 100644
--- a/vendor/fbtransform/transforms/xjs.js
+++ b/vendor/fbtransform/transforms/xjs.js
@@ -227,9 +227,13 @@ function renderXJSExpressionContainer(traverse, object, isLast, path, state) {
   return false;
 }
 
+function isValidIdentifier(attr) {
+  return (/^[a-z_$][a-z\d_$]*$/i.test(attr));
+}
+
 function quoteAttrName(attr) {
   // Quote invalid JS identifiers.
-  if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
+  if (!isValidIdentifier(attr)) {
     return "'" + attr + "'";
   }
   return attr;
@@ -239,3 +243,4 @@ exports.knownTags = knownTags;
 exports.renderXJSExpressionContainer = renderXJSExpressionContainer;
 exports.renderXJSLiteral = renderXJSLiteral;
 exports.quoteAttrName = quoteAttrName;
+exports.isValidIdentifier = isValidIdentifier;

From 6899fcecba0349d35cc40ca48ac8e19968344606 Mon Sep 17 00:00:00 2001
From: Nick <nschaubeck@gmail.com>
Date: Tue, 11 Mar 2014 11:04:09 -0400
Subject: [PATCH 3/3] Address @spicyj PR comments.

---
 vendor/fbtransform/transforms/react.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js
index 1ceb21cdcb88e..ae039d2640ea6 100644
--- a/vendor/fbtransform/transforms/react.js
+++ b/vendor/fbtransform/transforms/react.js
@@ -64,10 +64,11 @@ function visitReactTag(traverse, object, path, state) {
   var isFallbackTag = FALLBACK_TAGS.hasOwnProperty(nameObject.name);
   var tagOpening;
   if (isFallbackTag) {
+    tagOpening = jsxObjIdent;
     if (isValidIdentifier(nameObject.name)) {
-      tagOpening = jsxObjIdent + '.' + (nameObject.name);
+      tagOpening += '.' + nameObject.name;
     } else {
-      tagOpening = jsxObjIdent + '["' + (nameObject.name) + '"]';
+      tagOpening += '[' + JSON.stringify(nameObject.name) + ']';
     }
   } else {
     tagOpening = nameObject.name;