feat(analyze/js/vue): add noVueArrowFuncInWatch

Author: dyc3

.changeset/curly-jeans-fly.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the new nursery rule [`noVueArrowFuncInWatch`](https://biomejs.dev/linter/rules/no-vue-arrow-func-in-watch/). This rule forbids using arrow functions in watchers in Vue components, because arrow functions do not give access to the component instance (via `this`), while regular functions do.

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

@@ -59,8 +59,11 @@ pub enum VueDeclarationCollectionFilter {
     Method = 1 << 5,
     /// Computed properties in a Vue component.
     Computed = 1 << 6,
+    /// Watchers in a Vue component.
+    Watcher = 1 << 7,
 }
 
+#[derive(Debug)]
 pub struct VueComponent<'a> {
     kind: AnyVueComponent,
     path: &'a Utf8Path,
@@ -106,6 +109,7 @@ impl<'a> VueComponent<'a> {
 
 /// An abstraction over multiple ways to define a vue component.
 /// Provides a list of declarations for a component.
+#[derive(Debug)]
 pub enum AnyVueComponent {
     /// Options API style Vue component.
     /// ```html
@@ -153,6 +157,23 @@ impl AnyVueComponent {
                 if !source.as_embedding_kind().is_vue() {
                     return None;
                 }
+                if let Some(call_expression) = default_expression_clause
+                    .expression()
+                    .ok()?
+                    .as_js_call_expression()
+                {
+                    // export default defineComponent({ ... });
+                    let callee = call_expression
+                        .callee()
+                        .ok()
+                        .and_then(|callee| callee.inner_expression())?;
+
+                    if is_vue_api_reference(&callee, model, "defineComponent") {
+                        return Some(Self::DefineComponent(VueDefineComponent {
+                            call_expression: call_expression.clone(),
+                        }));
+                    }
+                }
                 Some(Self::OptionsApi(VueOptionsApiComponent {
                     default_expression_clause: default_expression_clause.clone(),
                 }))
@@ -182,6 +203,7 @@ impl AnyVueComponent {
 /// ```html
 /// <script> export default { props: [ ... ], data: { ... }, ... }; </script>
 /// ```
+#[derive(Debug)]
 pub struct VueOptionsApiComponent {
     default_expression_clause: JsExportDefaultExpressionClause,
 }
@@ -190,6 +212,7 @@ pub struct VueOptionsApiComponent {
 /// ```js
 /// createApp({ props: [ ... ], ... });
 /// ```
+#[derive(Debug)]
 pub struct VueCreateApp {
     call_expression: JsCallExpression,
 }
@@ -199,6 +222,7 @@ pub struct VueCreateApp {
 /// defineComponent((...) => { ... }, { props: [ ... ], ... });
 /// defineComponent({ props: [ ... ], ... });
 /// ```
+#[derive(Debug)]
 pub struct VueDefineComponent {
     call_expression: JsCallExpression,
 }
@@ -207,6 +231,7 @@ pub struct VueDefineComponent {
 /// ```html
 /// <script setup> defineProps({ ... }); const someData = { ... }; </script>
 /// ```
+#[derive(Debug)]
 pub struct VueSetupComponent {
     model: SemanticModel,
     js_module: JsModule,
@@ -557,6 +582,15 @@ impl<T: VueOptionsApiBasedComponent> VueComponentDeclarations for T {
                             .map(VueDeclaration::Setup),
                     );
                 }
+                "watch" => {
+                    if !filter.contains(VueDeclarationCollectionFilter::Watcher) {
+                        continue;
+                    }
+                    result.extend(
+                        iter_declaration_group_properties(group_object_member)
+                            .map(VueDeclaration::Watcher),
+                    );
+                }
                 _ => {}
             }
         }
@@ -601,6 +635,18 @@ pub enum VueDeclaration {
     Method(AnyVueMethod),
     /// Computed properties in a Vue component.
     Computed(AnyVueMethod),
+    /// Watchers in a Vue component.
+    Watcher(JsPropertyObjectMember),
+}
+
+impl VueDeclaration {
+    pub fn as_watcher(&self) -> Option<&JsPropertyObjectMember> {
+        if let Self::Watcher(watcher) = self {
+            Some(watcher)
+        } else {
+            None
+        }
+    }
 }
 
 pub trait VueDeclarationName {
@@ -622,6 +668,7 @@ impl VueDeclarationName for VueDeclaration {
             Self::Method(method_or_property) | Self::Computed(method_or_property) => {
                 method_or_property.declaration_name()
             }
+            Self::Watcher(object_property) => object_property.declaration_name(),
         }
     }
 
@@ -636,6 +683,7 @@ impl VueDeclarationName for VueDeclaration {
             Self::Method(method_or_property) | Self::Computed(method_or_property) => {
                 method_or_property.declaration_name_range()
             }
+            Self::Watcher(object_property) => object_property.declaration_name_range(),
         }
     }
 }

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

@@ -41,6 +41,7 @@ pub mod no_unresolved_imports;
 pub mod no_unused_expressions;
 pub mod no_useless_catch_binding;
 pub mod no_useless_undefined;
+pub mod no_vue_arrow_func_in_watch;
 pub mod no_vue_data_object_declaration;
 pub mod no_vue_duplicate_keys;
 pub mod no_vue_options_api;
@@ -66,4 +67,4 @@ pub mod use_spread;
 pub mod use_vue_consistent_define_props_declaration;
 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_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_before_interactive_script_outside_document :: NoBeforeInteractiveScriptOutsideDocument , self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_div_regex :: NoDivRegex , self :: no_duplicate_enum_values :: NoDuplicateEnumValues , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_excessive_classes_per_file :: NoExcessiveClassesPerFile , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile , self :: no_floating_classes :: NoFloatingClasses , 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_jsx_props_bind :: NoJsxPropsBind , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_assign :: NoMultiAssign , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_proto :: NoProto , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_return_assign :: NoReturnAssign , self :: no_script_url :: NoScriptUrl , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_undeclared_env_vars :: NoUndeclaredEnvVars , 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_options_api :: NoVueOptionsApi , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: no_vue_setup_props_reactivity_loss :: NoVueSetupPropsReactivityLoss , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_await_thenable :: UseAwaitThenable , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_consistent_enum_value_type :: UseConsistentEnumValueType , self :: use_destructuring :: UseDestructuring , self :: use_error_cause :: UseErrorCause , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_inline_script_id :: UseInlineScriptId , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_regexp_exec :: UseRegexpExec , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_consistent_define_props_declaration :: UseVueConsistentDefinePropsDeclaration , 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_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_before_interactive_script_outside_document :: NoBeforeInteractiveScriptOutsideDocument , self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_div_regex :: NoDivRegex , self :: no_duplicate_enum_values :: NoDuplicateEnumValues , self :: no_duplicated_spread_props :: NoDuplicatedSpreadProps , self :: no_empty_source :: NoEmptySource , self :: no_equals_to_null :: NoEqualsToNull , self :: no_excessive_classes_per_file :: NoExcessiveClassesPerFile , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile , self :: no_floating_classes :: NoFloatingClasses , 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_jsx_props_bind :: NoJsxPropsBind , self :: no_leaked_render :: NoLeakedRender , self :: no_misused_promises :: NoMisusedPromises , self :: no_multi_assign :: NoMultiAssign , self :: no_multi_str :: NoMultiStr , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_proto :: NoProto , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_return_assign :: NoReturnAssign , self :: no_script_url :: NoScriptUrl , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_ternary :: NoTernary , self :: no_undeclared_env_vars :: NoUndeclaredEnvVars , 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_arrow_func_in_watch :: NoVueArrowFuncInWatch , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_options_api :: NoVueOptionsApi , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: no_vue_setup_props_reactivity_loss :: NoVueSetupPropsReactivityLoss , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_await_thenable :: UseAwaitThenable , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_consistent_enum_value_type :: UseConsistentEnumValueType , self :: use_destructuring :: UseDestructuring , self :: use_error_cause :: UseErrorCause , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_inline_script_id :: UseInlineScriptId , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_regexp_exec :: UseRegexpExec , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_consistent_define_props_declaration :: UseVueConsistentDefinePropsDeclaration , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }