Abstract Syntax Tree - is the web application that visualize your JavaScript code as the Abstract Syntax Tree(AST) and its Parallel Data Representation(PDR).
The application helps interested people delve into the parallel compilation (where PDR is involved). We suggested the one-page web application that builds required representations of JavaScript code. It has three blocks: code editor, AST, and Parallel Array Representation. The blocks will synchronize, and with the mutations of the code, the other representations will change too.
To use this web application just go to the following link and paste your JavaScript code.
- Immediate result when typing code without pressing any buttons
- Synchronous highlighting part of code and corresponding nodes in AST and lines in PDR
- Error message for user when code is not valid
- Possibility to share your code with corresponding AST and PDR via link by pressing button "Share"
- Export AST to graphviz format file by pressing button "Export"
- Constant folding
Main page
Share
Exaple of graphviz. You can render the graphviz file yourself using this tool.
The application was build using Svelte framework. As a code editor we used CodeMirror. To parse the source code we used Esprima API.
Before project installation be sure that you have installed npm tools and Svelte framework
- Clone the repository
git clone https://github.com/InnoSWP/AbstractSyntaxTree- Go to the root of the project
cd <PATH>/AbstractSyntaxTree- Run
npm install-
Now you can do any changes and modification in project.
-
To run this project on your computer use following command
npm run dev