GraphiQL 2/Monaco/Codemirror Roadmap

[acao]

now using github projects for the roadmap:

https://github.com/orgs/graphql/projects/1/views/7

[email protected]

• use dynamic imports instead of inline require for SSR & support esbuild consumers

[email protected]

MVP Features

Here we will list all planned features exhaustively, even if they already exist in previous versions, to make sure everything is accounted for.

• i18n for all locale strings via react-i18n-next. hopefully we can set up a free translation platform as well.
• a11y-driven DX using a combination of best practices, automated tools, and careful audits & peer review. use monaco-editor and other accessibility features well to create a first-class screen reader experience for graphiql
• monaco-editor language support using monaco-graphql
• prettier formatting
• command palette
• replacement components for each editor pane
• custom left sidebar tabs with custom svg icons
• improved query execution history using indexeddb for greater depth and explorability. entries can be "hearted" more easily, and have tags maybe?
• choose from a list of operations in the document to execute
• improved subscriptions experience with a custom subscriptions response tool
• improved
• variables json completion & validation
  • supports jsonc comments as supported by monaco-json diagnosticOptions. parses jsonc to json before serialization for requests
• custom themeing system
• editor themes to go with color themes

Implementation

[email protected] will be a lightweight implementation of the below two SDK libraries, as will the new graphql playground replacement

• implement @graphiql/toolkit and @graphql/react (below)
• [ ]

@graphiql/toolkit

• createFetcher make it more pluggable - exchange/link as inspiration?
• port graphiql utilities and in-component utilities, anything that is useful that isn't react focused.
  • mergeAST
  • getQueryFacts

@graphiql/react

• port existing graphiql components, reconciling the context rfc react , monaco redesign and rewrite with the important upstream 1.x changes
  • flexible, seperate editor components, configurable via props and/or monaco-graphql
  • consider controlled via uncontrolled state as an explicit rather than implied option
  • DocExplorer and friends can move here, for a more lightweight import to use this directly
• convert to hooks entirely, expose hooks for other @graphiql/react implementations to use
• provide & document theme configuration
• add any new translation strings from 1.x work
• set up translation platform

monaco-graphql

• Improve Language Service & worker patterns
  • Dynamic webworker input means re-creating webworkers constantly, because concurrency models denote fixed input state for each concurrent process.
  • We need to simplify how these instantiate - potentially by using cacheing in the main process?
• add definition lookup & symbols support
• add variables validation support
• add variables completion support

codemirror-graphql

most improvements will be to underlying dependencies, shared by monaco-graphql

• standalone examples on codesandbox

docs efforts

• move detailed readme instructions to a root docs folder? or docs folders for each workspace in packages?
  • so,docs/graphiql/docs/monaco-graphql or packages/graphiql/docs/packagess/monaco-graphql/docs?
• Replace non-build-verifying examples with codesandbox examples linked from the examples/README.md pointed to latest tags for graphiql/etc
  • Monaco-example verifies the monaco-graphql type/build interface
  • Graphiql-webpack example verifies the graphiql type/build interface
  • Other examples make more sense on codesandbox
  • Removing CRA and other build tools will speed up the install and github actions pipeline substantially
  • each project (graphiql, monaco-graphql, codemirror-graphql) should have an examples section in it's readme that links to various codesandbox examples, using latest tag of that module

global efforts

• improve build and package exports using a more efficient and dynamic bundling pattern. consider swc, esbuild, etc
• upgrade to yarn 3?
• explore using

[acao]

@timsuchanek revived this roadmap text from the history as well!