babel/codemod astexplorer

[j4k0xb]

Ability to write custom babel transformers via website (#24)
@Memexurer @tecnessino

Very WIP but loading types for autocompletion and transforming already works: https://codemod-explorer.netlify.app/
I'll open-source it once it's more polished

[0xdevalias]

yeah I wanted to do something like this for a while, also with visualizing scope and matchers

Originally posted by @j4k0xb in j4k0xb/webcrack-ui#24 (comment)

Being able to easily visualise scope/etc would be really cool.

[0xdevalias]

Here are a few 'scope visualiser' tools I've liked ideas from in the past, might be cool to see some of those features too:

• https://mazurov.github.io/escope-demo/
• https://mazurov.github.io/eslevels-demo/
• https://jsbubbl.es/

[0xdevalias]

Another tool that I always thought would have been cool to have better support built in to AST Explorer/similar (or variations of it where relevant):

• https://estools.github.io/esquery/
  • https://github.com/estools/esquery

[j4k0xb]

Now it highlights the scope range and references/constantViolations after clicking on an identifier:

and a function is exposed to add debug highlights in the result panel:

Literal(path) {
  highlight(path.node, 'my hover message: ' + path.type);
}

[0xdevalias]

Nice!

Any plans to have clicking on the code in the top left code panel, jump to/highlight it in the top right AST panel like AST Explorer does?

And/or similar 'reverse highlighting' when hovering over a section of the top right AST panel, highlighting the code it relates to in the top left code panel?

[j4k0xb]

sure