fix(linter): improve Vue defineProps handling in noVueReservedKeys (#8448)

Author: mdevils

.changeset/mighty-shoes-deny.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Improved handling of `defineProps()` macro in Vue components. The [`noVueReservedKeys`](https://biomejs.dev/linter/rules/no-vue-reserved-keys/) rule now avoids false positives in non-setup scripts.

crates/biome_html_syntax/src/element_ext.rs

@@ -195,6 +195,11 @@ impl HtmlElement {
         self.is_script_tag() && self.has_attribute("lang", "ts")
     }
 
+    /// Returns `true` if the element is a `<script setup>` tag.
+    pub fn is_script_with_setup_attribute(&self) -> bool {
+        self.is_script_tag() && self.find_attribute_by_name("setup").is_some()
+    }
+
     /// Returns `true` if the element is a `<script lang="jsx">`
     pub fn is_jsx_lang(&self) -> bool {
         self.is_script_tag() && self.has_attribute("lang", "jsx")

crates/biome_js_analyze/src/frameworks/vue/vue_component.rs

@@ -125,9 +125,10 @@ impl Rule for NoVueDuplicateKeys {
     type Options = NoVueDuplicateKeysOptions;
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let model = ctx.model();
         let Some(component) = VueComponent::from_potential_component(
             ctx.query(),
-            ctx.model(),
+            model,
             ctx.source_type(),
             ctx.file_path(),
         ) else {
@@ -139,6 +140,12 @@ impl Rule for NoVueDuplicateKeys {
         // Collect all declarations across all Vue component sections
         for declaration in component.declarations(VueDeclarationCollectionFilter::all()) {
             if let Some(name) = declaration.declaration_name() {
+                // Handle cases like `const { foo } = defineProps(...);`.
+                if let VueDeclaration::Setup(ref setup_decl) = declaration
+                    && setup_decl.is_assigned_to_props(model)
+                {
+                    continue;
+                }
                 let key = name.text().to_string();
                 key_declarations.entry(key).or_default().push(declaration);
             }

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

@@ -125,7 +125,11 @@ impl Rule for NoVueReservedKeys {
             return Box::new([]);
         };
         component
-            .declarations(VueDeclarationCollectionFilter::all())
+            .declarations(
+                VueDeclarationCollectionFilter::all()
+                    & !(VueDeclarationCollectionFilter::Setup
+                        | VueDeclarationCollectionFilter::SetupImport),
+            )
             .into_iter()
             .filter_map(|declaration| {
                 if let Some(name) = declaration.declaration_name() {

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

@@ -84,6 +84,7 @@ impl Rule for NoVueSetupPropsReactivityLoss {
             AnyPotentialVueComponent::JsCallExpression(call_expr) => {
                 check_call_expression_setup(call_expr)
             }
+            _ => Self::Signals::default(),
         }
     }
 

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

@@ -6,7 +6,7 @@ use biome_diagnostics::advice::CodeSuggestionAdvice;
 use biome_fs::OsFileSystem;
 use biome_js_analyze::JsAnalyzerServices;
 use biome_js_parser::{JsParserOptions, parse};
-use biome_js_syntax::{AnyJsRoot, EmbeddingKind, JsFileSource, JsLanguage, ModuleKind};
+use biome_js_syntax::{AnyJsRoot, JsFileSource, JsLanguage, ModuleKind};
 use biome_package::PackageType;
 use biome_plugin_loader::AnalyzerGritPlugin;
 use biome_rowan::{AstNode, FileSourceError};
@@ -121,7 +121,8 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
         // This is needed to set the language to TypeScript for Vue files
         // because we can't do it in <script> definition in the current implementation.
         let source_type = if source_type.as_embedding_kind().is_vue() {
-            JsFileSource::ts().with_embedding_kind(EmbeddingKind::Vue)
+            JsFileSource::ts()
+                .with_embedding_kind(*VueFileHandler::file_source(&input_code).as_embedding_kind())
         } else {
             source_type
         };

crates/biome_js_analyze/tests/spec_tests.rs

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-; // this is a hack because vue files are still parsed as js/ts files.
 interface Props {
     $el: string
 }

crates/biome_js_analyze/tests/specs/nursery/noVueReservedKeys/invalid-setup-interface.vue

@@ -1,10 +1,10 @@
 ---
 source: crates/biome_js_analyze/tests/spec_tests.rs
+assertion_line: 151
 expression: invalid-setup-interface.vue
 ---
 # Input
 ```ts
-; // this is a hack because vue files are still parsed as js/ts files.
 interface Props {
     $el: string
 }
@@ -14,16 +14,15 @@ defineProps<Props>();
 
 # Diagnostics
 ```
-invalid-setup-interface.vue:3:5 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid-setup-interface.vue:2:5 lint/nursery/noVueReservedKeys ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × Key $el is reserved in Vue.
 
-    1 │ ; // this is a hack because vue files are still parsed as js/ts files.
-    2 │ interface Props {
-  > 3 │     $el: string
+    1 │ interface Props {
+  > 2 │     $el: string
       │     ^^^
-    4 │ }
-    5 │ defineProps<Props>();
+    3 │ }
+    4 │ defineProps<Props>();
 
   i Rename the key to avoid conflicts with Vue reserved keys.
 

crates/biome_js_analyze/tests/specs/nursery/noVueReservedKeys/invalid-setup-interface.vue.snap

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-; // this is a hack because vue files are still parsed as js/ts files.
 type A = {
     $el: string
 };