ts-lite VS recast

This is neat! I’m curious if you see this being extended for other languages, or the concept being applied in other projects?

As for similar concepts, several projects by builder.io have some overlap. Most notably Mitosis[1], but I’d be shocked if TS-Lite[2] isn’t using similar techniques. Potentially Qwik[3] as well but I’m not sure, I would have bet that’s using Mitosis but it looks like that’s the other way around.

1: https://github.com/BuilderIO/mitosis

2: https://github.com/BuilderIO/ts-lite/tree/main/packages/core

3: https://github.com/BuilderIO/qwik

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