add a js parser

[rrd108]

Originally posted by @rrd108 in #358 (comment)

[rrd108]

SWC has typescript support https://swc.rs/docs/getting-started

[rrd108]

Seems to be a good choice.

It should be more perfomant - what is not an issue for now, but adds an extra layer to learn for contributors.

What is your opinion @David-Pena ?

Maybe we try to use it for a problematic rule and let's see if we can add some support for new contriubors?
Or we keep regex in general and use the parser only for regex-problematic cases?
Or?

[rrd108]

Esprima doesn't support typescript syntax as far as I know. Babel does and it can generate an ESTree-compliant AST that can be used with various libraries like ast-types and esquery

not like SWC which has its own non-ESTree AST and isn't compatible with the myriad of libraries for working with ESTree ASTs

Another option is to use ast-grep API which has its own vue language support

Originally posted by @UnrefinedBrain in #358 (comment)

[David-Pena]

It should be more perfomant - what is not an issue for now, but adds an extra layer to learn for contributors.

Time to study again...

IMO the best approach would be to transition slowly and starting with the problematic rules like simpleComputed functionSize etc. And to keep regular regex as our main approach... but if a PR for a new rule is sent with the parser and not regex, its absolutely welcomed...

[David-Pena]

At the end, which parser are we going to use?

Did you find the benchmark you were looking for? @rrd108

[rrd108]

as performance is not an issue at all (yet) I doped my benchmark effort.

We need some more digging which parser to use.

[UnrefinedBrain]

All of the parsers are very fast. I don't think that's something we'll see a noticeable difference on between them

I recommend using vue-eslint-parser along with @babel/parser so you can detect problems in <template> too. here's example of how to do it: https://github.com/UnrefinedBrain/vue-metamorph/blob/master/src/parse/vue.ts

Using a html parser instead of vue-eslint-parser could work too, but it won't parse directive bodies as JS expressions

Do you want a PR? i can help you

[rrd108]

@UnrefinedBrain yes we would really appreciate a PR.

Both of us working on other issues, so you are very welcome to contribute.

[David-Pena]

Do you want a PR? i can help you

That would be awesome! I'll learn from those PRs 🫡

[David-Pena]

Update @rrd108 :

I just finished the refactor of the functionSize rule using @babel/parser and @babel/traverse, I'll create a few comparisons for us to have in mind