fix(html): track Vue template assignment references (#11156)

Author: saberoueslati

.changeset/fifty-baboons-wave.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#11129](https://github.com/biomejs/biome/issues/11129): [`noUnusedVariables`](https://biomejs.dev/linter/rules/no-unused-variables/) no longer reports Vue bindings as unused when they are assigned through automatically unwrapped template refs.

crates/biome_js_analyze/tests/specs/correctness/noUnusedVariables/invalid-vue-assignment-target.vue

@@ -0,0 +1,9 @@
+<!-- should generate diagnostics -->
+<script setup lang="ts">
+const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
+const actuallyUnused = true;
+</script>
+
+<template>
+	<button @click="() => (isNewSheetOpen = true)">button</button>
+</template>

crates/biome_js_analyze/tests/specs/correctness/noUnusedVariables/invalid-vue-assignment-target.vue.snap

@@ -0,0 +1,43 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: invalid-vue-assignment-target.vue
+---
+# Input
+```vue
+<!-- should generate diagnostics -->
+<script setup lang="ts">
+const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
+const actuallyUnused = true;
+</script>
+
+<template>
+	<button @click="() => (isNewSheetOpen = true)">button</button>
+</template>
+
+```
+
+# Diagnostics
+```
+invalid-vue-assignment-target.vue:4:7 lint/correctness/noUnusedVariables  FIXABLE  ━━━━━━━━━━━━━━━━━
+
+  ! This variable actuallyUnused is unused.
+  
+    2 │ <script setup lang="ts">
+    3 │ const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
+  > 4 │ const actuallyUnused = true;
+      │       ^^^^^^^^^^^^^^
+    5 │ </script>
+    6 │ 
+  
+  i Unused variables are often the result of typos, incomplete refactors, or other sources of bugs.
+  
+  i Unsafe fix: If this is intentional, prepend actuallyUnused with an underscore.
+  
+    1 1 │   
+    2 2 │   const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
+    3   │ - const·actuallyUnused·=·true;
+      3 │ + const·_actuallyUnused·=·true;
+    4 4 │   
+  
+
+```

crates/biome_workspace_db/src/embedded/references.rs

@@ -282,6 +282,21 @@ mod tests {
         ));
     }
 
+    #[test]
+    fn is_value_reference_used_finds_vue_assignment_targets() {
+        let db = TestDb::new();
+        let path = parse_vue_source_with_js_snippet(&db, "() => isNewSheetOpen = true");
+
+        assert!(is_value_reference_used(
+            &db,
+            InternedReference::new(&db, path.clone(), token_text("isNewSheetOpen"))
+        ));
+        assert!(!is_value_reference_used(
+            &db,
+            InternedReference::new(&db, path, token_text("Missing"))
+        ));
+    }
+
     #[test]
     fn is_reference_used_classifies_type_references() {
         let db = TestDb::new();

crates/biome_workspace_db/src/embedded/visitor.rs

@@ -14,8 +14,9 @@ use biome_js_syntax::{
     AnyJsIdentifierUsage, AnyJsModuleItem, AnyJsObjectAssignmentPatternMember,
     AnyJsObjectBindingPatternMember, AnyJsObjectMember, AnyJsRoot, AnyJsStatement,
     AnyTsIdentifierBinding, AnyTsType, JsAssignmentExpression, JsCallExpression, JsExport,
-    JsImport, JsModuleItemList, JsReferenceIdentifier, JsStaticMemberExpression,
-    JsSvelteDeclarationRoot, JsSvelteSnippetRoot, JsVariableStatement, JsxReferenceIdentifier,
+    JsIdentifierAssignment, JsImport, JsModuleItemList, JsReferenceIdentifier,
+    JsStaticMemberExpression, JsSvelteDeclarationRoot, JsSvelteSnippetRoot, JsVariableStatement,
+    JsxReferenceIdentifier,
 };
 use biome_languages::html::HtmlVariant;
 use biome_languages::javascript::{JsEmbeddingKind, SvelteEmbeddingKind};
@@ -171,7 +172,7 @@ fn collect_embedded_references(
         // one module and share a top-level scope, so a binding used only in
         // the other block must still count as used.
         if !js_file_source.is_embedded_source() || is_svelte {
-            builder.visit_non_source_snippet(&snippet.parsed(db).tree());
+            builder.visit_non_source_snippet(&snippet.parsed(db).tree(), &js_file_source);
         }
     }
 
@@ -1139,7 +1140,7 @@ impl EmbeddedReferencesBuilder {
         self.type_references.push((range, text));
     }
 
-    fn visit_non_source_snippet(&mut self, root: &AnyJsRoot) {
+    fn visit_non_source_snippet(&mut self, root: &AnyJsRoot, file_source: &JsFileSource) {
         let preorder = root.syntax().preorder();
 
         for event in preorder {
@@ -1149,6 +1150,10 @@ impl EmbeddedReferencesBuilder {
                         self.visit_jsx_reference_identifier(reference);
                     } else if let Some(reference) = JsReferenceIdentifier::cast_ref(&node) {
                         self.visit_reference_identifier(reference);
+                    } else if let Some(assignment) = JsIdentifierAssignment::cast_ref(&node)
+                        && matches!(file_source.as_embedding_kind(), JsEmbeddingKind::Vue { .. })
+                    {
+                        self.visit_identifier_assignment(assignment);
                     } else if let Some(member) = JsStaticMemberExpression::cast_ref(&node) {
                         self.visit_static_member_expression(member);
                     }
@@ -1296,6 +1301,15 @@ impl EmbeddedReferencesBuilder {
         Some(())
     }
 
+    fn visit_identifier_assignment(&mut self, assignment: JsIdentifierAssignment) -> Option<()> {
+        let name_token = assignment.name_token().ok()?;
+        self.register_reference(
+            name_token.text_trimmed_range(),
+            name_token.token_text_trimmed(),
+        );
+        Some(())
+    }
+
     fn visit_static_member_expression(&mut self, member: JsStaticMemberExpression) -> Option<()> {
         let object = member.object().ok()?;
         if let Some(reference) = object.as_js_reference_identifier() {