fix(visitor): register references from Vue same-name bindings (#11431)

Author: levrik

.changeset/fix-vue-binding-shorthand.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#11429](https://github.com/biomejs/biome/issues/11429): Variables and imports used by Vue same-name bindings such as `:disabled` or `v-bind:disabled` are no longer reported as unused.

crates/biome_embeds/src/references.rs

@@ -261,6 +261,51 @@ mod tests {
         path
     }
 
+    fn parse_vue_template_source(db: &TestDb, html_source: &str) -> Utf8PathBuf {
+        let path = Utf8PathBuf::from("src/App.vue");
+        let parsed = parse_html(html_source, HtmlParserOptions::default().with_vue()).into();
+        let parsed = ParsedSource::new(db, path.clone(), parsed, 0, vec![]);
+        db.insert_file(path.clone(), parsed);
+        path
+    }
+
+    #[test]
+    fn is_value_reference_used_finds_vue_same_name_binding_shorthand() {
+        let db = TestDb::new();
+        let path = parse_vue_template_source(&db, r#"<template><button :disabled /></template>"#);
+
+        assert!(is_value_reference_used(
+            &db,
+            InternedReference::new(&db, path, token_text("disabled")),
+        ));
+    }
+
+    #[test]
+    fn is_value_reference_used_finds_vue_v_bind_same_name_binding_shorthand() {
+        let db = TestDb::new();
+        let path =
+            parse_vue_template_source(&db, r#"<template><button v-bind:disabled /></template>"#);
+
+        assert!(is_value_reference_used(
+            &db,
+            InternedReference::new(&db, path, token_text("disabled")),
+        ));
+    }
+
+    #[test]
+    fn is_value_reference_used_ignores_vue_binding_attribute_name() {
+        let db = TestDb::new();
+        let path = parse_vue_template_source(
+            &db,
+            r#"<template><button :disabled="isDisabled" /><button v-bind:disabled="isDisabled" /></template>"#,
+        );
+
+        assert!(!is_value_reference_used(
+            &db,
+            InternedReference::new(&db, path, token_text("disabled")),
+        ));
+    }
+
     #[test]
     fn is_value_reference_used_finds_references_across_groups() {
         let db = TestDb::new();

crates/biome_embeds/src/visitor.rs

@@ -4,9 +4,9 @@ use biome_db::ParsedSource;
 use biome_html_syntax::{
     AnyHtmlComponentObjectName, AnyHtmlTagName, AnySvelteBindingAssignmentBinding,
     AnySvelteBindingProperty, AnySvelteBlock, AnySvelteBlockItem, AnySvelteDestructuredName,
-    AnySvelteDirective, AnySvelteEachName, AnyVueVForBinding, AnyVueVForBindingListElement,
-    AnyVueVForDestructuredBinding, HtmlElement, HtmlRoot, HtmlSelfClosingElement,
-    VueVForIdentifierBinding, VueVForValue,
+    AnySvelteDirective, AnySvelteEachName, AnyVueDirective, AnyVueDirectiveArgument,
+    AnyVueVForBinding, AnyVueVForBindingListElement, AnyVueVForDestructuredBinding, HtmlElement,
+    HtmlRoot, HtmlSelfClosingElement, VueVForIdentifierBinding, VueVForValue,
 };
 use biome_js_syntax::{
     AnyJsArrayAssignmentPatternElement, AnyJsArrayBindingPatternElement, AnyJsArrayElement,
@@ -1211,6 +1211,7 @@ impl EmbeddedReferencesBuilder {
 
     fn visit_html_root(&mut self, root: &HtmlRoot, file_source: &HtmlFileSource) {
         let is_svelte = file_source.is_svelte();
+        let is_vue = file_source.is_vue();
         for node in root.syntax().descendants() {
             if let Some(element) = HtmlElement::cast_ref(&node) {
                 self.visit_html_element(&element);
@@ -1223,6 +1224,10 @@ impl EmbeddedReferencesBuilder {
             if is_svelte && let Some(directive) = AnySvelteDirective::cast_ref(&node) {
                 self.register_svelte_directive_reference(&directive);
             }
+
+            if is_vue && let Some(directive) = AnyVueDirective::cast_ref(&node) {
+                self.register_vue_directive_reference(&directive);
+            }
         }
     }
 
@@ -1264,6 +1269,37 @@ impl EmbeddedReferencesBuilder {
         Some(())
     }
 
+    fn register_vue_directive_reference(&mut self, directive: &AnyVueDirective) -> Option<()> {
+        let value = match directive {
+            AnyVueDirective::VueVBindShorthandDirective(directive)
+                if directive.initializer().is_none() =>
+            {
+                directive.arg().ok()?
+            }
+            AnyVueDirective::VueDirective(directive)
+                if directive.is_binding() && directive.initializer().is_none() =>
+            {
+                directive.arg()?
+            }
+            _ => return None,
+        };
+
+        self.register_vue_binding_attribute(value.arg())
+    }
+
+    fn register_vue_binding_attribute(
+        &mut self,
+        arg: Option<AnyVueDirectiveArgument>,
+    ) -> Option<()> {
+        let token = match arg? {
+            AnyVueDirectiveArgument::VueStaticArgument(arg) => arg.name_token().ok()?,
+            _ => return None,
+        };
+
+        self.register_reference(token.text_trimmed_range(), token.token_text_trimmed());
+        Some(())
+    }
+
     fn visit_html_element(&mut self, element: &HtmlElement) -> Option<()> {
         if element.is_script_tag() || element.is_style_tag() {
             return None;

crates/biome_js_analyze/tests/specs/correctness/noUnusedVariables/valid-vue-directives.vue

@@ -1,6 +1,7 @@
 <!-- should not generate diagnostics -->
 <script setup>
 const supported = ref(true);
+const disabled = ref(false);
 const enabled = ref(false);
 const count = ref(0);
 const isActive = ref(false);
@@ -17,16 +18,22 @@ function handleClick() {
 <template>
   <!-- v-on shorthand with function call -->
   <button @click="toggleCaptions()">Toggle</button>
-  
+
   <!-- v-on shorthand with function reference -->
   <button @click="handleClick">Click</button>
-  
+
   <!-- v-bind shorthand with expression -->
   <button :disabled="!supported">Disabled</button>
-  
+
+  <!-- v-bind same-name shorthand -->
+  <button :disabled>Same-name shorthand</button>
+
+  <!-- v-bind directive same-name shorthand -->
+  <button v-bind:disabled>Directive same-name shorthand</button>
+
   <!-- v-if directive -->
   <div v-if="count > 0">Count: {{ count }}</div>
-  
+
   <!-- v-show directive -->
   <div v-show="isActive">Active</div>
 </template>

crates/biome_js_analyze/tests/specs/correctness/noUnusedVariables/valid-vue-directives.vue.snap

@@ -7,6 +7,7 @@ expression: valid-vue-directives.vue
 <!-- should not generate diagnostics -->
 <script setup>
 const supported = ref(true);
+const disabled = ref(false);
 const enabled = ref(false);
 const count = ref(0);
 const isActive = ref(false);
@@ -23,16 +24,22 @@ function handleClick() {
 <template>
   <!-- v-on shorthand with function call -->
   <button @click="toggleCaptions()">Toggle</button>
-  
+
   <!-- v-on shorthand with function reference -->
   <button @click="handleClick">Click</button>
-  
+
   <!-- v-bind shorthand with expression -->
   <button :disabled="!supported">Disabled</button>
-  
+
+  <!-- v-bind same-name shorthand -->
+  <button :disabled>Same-name shorthand</button>
+
+  <!-- v-bind directive same-name shorthand -->
+  <button v-bind:disabled>Directive same-name shorthand</button>
+
   <!-- v-if directive -->
   <div v-if="count > 0">Count: {{ count }}</div>
-  
+
   <!-- v-show directive -->
   <div v-show="isActive">Active</div>
 </template>