feat(js_biome_analyze): implement noDuplicatedSpreadProps (#8116)

Author: Netail

.changeset/clean-swans-act.md

@@ -0,0 +1,11 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the nursery rule [`noDuplicatedSpreadProps`](https://biomejs.dev/linter/rules/no-duplicated-spread-props/). Disallow JSX prop spreading the same identifier multiple times.
+
+**Invalid:**
+
+```jsx
+<div {...props} something="else" {...props} />
+```

crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs

@@ -184,6 +184,7 @@ define_categories! {
     "lint/nursery/noParametersOnlyUsedInRecursion": "https://biomejs.dev/linter/rules/no-parameters-only-used-in-recursion",
     "lint/nursery/noReactForwardRef": "https://biomejs.dev/linter/rules/no-react-forward-ref",
     "lint/nursery/noShadow": "https://biomejs.dev/linter/rules/no-shadow",
+    "lint/nursery/noDuplicatedSpreadProps": "https://biomejs.dev/linter/rules/no-duplicated-spread-props",
     "lint/nursery/noSyncScripts": "https://biomejs.dev/linter/rules/no-sync-scripts",
     "lint/nursery/noTernary": "https://biomejs.dev/linter/rules/no-ternary",
     "lint/nursery/noUnknownAttribute": "https://biomejs.dev/linter/rules/no-unknown-attribute",

crates/biome_configuration/src/analyzer/linter/rules.rs

@@ -5,6 +5,7 @@
 use biome_analyze::declare_lint_group;
 pub mod no_continue;
 pub mod no_deprecated_imports;
+pub mod no_duplicated_spread_props;
 pub mod no_empty_source;
 pub mod no_equals_to_null;
 pub mod no_floating_promises;
@@ -43,4 +44,4 @@ pub mod use_sorted_classes;
 pub mod use_spread;
 pub mod use_vue_define_macros_order;
 pub mod use_vue_multi_word_component_names;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }

crates/biome_configuration/src/generated/domain_selector.rs

@@ -0,0 +1,104 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_js_syntax::AnyJsxAttribute;
+use biome_js_syntax::{JsxAttributeList, JsxOpeningElement, JsxSelfClosingElement};
+use biome_rowan::{AstNode, declare_node_union};
+use biome_rule_options::no_duplicated_spread_props::NoDuplicatedSpreadPropsOptions;
+use std::collections::HashSet;
+
+declare_lint_rule! {
+    /// Disallow JSX prop spreading the same identifier multiple times.
+    ///
+    /// Enforces that any unique expression is only spread once.
+    /// Generally spreading the same expression twice is an indicator of a mistake since any attribute between the spreads may be overridden when the intent was not to.
+    /// Even when that is not the case this will lead to unnecessary computations being performed.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```jsx,expect_diagnostic
+    /// <div {...props} something="else" {...props} />
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```jsx
+    /// <div something="else" {...props} />
+    /// ```
+    ///
+    pub NoDuplicatedSpreadProps {
+        version: "next",
+        name: "noDuplicatedSpreadProps",
+        language: "js",
+        recommended: false,
+        sources: &[RuleSource::EslintReact("jsx-props-no-spread-multi").same()],
+        domains: &[RuleDomain::React, RuleDomain::Solid],
+    }
+}
+
+impl Rule for NoDuplicatedSpreadProps {
+    type Query = Ast<NoDuplicatedSpreadPropsQuery>;
+    type State = String;
+    type Signals = Option<Self::State>;
+    type Options = NoDuplicatedSpreadPropsOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let binding = ctx.query();
+
+        match binding {
+            NoDuplicatedSpreadPropsQuery::JsxOpeningElement(node) => {
+                let attributes = node.attributes();
+                validate_attributes(&attributes)
+            }
+            NoDuplicatedSpreadPropsQuery::JsxSelfClosingElement(node) => {
+                let attributes = node.attributes();
+                validate_attributes(&attributes)
+            }
+        }
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        let node = ctx.query();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                node.range(),
+                markup! {
+                    "The expression "<Emphasis>{state}</Emphasis>" has spread more than once."
+                },
+            )
+            .note(markup! {
+                "Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1."
+            }),
+        )
+    }
+}
+
+declare_node_union! {
+    pub NoDuplicatedSpreadPropsQuery =
+        JsxOpeningElement
+        | JsxSelfClosingElement
+}
+
+fn validate_attributes(list: &JsxAttributeList) -> Option<String> {
+    let mut seen_spreads = HashSet::new();
+
+    for attribute in list {
+        if let AnyJsxAttribute::JsxSpreadAttribute(spread) = attribute
+            && let Some(argument) = spread.argument().ok()
+            && let Some(express) = argument.as_js_identifier_expression()
+            && let Some(name) = express.name().ok()
+            && let Some(value_token) = name.value_token().ok()
+        {
+            let text = value_token.text_trimmed().to_string();
+            if !seen_spreads.insert(text.clone()) {
+                return Some(text);
+            }
+        }
+    }
+
+    None
+}

