Track JSX presence per-function, fixing some false negatives (#830)

Co-authored-by: fisker <lionkay@gmail.com>

rules/consistent-function-scoping.js

@@ -153,17 +153,21 @@ const create = context => {
 	const {scopeManager} = sourceCode;
 
 	const functions = [];
-	let hasJsx = false;
 
 	return {
-		'ArrowFunctionExpression, FunctionDeclaration': node => functions.push(node),
+		'ArrowFunctionExpression, FunctionDeclaration': () => {
+			functions.push(false);
+		},
 		JSXElement: () => {
 			// Turn off this rule if we see a JSX element because scope
 			// references does not include JSXElement nodes.
-			hasJsx = true;
+			if (functions.length !== 0) {
+				functions[functions.length - 1] = true;
+			}
 		},
 		':matches(ArrowFunctionExpression, FunctionDeclaration):exit': node => {
-			if (!hasJsx && !checkNode(node, scopeManager)) {
+			const currentFunctionHasJsx = functions.pop();
+			if (!currentFunctionHasJsx && !checkNode(node, scopeManager)) {
 				context.report({
 					node,
 					loc: getFunctionHeadLocation(node, sourceCode),
@@ -173,11 +177,6 @@ const create = context => {
 					}
 				});
 			}
-
-			functions.pop();
-			if (functions.length === 0) {
-				hasJsx = false;
-			}
 		}
 	};
 };

test/consistent-function-scoping.js

@@ -192,6 +192,32 @@ ruleTester.run('consistent-function-scoping', rule, {
 				return Bar;
 			};
 		`,
+		outdent`
+			const foo = <JSX/>;
+		`,
+		// Functions that could be extracted are conservatively ignored due to JSX masking references
+		outdent`
+				function Foo() {
+					function Bar () {
+						return <div />
+					}
+					return <div>{ Bar() }</div>
+				}
+		`,
+		outdent`
+			function foo() {
+				function bar() {
+					return <JSX a={foo()}/>;
+				}
+			}
+		`,
+		outdent`
+			function foo() {
+				function bar() {
+					return <JSX/>;
+				}
+			}
+		`,
 		// `this`
 		outdent`
 			function doFoo(Foo) {
@@ -594,6 +620,48 @@ ruleTester.run('consistent-function-scoping', rule, {
 				)
 			`,
 			errors: [createError('function \'baz\'')]
+		},
+		{
+			code: outdent`
+				function Foo() {
+					const Bar = <div />
+					function doBaz() {
+						return 42
+					}
+					return <div>{ doBaz() }</div>
+				}
+			`,
+			errors: [createError('function \'doBaz\'')]
+		},
+		{
+			code: outdent`
+				function Foo() {
+					function Bar () {
+						return <div />
+					}
+					function doBaz() {
+						return 42
+					}
+					return <div>{ doBaz() }</div>
+				}
+			`,
+			errors: [createError('function \'doBaz\'')]
+		},
+		// JSX
+		{
+			code: outdent`
+				function fn1() {
+					function a() {
+						return <JSX a={b()}/>;
+					}
+					function b() {}
+					function c() {}
+				}
+				function fn2() {
+					function foo() {}
+				}
+			`,
+			errors: ['b', 'c', 'foo'].map(functionName => createError(`function '${functionName}'`))
 		}
 	]
 });