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.

Sign up for GitHub

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

Jump to bottom

CM6 support for codemirror-graphql #2022

Closed
sergeichestakov opened this issue Nov 12, 2021 · 22 comments · Fixed by #2052
Closed

CM6 support for codemirror-graphql #2022

sergeichestakov opened this issue Nov 12, 2021 · 22 comments · Fixed by #2052
Assignees
@imolorhe @yoshiakis
Labels
codemirror-graphql

Comments

@sergeichestakov
Copy link
Contributor

Hey there!

I was looking to add graphql support to our app which uses CodeMirror 6 and stumbled upon the codemirror-graphql package in this repo. However, it looks like that package only works for CodeMirror 5 and is therefore not compatible with CM6. I also couldn't find any alternatives that do work with CM6.

I saw that there was a way to use CM5 language packages in CM6 (e.g. the modes in this repo: https://github.com/codemirror/legacy-modes/) but only if they implement the StreamParser interface which I don't think is the case here.

Just wondering if there were any plans to add support for CM6 in the codemirror-graphql package. Happy to help out in this effort myself as well and open up a PR if this is something you guys want and no one else can pick it up.

Thanks in advanced!
@DelysidBot
Copy link

;)

@acao
Copy link
Member

acao commented Nov 14, 2021 •
edited

any support for that would be more than welcome!

i’m deep into preparing monaco-graphql for graphiql/playground 2.0, but we have contributors and co-maintainers who care a whole lot about codemirror-graphql, and considering they are both using the same underlying language service libraries, they will continue to improve one another

@imolorhe
Copy link
Contributor

Adding support for CM6 would be great. I can try to support any efforts on this but unfortunately can't commit to picking this up this week. I should be able to do so by next week though if it isn't already being implemented by then.

imolorhe added a commit that referenced this issue Nov 21, 2021
@imolorhe
Added Codemirror 6 legacy mode support
2eb774f 
Implemented the codemirror.next legacy mode support for graphql mode.
This only covers syntax highlighting. Autocomplete, jump and info extensions
still need to be implemented to have feature parity with Codemirror v5.

From #2022
@imolorhe imolorhe mentioned this issue Nov 21, 2021
Merged
@imolorhe
Copy link
Contributor

I've added support for the stream parser. This only handles basic syntax highlighting.

@imolorhe
Copy link
Contributor

imolorhe commented Nov 21, 2021 •
edited

To have support for all the other features, we would need to implement a Parser class. The current parser in graphql-language-service-parser is not compatible with that class.

I think we can potentially transform the graphql language service parser to support the lezer Parser following a similar approach in the markdown lang.

@sergeichestakov
Copy link
Contributor Author

Amazing thank you so much! Really appreciate the swift response.

Any plans to publish that package to NPM? Even just the basic syntax highlighting would be great.

