First off, if you're reading this: thank you! Even considering contributing to Compiler Explorer is very much appreciated! Before we go too far, an apology: Compiler Explorer grew out of a bit of hacky JavaScript into a pretty large and well-used project pretty quickly. Not all the code was originally well-written or well-tested. Please be forgiving of that.
Compiler Explorer follows a Code of Conduct which aims to foster an open and welcoming environment.
We have labeled issues which should be easy to do that you can find here
If you have any questions, don't hesitate: Contact us.
If there is something you would like to do yourself, it might help to make an issue so people can weigh in and point you in the right direction.
Compiler Explorer currently targets Node.js LTS version 16 so it's better if you do so as well when testing your changes locally.
make lint-fix will run the linter, which will auto-fix everything it can and report back any errors and warnings.git commit --no-verify if needed.make check to run both the linter and the code testsmake and ensure the site works as you‘d expect. Concentrate on the areas you’d expect to have changed, but if you can, click about generally to help check you haven't unintentionally broken something elseCode is separated into server-side code and client-side code. All dependencies (server and client side) are installed via package.json. Server code is in app.js and in the lib directory. Client code is all in the static directory.
In the server code, the app.js sets up a basic express middleware-driven web server, delegating to the various compiler backends in lib/compilers/. All of them inherit from lib/base-compiler.js which does most of the work of running compilers, then parsing the output and forming a JSON object to send to the client. Any assembly parsing is done in the lib/asm-parser.js, and similar, files.
In the client code, GoldenLayout is used as the container. If you look at some components like the static/compiler.js, you'll see the general flow. Any state stored makes it into the URL, so be careful not to stash anything too big in there.
The client code follows GoldenLayout's message-based system: no component has a reference to any other and everything is done via messages. This will allow us to use pop-out windows, if we ever need to, as the messages are JSON-serializable between separate windows.
The recommended way to work on Compiler Explorer is to just run make dev and let the automatic reloading do its magic. Any changes to the server code will cause the server to reload, and any changes to the client code will be reflected upon a page reload. This makes for a pretty quick turnaround. Note that a current issue makes every project media asset to be locally unavailable. We will hopefully fix this in the near future.
let or arrow operators) js code. Sadly there are still enough users out there on old browsers. Note that this restriction does not apply to the server side code, in which you can use all the cool features you want. In lieu of ES6 features, Underscore.js is available as a way to bridge the feature gap. The library is available both in the client and server code.