[New] Support shorthand fragment syntax

lib/rules/jsx-curly-brace-presence.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const docsUrl = require('../util/docsUrl');
+const jsxUtil = require('../util/jsx');
 
 // ------------------------------------------------------------------------------
 // Constants
@@ -168,13 +169,12 @@ module.exports = {
     function lintUnnecessaryCurly(JSXExpressionNode) {
       const expression = JSXExpressionNode.expression;
       const expressionType = expression.type;
-      const parentType = JSXExpressionNode.parent.type;
 
       if (
         (expressionType === 'Literal' || expressionType === 'JSXText') &&
           typeof expression.value === 'string' &&
           !needToEscapeCharacterForJSX(expression.raw) && (
-          parentType === 'JSXElement' ||
+          jsxUtil.isJSX(JSXExpressionNode.parent) ||
           !containsQuoteCharacters(expression.value)
         )
       ) {
@@ -183,32 +183,30 @@ module.exports = {
         expressionType === 'TemplateLiteral' &&
           expression.expressions.length === 0 &&
           !needToEscapeCharacterForJSX(expression.quasis[0].value.raw) && (
-          parentType === 'JSXElement' ||
+          jsxUtil.isJSX(JSXExpressionNode.parent) ||
           !containsQuoteCharacters(expression.quasis[0].value.cooked)
         )
       ) {
         reportUnnecessaryCurly(JSXExpressionNode);
       }
     }
 
-    function areRuleConditionsSatisfied(parentType, config, ruleCondition) {
+    function areRuleConditionsSatisfied(parent, config, ruleCondition) {
       return (
-        parentType === 'JSXAttribute' &&
+        parent.type === 'JSXAttribute' &&
           typeof config.props === 'string' &&
           config.props === ruleCondition
       ) || (
-        parentType === 'JSXElement' &&
+        jsxUtil.isJSX(parent) &&
           typeof config.children === 'string' &&
           config.children === ruleCondition
       );
     }
 
     function shouldCheckForUnnecessaryCurly(parent, config) {
-      const parentType = parent.type;
-
       // If there are more than one JSX child, there is no need to check for
       // unnecessary curly braces.
-      if (parentType === 'JSXElement' && parent.children.length !== 1) {
+      if (jsxUtil.isJSX(parent) && parent.children.length !== 1) {
         return false;
       }
 
@@ -220,7 +218,7 @@ module.exports = {
         return false;
       }
 
-      return areRuleConditionsSatisfied(parentType, config, OPTION_NEVER);
+      return areRuleConditionsSatisfied(parent, config, OPTION_NEVER);
     }
 
     function shouldCheckForMissingCurly(parent, config) {
@@ -232,7 +230,7 @@ module.exports = {
         return false;
       }
 
-      return areRuleConditionsSatisfied(parent.type, config, OPTION_ALWAYS);
+      return areRuleConditionsSatisfied(parent, config, OPTION_ALWAYS);
     }
 
     // --------------------------------------------------------------------------

lib/util/Components.js

@@ -11,6 +11,7 @@ const variableUtil = require('./variable');
 const pragmaUtil = require('./pragma');
 const astUtil = require('./ast');
 const propTypes = require('./propTypes');
+const jsxUtil = require('./jsx');
 
 function getId(node) {
   return node && node.range.join(':');
@@ -349,12 +350,12 @@ function componentRule(rule, context) {
       const returnsConditionalJSXConsequent =
         node[property] &&
         node[property].type === 'ConditionalExpression' &&
-        node[property].consequent.type === 'JSXElement'
+        jsxUtil.isJSX(node[property].consequent)
       ;
       const returnsConditionalJSXAlternate =
         node[property] &&
         node[property].type === 'ConditionalExpression' &&
-        node[property].alternate.type === 'JSXElement'
+        jsxUtil.isJSX(node[property].alternate)
       ;
       const returnsConditionalJSX =
         strict ?
@@ -363,7 +364,7 @@ function componentRule(rule, context) {
 
       const returnsJSX =
         node[property] &&
-        node[property].type === 'JSXElement'
+        jsxUtil.isJSX(node[property])
       ;
       const returnsReactCreateElement = this.isReactCreateElement(node[property]);
 

lib/util/jsx.js

@@ -9,7 +9,7 @@ const COMPAT_TAG_REGEX = /^[a-z]|\-/;
 
 /**
  * Checks if a node represents a DOM element.
- * @param {String} node - JSXOpeningElement to check.
+ * @param {object} node - JSXOpeningElement to check.
  * @returns {boolean} Whether or not the node corresponds to a DOM element.
  */
 function isDOMComponent(node) {
@@ -25,6 +25,16 @@ function isDOMComponent(node) {
   return COMPAT_TAG_REGEX.test(name);
 }
 
+/**
+ * Checks if a node represents a JSX element or fragment.
+ * @param {object} node - node to check.
+ * @returns {boolean} Whether or not the node if a JSX element or fragment.
+ */
+function isJSX(node) {
+  return ['JSXElement', 'JSXFragment'].indexOf(node.type) >= 0;
+}
+
 module.exports = {
-  isDOMComponent: isDOMComponent
+  isDOMComponent: isDOMComponent,
+  isJSX: isJSX
 };

tests/lib/rules/jsx-curly-brace-presence.js

@@ -32,6 +32,10 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
     {
       code: '<App {...props}>foo</App>'
     },
+    {
+      code: '<>foo</>',
+      parser: 'babel-eslint'
+    },
     {
       code: '<App {...props}>foo</App>',
       options: [{props: 'never'}]
@@ -259,6 +263,13 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
       options: [{children: 'never'}],
       errors: [{message: unnecessaryCurlyMessage}]
     },
+    {
+      code: '<>{`foo`}</>',
+      output: '<>foo</>',
+      parser: 'babel-eslint',
+      options: [{children: 'never'}],
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
     {
       code: `<MyComponent>{'foo'}</MyComponent>`,
       output: '<MyComponent>foo</MyComponent>',