[fix]jsx-curly-braces-presence: add check for adjacent JsxExpressio…

…nContainers instead of multiple children
jsx-eslint · Sep 12, 2019 · 465ea48 · 465ea48
1 parent 1e38e43
commit 465ea48
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 9 deletions.
diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js
@@ -209,22 +209,46 @@ module.exports = {
       return node.type && node.type === 'Literal' && node.value && !(/\S/.test(node.value));
     }
 
-    function hasManyChildren(children) {
+    function getAdjacentSiblings(node, children) {
+      for (let i = 1; i < children.length - 1; i++) {
+        const child = children[i];
+        if (node === child) {
+          return [children[i - 1], children[i + 1]];
+        }
+      }
+      if (node === children[0] && children[1]) {
+        return [children[1]];
+      }
+      if (node === children[children.length - 1] && children[children.length - 2]) {
+        return [children[children.length - 2]];
+      }
+      return [];
+    }
+
+    function hasAdjacentJsxExpressionContainers(node, children) {
       const childrenExcludingWhitespaceLiteral = children.filter(child => !isWhiteSpaceLiteral(child));
-      return childrenExcludingWhitespaceLiteral.length > 1;
+      const adjSiblings = getAdjacentSiblings(node, childrenExcludingWhitespaceLiteral);
+
+      for (let i = 0; i < adjSiblings.length; i++) {
+        const currentChild = adjSiblings[i];
+        if (currentChild.type && currentChild.type === 'JSXExpressionContainer') {
+          return true;
+        }
+      }
+      return false;
     }
 
-    function shouldCheckForUnnecessaryCurly(parent, config) {
-      // If there are more than one JSX child excluding white-space `Literal`,
-      // there is no need to check for unnecessary curly braces.
-      if (jsxUtil.isJSX(parent) && hasManyChildren(parent.children)) {
+    function shouldCheckForUnnecessaryCurly(parent, node, config) {
+      // If there are adjacent `JsxExpressionContainer` then there is no need,
+      // to check for unnecessary curly braces.
+      if (jsxUtil.isJSX(parent) && hasAdjacentJsxExpressionContainers(node, parent.children)) {
         return false;
       }
 
       if (
         parent.children &&
         parent.children.length === 1 &&
-        containsWhitespaceExpression(parent.children[0])
+        containsWhitespaceExpression(node)
       ) {
         return false;
       }
@@ -250,7 +274,7 @@ module.exports = {
 
     return {
       JSXExpressionContainer: (node) => {
-        if (shouldCheckForUnnecessaryCurly(node.parent, userConfig)) {
+        if (shouldCheckForUnnecessaryCurly(node.parent, node, userConfig)) {
           lintUnnecessaryCurly(node);
         }
       },

diff --git a/tests/lib/rules/jsx-curly-brace-presence.js b/tests/lib/rules/jsx-curly-brace-presence.js
@@ -293,6 +293,16 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
       `,
       parser: parsers.BABEL_ESLINT,
       options: [{children: 'never'}]
+    },
+    {
+      code: `
+        <MyComponent>
+          foo
+          <div>bar</div>
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}]
     }
   ],
 
@@ -366,19 +376,46 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
           <div>
             {'bar'}
           </div>
+          {'baz'}
         </MyComponent>
       `,
       output: `
+        <MyComponent>
+          foo
+          <div>
+            bar
+          </div>
+          baz
+        </MyComponent>
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{children: 'never'}],
+      errors: 3
+    },
+    {
+      code: `
         <MyComponent>
           {'foo'}
+          <div>
+            {'bar'}
+          </div>
+          {'baz'}
+          {'some-complicated-exp'}
+        </MyComponent>
+      `,
+      output: `
+        <MyComponent>
+          foo
           <div>
             bar
           </div>
+          {'baz'}
+          {'some-complicated-exp'}
         </MyComponent>
       `,
       parser: parsers.BABEL_ESLINT,
       options: [{children: 'never'}],
-      errors: [{message: unnecessaryCurlyMessage}]
+      errors: 2
     },
     {
       code: `<MyComponent prop='bar'>foo</MyComponent>`,