feat(analyze/html/vue): add useVueVapor rule (#8644)

Author: JacquesLeupin

.changeset/v-vapor-rule.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the nursery rule `useVueVapor` to enforce `<script setup vapor>` in Vue SFCs. For example `<script setup>` is invalid.

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

@@ -22,4 +22,5 @@ pub mod use_vue_valid_v_on;
 pub mod use_vue_valid_v_once;
 pub mod use_vue_valid_v_pre;
 pub mod use_vue_valid_v_text;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_script_url :: NoScriptUrl , self :: no_sync_scripts :: NoSyncScripts , self :: no_vue_v_if_with_v_for :: NoVueVIfWithVFor , self :: use_vue_consistent_v_bind_style :: UseVueConsistentVBindStyle , self :: use_vue_consistent_v_on_style :: UseVueConsistentVOnStyle , self :: use_vue_hyphenated_attributes :: UseVueHyphenatedAttributes , self :: use_vue_v_for_key :: UseVueVForKey , self :: use_vue_valid_template_root :: UseVueValidTemplateRoot , self :: use_vue_valid_v_bind :: UseVueValidVBind , self :: use_vue_valid_v_cloak :: UseVueValidVCloak , self :: use_vue_valid_v_else :: UseVueValidVElse , self :: use_vue_valid_v_else_if :: UseVueValidVElseIf , self :: use_vue_valid_v_html :: UseVueValidVHtml , self :: use_vue_valid_v_if :: UseVueValidVIf , self :: use_vue_valid_v_on :: UseVueValidVOn , self :: use_vue_valid_v_once :: UseVueValidVOnce , self :: use_vue_valid_v_pre :: UseVueValidVPre , self :: use_vue_valid_v_text :: UseVueValidVText ,] } }
+pub mod use_vue_vapor;
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_ambiguous_anchor_text :: NoAmbiguousAnchorText , self :: no_script_url :: NoScriptUrl , self :: no_sync_scripts :: NoSyncScripts , self :: no_vue_v_if_with_v_for :: NoVueVIfWithVFor , self :: use_vue_consistent_v_bind_style :: UseVueConsistentVBindStyle , self :: use_vue_consistent_v_on_style :: UseVueConsistentVOnStyle , self :: use_vue_hyphenated_attributes :: UseVueHyphenatedAttributes , self :: use_vue_v_for_key :: UseVueVForKey , self :: use_vue_valid_template_root :: UseVueValidTemplateRoot , self :: use_vue_valid_v_bind :: UseVueValidVBind , self :: use_vue_valid_v_cloak :: UseVueValidVCloak , self :: use_vue_valid_v_else :: UseVueValidVElse , self :: use_vue_valid_v_else_if :: UseVueValidVElseIf , self :: use_vue_valid_v_html :: UseVueValidVHtml , self :: use_vue_valid_v_if :: UseVueValidVIf , self :: use_vue_valid_v_on :: UseVueValidVOn , self :: use_vue_valid_v_once :: UseVueValidVOnce , self :: use_vue_valid_v_pre :: UseVueValidVPre , self :: use_vue_valid_v_text :: UseVueValidVText , self :: use_vue_vapor :: UseVueVapor ,] } }

crates/biome_diagnostics_categories/src/categories.rs

