From 18d2c9f7bb9caab7e980df9e37044d0075a8afb4 Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 3 Apr 2023 01:46:43 +0200 Subject: [PATCH 1/6] Update README.md --- packages/cm6-graphql/README.md | 119 +++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md index f0e93a60084..71b484ebe3f 100644 --- a/packages/cm6-graphql/README.md +++ b/packages/cm6-graphql/README.md @@ -1 +1,120 @@ # CodeMirror 6 GraphQL Language package + +[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql) +![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads) +[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE) +[Discord Channel](https://discord.gg/cffZwk8NJW) + +Provides CodeMirror 6 with a parser mode for GraphQL along with a autocomplete and linting powered by your GraphQL Schema. + +### Getting Started + +```sh +npm install --save cm6-graphql +``` + +CodeMirror helpers install themselves to the global CodeMirror when they are +imported. + +```js +import type { ValidationContext, SDLValidationContext } from 'graphql'; + +import CodeMirror from 'codemirror'; +import 'codemirror/addon/hint/show-hint'; +import 'codemirror/addon/lint/lint'; +import 'codemirror-graphql/hint'; +import 'codemirror-graphql/lint'; +import 'codemirror-graphql/mode'; + +CodeMirror.fromTextArea(myTextarea, { + mode: 'graphql', + lint: { + schema: myGraphQLSchema, + validationRules: [ExampleRule], + }, + hintOptions: { + schema: myGraphQLSchema, + }, +}); +``` + +## External Fragments Example + +If you want to have autocompletion for external fragment definitions, there's a +new configuration setting available + +```ts +import CodeMirror from 'codemirror'; +import 'codemirror/addon/hint/show-hint'; +import 'codemirror/addon/lint/lint'; +import 'codemirror-graphql/hint'; +import 'codemirror-graphql/lint'; +import 'codemirror-graphql/mode'; + +const externalFragments = ` + fragment MyFragment on Example { + id: ID! + name: String! + } + fragment AnotherFragment on Example { + id: ID! + title: String! + } +`; + +CodeMirror.fromTextArea(myTextarea, { + mode: 'graphql', + lint: { + schema: myGraphQLSchema, + }, + hintOptions: { + schema: myGraphQLSchema, + // here we use a string, but + // you can also provide an array of FragmentDefinitionNodes + externalFragments, + }, +}); +``` + +### Custom Validation Rules + +If you want to show custom validation, you can do that too! It uses the +`ValidationRule` interface. + +```js +import type { ValidationRule } from 'graphql'; + +import CodeMirror from 'codemirror'; +import 'codemirror/addon/hint/show-hint'; +import 'codemirror/addon/lint/lint'; +import 'codemirror-graphql/hint'; +import 'codemirror-graphql/lint'; +import 'codemirror-graphql/mode'; + +const ExampleRule: ValidationRule = context => { + // your custom rules here + const schema = context.getSchema(); + const document = context.getDocument(); + return { + NamedType(node) { + if (node.name.value !== node.name.value.toLowercase()) { + context.reportError('only lowercase type names allowed!'); + } + }, + }; +}; + +CodeMirror.fromTextArea(myTextarea, { + mode: 'graphql', + lint: { + schema: myGraphQLSchema, + validationRules: [ExampleRule], + }, + hintOptions: { + schema: myGraphQLSchema, + }, +}); +``` + +Build for the web with [webpack](http://webpack.github.io/) or +[browserify](http://browserify.org/). From 7f5d43a07f2b2e3e5eb0df587d5c576dfbe81760 Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 3 Apr 2023 02:05:24 +0200 Subject: [PATCH 2/6] Update README.md --- packages/cm6-graphql/README.md | 117 +++++++-------------------------- 1 file changed, 22 insertions(+), 95 deletions(-) diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md index 71b484ebe3f..7d697561213 100644 --- a/packages/cm6-graphql/README.md +++ b/packages/cm6-graphql/README.md @@ -1,11 +1,11 @@ -# CodeMirror 6 GraphQL Language package +# CodeMirror 6 GraphQL Language extension [![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql) ![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads) [![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE) [Discord Channel](https://discord.gg/cffZwk8NJW) -Provides CodeMirror 6 with a parser mode for GraphQL along with a autocomplete and linting powered by your GraphQL Schema. +Provides CodeMirror 6 extension with a parser mode for GraphQL along with a autocomplete and linting powered by your GraphQL Schema. ### Getting Started @@ -13,108 +13,35 @@ Provides CodeMirror 6 with a parser mode for GraphQL along with a autocomplete a npm install --save cm6-graphql ``` -CodeMirror helpers install themselves to the global CodeMirror when they are -imported. +[CodeMirror 6](https://codemirror.net/) customization is done through [extensions](https://codemirror.net/docs/guide/#extension). This package an extension that customizes codemirror 6 for GraphQL. ```js -import type { ValidationContext, SDLValidationContext } from 'graphql'; +import {basicSetup, EditorView} from 'codemirror'; +import {graphql} from 'cm6-graphql'; + +const view = new EditorView({ + doc: `mutation mutationName { + setString(value: "newString") + }`, + extensions: [ + basicSetup, + graphql(myGraphQLSchema), + ], + parent: document.body +}) -import CodeMirror from 'codemirror'; -import 'codemirror/addon/hint/show-hint'; -import 'codemirror/addon/lint/lint'; -import 'codemirror-graphql/hint'; -import 'codemirror-graphql/lint'; -import 'codemirror-graphql/mode'; - -CodeMirror.fromTextArea(myTextarea, { - mode: 'graphql', - lint: { - schema: myGraphQLSchema, - validationRules: [ExampleRule], - }, - hintOptions: { - schema: myGraphQLSchema, - }, -}); ``` -## External Fragments Example - -If you want to have autocompletion for external fragment definitions, there's a -new configuration setting available - -```ts -import CodeMirror from 'codemirror'; -import 'codemirror/addon/hint/show-hint'; -import 'codemirror/addon/lint/lint'; -import 'codemirror-graphql/hint'; -import 'codemirror-graphql/lint'; -import 'codemirror-graphql/mode'; +Note: You have to provide a theme to codemirror 6 for the styling you want. You can take a look at [this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts) or see the codemirror 6 [documentation examples](https://codemirror.net/examples/styling/) for more details. -const externalFragments = ` - fragment MyFragment on Example { - id: ID! - name: String! - } - fragment AnotherFragment on Example { - id: ID! - title: String! - } -`; - -CodeMirror.fromTextArea(myTextarea, { - mode: 'graphql', - lint: { - schema: myGraphQLSchema, - }, - hintOptions: { - schema: myGraphQLSchema, - // here we use a string, but - // you can also provide an array of FragmentDefinitionNodes - externalFragments, - }, -}); -``` +### Updating schema -### Custom Validation Rules - -If you want to show custom validation, you can do that too! It uses the -`ValidationRule` interface. +If you need to update the GraphQL schema used in the editor dynamically, you can call `updateSchema` with the codemirror `EditorView` instance and the new schema ```js -import type { ValidationRule } from 'graphql'; - -import CodeMirror from 'codemirror'; -import 'codemirror/addon/hint/show-hint'; -import 'codemirror/addon/lint/lint'; -import 'codemirror-graphql/hint'; -import 'codemirror-graphql/lint'; -import 'codemirror-graphql/mode'; +import {updateSchema} from 'cm6-graphql'; -const ExampleRule: ValidationRule = context => { - // your custom rules here - const schema = context.getSchema(); - const document = context.getDocument(); - return { - NamedType(node) { - if (node.name.value !== node.name.value.toLowercase()) { - context.reportError('only lowercase type names allowed!'); - } - }, - }; +const onNewSchema = (schema) => { + updateSchema(view, schema); }; - -CodeMirror.fromTextArea(myTextarea, { - mode: 'graphql', - lint: { - schema: myGraphQLSchema, - validationRules: [ExampleRule], - }, - hintOptions: { - schema: myGraphQLSchema, - }, -}); ``` - -Build for the web with [webpack](http://webpack.github.io/) or -[browserify](http://browserify.org/). From 3b1659c9cd0193a37ace6a4a2a32fd9c41c9073d Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 3 Apr 2023 02:06:38 +0200 Subject: [PATCH 3/6] Create .changeset/green-radios-fix.md --- .changeset/green-radios-fix.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/green-radios-fix.md diff --git a/.changeset/green-radios-fix.md b/.changeset/green-radios-fix.md new file mode 100644 index 00000000000..8dd67d7bb2d --- /dev/null +++ b/.changeset/green-radios-fix.md @@ -0,0 +1,5 @@ +--- +"cm6-graphql": patch +--- + +Updated cm6-graphql package README From 60fdfb29191736723f923611b51473d5b99167fd Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 3 Apr 2023 20:03:27 +0200 Subject: [PATCH 4/6] Update packages/cm6-graphql/README.md Co-authored-by: Ted Thibodeau Jr --- packages/cm6-graphql/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md index 7d697561213..de2184eb407 100644 --- a/packages/cm6-graphql/README.md +++ b/packages/cm6-graphql/README.md @@ -36,7 +36,7 @@ Note: You have to provide a theme to codemirror 6 for the styling you want. You ### Updating schema -If you need to update the GraphQL schema used in the editor dynamically, you can call `updateSchema` with the codemirror `EditorView` instance and the new schema +If you need to update the GraphQL schema used in the editor dynamically, you can call `updateSchema` with the CodeMirror `EditorView` instance and the new schema ```js import {updateSchema} from 'cm6-graphql'; From 867974c42247d63fd7b390148262064bbaf31cef Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 3 Apr 2023 20:03:44 +0200 Subject: [PATCH 5/6] Update packages/cm6-graphql/README.md Co-authored-by: Ted Thibodeau Jr --- packages/cm6-graphql/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md index de2184eb407..6c6978919ab 100644 --- a/packages/cm6-graphql/README.md +++ b/packages/cm6-graphql/README.md @@ -32,7 +32,7 @@ const view = new EditorView({ ``` -Note: You have to provide a theme to codemirror 6 for the styling you want. You can take a look at [this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts) or see the codemirror 6 [documentation examples](https://codemirror.net/examples/styling/) for more details. +Note: You have to provide a theme to CodeMirror 6 for the styling you want. You can take a look at [this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts) or see the CodeMirror 6 [documentation examples](https://codemirror.net/examples/styling/) for more details. ### Updating schema From 585a3c5a4da70d377b6873e9be72a04c4f7abe87 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 5 Apr 2023 21:33:15 +0000 Subject: [PATCH 6/6] Ran yarn pretty --- packages/cm6-graphql/README.md | 35 +++++++++++++++------------ packages/codemirror-graphql/README.md | 2 ++ 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/packages/cm6-graphql/README.md b/packages/cm6-graphql/README.md index 6c6978919ab..40e6b8d06b5 100644 --- a/packages/cm6-graphql/README.md +++ b/packages/cm6-graphql/README.md @@ -5,7 +5,8 @@ [![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE) [Discord Channel](https://discord.gg/cffZwk8NJW) -Provides CodeMirror 6 extension with a parser mode for GraphQL along with a autocomplete and linting powered by your GraphQL Schema. +Provides CodeMirror 6 extension with a parser mode for GraphQL along with a +autocomplete and linting powered by your GraphQL Schema. ### Getting Started @@ -13,35 +14,39 @@ Provides CodeMirror 6 extension with a parser mode for GraphQL along with a auto npm install --save cm6-graphql ``` -[CodeMirror 6](https://codemirror.net/) customization is done through [extensions](https://codemirror.net/docs/guide/#extension). This package an extension that customizes codemirror 6 for GraphQL. +[CodeMirror 6](https://codemirror.net/) customization is done through +[extensions](https://codemirror.net/docs/guide/#extension). This package an +extension that customizes codemirror 6 for GraphQL. ```js -import {basicSetup, EditorView} from 'codemirror'; -import {graphql} from 'cm6-graphql'; +import { basicSetup, EditorView } from 'codemirror'; +import { graphql } from 'cm6-graphql'; const view = new EditorView({ doc: `mutation mutationName { setString(value: "newString") }`, - extensions: [ - basicSetup, - graphql(myGraphQLSchema), - ], - parent: document.body -}) - + extensions: [basicSetup, graphql(myGraphQLSchema)], + parent: document.body, +}); ``` -Note: You have to provide a theme to CodeMirror 6 for the styling you want. You can take a look at [this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts) or see the CodeMirror 6 [documentation examples](https://codemirror.net/examples/styling/) for more details. +Note: You have to provide a theme to CodeMirror 6 for the styling you want. You +can take a look at +[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts) +or see the CodeMirror 6 +[documentation examples](https://codemirror.net/examples/styling/) for more +details. ### Updating schema -If you need to update the GraphQL schema used in the editor dynamically, you can call `updateSchema` with the CodeMirror `EditorView` instance and the new schema +If you need to update the GraphQL schema used in the editor dynamically, you can +call `updateSchema` with the CodeMirror `EditorView` instance and the new schema ```js -import {updateSchema} from 'cm6-graphql'; +import { updateSchema } from 'cm6-graphql'; -const onNewSchema = (schema) => { +const onNewSchema = schema => { updateSchema(view, schema); }; ``` diff --git a/packages/codemirror-graphql/README.md b/packages/codemirror-graphql/README.md index 7856a09b427..6fdfd349c37 100644 --- a/packages/codemirror-graphql/README.md +++ b/packages/codemirror-graphql/README.md @@ -5,6 +5,8 @@ [![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE) [Discord Channel](https://discord.gg/cffZwk8NJW) +**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead** + Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema.