levpen / syntax-tree-visualization

BS21-06 Team: Alexandr, Alexandra, Nastya, Nikita, Lev, Anton

🌳 Syntax Tree Visualizer

Syntax Tree Visualizer provides interactive environment for exploration of AST¹ (abstract syntax tree) and SA² (syntax array).

Features

• Code editor with syntax checker
• AST representation that updates as you type
  • Additional information about node on hover
  • Reworked AST builder from ST generated by tree-sitter List of reworked node types
• SA representation that updates as you type
• Highlighting of corresponding elements
• Sharing your projects with others
• Exporting to various formats
  • SVG
  • LaTeX
  • GraphViz

Supported languages

• JavaScript

Demo

How to use

Simply type code in code editor and see how AST and SA change. For more information refer to documentation on the website.

Installation

All in one Docker container

docker run -p 8080:8080 -d --rm --name devast skril/stv:1.0-full

Development

Local setup

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

git clone https://github.com/InnoSWP/syntax-tree-visualization

For running the project you need the following requirements:

• Node.js
• Yarn
• Git

On macOS using Homebrew:

brew install git node
npm install yarn

On Arch Linux:

pacman -Suy nodejs npm git
npm install yarn

git submodule init
git submodule update

Using docker

docker run -p 8080:8080 -d --rm --name devast --mount src=/path/to/syntax-tree-visualization,dst=/app,type=bind skril/devast:archlinux

Important: change "path/to/syntax-tree-visualization" to the root directory of the project

Alternatively on UNIX operating systems:

docker run -p 8080:8080 -d --rm --name devast --mount src=$(pwd),dst=/app,type=bind skril/devast:archlinux

Local setup

Requirements:

• Node.js
• Yarn
• Git
• arm-none-eabi-newlib
• GNU Make
• GCC

Install dependencies

yarn

Build project

yarn build

Start server without building it on http://localhost:8080/

yarn start

Env vars: MYSQL_HOST=localhost;MYSQL_USER=root;MYSQL_DATABASE=swpbase;MYSQL_PASSWORD=12345
To start with them

export MYSQL_HOST=localhost export MYSQL_USER=root export MYSQL_DATABASE=swpbase export MYSQL_PASSWORD=12345; yarn start

Contribution

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Notable used tools

• Tree-sitter node
• Docker
• TypeScript
• Ace Editor

Links

Footnotes

1. https://en.wikipedia.org/wiki/Abstract_syntax_tree ↩

2. https://dl.acm.org/doi/10.1145/2935323.2935331 ↩