poeschko / explainsyntax Goto Github PK

We maintain a set of "interesting" node types in the AST, e.g. "VariableDeclaration" and "VariableDeclarator" for JavaScript. For each such node type, we also store additional information such as an MDN URL. When the CodeEditor component encounters such node types in the user code, it adds highlighting to them, i.e. an underline connected to a line going towards the right edge of the editor (to be connected with the information blob in the ExplainPane component). Highlight underlines should not overlap, e.g. in the case of a "VariableDeclarator" (x = 0) inside a "VariableDeclaration" (let x = 0), x = 0 would get an underline for "VariableDeclarator and let would get an underline for "VariableDeclaration". Whenever the highlighting changes, the CodeEditor fires an event that tells the parent componet (the App) what the highlights are, i.e. what node types they correspond to and at what vertical position their lines end; that information can be propagated by the parent component to the ExplainPane component.

To experiment with ASTs & node types: https://astexplorer.net/