feat(linter): add excludedComponents option to useUniqueElementIds (#6723)

Co-authored-by: Emanuele Stoppa <[email protected]>

Co-authored-by: ematipico <[email protected]>
Co-authored-by: dyc3 <[email protected]>

Author: 3 people

.changeset/vast-tables-dance.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+`useUniqueElementIds` now has an `excludedComponents` option to support elements using `id` prop for reasons not related to DOM element id. Fixed [#6722](https://github.com/biomejs/biome/issues/6722).

crates/biome_js_analyze/src/lint/nursery/use_unique_element_ids.rs

@@ -6,7 +6,7 @@ use biome_js_syntax::{
     AnyJsExpression, AnyJsxAttributeValue, JsCallExpression, JsPropertyObjectMember, JsxAttribute,
     jsx_ext::AnyJsxElement,
 };
-use biome_rowan::{AstNode, declare_node_union};
+use biome_rowan::{AstNode, TokenText, declare_node_union};
 use biome_rule_options::use_unique_element_ids::UseUniqueElementIdsOptions;
 
 use crate::react::{ReactApiCall, ReactCreateElementCall};
@@ -44,6 +44,37 @@ declare_lint_rule! {
     /// React.createElement("div", { id });
     /// ```
     ///
+    /// ## Options
+    ///
+    /// The following option is available
+    ///
+    /// ### `excludedComponents`
+    ///
+    /// List of unqualified component names to ignore.
+    /// Use it to list components expecting an `id` attribute that does not represent
+    /// a DOM element ID.
+    ///
+    /// **Default**: empty list.
+    ///
+    /// ```json,options
+    /// {
+    ///     "options": {
+    ///         "excludedComponents": [
+    ///             "FormattedMessage"
+    ///         ]
+    ///     }
+    /// }
+    /// ```
+    ///
+    /// ```jsx,use_options
+    /// <FormattedMessage id="static" />
+    /// ```
+    ///
+    /// ```jsx,use_options
+    /// <Library.FormattedMessage id="static" />
+    /// ```
+    ///
+    ///
     pub UseUniqueElementIds {
         version: "2.0.0",
         name: "useUniqueElementIds",
@@ -63,16 +94,37 @@ declare_node_union! {
 }
 
 impl UseUniqueElementIdsQuery {
-    fn find_id_attribute(&self, model: &SemanticModel) -> Option<IdProp> {
+    fn create_element_call(&self, model: &SemanticModel) -> Option<ReactCreateElementCall> {
         match self {
-            Self::AnyJsxElement(jsx) => jsx.find_attribute_by_name("id").map(IdProp::from),
             Self::JsCallExpression(expression) => {
-                let react_create_element =
-                    ReactCreateElementCall::from_call_expression(expression, model)?;
-                react_create_element
-                    .find_prop_by_name("id")
-                    .map(IdProp::from)
+                ReactCreateElementCall::from_call_expression(expression, model)
             }
+            &Self::AnyJsxElement(_) => None,
+        }
+    }
+
+    fn element_name(&self, model: &SemanticModel) -> Option<TokenText> {
+        match self {
+            Self::AnyJsxElement(jsx) => jsx
+                .name_value_token()
+                .ok()
+                .map(|tok| tok.token_text_trimmed()),
+            Self::JsCallExpression(_) => self
+                .create_element_call(model)?
+                .element_type
+                .as_any_js_expression()?
+                .get_callee_member_name()
+                .map(|tok| tok.token_text_trimmed()),
+        }
+    }
+
+    fn find_id_attribute(&self, model: &SemanticModel) -> Option<IdProp> {
+        match self {
+            Self::AnyJsxElement(jsx) => jsx.find_attribute_by_name("id").map(IdProp::from),
+            Self::JsCallExpression(_) => self
+                .create_element_call(model)?
+                .find_prop_by_name("id")
+                .map(IdProp::from),
         }
     }
 }
@@ -86,6 +138,13 @@ impl Rule for UseUniqueElementIds {
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
         let model = ctx.model();
+        let options = ctx.options();
+        if node
+            .element_name(model)
+            .is_some_and(|name| options.excluded_components.contains(name.text()))
+        {
+            return None;
+        }
         let id_attribute = node.find_id_attribute(model)?;
 
         match id_attribute {

crates/biome_js_analyze/src/react/components.rs

@@ -198,7 +198,7 @@ impl ReactComponentInfo {
 
     /// Creates a `ReactComponentInfo` from an expression.
     /// It is not guaranteed that the expression is a React component,
-    /// but if any reqiuirements are not met, it will return `None`.
+    /// but if any requirements are not met, it will return `None`.
     /// Never returns a name, can only return a name hint.
     pub(crate) fn from_expression(syntax: &SyntaxNode<JsLanguage>) -> Option<Self> {
         let any_expression = AnyJsExpression::cast_ref(syntax)?;

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/allowlist.jsx

@@ -0,0 +1,33 @@
+// allowed
+function WithJsx() {
+	return <FormattedMessage id="abc"></FormattedMessage>
+}
+
+function WithJsxSelfClosing() {
+	return <FormattedMessage id="abc"/>
+}
+
+function WithJsxNamespaced() {
+	return <Library.FormattedMessage id="abc"/>
+}
+
+function WithCreateElement() {
+	return React.createElement(FormattedMessage, {id: "abc"})
+}
+
+function WithCreateElement2() {
+	return React.createElement(Library.FormattedMessage, {id: "abc"})
+}
+
+// denied
+function WithJsxOther() {
+	return <OtherFormattedMessage id="abc"></OtherFormattedMessage>
+}
+
+function WithCreateElementOther() {
+	return React.createElement(OtherFormattedMessage, {id: "abc"})
+}
+
+function WithCreateElementWronglyQuoted() {
+	return React.createElement("FormattedMessage", {id: "abc"})
+}

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/allowlist.jsx.snap

@@ -0,0 +1,91 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: allowlist.jsx
+---
+# Input
+```jsx
+// allowed
+function WithJsx() {
+	return <FormattedMessage id="abc"></FormattedMessage>
+}
+
+function WithJsxSelfClosing() {
+	return <FormattedMessage id="abc"/>
+}
+
+function WithJsxNamespaced() {
+	return <Library.FormattedMessage id="abc"/>
+}
+
+function WithCreateElement() {
+	return React.createElement(FormattedMessage, {id: "abc"})
+}
+
+function WithCreateElement2() {
+	return React.createElement(Library.FormattedMessage, {id: "abc"})
+}
+
+// denied
+function WithJsxOther() {
+	return <OtherFormattedMessage id="abc"></OtherFormattedMessage>
+}
+
+function WithCreateElementOther() {
+	return React.createElement(OtherFormattedMessage, {id: "abc"})
+}
+
+function WithCreateElementWronglyQuoted() {
+	return React.createElement("FormattedMessage", {id: "abc"})
+}
+
+```
+
+# Diagnostics
+```
+allowlist.jsx:24:9 lint/nursery/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × id attribute should not be a static string literal. Generate unique IDs using useId().
+  
+    22 │ // denied
+    23 │ function WithJsxOther() {
+  > 24 │ 	return <OtherFormattedMessage id="abc"></OtherFormattedMessage>
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    25 │ }
+    26 │ 
+  
+  i In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().
+  
+
+```
+
+```
+allowlist.jsx:28:9 lint/nursery/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × id attribute should not be a static string literal. Generate unique IDs using useId().
+  
+    27 │ function WithCreateElementOther() {
+  > 28 │ 	return React.createElement(OtherFormattedMessage, {id: "abc"})
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    29 │ }
+    30 │ 
+  
+  i In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().
+  
+
+```
+
+```
+allowlist.jsx:32:9 lint/nursery/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × id attribute should not be a static string literal. Generate unique IDs using useId().
+  
+    31 │ function WithCreateElementWronglyQuoted() {
+  > 32 │ 	return React.createElement("FormattedMessage", {id: "abc"})
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    33 │ }
+    34 │ 
+  
+  i In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().
+  
+
+```

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/allowlist.options.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../../../../packages/@biomejs/biome/configuration_schema.json",
+    "linter": {
+        "rules": {
+            "nursery": {
+                "useUniqueElementIds": {
+                    "level": "error",
+                    "options": {
+                        "excludedComponents": ["FormattedMessage"]
+                    }
+                }
+            }
+        }
+    }
+}

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/badAllowlist.jsx

@@ -0,0 +1,3 @@
+function WithJsxNamespaced() {
+	return <Library.FormattedMessage id="abc"/>
+}

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/badAllowlist.jsx.snap

@@ -0,0 +1,46 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: badAllowlist.jsx
+---
+# Input
+```jsx
+function WithJsxNamespaced() {
+	return <Library.FormattedMessage id="abc"/>
+}
+
+```
+
+# Diagnostics
+```
+badAllowlist.options:8:32 deserialize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × 'excludedComponents' does not accept values with dots.
+  
+     6 │                 "useUniqueElementIds": {
+     7 │                     "level": "error",
+   > 8 │                     "options": {
+       │                                ^
+   > 9 │                         "excludedComponents": ["Library.FormattedMessage"]
+  > 10 │                     }
+       │                     ^
+    11 │                 }
+    12 │             }
+  
+
+```
+
+```
+badAllowlist.jsx:2:9 lint/nursery/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × id attribute should not be a static string literal. Generate unique IDs using useId().
+  
+    1 │ function WithJsxNamespaced() {
+  > 2 │ 	return <Library.FormattedMessage id="abc"/>
+      │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    3 │ }
+    4 │ 
+  
+  i In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().
+  
+
+```

crates/biome_js_analyze/tests/specs/nursery/useUniqueElementIds/badAllowlist.options.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../../../../packages/@biomejs/biome/configuration_schema.json",
+    "linter": {
+        "rules": {
+            "nursery": {
+                "useUniqueElementIds": {
+                    "level": "error",
+                    "options": {
+                        "excludedComponents": ["Library.FormattedMessage"]
+                    }
+                }
+            }
+        }
+    }
+}

crates/biome_rule_options/src/use_unique_element_ids.rs

@@ -1,6 +1,45 @@
+use biome_console::markup;
+use biome_deserialize::{
+    DeserializableValidator, DeserializationContext, DeserializationDiagnostic, TextRange,
+};
 use biome_deserialize_macros::Deserializable;
+use rustc_hash::FxHashSet;
 use serde::{Deserialize, Serialize};
+
 #[derive(Default, Clone, Debug, Deserialize, Deserializable, Eq, PartialEq, Serialize)]
 #[cfg_attr(feature = "schema", derive(schemars::JsonSchema))]
 #[serde(rename_all = "camelCase", deny_unknown_fields, default)]
-pub struct UseUniqueElementIdsOptions {}
+#[deserializable(with_validator)]
+pub struct UseUniqueElementIdsOptions {
+    /// Component names that accept an `id` prop that does not translate
+    /// to a DOM element id.
+    pub excluded_components: FxHashSet<Box<str>>,
+}
+
+impl DeserializableValidator for UseUniqueElementIdsOptions {
+    fn validate(
+        &mut self,
+        ctx: &mut impl DeserializationContext,
+        _name: &str,
+        range: TextRange,
+    ) -> bool {
+        for name in &self.excluded_components {
+            let msg = if name.is_empty() {
+                "empty values"
+            } else if name.contains('.') {
+                "values with dots"
+            } else {
+                continue;
+            };
+            ctx.report(
+                DeserializationDiagnostic::new(markup!(
+                    <Emphasis>"'excludedComponents'"</Emphasis>" does not accept "{msg}"."
+                ))
+                .with_range(range),
+            );
+            return false;
+        }
+
+        true
+    }
+}