crates/biome_diagnostics_categories/src/categories.rs

@@ -0,0 +1,23 @@
+const Invalid1 = () => {
+	return <div {...props} something="else" {...props}></div>
+}
+
+const Invalid2 = () => {
+	return <div {...foo.bar} {...props} {...props}></div>
+}
+
+const Invalid3 = () => {
+	return <div {...{}} {...props} {...props}></div>
+}
+
+const Invalid4 = () => {
+	return <div {...props} something="else" {...props} />
+}
+
+const Invalid5 = () => {
+	return <div {...foo.bar} {...props} {...props} />
+}
+
+const Invalid6 = () => {
+	return <div {...{}} {...props} {...props} />
+}

crates/biome_js_analyze/src/lint/nursery.rs

@@ -0,0 +1,128 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: invalid.jsx
+---
+# Input
+```jsx
+const Invalid1 = () => {
+	return <div {...props} something="else" {...props}></div>
+}
+
+const Invalid2 = () => {
+	return <div {...foo.bar} {...props} {...props}></div>
+}
+
+const Invalid3 = () => {
+	return <div {...{}} {...props} {...props}></div>
+}
+
+const Invalid4 = () => {
+	return <div {...props} something="else" {...props} />
+}
+
+const Invalid5 = () => {
+	return <div {...foo.bar} {...props} {...props} />
+}
+
+const Invalid6 = () => {
+	return <div {...{}} {...props} {...props} />
+}
+
+```
+
+# Diagnostics
+```
+invalid.jsx:2:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+    1 │ const Invalid1 = () => {
+  > 2 │ 	return <div {...props} something="else" {...props}></div>
+      │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    3 │ }
+    4 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```
+
+```
+invalid.jsx:6:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+    5 │ const Invalid2 = () => {
+  > 6 │ 	return <div {...foo.bar} {...props} {...props}></div>
+      │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    7 │ }
+    8 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```
+
+```
+invalid.jsx:10:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+     9 │ const Invalid3 = () => {
+  > 10 │ 	return <div {...{}} {...props} {...props}></div>
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    11 │ }
+    12 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```
+
+```
+invalid.jsx:14:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+    13 │ const Invalid4 = () => {
+  > 14 │ 	return <div {...props} something="else" {...props} />
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    15 │ }
+    16 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```
+
+```
+invalid.jsx:18:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+    17 │ const Invalid5 = () => {
+  > 18 │ 	return <div {...foo.bar} {...props} {...props} />
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    19 │ }
+    20 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```
+
+```
+invalid.jsx:22:9 lint/nursery/noDuplicatedSpreadProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i The expression props has spread more than once.
+  
+    21 │ const Invalid6 = () => {
+  > 22 │ 	return <div {...{}} {...props} {...props} />
+       │ 	       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    23 │ }
+    24 │ 
+  
+  i Spreading an expression more than once will lead to unnecessary computations being performed. Reduce spreads of this expression down to 1.
+  
+
+```

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

@@ -0,0 +1,32 @@
+/* should not generate diagnostics */
+const Valid1 = () => {
+	return <div {...props} something="else"></div>
+}
+
+const Valid2 = () => {
+	return <div something="else" {...props}></div>
+}
+
+const Valid3 = () => {
+	return <div {...props} something="else" {...otherProps}></div>
+}
+
+const Valid4 = () => {
+	return <div {...{}} something="else" {...otherProps}></div>
+}
+
+const Valid5 = () => {
+	return <div {...props} something="else" />
+}
+
+const Valid6 = () => {
+	return <div something="else" {...props} />
+}
+
+const Valid7 = () => {
+	return <div {...props} something="else" {...otherProps} />
+}
+
+const Valid8 = () => {
+	return <div {...{}} something="else" {...otherProps} />
+}