acao pushed a commit that referenced this issue Nov 23, 2021
@imolorhe
Added Codemirror 6 legacy mode support (#2035)
d0c22c4 
Implemented the codemirror.next legacy mode support for graphql mode.
This only covers syntax highlighting. Autocomplete, jump and info extensions
still need to be implemented to have feature parity with Codemirror v5.

From #2022
@acao
Copy link
Member

acao commented Nov 24, 2021

released! 🥳 thanks @imolorhe !

@acao acao closed this as completed Nov 24, 2021
@sergeichestakov
Copy link
Contributor Author

thanks so much! Super excited for this.

However, just to let you know I think there may have been an issue publishing the package as I'm getting a "module not found" error when I try to import from codemirror-graphql/cm6-legacy/mode.

Indeed, when I dig into node_modules, I don't see a cm6-legacy folder at the top level (there is one under esm and src however.

When I cloned the example from this repo it worked because it's pulling in the package locally here: https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/package.json#L27

However, if you replace that line with the latest version published on npm the build will fail since the module fails to resolve.

Have a repl with a minimal repro here: https://replit.com/@SergeiChestakov/cm6-gql (hosted at https://cm6-gql.sergeichestakov.repl.co/)

@imolorhe
Copy link
Contributor

imolorhe commented Nov 24, 2021 •
edited

Right.. I was supposed to add cm6-legacy to the files list in package.json. Verified locally with npm pack.

@imolorhe imolorhe linked a pull request Nov 24, 2021 that will close this issue
Added cm6-legacy to files list #2052
Merged
@imolorhe
Copy link
Contributor

Created PR with the fix

@sergeichestakov
Copy link
Contributor Author

btw should the version of CM in this package's peer dependencies be updated to support CM6:

graphiql/packages/codemirror-graphql/package.json

Line 44 in 503c376

"codemirror": "^5.58.2",

@acao
Copy link
Member

acao commented Nov 29, 2021

yes, I also plan on upgrading graphiql@1 to use codemirror@6

@sergeichestakov
Copy link
Contributor Author

FYI we're using this in production now :)

You can see it in action here: https://replit.com/@SergeiChestakov/gql-example?v=1

Thanks again! 😄

@imolorhe
Copy link
Contributor

imolorhe commented Dec 3, 2021

Oh wow.. it was for repl.it. Nice!

@sergeichestakov sergeichestakov mentioned this issue Apr 21, 2022
Merged
@imolorhe
Copy link
Contributor

FYI we also released the full codemirror 6 graphql support with autocompletion, etc. https://www.npmjs.com/package/cm6-graphql

@sergeichestakov
Copy link
Contributor Author

Amazing thank you! Will give it a try 😄

usalko pushed a commit to usalko/graphiql-code-exporter that referenced this issue Jan 23, 2023
@ivict
# Upgrade code mirror dependency.
34d3e69 
  --  Reason, error with CM6 (graphql/graphiql#2022).
      Advanced output (yarn build for project https://github.com/usalko/graphiql.git#js):

yarn run v1.22.19
$ yarn build:clean && yarn build:cm6-graphql && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql-plugin-code-exporter && yarn build:graphiql
$ yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json
$ tsc --build --clean
$ tsc --build --clean resources/tsconfig.graphiql.json
$ yarn workspace cm6-graphql run build
$ cm-buildhelper src/index.ts
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /home/vanya/.nvm/versions/node/v16.17.1/bin/node
Arguments: /home/vanya/.nvm/versions/node/v16.17.1/lib/node_modules/yarn/lib/cli.js run build
Directory: /home/vanya/projects/web/eu/research/graphiql/packages/cm6-graphql
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
usalko pushed a commit to usalko/graphiql-code-exporter-dist that referenced this issue Jan 23, 2023
@ivict
# Upgrade code mirror dependency.
a69fdd2 
      --  Reason, error with CM6 (graphql/graphiql#2022).
          Advanced output (yarn build for project https://github.com/usalko/graphiql.git#js):

    yarn run v1.22.19
    $ yarn build:clean && yarn build:cm6-graphql && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql-plugin-code-exporter && yarn build:graphiql
    $ yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json
    $ tsc --build --clean
    $ tsc --build --clean resources/tsconfig.graphiql.json
    $ yarn workspace cm6-graphql run build
    $ cm-buildhelper src/index.ts
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    error Command failed.
    Exit code: 1
    Command: /home/vanya/.nvm/versions/node/v16.17.1/bin/node
    Arguments: /home/vanya/.nvm/versions/node/v16.17.1/lib/node_modules/yarn/lib/cli.js run build
    Directory: /home/vanya/projects/web/eu/research/graphiql/packages/cm6-graphql
    Output:

    info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@cgarnier
Copy link
Contributor

cgarnier commented Mar 2, 2023

@imolorhe that package doesn't work with module import. The deps required for using dist/index.js are all into the devDeps.

@rossmeredith
Copy link

@imolorhe Does this new package provide error messages and auto complete based on the schema? Difficult to understand because there are no instructions in the package.

@imolorhe
Copy link
Contributor

imolorhe commented Apr 2, 2023

Yes it does. Sorry I'll try to draft a README for the package soon

@imolorhe
Copy link
Contributor

imolorhe commented Apr 3, 2023

#3127

@rossmeredith
Copy link

@imolorhe Thanks for the quick response. I've got something working now.

My only outstanding concern is supporting a "variable" editor. I see in graphiql which uses code mirror 5 there is a "graphql-variable" mode. I had a look inside this new package which support cm6 but can't see anything similar?

@imolorhe
Copy link
Contributor

imolorhe commented Apr 5, 2023

No there is nothing similar for codemirror 6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@imolorhe imolorhe

@yoshiakis yoshiakis

Labels
codemirror-graphql
Projects
GraphiQL Roadmap
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added cm6-legacy to files list graphql/graphiql
7 participants
@cgarnier @acao @imolorhe @yoshiakis @sergeichestakov @DelysidBot @rossmeredith