graphql / graphql/graphql.github.io

new mini IDE for site using monaco-graphql

Open
#952 2 comments 3 reactions 0 assignees View on GitHub
💄 Enhancement
Dominant language
TypeScript
Stars
889
Forks
1.5k
Avg merge
4d 12h
Merged PRs (30d)
21

Description

we should build a new mini-IDE for the docs using `monaco-graphql`, since it's actually screen-reader accessible, supports multiple instances (with shared, single schema fetch) and it already supports most of the new language features that we need to document (correction - the LSP (gls-interface) does not yet have completion support for interfaces implementing interfaces, though validation and highlighting is supported in monaco-graphql. previously this issue claimed we fully supported this language feature).

according to the vscode team, the best way to re-use the same monaco mode instance across multiple editors is by using `editor.setModel()`. this way, the language service instance is built once, and the schema is executed once, and one set of language workers will service all editor panes.

the current `MiniGraphQL` component uses `codemirror-graphql` which takes much more effort to add new language features to, because of the non-LSP interface

also, if we want the embedded demos to execute against swapi-graphql, need to add new language features to that schema as well.

Contributor guide

Open the contributing guide

Research direction

Start with the current MiniGraphQL component, which uses codemirror-graphql, and review how monaco-graphql could replace it using editor.setModel() for shared language workers and schema fetching. Done means the docs have the new mini-IDE with the stated accessibility, multi-instance, validation, highlighting, and embedded-demo requirements, including any needed swapi-graphql schema work.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.