fix(lint): useNamingConvention should't ignore jsx component name bin…

…ding (#2264)

CHANGELOG.md

@@ -39,6 +39,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Fix [#2248](https://github.com/biomejs/biome/issues/2248). `lint/a11y/useButtonType` should not trigger when button element with spread attribute. Contributed by @fireairforce
 
+- Fix [#2216](https://github.com/biomejs/biome/issues/2216). `lint/style/useNamingConvention` should not ignore JSX Component name binding. Contributed by @fireairforce
+
 #### Enhancements
 
 - Add support for object property members in the rule `useSortedClasses`. Contributed by @ematipico

crates/biome_js_analyze/src/lint/style/use_naming_convention.rs

@@ -429,6 +429,7 @@ impl Rule for UseNamingConvention {
                     // Property parameters are also class properties.
                     return None;
                 }
+
                 Some(AnyJsRenamableDeclaration::JsIdentifierBinding(
                     binding.clone(),
                 ))

crates/biome_js_analyze/src/utils/rename.rs

@@ -4,8 +4,8 @@ use biome_diagnostics::{Diagnostic, Location, Severity};
 use biome_js_semantic::{ReferencesExtensions, SemanticModel};
 use biome_js_syntax::{
     binding_ext::AnyJsIdentifierBinding, JsIdentifierAssignment, JsIdentifierBinding, JsLanguage,
-    JsReferenceIdentifier, JsSyntaxKind, JsSyntaxNode, JsSyntaxToken, TextRange,
-    TsIdentifierBinding,
+    JsReferenceIdentifier, JsSyntaxKind, JsSyntaxNode, JsSyntaxToken, JsxReferenceIdentifier,
+    TextRange, TsIdentifierBinding,
 };
 use biome_rowan::{AstNode, BatchMutation, SyntaxNodeCast, TriviaPiece};
 use serde::{Deserialize, Serialize};
@@ -294,6 +294,11 @@ impl RenameSymbolExtensions for BatchMutation<JsLanguage> {
                     .clone()
                     .cast::<JsIdentifierAssignment>()
                     .and_then(|node| node.name_token().ok()),
+                JsSyntaxKind::JSX_REFERENCE_IDENTIFIER => reference
+                    .syntax()
+                    .clone()
+                    .cast::<JsxReferenceIdentifier>()
+                    .and_then(|node| node.value_token().ok()),
                 _ => None,
             };
 

crates/biome_js_analyze/tests/specs/style/useNamingConvention/validComponentName.js

@@ -0,0 +1,5 @@
+function loadWidgetComponent(widgetId) {
+  const Component = getWidgetComponent(widgetId);
+  if (!Component) return null;
+  return <Component />;
+}

crates/biome_js_analyze/tests/specs/style/useNamingConvention/validComponentName.js.snap

@@ -0,0 +1,40 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: validComponentName.js
+---
+# Input
+```jsx
+function loadWidgetComponent(widgetId) {
+  const Component = getWidgetComponent(widgetId);
+  if (!Component) return null;
+  return <Component />;
+}
+```
+
+# Diagnostics
+```
+validComponentName.js:2:9 lint/style/useNamingConvention  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! This local const name should be in camelCase.
+  
+    1 │ function loadWidgetComponent(widgetId) {
+  > 2 │   const Component = getWidgetComponent(widgetId);
+      │         ^^^^^^^^^
+    3 │   if (!Component) return null;
+    4 │   return <Component />;
+  
+  i The name could be renamed to `component`.
+  
+  i Safe fix: Rename this symbol in camelCase.
+  
+    1 1 │   function loadWidgetComponent(widgetId) {
+    2   │ - ··const·Component·=·getWidgetComponent(widgetId);
+    3   │ - ··if·(!Component)·return·null;
+    4   │ - ··return·<Component·/>;
+      2 │ + ··const·component·=·getWidgetComponent(widgetId);
+      3 │ + ··if·(!component)·return·null;
+      4 │ + ··return·<component·/>;
+    5 5 │   }
+  
+
+```

crates/biome_js_formatter/src/syntax_rewriter.rs

@@ -110,7 +110,7 @@ impl JsFormatSyntaxRewriter {
     ///
     /// because the `Long` has two leading new lines after removing parentheses, the one after `a` and the one after the opening `(`.
     ///
-    /// However, it is important to leave at least one leading new line in front of the token's leading trivia if there's a comment in the leading trivia because
+    /// However, it is important to leave at least one leading new line in front of the token's leading trivia if there's a comment in the leading trivia
     /// because we want that leading comments that are preceded by a line break to be formatted on their own line.
     ///
     /// ```javascript

website/src/content/docs/internals/changelog.md

@@ -45,6 +45,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Fix [#2248](https://github.com/biomejs/biome/issues/2248). `lint/a11y/useButtonType` should not trigger when button element with spread attribute. Contributed by @fireairforce
 
+- Fix [#2216](https://github.com/biomejs/biome/issues/2216). `lint/style/useNamingConvention` should not ignore JSX Component name binding. Contributed by @fireairforce
+
 #### Enhancements
 
 - Add support for object property members in the rule `useSortedClasses`. Contributed by @ematipico