Machine Highlights with Semantic Tokens

[christoph-fricke]

This issue corresponds to the idea of special highlights in machine definitions that is outlined on Twitter: https://twitter.com/_maciej/status/1442463662464192515

I experimented with semantic highlighting yesterday. Since the XState language server has a better understanding of the machines, highlighting should be provided by the language server. The VS Code documentation^1 appears to explain an implementation that is editor based, but semantic token are also supported by the LSP^2. At the moment, I have yet to find an example/documentation for the vscode-languageserver library so it is not just a "guess how it works" implementation.

More importantly, I am not sure if we can currently support this use case with the parsed machine results. My idea has been to grab all locations of state names and transition names in the document from the parsed results. The parsed results do not contain such information at the moment, right? At least I did not find information about the location of state names and transition names in the object.

On a side note: State and transition names are specially highlighted in the Stately Viz if the names use CamelCase^3:

[mattpocock]

@christoph-fricke

More importantly, I am not sure if we can currently support this use case with the parsed machine results.

Yep, this is possible. Every parsed node has its location in the doc available somewhere. The way to do it is to go spelunking in the .ast property. So, ast.definition.states.properties (or something) to grab all the key nodes.

I am still a little suspicious about how useful this will end up being. But I love that you're diving into the source and experimenting, so feel free to keep going! Here if you need any more questions answering.

State and transition names are specially highlighted in the Stately Viz if the names use CamelCase

I don't think this is intentional on our part, could just be some Monaco Editor weirdness.

semantic token are also supported by the LSP

So far, I've been working from this list of capabilities: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide#advanced-topics

I can't specifically see semantic token support there, but I'm probably missing something. List Document Symbols might be useful?