refactor(lint): fix compilation errors in vue reactivity rule

Author: AsherDe

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

@@ -2,8 +2,9 @@ use crate::services::semantic::Semantic;
 use biome_analyze::{Rule, RuleDiagnostic, context::RuleContext, declare_lint_rule};
 use biome_console::markup;
 use biome_js_syntax::{
-    AnyJsExpression, AnyJsStatement, JsExportDefaultExpressionClause, JsMethodObjectMember,
-    JsObjectExpression, JsVariableDeclaration,
+    AnyJsAssignmentPattern, AnyJsExpression, AnyJsStatement, JsAssignmentExpression,
+    JsCallExpression, JsExportDefaultExpressionClause, JsMethodObjectMember, JsObjectExpression,
+    JsVariableDeclaration,
 };
 use biome_rowan::{AstNode, AstNodeList, AstSeparatedList, TextRange};
 use biome_rule_options::no_setup_props_reactivity_loss::NoSetupPropsReactivityLossOptions;
@@ -86,8 +87,11 @@ declare_lint_rule! {
     }
 }
 
+/// Represents the different types of reactivity loss violations that can occur.
 pub enum RuleState {
+    /// Props destructured directly in setup function parameters.
     DestructuredParameter(TextRange),
+    /// Props destructured in variable assignments within the setup function body.
     DestructuredAssignment(TextRange),
 }
 
