recast VS Acorn

GitHub | Website

If jscodeshift is confusing, I recommend looking into using recast directly, along with ast-types for AST traversal and its node factories. Inside your visitors, write some conditionals that check for the patterns you want to detect, then mutate the node passed to the visitor, or otherwise mutate the AST. Keep going until tests are passing.

I ended up writing my own codemod tool based on recast to automate most of the repetitive, mindless grunt work. Even with the tool shaving hundreds of hours off of the migration effort, there's still a huge amount of work left, since we need to find or create Vue 3-compatible alternatives of all of our Vue 2-only dependencies. Some of these dependencies (e.g. vee-validate) are used pretty ubiquitously too

I had great results with a combination of babel + recast. Babel is doing the job and Recast is mostly here to preserve the original style when printing code again. I animated a workshop @ Node.JS Montréal 2019 that was recorded here. We cover the parse/transform/print of code using Babel (live coding starts around 45').

recast

Why do we then have other JavaScript parsers like babel parser, swc parser, acorn, espree and the likes since JavaScript engines have their own internal parsers?

If you're trying to determine if a string is valid Javascript then your best bet is to use a JS parser like Acorn. Trying to DIY parsing with just regex is a good way to end up incredibly frustrated.

To render UI I use Svelte. To parse JS files I use Acorn JS in Web Worker.

Behind Babel is created by an Australian developer Sebastian McKenzie and now consists a small team of contributors. Babel also makes uses a polyfill library called core-js, which in turn uses a JavaScript parser, acorn.

At line 3, we import parseScript from meriyah which is a JavaScript parser (could have been babel, acorn, swc, etc doesn't matter for our use case as long as they correctly implement the spec).

A simple starting point is Acorn with estree-walker. Not sure if you'll need more advanced functionality but that pair has worked well for my usage. It's also the combo that Svelte uses internally.

https://github.com/acornjs/acorn For parsing the tree