diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js index 9b6019a634b..ae039d2640e 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. @@ -61,10 +62,19 @@ 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; + if (isValidIdentifier(nameObject.name)) { + tagOpening += '.' + nameObject.name; + } else { + tagOpening += '[' + JSON.stringify(nameObject.name) + ']'; + } + } else { + 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 27a8020f5ce..556ec90f1a4 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;