API Proposal: Code Formatting, Prettier

[acao]

Currently:

We aren't using prettier, instead a lightweight custom solution that has issues, and is not configurable.

Proposed

• Use prettier for graphql, json, yaml, etc.
• make it fully configurable by users
• make it available via command palette, right click context menu, and key commands
• allow formatting on paste, format range, etc
• asynchronously imports prettier standalone/graphql parser (500kb minified!)
• offload computationally expensive work to the webworker process, to increase scalability for large operations or variables.

RFC In Progress

This PR implements all of the above using monaco and a new language service class: acao#17

It performs the prettier parsing and formatting entirely in the monaco language service webworker thread, and integrates cleanly with monaco's built in formatting provider capabilities. Thus why format on paste, etc is built in! hooray monaco

Todo

• Document monaco-graphql formatting configuration API
• allow a formattingConfiguration prop to pass to new monaco-graphql API
• document how to use new GraphiQL editorConfig prop to enable formatOnPaste
• expose API to programatically format operation (for an eventual button)

Originally, we were going to make this a plugin, however, the formatting is already so tightly integrated with monaco, and we asynchronously load prettier on the first format run so, it's not as daunting as it had seemed before. 500kb is a LOT to consider. prettier/standalone sounds small, but check it out on bundle phobia

[bitjson]

Hey @acao, thanks for all your work on graphiql!

What's the status on this issue? Are you still working on your feat/use-context-hooks branch? Are you still looking for help testing?

I think built-in Prettier support would really improve the developer experience, and I would agree that increasing the bundle size isn't a big concern.

E.g. it looks like the Hasura console weighs in at ~13 MB right now (gzipped, and ~12 MB is javascript), and that hasn't seemed to matter at all in my use. I'd happily trade bundle size for developer experience any day. 👍

[acao]

@bitjson monaco-graphql already fully supports this! the context RFC PR is merged but we decided to explore other directions since context is unsuitable for performance reasons. it uses the monaco-graphql formatter, which uses prettier, and allows custom prettier settings!

[acao]

I started work on new new roadmap issue for GraphiQL 2, to summarize the next phase of GraphiQL RFC development:

#1683

this will replace the other pinned milestone issue

[dimaMachina]

Available in https://github.com/graphql/graphiql/releases/tag/graphiql%404.0.0-alpha.5