escodegen VS recast

What's cool about Esprima syntax is that there are tools that generate code based on their AST. An example is escodegen which takes Esprima AST as input and outputs JavaScript code. You can think that you can use just strings to generate code, but this solution will not scale. In this tutorial, I show only a single if statement but you will run into a lot of problems if you will have more complex code.

Unparse the modified AST back into Javascript: Escodegen

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