Inventing On Principle
- CodeMirror: In Browser Code Editor
- Clone this repo
- Within the repo, run
npm install && bower install
grunt serverto run the app
At a high level, the app uses Esprima to parse the source code within the code editor, analyzes the source code to extract out variable and function declarations and inserts trace statements, execute the source code, and then visualize the information collected with an interactive interface
Whenever there's a change in the source code, whether this is from the initial load of the template source file or actual editing, and there's no errors detected by JSHint, Esprima is used to parse the valid source code and the Abstract Syntax Tree (AST) is saved, along with other helpers attached to help transform the source code.
At the same time, scope information for the source code is computed and is then used to produce a list of variables that need to can be traced. The actual tracing generation is laid out in
tracer module. The logic under
genTraces specifies all the various expression types and how their values should be collected. The inserted trace statements call methods on the
tracer to collect information during run time.
The actual execution steps of the code are collected by tracing statements that make side effects and a slider is generated to allow for stepping through of the code path. At each step of the slider, the corresponding state at that step is rendered. There are 2 main ways of displaying this information:
- the scoped variable information are directly displayed as raw JSON
- for specific arrays, a D3 visualization is generated
This project is still in progress, with lots of room for improvement
- Generalizing visualization modules to visualize different kinds of data, such as arrays, objects, etc.
- Optimizing the control flow to be more resilient from errors
- More code transformation tools, such as refactoring
- Better displays of variable information and control flows