Since code execution can be different code execution cannot be inferred from the code. It all depends on the firestarter seed. So I had to record somehow the code execution.
The flow I envisioned was an AST parser being able to inject code into critic parts of the code(constructors, function calls, etc). We can think of events triggered when those nodes where executed. Then a component that executed the modified code and tracks all the triggered ‘events’ and writes a much simpler version of the execution flow. Finally last step is taking the outcome of the former process and visualise in screen. So I had to split the project into 3 sub-projects:
Modified code can be run in any environment (node, browsers, …). The consistent trackback implementation let us track the execution beyond event loops, event handler and other complex mechanisms. Visualizer contains some builtin default reports so you don’t need to run any other code if you just want to check how visualization works. I tried to go the extra mile adding support for ES6(ES 2015) but at this time the only supported feature is ES6 class.
I’m happy with the project even though code could be better but coding in these time limited environment is more experimental and exploratory than any other. Maybe some feature will be added however I think, as an experiment, it’s enough and I prefer investing energy in other projects.