@@ -0,0 +1,168 @@
+use biome_analyze::{
+    Ast, FixKind, Rule, RuleDiagnostic, RuleDomain, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_html_factory::make;
+use biome_html_syntax::{
+    AnyHtmlAttribute, HtmlAttributeList, HtmlOpeningElement, HtmlSyntaxKind, HtmlSyntaxToken,
+};
+use biome_rowan::{AstNode, AstNodeList, BatchMutationExt, TriviaPiece};
+use biome_rule_options::use_vue_vapor::UseVueVaporOptions;
+
+declare_lint_rule! {
+    /// Enforce opting in to Vue Vapor mode in `<script setup>` blocks.
+    ///
+    /// Vue 3.6 introduces an opt-in “Vapor mode” for SFC `<script setup>` blocks:
+    /// `<script setup vapor>`.
+    ///
+    /// Vapor mode only works for Vue Single File Components (SFCs) using `<script setup>`.
+    ///
+    /// This rule reports `<script setup>` opening tags that are missing the `vapor` attribute.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```vue,expect_diagnostic
+    /// <script setup>
+    /// </script>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```vue
+    /// <script setup vapor>
+    /// </script>
+    /// ```
+    ///
+    pub UseVueVapor {
+        version: "next",
+        name: "useVueVapor",
+        language: "html",
+        recommended: false,
+        domains: &[RuleDomain::Vue],
+        sources: &[],
+        fix_kind: FixKind::Unsafe,
+    }
+}
+
+impl Rule for UseVueVapor {
+    type Query = Ast<HtmlOpeningElement>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    type Options = UseVueVaporOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let opening = ctx.query();
+
+        let name = opening.name().ok()?;
+        let name_token = name.value_token().ok()?;
+        if !name_token.text_trimmed().eq_ignore_ascii_case("script") {
+            return None;
+        }
+
+        let attributes = opening.attributes();
+        attributes.find_by_name("setup")?;
+
+        if attributes.find_by_name("vapor").is_some() {
+            return None;
+        }
+
+        Some(())
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                ctx.query().range(),
+                markup! {
+                    "This "<Emphasis>"<script setup>"</Emphasis>" is missing the "<Emphasis>"vapor"</Emphasis>" attribute."
+                },
+            )
+            .note(markup! {
+                "Add "<Emphasis>"vapor"</Emphasis>" to opt in to Vue Vapor mode: "<Emphasis>"<script setup vapor>"</Emphasis>"."
+            }),
+        )
+    }
+
+    fn action(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<crate::HtmlRuleAction> {
+        let opening = ctx.query();
+        let old_attributes = opening.attributes();
+
+        // Only apply the fix for <script setup> that doesn't already have vapor.
+        if old_attributes.find_by_name("setup").is_none()
+            || old_attributes.find_by_name("vapor").is_some()
+        {
+            return None;
+        }
+
+        let new_attributes = insert_after_setup(old_attributes)?;
+
+        let mut mutation = BatchMutationExt::begin(ctx.root());
+        mutation.replace_node(opening.attributes(), new_attributes);
+
+        Some(biome_analyze::RuleAction::new(
+            ctx.metadata().action_category(ctx.category(), ctx.group()),
+            ctx.metadata().applicability(),
+            markup! { "Add the "<Emphasis>"vapor"</Emphasis>" attribute." }.to_owned(),
+            mutation,
+        ))
+    }
+}
+
+#[derive(Clone, Copy, Debug)]
+enum VaporAttributeSpacing {
+    /// Add a leading space before `vapor` (used when `setup` is the last attribute).
+    Leading,
+    /// Add a trailing space after `vapor` (used when there are more attributes after `setup`).
+    Trailing,
+}
+
+fn make_vapor_attribute(spacing: VaporAttributeSpacing) -> AnyHtmlAttribute {
+    let vapor_token = match spacing {
+        VaporAttributeSpacing::Leading => HtmlSyntaxToken::new_detached(
+            HtmlSyntaxKind::IDENT,
+            " vapor",
+            [TriviaPiece::whitespace(1)],
+            [],
+        ),
+        VaporAttributeSpacing::Trailing => HtmlSyntaxToken::new_detached(
+            HtmlSyntaxKind::IDENT,
+            "vapor ",
+            [],
+            [TriviaPiece::whitespace(1)],
+        ),
+    };
+
+    AnyHtmlAttribute::HtmlAttribute(
+        make::html_attribute(make::html_attribute_name(vapor_token)).build(),
+    )
+}
+
+fn insert_after_setup(old_attributes: HtmlAttributeList) -> Option<HtmlAttributeList> {
+    let mut items: Vec<AnyHtmlAttribute> = old_attributes.iter().collect();
+
+    let setup_index = items.iter().position(is_setup_attribute)?;
+
+    let spacing = if setup_index + 1 == items.len() {
+        VaporAttributeSpacing::Leading
+    } else {
+        VaporAttributeSpacing::Trailing
+    };
+
+    items.insert(setup_index + 1, make_vapor_attribute(spacing));
+
+    Some(make::html_attribute_list(items))
+}
+
+fn is_setup_attribute(attribute: &AnyHtmlAttribute) -> bool {
+    match attribute {
+        AnyHtmlAttribute::HtmlAttribute(attr) => attr
+            .name()
+            .ok()
+            .and_then(|name| name.value_token().ok())
+            .is_some_and(|tok| tok.text_trimmed() == "setup"),
+        _ => false,
+    }
+}

