Create a useable GraphQL Monaco Mode and Example

[acao]

We are working towards a stable graphql-monaco that will become a part of the official, stable GraphiQL reference implementation, in place of our project codemirror-graphql.

Reasoning

The primary reasoning is that monaco is more closely aligned with the LSP spec, reducing many redundancies in the rest of our ide language service ecosystem. The effort of maintaining and introducing new language and editor features to GraphiQL and other browser/electron based IDEs will be significantly reduced.

What's more, users will have a great time with the vscode-like experience and built-in features. This will make it much easier for plugin authors to provide their own diagnostics (aka linting/validation), completion (aka hinting/autocompletion/intellisense), schema loaders, code helpers, command palette shortcuts, and many more options!

Design Notes

None of these will be dependent on react of course, as is also the case with codemirror-graphql. For example, altair project uses codemirror-graphql with angular! This is what we want to enable with monaco-graphql as wel, so implementations using vue, vanilla js, even older DOM manipulation frameworks are able to use this.

It will of course implement our underling GraphQL language service as other monaco modes do, so we will want to make PRs to modify/enhance the LSP and interfaces as needed. These will be ported from the current mega draft PR.

Monaco GraphQL and examples

• packages/monaco-graphql (new)
• examples/monaco-amd-example (new) - using amd/requirejs
• examples/monaco-webpack-example (new)

Work in Progress:

• Draft PR (Monaco Mode - Phase 1 #1421) - following monaco-json closely. This is the one that will become the actual monaco service.
• Proof of Concept (POC) Branch - implements monaco using anti-patterns, but successfully achieves completion, diagnostics, popovers without instantiating the LSP class or using webworkers which is a requirement (this is what the draft PR above does). Uses underlying LSP functions the class uses, rather than the full class, similar to what codemirror-graphql does. This is meant to be for reference, just to see the familiar LS <> Monaco compatibility layer.
  • demo code
  • live demo
  • older react POC and demo

TODO

• (in progress, some methods work but not full LSP class) launch language service(s) in webworker(s) (see: monaco-json, monaco-typescript, etc)
• operation diagnostics
• (in progress) operation completion
• (in progress) Port GraphQL cache for web and server usage, remove runtime dependent features and replace with config options
• re-register default graphql language with our own version
• operation references/definition support (via LS class)
• variables JSON completion/diagnostics/declarations etc (dynamically define json schema, so much simpler than with codemirror!)

[acao]

@rebornix thinking the Phase 1 and next few PRs would add up to this, and then we can come back around and make sure workspaces support is in place, and user config/interfaces are improved, and cross-workspace symbol references (for e.g. a query field -> generated SDL schema representation), for another roadmap possibly? towards the completion of the full fledged monaco project?