How to parse JSX syntax nodes with n levels of nesting using GritQL plugin?

[fu050409]

I noticed that among the built-in rules in Biome.js, there is a noExcessiveNestedCallbacks, which is a rule implemented directly in Rust.

I’d now like to implement a similar check for JSX nesting depth—if a JSXElement is nested more than n levels deep, it should trigger a warning prompting the user or AI agent to refactor their code. I haven’t found a similar built-in check, though I hope I haven’t overlooked it.

I’m not sure if this rule is planned for implementation, so I’m considering using a GritQL plugin to implement it (though I’d be happy to submit a PR if the community plans to implement it). My initial idea was based on GritQL functions, but GritQL doesn’t seem to support arithmetic operations like addition, subtraction, multiplication, and division, nor does it support numerical comparisons. Support for recursion and loops is also somewhat difficult to understand. I’m not sure if this is because it hasn’t been implemented yet or if it’s by design, so I’m currently using a very inelegant solution:

engine biome(1.0)
language js(typescript, jsx)

`<$a $...>$...<$b $...>$...<$c $...>$...<$d $...>$...<$e $...>$...<$f $...>$...<$g $...>$deep_inner</$g>$...</$f>$...</$e>$...</$d>$...</$c>$...</$b>$...</$a>` where {
  register_diagnostic(span=$deep_inner, message="The nesting depth is too deep, consider refactoring to components.", severity="error")
}

Does Biome.js plan to support this rule? Or is there a better way to write this in GritQL?

Any response will be appreciate.

[dyc3]

I wouldn't be opposed to a native rule for this. Though ideally, you would also be able to do this with grit as well.

Feel free to submit a PR for the rule.

cc @arendjr @morgante -- maybe there's a better way to deal with this in grit that I don't know about

[fu050409]

Thank you for your reply. I submitted a PR at #10715.