Makes the Compiler Explorer app, and all the tooling ESM compatible. Things that have been done: 1. The package.json has `type: module` now 2. All relative imports have a .js ending 3. All directory imports are now directory/index.js to comply with ESM standards 4. Dependency node-graceful is now imported into tree, because the package is broken under esm 5. Dependency p-queue has been bumped to 7.x with ESM support 6. Dependency profanities has been bumped to 3.x with ESM support 7. Webpack config is now both ESM and CommonJS compatible 8. Non-ESM compatible imports have been rewritten 9. ESLint configuration has been tweaked to not fail on .js imports 10. Mocha is now hacked together and ran with ts-node-esm 11. Webpack is now hacked together and ran with ts-node-esm 12. Webpack config is now ESM compatible, so that it can be used in the dev server 13. Cypress code still runs commonjs, and has been excluded from the tsconfig 14. All sinon mock tests have been commented out, because sinon module mocks do not work with ESModules (because ESModules are immutable) A lot of tests are now giving warnings/errors to stdout, yet still pass. Docenizer codegenerator scripts have been updated, but I did not re-run them, and instead just changed their code. --------- Co-authored-by: Matt Godbolt <matt@godbolt.org>
How do I ?
This is a how-to guide for the user-interface presented by Compiler Explorer. This doesn't cover the details of how to set up or modify Compiler Explorer for your own needs. For that, please check the documents which already cover topics like:
- Adding a language
- Adding a compiler
- Adding a library
- Adding a tool
- and many more at compiler-explorer/docs
Fast links:
Change the assembly syntax from Intel
The option to switch assembly from Intel to AT&T syntax is present in the Output option of each compiler. If enough
space is not present, the option also presents itself as the gear symbol (⚙)
Compare the time taken by compilation and networking
This is the symbol that looks like a bar graph (📊). If your compilations are taking long, you can use this to check the time taken by:
- Networking, JavaScript, waiting for events, etc.
- Checking the cache and retrieving from it on a cache-hit
- Compilation (on force compilation or cache-miss)
- Parsing the generated assembly before presenting it
View intermediate information provided by the compilers
Though both GCC and Clang create supplementary outputs along with assembly (shown by default), and an executable (created if an executor has been added), the exact nature of the outputs and their formats differ between the compilers.
GCC allows the Tree, IPA, RTL and graph outputs, while Clang allows optimization, AST, IR and graph outputs. Some outputs (e.g. RTL or graph) also have a rich set of options in the UI to enable focussing on a particular function or compiler stage.



