|
| 1 | +use biome_analyze::{ |
| 2 | + Ast, Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule, |
| 3 | +}; |
| 4 | +use biome_console::markup; |
| 5 | +use biome_html_syntax::HtmlAttributeList; |
| 6 | +use biome_rowan::{AstNode, AstNodeList, TextRange}; |
| 7 | +use biome_rule_options::no_vue_v_if_with_v_for::NoVueVIfWithVForOptions; |
| 8 | + |
| 9 | +declare_lint_rule! { |
| 10 | + /// Disallow using `v-if` and `v-for` directives on the same element. |
| 11 | + /// |
| 12 | + /// There are two common cases where this can be tempting: |
| 13 | + /// - To filter items in a list (e.g. v-for="user in users" v-if="user.isActive"). In these cases, replace users with a new computed property that returns your filtered list (e.g. activeUsers). |
| 14 | + /// - To avoid rendering a list if it should be hidden (e.g. v-for="user in users" v-if="shouldShowUsers"). In these cases, move the v-if to a container element (e.g. ul, ol). |
| 15 | + /// |
| 16 | + /// ## Examples |
| 17 | + /// |
| 18 | + /// ### Invalid |
| 19 | + /// |
| 20 | + /// ```vue,expect_diagnostic |
| 21 | + /// <TodoItem |
| 22 | + /// v-if="complete" |
| 23 | + /// v-for="todo in todos" |
| 24 | + /// :todo="todo" |
| 25 | + /// /> |
| 26 | + /// ``` |
| 27 | + /// |
| 28 | + /// ### Valid |
| 29 | + /// |
| 30 | + /// ```vue |
| 31 | + /// <ul v-if="complete"> |
| 32 | + /// <TodoItem |
| 33 | + /// v-for="todo in todos" |
| 34 | + /// :todo="todo" |
| 35 | + /// /> |
| 36 | + /// </ul> |
| 37 | + /// ``` |
| 38 | + /// |
| 39 | + pub NoVueVIfWithVFor { |
| 40 | + version: "next", |
| 41 | + name: "noVueVIfWithVFor", |
| 42 | + language: "html", |
| 43 | + recommended: true, |
| 44 | + domains: &[RuleDomain::Vue], |
| 45 | + sources: &[RuleSource::EslintVueJs("no-use-v-if-with-v-for").same()], |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +pub struct State { |
| 50 | + v_for_range: TextRange, |
| 51 | + v_if_range: TextRange, |
| 52 | +} |
| 53 | + |
| 54 | +impl Rule for NoVueVIfWithVFor { |
| 55 | + type Query = Ast<HtmlAttributeList>; |
| 56 | + type State = State; |
| 57 | + type Signals = Option<Self::State>; |
| 58 | + type Options = NoVueVIfWithVForOptions; |
| 59 | + |
| 60 | + fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { |
| 61 | + let node = ctx.query(); |
| 62 | + |
| 63 | + let mut v_for = None; |
| 64 | + let mut v_if = None; |
| 65 | + for attr in node.iter() { |
| 66 | + if let Some(directive) = attr |
| 67 | + .as_any_vue_directive() |
| 68 | + .and_then(|dir| dir.as_vue_directive()) |
| 69 | + { |
| 70 | + if directive |
| 71 | + .name_token() |
| 72 | + .is_ok_and(|t| t.text_trimmed() == "v-if") |
| 73 | + { |
| 74 | + v_if = Some(directive.range()); |
| 75 | + } else if directive |
| 76 | + .name_token() |
| 77 | + .is_ok_and(|t| t.text_trimmed() == "v-for") |
| 78 | + { |
| 79 | + v_for = Some(directive.range()); |
| 80 | + } |
| 81 | + } |
| 82 | + } |
| 83 | + |
| 84 | + if let (Some(v_if_range), Some(v_for_range)) = (v_if, v_for) { |
| 85 | + return Some(State { |
| 86 | + v_for_range, |
| 87 | + v_if_range, |
| 88 | + }); |
| 89 | + } |
| 90 | + None |
| 91 | + } |
| 92 | + |
| 93 | + fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> { |
| 94 | + Some( |
| 95 | + RuleDiagnostic::new( |
| 96 | + rule_category!(), |
| 97 | + state.v_for_range, |
| 98 | + markup! { |
| 99 | + "Using "<Emphasis>"v-if"</Emphasis>" and "<Emphasis>"v-for"</Emphasis>" on the same element is discouraged." |
| 100 | + }, |
| 101 | + ) |
| 102 | + .note(markup! { |
| 103 | + "Using "<Emphasis>"v-if"</Emphasis>" and "<Emphasis>"v-for"</Emphasis>" on the same element can lead to unexpected behavior and performance issues." |
| 104 | + }) |
| 105 | + .detail(state.v_if_range, markup! { |
| 106 | + "This "<Emphasis>"v-if"</Emphasis>" should be moved to the wrapper element, or you should use a computed property to filter the list instead." |
| 107 | + }), |
| 108 | + ) |
| 109 | + } |
| 110 | +} |
0 commit comments