graphql / graphql/graphiql

GraphiQL 2/Monaco/Codemirror Roadmap

Open
#2,122 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.9k
Forks
1.9k
Avg merge
22h 45m
Merged PRs (30d)
70

Description

now using github projects for the roadmap:

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

## `graphiql@1.x`
- [x] use dynamic imports instead of inline require for SSR & support esbuild consumers

## `graphiql@2.x`

### 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
- [x] `monaco-editor` language support using `monaco-graphql`
- [x] prettier formatting
- [x] 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?
- [x] choose from a list of operations in the document to execute
- [ ] improved subscriptions experience with a custom subscriptions response tool
- [ ] improved
- [x] `variables` json completion & validation
- [x] 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

`graphiql@2.x` 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`
- [x] 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
- [x] add variables validation support
- [x] 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
- [x] upgrade to yarn 3?
- [ ] explore using

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.