crates/biome_html_analyze/src/lint/nursery.rs

@@ -0,0 +1,11 @@
+<!-- should generate diagnostics -->
+
+<script setup>
+const a = 1;
+</script>
+
+<script setup lang="ts">
+const b: number = 1;
+</script>
+
+

crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs

@@ -0,0 +1,66 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: invalid.vue
+---
+# Input
+```html
+<!-- should generate diagnostics -->
+
+<script setup>
+const a = 1;
+</script>
+
+<script setup lang="ts">
+const b: number = 1;
+</script>
+
+
+
+```
+
+# Diagnostics
+```
+invalid.vue:3:1 lint/nursery/useVueVapor  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i This <script setup> is missing the vapor attribute.
+  
+    1 │ <!-- should generate diagnostics -->
+    2 │ 
+  > 3 │ <script setup>
+      │ ^^^^^^^^^^^^^^
+    4 │ const a = 1;
+    5 │ </script>
+  
+  i Add vapor to opt in to Vue Vapor mode: <script setup vapor>.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+  i Unsafe fix: Add the vapor attribute.
+  
+    3 │ <script·setup·vapor>
+      │              ++++++ 
+
+```
+
+```
+invalid.vue:7:1 lint/nursery/useVueVapor  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i This <script setup> is missing the vapor attribute.
+  
+    5 │ </script>
+    6 │ 
+  > 7 │ <script setup lang="ts">
+      │ ^^^^^^^^^^^^^^^^^^^^^^^^
+    8 │ const b: number = 1;
+    9 │ </script>
+  
+  i Add vapor to opt in to Vue Vapor mode: <script setup vapor>.
+  
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+  
+  i Unsafe fix: Add the vapor attribute.
+  
+    7 │ <script·setup·vapor·lang="ts">
+      │               ++++++          
+
+```

crates/biome_html_analyze/tests/specs/nursery/useVueVapor/invalid.vue

@@ -0,0 +1,15 @@
+<!-- should not generate diagnostics -->
+
+<script setup vapor>
+const a = 1;
+</script>
+
+<script setup vapor lang="ts">
+const b: number = 1;
+</script>
+
+<script>
+export default {};
+</script>
+
+

crates/biome_html_analyze/tests/specs/nursery/useVueVapor/invalid.vue.snap

@@ -0,0 +1,23 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: valid.vue
+---
+# Input
+```html
+<!-- should not generate diagnostics -->
+
+<script setup vapor>
+const a = 1;
+</script>
+
+<script setup vapor lang="ts">
+const b: number = 1;
+</script>
+
+<script>
+export default {};
+</script>
+
+
+
+```

crates/biome_html_analyze/tests/specs/nursery/useVueVapor/valid.vue

@@ -416,5 +416,6 @@ pub mod use_vue_valid_v_on;
 pub mod use_vue_valid_v_once;
 pub mod use_vue_valid_v_pre;
 pub mod use_vue_valid_v_text;
+pub mod use_vue_vapor;
 pub mod use_while;
 pub mod use_yield;