GraphQL grammar

Lezer
1

Hi there!

I am currently working on a GraphiQL alternative that trades React for Svelte and also uses CodeMirror 6. The variables and results panes are rendering just fine but the query pane needs a bit more work, mainly because the codemirror-graphql module depends on defineMode and other functionality only present in the stable version.

I’ve looked at the current lezer examples and quite honestly, I don’t understand what I’m looking at. Can someone point me in the right direction?

Here’s what I’ve built so far. Please ignore the terrible contrast in the UI.

SS 2020-03-08 at 10.03.51 AM
SS 2020-03-08 at 10.03.51 AM3964×2578 1.17 MB

2

Also, if there’s a full example to enable themeing somewhere I’d love to check it out.

3

I guess the first thing to look at is the lezer guide, which tries to explain how such grammars work. A grammar like that can be combined with some glue code (see the JavaScript version) that assigns highlighting categories and wraps the whole thing in a CM6 LezerSyntax extension.