Exploring Scala AST in your browser

Home / Developer Tools / Exploring Scala AST in your browser
Exploring Scala AST in your browser

A short story of adding Scala support to AST Explorer

AST Explorer

I recently gave a talk about all the different ways Abstract Syntax Trees play a role in many tools in the JavaScript universe. I had several demos prepared using astexplorer.net. In case you don’t know it, this is a brilliant tool.

You can type some code in, it gets parsed on the fly and you get an interactive AST that you can explore. Also, you can play around with tools that work on AST, such as linters, compilers and code-shifting tools.

All of this, directly in your browser, no need to install anything. It is wonderful.

I finished my talk, went for some food and beers with friends, and I started thinking “it would be really cool if we had this for Scala!”.

Then the realization: we can have it!

Despite starting as a JavaScript-centric platform, AST Explorer is an extendable platform: you can bring your own parser and enable AST exploration in any language.

The only restriction is that — being a browser-based app — the parser needs to be in JavaScript. How can we get a JavaScript implementation of a Scala parser?

The quest for a Scala parser in JS

The first tool that came to mind is Scalameta, a meta-programming toolkit for Scala whose AST representation is at the core of many present and future Scala tools (macros, migration tools, code formatters etc). Conveniently, Scalameta provides its own parser module.

Scalameta recently gained Scala.js support, so it can cross-compile to JavaScript. Wonderful! What we were missing was a JS façade that exposed a JS-friendly API in a CommonJS module (the kind of modules that get published on npm), so that it could be imported and used in a JavaScript app like AST Explorer.

I started experimenting and a few PRs later we finally had it!

And let me tell you: publishing a Scala library to npm was something!

It was now time for the pull request to AST Explorer and boom , a few days later it’s now live on the website!

Try it out, and be sure to provide feedback!

Thanks

I’m standing on the shoulders of giants, and my tiny contribution is just glue to stitch together the great work of others that I’d like to thank.

First, Eugene Burmako (author of Scalameta) and Ólafur Geirsson(maintainer of Scalameta and author of Scalafmt and Scalafix): they have been very supportive, by providing help and feedback and reviewing the PRs on Scalameta at the speed of light.

Also, thanks to Sébastien Doeraene and the Scala.js team. Their work to bridge the gap between Scala and JS is what made this kind of tools possible.

Finally, Felix Kling for authoring AST Explorer and Ingvar Stepanyan for the immediate feedback on the aforementioned pull request.

Both Scala and JavaScript communities have proven to be friendly and supportive. Thank you guys!

What’s next

I think this is an exciting step for everyone involved in meta-programming. AST Explorer makes experimenting with ASTs incredibly easy and I’m sure it will facilitate the life of anyone willing to build on Scalameta.

Now that we have parsing, I’d love to experiment on transformations, another interesting feature of AST Explorer. Imagine sketching a macro or a Scalafix rewrite directly in the browser, wouldn’t it be amazing?

Source: https://blog.buildo.io/exploring-scala-ast-in-your-browser-dc0b1fb743e0

Leave a Reply

Your email address will not be published.