activeviam / online-editor Goto Github PK

Ultimately, we need to make parse accept a string representing TypeScript code and return the corresponding abstract syntax tree.

There are several parsing solutions. See https://www.npmtrends.com/nearley-vs-jison-vs-acorn-vs-esprima.
Of course, there is also the option of writing one.

Let's explore these options and use this GitHub issue as a thread to discuss their pros and cons, given the timeframe and that our main goal here is to learn.

Ultimately, we will transform App.tsx to make it become an editor where the user can write TypeScript code and benefit from (at least) syntax highlighting and autocompletion.

The first step is to understand how an editor chooses to display what it displays, given an abstract syntax tree. This can be done by reverse engineering Monaco Editor (VS Code's editor). A very first step can be to go through Help>Toggle developer tool directly in VS Code in order to inspect the editor's DOM and see how it seems to be linked to the code you wrote in it. An optional, more advanced step would be to clone it (https://github.com/microsoft/vscode), start it up in dev mode and try to debug it.

Let's use this GitHub issue as a thread to discuss our findings. Once we have a good picture, we will be able to start coding.