Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A babel-plugin would be nice! #68

Open
trusktr opened this issue Jul 13, 2018 · 2 comments
Open

A babel-plugin would be nice! #68

trusktr opened this issue Jul 13, 2018 · 2 comments

Comments

@trusktr
Copy link

trusktr commented Jul 13, 2018

So we can use it with @babel/register (f.e. in an Electron app).

@adamhaile
Copy link
Owner

My plan was to hold off on a babel plugin until/if I switched the compiler to Babel, because that would make it much easier. With the current code, I'd have to go babel AST -> plain JS -> Surplus compiler -> reparse babel AST, and I'd have to do all that in a way that preserved incoming and outgoing sourcemaps.

Do you know if there are any babel plugins that have to go to plain sourcecode and back? If there are, it might be easy to copy and modify them.

@trusktr
Copy link
Author

trusktr commented Jul 13, 2018

Although that path is less ideal, it definitely seems possible.

Looks like you could use recast to

  • take the babel AST and turn it into JS with source map, using recast.print(ast),
  • then you could run your Surplus transform on it,
  • then use recast.parse(code) along (with your Surplus source map if it currently has the ability to accept an input source map) to turn it into a babel-compatible AST, and the final output should have a working source map.

If Surplus does not yet accept an incoming source map, that might be a problem, but at least it would work.


On a different path, you may have better luck just using Recast from scratch.

Using Recast is really easy, the API is really nice. It supports @babel/parser (and older Babylon), therefore it will give you a nice AST node tree including JSX nodes that you can replace with ease.

I found this to be helpful: https://astexplorer.net/. Once you have the AST, you can inspect it there to see what it looks like.

There's a lot of neat tools here that you can use along the way: https://github.com/estools, for example

It becomes easy as DOM manipulation once you have the nodes.

For example, once you have the AST you can use https://github.com/estools/estraverse to traverse them.

You might be able to use https://github.com/estools/esquery to find exactly specific nodes you want to manipulate.

If you investigate all those tools and plan which ones to use, I bet you could write a whole new transform faster than the time it'll take for you to iron the limitations with source maps that your original compiler has, and you'll end up with perfect source maps from Recast! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants