feat(analyze/js): add noVueDataObjectDeclaration #6574
Conversation
|
crates/biome_js_analyze/src/lint/nursery/no_vue_data_object_declaration.rs
Show resolved
Hide resolved
| fn run(ctx: &RuleContext<Self>) -> Self::Signals { | ||
| let member = ctx.query(); | ||
|
|
||
| if let Ok(member_name) = member.name() { | ||
| if let Some(name) = member_name.name() { | ||
| if name.trim() == "data" { | ||
| if let Ok(value) = member.value() { | ||
| match value { | ||
| AnyJsExpression::JsIdentifierExpression(_) | ||
| | AnyJsExpression::JsArrowFunctionExpression(_) | ||
| | AnyJsExpression::JsFunctionExpression(_) => return None, | ||
| _ => return Some(()), | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Needs to be filtered so that it only runs in .vue files.
crates/biome_js_analyze/src/lint/nursery/no_vue_data_object_declaration.rs
Outdated
Show resolved
Hide resolved
| if let Ok(member_name) = member.name() { | ||
| if let Some(name) = member_name.name() { | ||
| if name.trim() == "data" { | ||
| if let Ok(value) = member.value() { | ||
| match value { | ||
| AnyJsExpression::JsIdentifierExpression(_) | ||
| | AnyJsExpression::JsArrowFunctionExpression(_) | ||
| | AnyJsExpression::JsFunctionExpression(_) => return None, | ||
| _ => return Some(()), | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This needs to make sure that the data member is at the specific level that we are expecting. This would be a false positive:
{
methods: {
foo() {
const bar = {
data: {}
}
}
}
}There was a problem hiding this comment.
d1c004b - I'm hoping this covers all the cases we need. Let me know if i'm still missing any here. I added this example + the test cases from both eslint rules in the snapshot tests
| pub NoVueDataObjectDeclaration { | ||
| version: "next", | ||
| name: "noVueDataObjectDeclaration", | ||
| language: "vue", | ||
| recommended: true, | ||
| fix_kind: FixKind::Safe, | ||
| domains: &[RuleDomain::Vue], | ||
| } |
There was a problem hiding this comment.
Whoops, I missed this on my first pass -- This is missing the rule source that points to the original rule.
| // createApp(...), defineComponent(...) | ||
| AnyJsExpression::JsIdentifierExpression(_) => { | ||
| let options_argument = call.arguments().ok()?.args().elements().next()?.into_node(); |
There was a problem hiding this comment.
I feel like the strings need to be checked here to make sure we don't hit false positives. As in, we need to make sure this is a call to createApp or defineComponent (PS -- you'll want to compare the TokenText, not a String).
That being said, I'm not sure if its worth invoking the semantic model here to make sure this is imported from vue. Since this rule is confined to the vue domain, I would think anyone calling these functions would be importing them from vue. So the simple string comparison will suffice.
| if let Ok(object_member_name) = property_object_member.name() { | ||
| if let Some(key_name) = object_member_name.name() { | ||
| if key_name.text().trim() == "data" { | ||
| if let Ok(value) = property_object_member.value() { | ||
| match value { |
There was a problem hiding this comment.
nit: You might want to try chaining .and_then() instead to reduce this indentation
| i Safe fix: Convert the data object to a function returning the data object | ||
| 9 9 │ // app.component with object `data` | ||
| 10 10 │ app.component('some-comp', { | ||
| 11 │ - ··data:·{ | ||
| 11 │ + ··data:·function(){return{ | ||
| 12 12 │ foo: 'bar' | ||
| 13 │ - ··} | ||
| 13 │ + ··}} | ||
| 14 14 │ }); | ||
| 15 15 │ |
There was a problem hiding this comment.
Generally, we try to make our fixes line up with what the formatter would output so the user doesn't have to run biome twice.
|
@amousa11 Would you mind if I took over this PR? We have some more generic vue tooling coming in another PR that this would benefit from. |
|
@dyc3 No problem, I just pushed up my WIP based on your feedback. Can you link me to that PR for my own learning? |
…t rule test source
…nly check for data member in vue options objects, write documentation, update action
WalkthroughA new lint rule, Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were identified. All modifications are directly related to the introduction and integration of the Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (26)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
crates/biome_js_analyze/src/lint/nursery/no_vue_data_object_declaration.rs (2)
133-133: Remove debug statements before merging.These debug statements should be removed for production code.
- dbg!("rule is running");- dbg!("found a component");- dbg!("found a data declaration");Also applies to: 143-143, 149-149
153-162: Consider using combinators to reduce indentation.The nested structure can be flattened using
and_thenchaining for better readability.- match data_decl { - AnyVueDataDeclarationsGroup::JsPropertyObjectMember(object_member) => object_member - .value() - .ok() - .and_then(|value| value.omit_parentheses().as_js_object_expression().cloned()) - .map(|object_expression| State { - data_decl_range, - object_expression, - }), - AnyVueDataDeclarationsGroup::JsMethodObjectMember(_) => None, - } + match data_decl { + AnyVueDataDeclarationsGroup::JsPropertyObjectMember(object_member) => { + object_member + .value() + .ok() + .and_then(|value| value.omit_parentheses().as_js_object_expression().cloned()) + .map(|object_expression| State { + data_decl_range, + object_expression, + }) + } + AnyVueDataDeclarationsGroup::JsMethodObjectMember(_) => None, + }
crates/biome_js_analyze/src/lint/nursery/no_vue_data_object_declaration.rs
Show resolved
Hide resolved
CodSpeed Performance ReportMerging #6574 will not alter performanceComparing Summary
|
Summary
Port
vue/no-deprecated-data-object-declarationand/vue/no-shared-component-datafromeslint-plugin-vue-#6300closes #6300
Test Plan
vue/no-deprecated-data-object-declaration/vue/no-shared-component-datafromeslint-plugin-vue#6300