Add support to JSX transform for <hyphenated-tags>

This only adds support for whitelisted tags, not arbitrary ones.

Closes react#1539

Author: zpao

vendor/fbtransform/transforms/__tests__/react-test.js

@@ -13,14 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * @emails javascript@lists.facebook.com
+ * @emails jeffmo@fb.com
  */
 "use strict";
 
 require('mock-modules').autoMockOff();
 
 describe('react jsx', function() {
   var transformAll = require('../../syntax.js').transformAll;
+  var xjs = require('../xjs.js');
+
+  // Add <font-face> to list of known tags to ensure that when we test support
+  // for hyphentated known tags, it's there.
+  // TODO: remove this when/if <font-face> is supported out of the box.
+  xjs.knownTags['font-face'] = true;
 
   var transform = function(code, options, excludes) {
     return transformAll(
@@ -366,6 +372,23 @@ describe('react jsx', function() {
     expect(transform(code).code).toBe(result);
   });
 
+  it('should allow deeper JS namespacing', function() {
+    var code = [
+      '/**',
+      ' * @jsx React.DOM',
+      ' */',
+      '<Namespace.DeepNamespace.Component />;'
+    ].join('\n');
+    var result = [
+      '/**',
+      ' * @jsx React.DOM',
+      ' */',
+      'Namespace.DeepNamespace.Component(null);'
+    ].join('\n');
+
+    expect(transform(code).code).toBe(result);
+  });
+
   it('should disallow XML namespacing', function() {
     var code = [
       '/**',
@@ -382,6 +405,24 @@ describe('react jsx', function() {
       '<Component { ... x } y\n={2 } z />';
     var result = HEADER +
       'Component(Object.assign({},   x , {y: \n2, z: true}))';
+
+    expect(transform(code).code).toBe(result);
+  });
+
+  it('should transform known hyphenated tags', function() {
+    var code = [
+      '/**',
+      ' * @jsx React.DOM',
+      ' */',
+      '<font-face />;'
+    ].join('\n');
+    var result = [
+      '/**',
+      ' * @jsx React.DOM',
+      ' */',
+      'React.DOM[\'font-face\'](null);'
+    ].join('\n');
+
     expect(transform(code).code).toBe(result);
   });
 
@@ -391,6 +432,17 @@ describe('react jsx', function() {
     ).not.toBeCalled();
   });
 
+  it('should throw for unknown hyphenated tags', function() {
+    var code = [
+      '/**',
+      ' * @jsx React.DOM',
+      ' */',
+      '<x-component />;'
+    ].join('\n');
+
+    expect(() => transform(code)).toThrow();
+  });
+
   it('calls assign with a new target object for spreads', function() {
     expectObjectAssign(
       '<Component {...x} />'

vendor/fbtransform/transforms/react.js

@@ -65,20 +65,46 @@ function visitReactTag(traverse, object, path, state) {
 
   utils.catchup(openingElement.range[0], state, trimLeft);
 
-
   if (nameObject.type === Syntax.XJSNamespacedName && nameObject.namespace) {
     throw new Error('Namespace tags are not supported. ReactJSX is not XML.');
   }
 
-  // Only identifiers can be fallback tags. XJSMemberExpressions are not.
-  var isFallbackTag =
-    nameObject.type === Syntax.XJSIdentifier &&
-    FALLBACK_TAGS.hasOwnProperty(nameObject.name);
+  // Only identifiers can be fallback tags or need quoting. We don't need to
+  // handle quoting for other types.
+  var didAddTag = false;
 
-  utils.append(isFallbackTag ? jsxObjIdent + '.' : '', state);
+  // Only identifiers can be fallback tags. XJSMemberExpressions are not.
+  if (nameObject.type === Syntax.XJSIdentifier) {
+    var tagName = nameObject.name;
+    var quotedTagName = quoteAttrName(tagName);
+
+    if (FALLBACK_TAGS.hasOwnProperty(tagName)) {
+      // "Properly" handle invalid identifiers, like <font-face>, which needs to
+      // be enclosed in quotes.
+      var predicate =
+        tagName === quotedTagName ?
+          ('.' + tagName) :
+          ('[' + quotedTagName + ']');
+      utils.append(jsxObjIdent + predicate, state);
+      utils.move(nameObject.range[1], state);
+      didAddTag = true;
+    } else if (tagName !== quotedTagName) {
+      // If we're in the case where we need to quote and but don't recognize the
+      // tag, throw.
+      throw new Error(
+        'Tags must be valid JS identifiers or a recognized special case. `<' +
+        tagName + '>` is not one of them.'
+      );
+    }
+  }
 
-  utils.move(nameObject.range[0], state);
-  utils.catchup(nameObject.range[1], state);
+  // Use utils.catchup in this case so we can easily handle XJSMemberExpressions
+  // which look like Foo.Bar.Baz. This also handles unhyphenated XJSIdentifiers
+  // that aren't fallback tags.
+  if (!didAddTag) {
+    utils.move(nameObject.range[0], state);
+    utils.catchup(nameObject.range[1], state);
+  }
 
   utils.append('(', state);