feat(no-misused-observables): check jsx attributes

Author: JasonWeinzierl

src/etc/is.ts

@@ -78,6 +78,10 @@ export function isImportSpecifier(node: TSESTree.Node): node is TSESTree.ImportS
   return node.type === AST_NODE_TYPES.ImportSpecifier;
 }
 
+export function isJSXExpressionContainer(node: TSESTree.Node): node is TSESTree.JSXExpressionContainer {
+  return node.type === AST_NODE_TYPES.JSXExpressionContainer;
+}
+
 export function isLiteral(node: TSESTree.Node): node is TSESTree.Literal {
   return node.type === AST_NODE_TYPES.Literal;
 }

src/rules/no-misused-observables.ts

@@ -1,7 +1,7 @@
 import { TSESTree as es, ESLintUtils, TSESLint } from '@typescript-eslint/utils';
 import * as tsutils from 'ts-api-utils';
 import ts from 'typescript';
-import { getTypeServices } from '../etc';
+import { getTypeServices, isJSXExpressionContainer } from '../etc';
 import { ruleCreator } from '../utils';
 
 // The implementation of this rule is similar to typescript-eslint's no-misused-promises. MIT License.
@@ -50,7 +50,7 @@ export const noMisusedObservablesRule = ruleCreator({
     const voidReturnChecks: TSESLint.RuleListener = {
       CallExpression: checkArguments,
       NewExpression: checkArguments,
-      // JSXAttribute: checkJSXAttribute,
+      JSXAttribute: checkJSXAttribute,
       // ClassDeclaration: checkClassLikeOrInterfaceNode,
       // ClassExpression: checkClassLikeOrInterfaceNode,
       // TSInterfaceDeclaration: checkClassLikeOrInterfaceNode,
@@ -92,6 +92,19 @@ export const noMisusedObservablesRule = ruleCreator({
       }
     }
 
+    function checkJSXAttribute(node: es.JSXAttribute): void {
+      if (!node.value || !isJSXExpressionContainer(node.value)) {
+        return;
+      }
+
+      if (couldReturnObservable(node.value.expression)) {
+        context.report({
+          messageId: 'forbiddenVoidReturnAttribute',
+          node: node.value,
+        });
+      }
+    }
+
     return {
       ...(checksVoidReturn ? voidReturnChecks : {}),
       ...(checksSpreads ? spreadChecks : {}),

tests/rules/no-misused-observables.test.ts

@@ -37,6 +37,32 @@ ruleTester({ types: true }).run('no-misused-observables', noMisusedObservablesRu
 
       [1, 2, 3].forEach(i => { return of(i); });
     `,
+    {
+      code: stripIndent`
+        // void return attribute; explicitly allowed
+        import { Observable, of } from "rxjs";
+        import React, { FC } from "react";
+
+        const Component: FC<{ foo: () => void }> = () => <div />;
+        return (
+          <Component foo={() => of(42)} />
+        );
+      `,
+      options: [{ checksVoidReturn: false }],
+      languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+    },
+    {
+      code: stripIndent`
+        // void return attribute; unrelated
+        import React, { FC } from "react";
+
+        const Component: FC<{ foo: () => void }> = () => <div />;
+        return (
+          <Component foo={() => 42} />
+        );
+      `,
+      languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+    },
     {
       code: stripIndent`
         // spread; explicitly allowed
@@ -102,6 +128,38 @@ ruleTester({ types: true }).run('no-misused-observables', noMisusedObservablesRu
                 ~~~~~~~~~~~~ [forbiddenVoidReturnArgument]
       `,
     ),
+    fromFixture(
+      stripIndent`
+        // void return attribute; block body
+        import { Observable, of } from "rxjs";
+        import React, { FC } from "react";
+
+        const Component: FC<{ foo: () => void }> = () => <div />;
+        return (
+          <Component foo={(): Observable<number> => { return of(42); }} />
+                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [forbiddenVoidReturnAttribute]
+        );
+      `,
+      {
+        languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+      },
+    ),
+    fromFixture(
+      stripIndent`
+        // void return attribute; inline body
+        import { Observable, of } from "rxjs";
+        import React, { FC } from "react";
+
+        const Component: FC<{ foo: () => void }> = () => <div />;
+        return (
+          <Component foo={() => of(42)} />
+                         ~~~~~~~~~~~~~~ [forbiddenVoidReturnAttribute]
+        );
+      `,
+      {
+        languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+      },
+    ),
     fromFixture(
       stripIndent`
         // spread variable