@@ -97,6 +101,11 @@ impl Rule for NoSetupPropsReactivityLoss {
     type Signals = Vec<Self::State>;
     type Options = NoSetupPropsReactivityLossOptions;
 
+    /// Analyzes Vue component exports to detect props reactivity loss patterns.
+    ///
+    /// This method examines the default export of a Vue component, specifically
+    /// looking for setup methods that might cause props to lose reactivity through
+    /// destructuring or improper usage patterns.
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let export_clause = ctx.query();
         let mut signals = Vec::new();
@@ -111,6 +120,10 @@ impl Rule for NoSetupPropsReactivityLoss {
         signals
     }
 
+    /// Creates diagnostic messages for detected reactivity loss violations.
+    ///
+    /// Generates appropriate error messages and helpful notes based on the type
+    /// of violation detected (parameter destructuring vs assignment destructuring).
     fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
         match state {
             RuleState::DestructuredParameter(range) => Some(
@@ -141,6 +154,10 @@ impl Rule for NoSetupPropsReactivityLoss {
     }
 }
 
+/// Searches for a 'setup' method within a Vue component object expression.
+///
+/// Iterates through the object members to find a method with the name 'setup',
+/// which is the Composition API setup function in Vue components.
 fn find_setup_method(obj_expr: &JsObjectExpression) -> Option<JsMethodObjectMember> {
     obj_expr.members().into_iter().flatten().find_map(|member| {
         let method = member.as_js_method_object_member()?;
@@ -151,6 +168,10 @@ fn find_setup_method(obj_expr: &JsObjectExpression) -> Option<JsMethodObjectMemb
     })
 }
 
+/// Analyzes a setup method for props reactivity loss patterns.
+///
+/// Examines both the method parameters (for direct destructuring) and the method body
+/// (for destructuring assignments) to detect violations of Vue's reactivity rules.
 fn check_setup_method(setup_method: &JsMethodObjectMember, signals: &mut Vec<RuleState>) {
     let params = setup_method.parameters();
 
@@ -160,8 +181,7 @@ fn check_setup_method(setup_method: &JsMethodObjectMember, signals: &mut Vec<Rul
             .as_any_js_formal_parameter()
             .and_then(|fp| fp.as_js_formal_parameter())
         && let Ok(binding) = formal_param.binding()
-        && (binding.as_js_object_binding_pattern().is_some()
-            || binding.as_js_array_binding_pattern().is_some())
+        && binding.as_js_object_binding_pattern().is_some()
     {
         signals.push(RuleState::DestructuredParameter(binding.range()));
     }
@@ -171,6 +191,10 @@ fn check_setup_method(setup_method: &JsMethodObjectMember, signals: &mut Vec<Rul
     }
 }
 
+/// Examines statements within the setup function body for props destructuring.
+///
+/// Focuses on variable declarations that might destructure the props parameter,
+/// which would cause reactivity loss in Vue's Composition API.
 fn check_setup_body_statements(
     statements: impl Iterator<Item = AnyJsStatement>,
     signals: &mut Vec<RuleState>,
@@ -193,20 +217,64 @@ fn check_setup_body_statements(
         })
         .map(|n| n.text().to_string());
 
-    statements
-        .filter_map(|stmt| match stmt {
-            AnyJsStatement::JsVariableStatement(var_stmt) => var_stmt.declaration().ok(),
-            _ => None,
+    statements.for_each(|stmt| match stmt {
+        AnyJsStatement::JsVariableStatement(var_stmt) => {
+            if let Ok(declaration) = var_stmt.declaration() {
+                check_variable_declaration_for_props_destructuring(
+                    &declaration,
+                    signals,
+                    &props_param_name,
+                );
+            }
+        }
+        AnyJsStatement::JsExpressionStatement(expr_stmt) => {
+            if let Ok(expr) = expr_stmt.expression() {
+                // Handle direct assignment expressions
+                if let AnyJsExpression::JsAssignmentExpression(assign_expr) = &expr {
+                    check_assignment_expression_for_props_destructuring(
+                        assign_expr,
+                        signals,
+                        &props_param_name,
+                    );
+                }
+                // Handle parenthesized assignment expressions
+                else if let AnyJsExpression::JsParenthesizedExpression(paren_expr) = &expr
+                    && let Ok(AnyJsExpression::JsAssignmentExpression(assign_expr)) =
+                        paren_expr.expression()
+                {
+                    check_assignment_expression_for_props_destructuring(
+                        &assign_expr,
+                        signals,
+                        &props_param_name,
+                    );
+                }
+            }
+        }
+        _ => {}
+    });
+}
+
+/// Checks if a call expression is a Vue reactive helper function.
+///
+/// Returns true if the call is to toRefs, toRef, reactive, or ref functions,
+/// which preserve props reactivity when destructuring.
+fn is_reactive_helper_call(call_expr: &JsCallExpression) -> bool {
+    call_expr
+        .callee()
+        .ok()
+        .and_then(|callee| callee.as_js_identifier_expression().cloned())
+        .and_then(|id_expr| id_expr.name().ok())
+        .and_then(|name| name.value_token().ok())
+        .is_some_and(|token| {
+            let text = token.text_trimmed();
+            matches!(text, "toRefs" | "toRef" | "reactive" | "ref")
         })
-        .for_each(|declaration| {
-            check_variable_declaration_for_props_destructuring(
-                &declaration,
-                signals,
-                &props_param_name,
-            )
-        });
 }
 
+/// Checks if a variable declaration destructures the props parameter.
+///
+/// Analyzes variable declarators to determine if they use destructuring patterns
+/// on the props parameter, while allowing reactive helpers like toRefs, toRef, etc.
 fn check_variable_declaration_for_props_destructuring(
     declaration: &JsVariableDeclaration,
     signals: &mut Vec<RuleState>,
@@ -217,10 +285,10 @@ fn check_variable_declaration_for_props_destructuring(
     };
 
     for declarator in declaration.declarators().into_iter().flatten() {
-        let has_destructuring_pattern = declarator.id().ok().is_some_and(|id| {
-            id.as_js_object_binding_pattern().is_some()
-                || id.as_js_array_binding_pattern().is_some()
-        });
+        let has_destructuring_pattern = declarator
+            .id()
+            .ok()
+            .is_some_and(|id| id.as_js_object_binding_pattern().is_some());
 
         if !has_destructuring_pattern {
             continue;
@@ -240,18 +308,7 @@ fn check_variable_declaration_for_props_destructuring(
                 .and_then(|name| name.value_token().ok())
                 .is_some_and(|token| token.text_trimmed() == props_name),
             AnyJsExpression::JsCallExpression(call_expr) => {
-                let is_reactive_helper = call_expr
-                    .callee()
-                    .ok()
-                    .and_then(|callee| callee.as_js_identifier_expression().cloned())
-                    .and_then(|id_expr| id_expr.name().ok())
-                    .and_then(|name| name.value_token().ok())
-                    .is_some_and(|token| {
-                        let text = token.text_trimmed();
-                        matches!(text, "toRefs" | "toRef" | "reactive" | "ref")
-                    });
-
-                !is_reactive_helper
+                !is_reactive_helper_call(&call_expr)
                     && call_expr.arguments().ok().is_some_and(|args| {
                         args.args().into_iter().flatten().any(|arg| {
                             matches!(
@@ -274,3 +331,56 @@ fn check_variable_declaration_for_props_destructuring(
         }
     }
 }
+
+/// Checks assignment expressions for props destructuring patterns.
+///
+/// Examines assignment expressions to detect patterns like `({ count } = props)`
+/// that would cause reactivity loss in Vue's Composition API.
+fn check_assignment_expression_for_props_destructuring(
+    assign_expr: &JsAssignmentExpression,
+    signals: &mut Vec<RuleState>,
+    props_param_name: &Option<String>,
+) {
+    let Some(props_name) = props_param_name.as_ref() else {
+        return;
+    };
+
+    // Check if the left side is a destructuring pattern
+    if let Ok(left) = assign_expr.left()
+        && let AnyJsAssignmentPattern::JsObjectAssignmentPattern(object_assignment_pattern) = left
+    {
+        // Check if the right side is the props parameter
+        if let Ok(right) = assign_expr.right() {
+            let should_report = match right {
+                AnyJsExpression::JsIdentifierExpression(id_expr) => id_expr
+                    .name()
+                    .ok()
+                    .and_then(|name| name.value_token().ok())
+                    .is_some_and(|token| token.text_trimmed() == props_name),
+                AnyJsExpression::JsCallExpression(call_expr) => {
+                    !is_reactive_helper_call(&call_expr)
+                        && call_expr.arguments().ok().is_some_and(|args| {
+                            args.args().into_iter().flatten().any(|arg| {
+                                matches!(
+                                    arg.as_any_js_expression(),
+                                    Some(AnyJsExpression::JsIdentifierExpression(id_expr))
+                                    if id_expr
+                                        .name()
+                                        .ok()
+                                        .and_then(|name| name.value_token().ok())
+                                        .is_some_and(|token| token.text_trimmed() == props_name)
+                                )
+                            })
+                        })
+                }
+                _ => false,
+            };
+
+            if should_report {
+                signals.push(RuleState::DestructuredAssignment(
+                    object_assignment_pattern.range(),
+                ));
+            }
+        }
+    }
+}

crates/biome_js_analyze/tests/specs/nursery/noSetupPropsReactivityLoss/array_destructuring.js

@@ -1,4 +1,5 @@
 // Destructuring assignment
+/* should generate diagnostics */
 export default {
   setup(props) {
     const { count } = props

crates/biome_js_analyze/tests/specs/nursery/noSetupPropsReactivityLoss/array_destructuring.js.snap

@@ -5,6 +5,7 @@ expression: destructuring_assignment.js
 # Input
 ```js
 // Destructuring assignment
+/* should generate diagnostics */
 export default {
   setup(props) {
     const { count } = props
@@ -16,16 +17,16 @@ export default {
 
 # Diagnostics
 ```
-destructuring_assignment.js:4:11 lint/nursery/noSetupPropsReactivityLoss ━━━━━━━━━━━━━━━━━━━━━━━━━━━
+destructuring_assignment.js:5:11 lint/nursery/noSetupPropsReactivityLoss ━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   i Destructuring props in the root scope of setup causes reactivity loss.
   
-    2 │ export default {
-    3 │   setup(props) {
-  > 4 │     const { count } = props
+    3 │ export default {
+    4 │   setup(props) {
+  > 5 │     const { count } = props
       │           ^^^^^^^^^^^^^^^^^
-    5 │     return () => h('div', count)
-    6 │   }
+    6 │     return () => h('div', count)
+    7 │   }
   
   i Use the props object directly or destructure inside callbacks/render functions.
   

crates/biome_js_analyze/tests/specs/nursery/noSetupPropsReactivityLoss/destructuring_assignment.js

@@ -1,4 +1,5 @@
 // Destructuring in setup parameters
+/* should generate diagnostics */
 export default {
   setup({ count }) {
     return () => h('div', count)

crates/biome_js_analyze/tests/specs/nursery/noSetupPropsReactivityLoss/destructuring_assignment.js.snap

@@ -5,6 +5,7 @@ expression: destructuring_params.js
 # Input
 ```js
 // Destructuring in setup parameters
+/* should generate diagnostics */
 export default {
   setup({ count }) {
     return () => h('div', count)
@@ -15,16 +16,16 @@ export default {
 
 # Diagnostics
 ```
-destructuring_params.js:3:9 lint/nursery/noSetupPropsReactivityLoss ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+destructuring_params.js:4:9 lint/nursery/noSetupPropsReactivityLoss ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   i Destructuring props in setup function parameters causes reactivity loss.
   
-    1 │ // Destructuring in setup parameters
-    2 │ export default {
-  > 3 │   setup({ count }) {
+    2 │ /* should generate diagnostics */
+    3 │ export default {
+  > 4 │   setup({ count }) {
       │         ^^^^^^^^^
-    4 │     return () => h('div', count)
-    5 │   }
+    5 │     return () => h('div', count)
+    6 │   }
   
   i Use the props object directly to maintain reactivity: `props.propertyName`