fix(useVueValidVBind): accept Vue 3.4+ same-name shorthand (#10767)

Author: otkrickey

.changeset/fix-use-vue-valid-v-bind-same-name-shorthand.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#10754](https://github.com/biomejs/biome/issues/10754): [`useVueValidVBind`](https://biomejs.dev/linter/rules/use-vue-valid-v-bind/) no longer reports the Vue 3.4+ same-name shorthand as missing a value. `:foo` and `v-bind:foo` are now accepted as equivalent to `:foo="foo"`, while `v-bind`, `v-bind:[dynamicArg]`, and `:[dynamicArg]` without a value continue to be reported.

crates/biome_html_analyze/src/lint/correctness/use_vue_valid_v_bind.rs

@@ -3,15 +3,21 @@ use biome_analyze::{
 };
 use biome_console::markup;
 use biome_diagnostics::Severity;
-use biome_html_syntax::{AnyVueDirective, VueModifierList};
+use biome_html_syntax::{
+    AnyVueDirective, AnyVueDirectiveArgument, VueDirectiveArgument, VueModifierList,
+};
 use biome_rowan::{AstNode, TextRange};
 use biome_rule_options::use_vue_valid_v_bind::UseVueValidVBindOptions;
 
 declare_lint_rule! {
     /// Forbids `v-bind` directives with missing values or invalid modifiers.
     ///
     /// This rule reports v-bind directives in the following cases:
-    /// - The directive does not have a value. E.g. `<div v-bind:aaa></div>`
+    /// - The directive has neither a value nor a static argument from which to
+    ///   derive one. E.g. `<div v-bind></div>` or `<div v-bind:[foo]></div>`.
+    ///   `v-bind:foo` and `:foo` are accepted because they are valid Vue 3.4+
+    ///   [same-name shorthand](https://vuejs.org/guide/essentials/template-syntax.html#same-name-shorthand)
+    ///   for `:foo="foo"`.
     /// - The directive has invalid modifiers. E.g. `<div v-bind:aaa.bbb="ccc"></div>`
     ///
     /// ## Examples
@@ -32,6 +38,10 @@ declare_lint_rule! {
     /// <Foo v-bind:foo="foo" />
     /// ```
     ///
+    /// ```vue
+    /// <Foo :foo />
+    /// ```
+    ///
     pub UseVueValidVBind {
         version: "2.3.6",
         name: "useVueValidVBind",
@@ -64,7 +74,9 @@ impl Rule for UseVueValidVBind {
                     return None;
                 }
 
-                if vue_directive.initializer().is_none() {
+                if vue_directive.initializer().is_none()
+                    && !vue_directive.arg().is_some_and(|arg| is_static_arg(&arg))
+                {
                     return Some(ViolationKind::MissingValue);
                 }
 
@@ -77,7 +89,9 @@ impl Rule for UseVueValidVBind {
             AnyVueDirective::VueVBindShorthandDirective(dir) => {
                 // missing argument would be caught by the parser
 
-                if dir.initializer().is_none() {
+                if dir.initializer().is_none()
+                    && !dir.arg().is_ok_and(|arg| is_static_arg(&arg))
+                {
                     return Some(ViolationKind::MissingValue);
                 }
 
@@ -126,9 +140,22 @@ impl Rule for UseVueValidVBind {
 
 fn find_invalid_modifiers(modifiers: &VueModifierList) -> Option<TextRange> {
     for modifier in modifiers {
-        if !VALID_MODIFIERS.contains(&modifier.modifier_token().ok()?.text()) {
+        if !VALID_MODIFIERS.contains(&modifier.modifier_token().ok()?.text_trimmed()) {
             return Some(modifier.range());
         }
     }
     None
 }
+
+/// Returns `true` if the directive argument is a static identifier
+/// (e.g. `foo` in `:foo`), as opposed to a dynamic expression
+/// (e.g. `[foo]` in `:[foo]`). Only static arguments can be the
+/// source of a Vue 3.4+ same-name shorthand binding.
+///
+/// See <https://vuejs.org/guide/essentials/template-syntax.html#same-name-shorthand>.
+fn is_static_arg(arg: &VueDirectiveArgument) -> bool {
+    matches!(
+        arg.arg().ok(),
+        Some(AnyVueDirectiveArgument::VueStaticArgument(_))
+    )
+}

crates/biome_html_analyze/tests/specs/correctness/useVueValidVBind/invalid.vue

@@ -1,9 +1,13 @@
 <!-- should generate diagnostics -->
 
 <template>
-  <!-- Missing value -->
-  <Foo v-bind:foo />
-  <Foo :foo />
+  <!-- Missing value with no argument -->
+  <Foo v-bind />
+  <div v-bind></div>
+
+  <!-- Missing value with a dynamic argument: no static name to derive a binding from -->
+  <Foo v-bind:[dynamic] />
+  <Foo :[dynamic] />
 
   <!-- Missing value with modifier -->
   <div v-bind.prop></div>

crates/biome_html_analyze/tests/specs/correctness/useVueValidVBind/invalid.vue.snap

@@ -7,9 +7,13 @@ expression: invalid.vue
 <!-- should generate diagnostics -->
 
 <template>
-  <!-- Missing value -->
-  <Foo v-bind:foo />
-  <Foo :foo />
+  <!-- Missing value with no argument -->
+  <Foo v-bind />
+  <div v-bind></div>
+
+  <!-- Missing value with a dynamic argument: no static name to derive a binding from -->
+  <Foo v-bind:[dynamic] />
+  <Foo :[dynamic] />
 
   <!-- Missing value with modifier -->
   <div v-bind.prop></div>
@@ -42,10 +46,10 @@ invalid.vue:5:8 lint/correctness/useVueValidVBind ━━━━━━━━━━
   × This v-bind directive is missing a value.
   
     3 │ <template>
-    4 │   <!-- Missing value -->
-  > 5 │   <Foo v-bind:foo />
-      │        ^^^^^^^^^^
-    6 │   <Foo :foo />
+    4 │   <!-- Missing value with no argument -->
+  > 5 │   <Foo v-bind />
+      │        ^^^^^^
+    6 │   <div v-bind></div>
     7 │ 
   
   i v-bind directives require a value.
@@ -60,12 +64,12 @@ invalid.vue:6:8 lint/correctness/useVueValidVBind ━━━━━━━━━━
 
   × This v-bind directive is missing a value.
   
-    4 │   <!-- Missing value -->
-    5 │   <Foo v-bind:foo />
-  > 6 │   <Foo :foo />
-      │        ^^^^
+    4 │   <!-- Missing value with no argument -->
+    5 │   <Foo v-bind />
+  > 6 │   <div v-bind></div>
+      │        ^^^^^^
     7 │ 
-    8 │   <!-- Missing value with modifier -->
+    8 │   <!-- Missing value with a dynamic argument: no static name to derive a binding from -->
   
   i v-bind directives require a value.
   
@@ -79,11 +83,48 @@ invalid.vue:9:8 lint/correctness/useVueValidVBind ━━━━━━━━━━
 
   × This v-bind directive is missing a value.
   
-     8 │   <!-- Missing value with modifier -->
-   > 9 │   <div v-bind.prop></div>
+     8 │   <!-- Missing value with a dynamic argument: no static name to derive a binding from -->
+   > 9 │   <Foo v-bind:[dynamic] />
+       │        ^^^^^^^^^^^^^^^^
+    10 │   <Foo :[dynamic] />
+    11 │ 
+  
+  i v-bind directives require a value.
+  
+  i Add a value to the directive, e.g. v-bind:foo="bar".
+  
+
+```
+
+```
+invalid.vue:10:8 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × This v-bind directive is missing a value.
+  
+     8 │   <!-- Missing value with a dynamic argument: no static name to derive a binding from -->
+     9 │   <Foo v-bind:[dynamic] />
+  > 10 │   <Foo :[dynamic] />
+       │        ^^^^^^^^^^
+    11 │ 
+    12 │   <!-- Missing value with modifier -->
+  
+  i v-bind directives require a value.
+  
+  i Add a value to the directive, e.g. v-bind:foo="bar".
+  
+
+```
+
+```
+invalid.vue:13:8 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × This v-bind directive is missing a value.
+  
+    12 │   <!-- Missing value with modifier -->
+  > 13 │   <div v-bind.prop></div>
        │        ^^^^^^^^^^^
-    10 │ 
-    11 │   <!-- Invalid single modifier on long-form -->
+    14 │ 
+    15 │   <!-- Invalid single modifier on long-form -->
   
   i v-bind directives require a value.
   
@@ -93,15 +134,15 @@ invalid.vue:9:8 lint/correctness/useVueValidVBind ━━━━━━━━━━
 ```
 
 ```
-invalid.vue:12:18 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:16:18 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    11 │   <!-- Invalid single modifier on long-form -->
-  > 12 │   <div v-bind:foo.invalid="bar"></div>
+    15 │   <!-- Invalid single modifier on long-form -->
+  > 16 │   <div v-bind:foo.invalid="bar"></div>
        │                  ^^^^^^^^
-    13 │ 
-    14 │   <!-- Invalid modifier on shorthand -->
+    17 │ 
+    18 │   <!-- Invalid modifier on shorthand -->
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   
@@ -111,15 +152,15 @@ invalid.vue:12:18 lint/correctness/useVueValidVBind ━━━━━━━━━
 ```
 
 ```
-invalid.vue:15:13 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:19:13 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    14 │   <!-- Invalid modifier on shorthand -->
-  > 15 │   <span :bar.badModifier="baz"></span>
+    18 │   <!-- Invalid modifier on shorthand -->
+  > 19 │   <span :bar.badModifier="baz"></span>
        │             ^^^^^^^^^^^^
-    16 │ 
-    17 │   <!-- Mixed valid and invalid modifiers: 'prop' is valid, 'wrong' is not -->
+    20 │ 
+    21 │   <!-- Mixed valid and invalid modifiers: 'prop' is valid, 'wrong' is not -->
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   
@@ -129,15 +170,15 @@ invalid.vue:15:13 lint/correctness/useVueValidVBind ━━━━━━━━━
 ```
 
 ```
-invalid.vue:18:15 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:22:15 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    17 │   <!-- Mixed valid and invalid modifiers: 'prop' is valid, 'wrong' is not -->
-  > 18 │   <p :baz.prop.wrong="value"></p>
+    21 │   <!-- Mixed valid and invalid modifiers: 'prop' is valid, 'wrong' is not -->
+  > 22 │   <p :baz.prop.wrong="value"></p>
        │               ^^^^^^
-    19 │ 
-    20 │   <!-- Dynamic argument is present but modifier is invalid -->
+    23 │ 
+    24 │   <!-- Dynamic argument is present but modifier is invalid -->
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   
@@ -147,15 +188,15 @@ invalid.vue:18:15 lint/correctness/useVueValidVBind ━━━━━━━━━
 ```
 
 ```
-invalid.vue:21:22 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:25:22 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    20 │   <!-- Dynamic argument is present but modifier is invalid -->
-  > 21 │   <p v-bind:[dynamic].notAValidModifier="value"></p>
+    24 │   <!-- Dynamic argument is present but modifier is invalid -->
+  > 25 │   <p v-bind:[dynamic].notAValidModifier="value"></p>
        │                      ^^^^^^^^^^^^^^^^^^
-    22 │ 
-    23 │   <!-- Multiple invalid modifiers -->
+    26 │ 
+    27 │   <!-- Multiple invalid modifiers -->
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   
@@ -165,15 +206,15 @@ invalid.vue:21:22 lint/correctness/useVueValidVBind ━━━━━━━━━
 ```
 
 ```
-invalid.vue:24:20 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:28:20 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    23 │   <!-- Multiple invalid modifiers -->
-  > 24 │   <button :disabled.once="true"></button>
+    27 │   <!-- Multiple invalid modifiers -->
+  > 28 │   <button :disabled.once="true"></button>
        │                    ^^^^^
-    25 │ 
-    26 │   <!-- Component binding with unknown modifier -->
+    29 │ 
+    30 │   <!-- Component binding with unknown modifier -->
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   
@@ -183,15 +224,15 @@ invalid.vue:24:20 lint/correctness/useVueValidVBind ━━━━━━━━━
 ```
 
 ```
-invalid.vue:27:31 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+invalid.vue:31:31 lint/correctness/useVueValidVBind ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × This v-bind directive has an invalid modifier.
   
-    26 │   <!-- Component binding with unknown modifier -->
-  > 27 │   <MyComponent v-bind:propName.weird="someValue"></MyComponent>
+    30 │   <!-- Component binding with unknown modifier -->
+  > 31 │   <MyComponent v-bind:propName.weird="someValue"></MyComponent>
        │                               ^^^^^^
-    28 │ </template>
-    29 │ 
+    32 │ </template>
+    33 │ 
   
   i Only the following modifiers are allowed on v-bind directives: prop, camel, sync, and attr.
   

crates/biome_html_analyze/tests/specs/correctness/useVueValidVBind/valid.vue

@@ -8,6 +8,19 @@
 <div v-bind="props"></div>
 <Foo v-bind="props" />
 
+<!-- Vue 3.4+ same-name shorthand: `:foo` is equivalent to `:foo="foo"`. -->
+<Foo :foo />
+<Foo :foo-bar />
+<Foo v-bind:foo />
+<Foo v-bind:foo-bar />
+
+<!-- Same-name shorthand combined with valid modifiers. -->
+<Foo :foo.prop />
+<Foo v-bind:foo.prop />
+
+<!-- Same-name shorthand referencing a v-for iteration variable. -->
+<Foo v-for="foo of foos" :key="foo.id" :foo />
+
 <!-- Valid modifiers from the rule: prop, camel, sync, attr -->
 <div v-bind:foo.prop="bar"></div>
 <div v-bind:foo.camel="bar"></div>

crates/biome_html_analyze/tests/specs/correctness/useVueValidVBind/valid.vue.snap

@@ -1,6 +1,5 @@
 ---
 source: crates/biome_html_analyze/tests/spec_tests.rs
-assertion_line: 77
 expression: valid.vue
 ---
 # Input
@@ -15,6 +14,19 @@ expression: valid.vue
 <div v-bind="props"></div>
 <Foo v-bind="props" />
 
+<!-- Vue 3.4+ same-name shorthand: `:foo` is equivalent to `:foo="foo"`. -->
+<Foo :foo />
+<Foo :foo-bar />
+<Foo v-bind:foo />
+<Foo v-bind:foo-bar />
+
+<!-- Same-name shorthand combined with valid modifiers. -->
+<Foo :foo.prop />
+<Foo v-bind:foo.prop />
+
+<!-- Same-name shorthand referencing a v-for iteration variable. -->
+<Foo v-for="foo of foos" :key="foo.id" :foo />
+
 <!-- Valid modifiers from the rule: prop, camel, sync, attr -->
 <div v-bind:foo.prop="bar"></div>
 <div v-bind:foo.camel="bar"></div>