Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: introduce monaco editor to GraphiQL #17

Merged
merged 9 commits into from
Apr 30, 2020

Conversation

acao
Copy link
Owner

@acao acao commented Apr 19, 2020

  • move monaco worker to seperate worker file
  • introduce webpack config from monaco example
  • switch variables/results codemirror with simple use-monaco loader for refs, state, etc. using default monaco json mode
  • switch operation editor to use monaco graphql mode
  • load schema from monaco worker for SchemaProvider

graphiql-with-monaco

Instructions:

  1. yarn from the monorepo root after checking out this branch
  2. yarn build from the monorepo root
  3. then, yarn start-graphiql from the monorepo root

Supported features

  • change schema uri
  • basic hover dialogs
  • basic language diagnostics
  • basic graphql language code completion
  • formatting
  • configurable

Known Issues:

  • Deploy preview is broken
  • Dist is messy - needs more complex webpack config
  • Variables json completion/diagnostics support is temporarily disabled

},
);

// @ts-ignore
monaco.languages.graphql.graphqlDefaults.setSchemaUri(SCHEMA_URL);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cshaver if we do this inside schema context, then it will reload schema and validations, completion, etc everything!!!

@@ -0,0 +1,122 @@
<!--
* Copyright (c) 2019 GraphQL Contributors
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Copyright (c) 2019 GraphQL Contributors
* Copyright (c) 2020 GraphQL Contributors

😛

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha, nice!

Copy link
Collaborator

@cshaver cshaver left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some small comments but overall this is looking great. Love the codemirror->monaco before/after! 😍

@@ -12,7 +13,7 @@ import JSONWorker from 'worker-loader!monaco-editor/esm/vs/language/json/json.wo
// @ts-ignore
import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';

const SCHEMA_URL = 'https://swapi-graphql.netlify.app/.netlify/functions/index';
const SCHEMA_URL = 'https://api.spacex.land/graphql/';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't know about this one! :D

packages/graphiql/src/components/ResultViewer.tsx Outdated Show resolved Hide resolved
packages/graphql-languageservice/src/schemaLoader.ts Outdated Show resolved Hide resolved
@acao
Copy link
Owner Author

acao commented Apr 30, 2020

now that this officially improves on graphql#1468, i think it's good to merge

@acao acao marked this pull request as ready for review April 30, 2020 01:40
acao and others added 2 commits April 29, 2020 23:05
@acao acao merged commit 8a7cb09 into feat/use-context-hooks Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants