feat(linter): augment no_unused_vars rule to support react-jsx-uses-vars

crates/oxc_linter/src/rules/eslint/no_unused_vars/tests/mod.rs

@@ -1,5 +1,6 @@
 mod eslint;
 mod oxc;
+mod react;
 mod typescript_eslint;
 
 use super::NoUnusedVars;

crates/oxc_linter/src/rules/eslint/no_unused_vars/tests/react.rs

@@ -0,0 +1,133 @@
+//! Test cases from eslint-plugin-react (jsx/no-uses-vars)
+
+use super::NoUnusedVars;
+use crate::{tester::Tester, RuleMeta as _};
+
+/// !!!! STOP !!!!
+/// Are you fixing a bug in this rule and want to add a test case? Please put
+/// it in `oxc.rs`. These are _only_ the test cases ported from the original
+/// ESLint rule.
+#[test]
+fn test() {
+    let pass = vec![
+        "
+			var App;
+			React.render(<App/>);
+        ",
+        "
+			function foo() {
+				var App;
+				var bar = React.render(<App/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			var a = 1;
+			React.render(<img src={a} />);
+        ",
+        "
+			var App;
+			function f() {
+				return <App />;
+			}
+			f();
+        ",
+        "
+			var App;
+			<App.Hello />
+        ",
+        "
+			class HelloMessage {};
+			<HelloMessage />
+        ",
+        "
+			class HelloMessage {
+				render() {
+				var HelloMessage = <div>Hello</div>;
+				return HelloMessage;
+				}
+			};
+			<HelloMessage />
+        ",
+        "
+			function foo() {
+				var App = { Foo: { Bar: {} } };
+				var bar = React.render(<App.Foo.Bar/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			function foo() {
+				var App = { Foo: { Bar: { Baz: {} } } };
+				var bar = React.render(<App.Foo.Bar.Baz/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			var object;
+			React.render(<object.Tag />);
+		",
+        "
+			var object;
+			React.render(<object.tag />);
+		",
+    ];
+
+    let fail = vec![
+        "
+			var App;
+		",
+        r#"
+			var App;
+          	var unused;
+          	React.render(<App unused=""/>);
+		"#,
+        "
+			var App;
+          	var Hello;
+          	React.render(<App:Hello/>);
+		",
+        r#"
+			var Button;
+			var Input;
+			React.render(<Button.Input unused=""/>);
+		"#,
+        "
+			class unused {}
+		",
+        "
+			class HelloMessage {
+				render() {
+					var HelloMessage = <div>Hello</div>;
+					return HelloMessage;
+				}
+			}
+		",
+        "
+			import {Hello} from 'Hello';
+			function Greetings() {
+				const Hello = require('Hello').default;
+				return <Hello />;
+			}
+			Greetings();
+		",
+        "
+			var lowercase;
+          	React.render(<lowercase />);
+		",
+        "
+			function Greetings(div) {
+				return <div />;
+			}
+			Greetings();
+		",
+    ];
+
+    Tester::new(NoUnusedVars::NAME, NoUnusedVars::CATEGORY, pass, fail)
+        .intentionally_allow_no_fix_tests()
+        .with_snapshot_suffix("eslint-plugin-react")
+        .test_and_snapshot();
+}

crates/oxc_linter/src/snapshots/eslint_no_unused_vars@eslint-plugin-react.snap

@@ -0,0 +1,103 @@
+---
+source: crates/oxc_linter/src/tester.rs
+snapshot_kind: text
+---
+  ⚠ eslint(no-unused-vars): Variable 'App' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var App;
+   ·                 ─┬─
+   ·                  ╰── 'App' is declared here
+ 3 │         
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'unused' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:16]
+ 2 │             var App;
+ 3 │             var unused;
+   ·                 ───┬──
+   ·                    ╰── 'unused' is declared here
+ 4 │             React.render(<App unused=""/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'App' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var App;
+   ·                 ─┬─
+   ·                  ╰── 'App' is declared here
+ 3 │             var Hello;
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'Hello' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:16]
+ 2 │             var App;
+ 3 │             var Hello;
+   ·                 ──┬──
+   ·                   ╰── 'Hello' is declared here
+ 4 │             React.render(<App:Hello/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'Input' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:8]
+ 2 │             var Button;
+ 3 │             var Input;
+   ·                 ──┬──
+   ·                   ╰── 'Input' is declared here
+ 4 │             React.render(<Button.Input unused=""/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Class 'unused' is declared but never used.
+   ╭─[no_unused_vars.tsx:2:10]
+ 1 │ 
+ 2 │             class unused {}
+   ·                   ───┬──
+   ·                      ╰── 'unused' is declared here
+ 3 │         
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Class 'HelloMessage' is declared but never used.
+   ╭─[no_unused_vars.tsx:2:10]
+ 1 │ 
+ 2 │             class HelloMessage {
+   ·                   ──────┬─────
+   ·                         ╰── 'HelloMessage' is declared here
+ 3 │                 render() {
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Identifier 'Hello' is imported but never used.
+   ╭─[no_unused_vars.tsx:2:12]
+ 1 │ 
+ 2 │             import {Hello} from 'Hello';
+   ·                     ──┬──
+   ·                       ╰── 'Hello' is imported here
+ 3 │             function Greetings() {
+   ╰────
+  help: Consider removing this import.
+
+  ⚠ eslint(no-unused-vars): Variable 'lowercase' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var lowercase;
+   ·                 ────┬────
+   ·                     ╰── 'lowercase' is declared here
+ 3 │             React.render(<lowercase />);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Parameter 'div' is declared but never used. Unused parameters should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:23]
+ 1 │ 
+ 2 │             function Greetings(div) {
+   ·                                ─┬─
+   ·                                 ╰── 'div' is declared here
+ 3 │                 return <div />;
+   ╰────
+  help: Consider removing this parameter.