🐛 fix: handle functions better

Author: ColeWalker

src/strict-jsx-conditionals.ts

@@ -63,7 +63,8 @@ module.exports = {
     }
     interface MakeFixFunctionArrayParams {
       tokens: TSESTree.Token[] | null
-      preferBoolean?: Boolean
+      preferBoolean?: boolean
+      callExpression?: boolean
     }
 
     type MakeFixFunctionReturnType =
@@ -77,32 +78,36 @@ module.exports = {
     const makeFixFunctionArray = ({
       tokens,
       preferBoolean,
+      callExpression,
     }: MakeFixFunctionArrayParams): MakeFixFunctionArrayReturnType => {
       if (!tokens) {
         return null
       }
 
       if (preferBoolean) {
         return (fixer: TSESLint.RuleFixer): TSESLint.RuleFix[] => {
-          return tokens.map(token => {
-            if (token.value === '!') {
-              return fixer.remove(token)
-            } else {
-              return fixer.replaceText(token, `Boolean(${token.value})`)
-            }
-          })
+          const rest = tokens
+            .filter((t, i) => !(i < 2 && t.value === '!'))
+            .map(x => x.value)
+            .join('')
+          const lastToken = tokens.pop()
+          const newText = `Boolean(${rest})`
+          if (!lastToken) {
+            throw new Error('Error occurred during auto-fix')
+          }
+          return [
+            ...tokens.map(t => fixer.remove(t)),
+            fixer.replaceText(lastToken, newText),
+          ]
         }
       } else {
         return (fixer: TSESLint.RuleFixer): TSESLint.RuleFix[] => {
           return tokens
             .map(token => {
-              if (token.value === '(' || token.value === ')') {
-                return fixer.remove(token)
-              }
-              if (token.value === 'Boolean') {
-                return fixer.remove(token)
-              }
-              if (token.type === AST_TOKEN_TYPES.Identifier) {
+              if (
+                token.type === AST_TOKEN_TYPES.Identifier &&
+                token.value !== 'Boolean'
+              ) {
                 return fixer.insertTextBefore(token, '!!')
               }
             })
@@ -141,7 +146,10 @@ module.exports = {
             )
           ) {
             const token = sourceCode.getFirstToken(exp.left)
-
+            let tokens: TSESTree.Token[] | null = null
+            if (exp.left.type === AST_NODE_TYPES.CallExpression) {
+              tokens = sourceCode.getTokens(exp.left)
+            }
             context.report({
               node,
               loc: {
@@ -155,10 +163,16 @@ module.exports = {
                 },
               },
               messageId: 'someId',
-              fix: makeFixFunction({
-                token,
-                preferBoolean: options?.preferBoolean,
-              }),
+              fix: tokens
+                ? makeFixFunctionArray({
+                    tokens,
+                    preferBoolean: options?.preferBoolean,
+                    callExpression: true,
+                  })
+                : makeFixFunction({
+                    token,
+                    preferBoolean: options?.preferBoolean,
+                  }),
             })
           }
 

src/strict-ts-conditionals.test.ts

@@ -25,6 +25,9 @@ ruleTester.run('boolean-jsx-conditionals', rule as any, {
     `
  const Component = ({check}: {check: string}) => (<div>{Boolean(check.length) && <p>Check</p>}</div>)
     `,
+    `
+ const Component = ({check}: {check: ()=>boolean}) => (<div>{check() && <p>Check</p>}</div>)
+    `,
   ],
 
   invalid: [
@@ -43,6 +46,11 @@ ruleTester.run('boolean-jsx-conditionals', rule as any, {
       output: `const Component = ({check}: {check: boolean | string }) => (<div>{!!check && <p>Check</p>}</div>)`,
       errors: [{ messageId: 'someId' }],
     },
+    {
+      code: `const Component = ({check}: {check: ()=>string }) => (<div>{check() && <p>Check</p>}</div>)`,
+      output: `const Component = ({check}: {check: ()=>string }) => (<div>{!!check() && <p>Check</p>}</div>)`,
+      errors: [{ messageId: 'someId' }],
+    },
     {
       code: `const Component = ({check}: {check: boolean | null }) => (<div>{check && <p>Check</p>}</div>)`,
       output: `const Component = ({check}: {check: boolean | null }) => (<div>{!!check && <p>Check</p>}</div>)`,
@@ -63,8 +71,18 @@ ruleTester.run('boolean-jsx-conditionals', rule as any, {
       options: [{ preferBoolean: true }],
     },
     {
-      code: `const Component = ({check}: {check: boolean | null }) => (<div>{!!check && <p>Check</p>}</div>)`,
-      output: `const Component = ({check}: {check: boolean | null }) => (<div>{Boolean(check) && <p>Check</p>}</div>)`,
+      code: `const Component = ({check}: {check:(arg: string)=>string }) => (<div>{check('some') && <p>Check</p>}</div>)`,
+      output: `const Component = ({check}: {check:(arg: string)=>string }) => (<div>{Boolean(check('some')) && <p>Check</p>}</div>)`,
+      errors: [
+        {
+          messageId: 'someId',
+        },
+      ],
+      options: [{ preferBoolean: true }],
+    },
+    {
+      code: `const Component = ({check}: {check: boolean | null }) => (<div>{!!check() && <p>Check</p>}</div>)`,
+      output: `const Component = ({check}: {check: boolean | null }) => (<div>{Boolean(check()) && <p>Check</p>}</div>)`,
       errors: [
         {
           messageId: 'someId',
@@ -73,8 +91,8 @@ ruleTester.run('boolean-jsx-conditionals', rule as any, {
       options: [{ preferBoolean: true, normalize: true }],
     },
     {
-      code: `const Component = ({check}: {check: boolean | null }) => (<div>{Boolean(check) && <p>Check</p>}</div>)`,
-      output: `const Component = ({check}: {check: boolean | null }) => (<div>{!!check && <p>Check</p>}</div>)`,
+      code: `const Component = ({check}: {check: boolean | null }) => (<div>{Boolean(check()) && <p>Check</p>}</div>)`,
+      output: `const Component = ({check}: {check: boolean | null }) => (<div>{!!check() && <p>Check</p>}</div>)`,
       errors: [
         {
           messageId: 'someId',