fix: improve graphql syntax highlighting

packages/codemirror-lang-graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/codemirror-lang-graphql",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "GraphQL language support for CodeMirror",
   "author": "Hoppscotch (support@hoppscotch.io)",
   "license": "MIT",

packages/codemirror-lang-graphql/src/index.js

@@ -27,16 +27,22 @@ export const GQLLanguage = LRLanguage.define({
           },
       }),
       styleTags({
-        Name: t.definition(t.variableName),
-        "OperationDefinition/Name": t.definition(t.function(t.variableName)),
-        OperationType: t.keyword,
-        BooleanValue: t.bool,
-        StringValue: t.string,
-        IntValue: t.number,
-        FloatValue: t.number,
-        NullValue: t.null,
-        ObjectValue: t.brace,
         Comment: t.lineComment,
+        Name: t.propertyName,
+        StringValue: t.string,
+        IntValue: t.integer,
+        FloatValue: t.float,
+        NullValue: t.null,
+        BooleanValue: t.bool,
+        Comma: t.separator,
+        "OperationDefinition/Name": t.definition(t.function(t.variableName)),
+        "OperationType TypeKeyword SchemaKeyword FragmentKeyword OnKeyword DirectiveKeyword RepeatableKeyword SchemaKeyword ExtendKeyword ScalarKeyword InterfaceKeyword UnionKeyword EnumKeyword InputKeyword ImplementsKeyword": t.keyword,
+        "ExecutableDirectiveLocation TypeSystemDirectiveLocation": t.atom,
+        "DirectiveName!": t.annotation,
+        "\"{\" \"}\"": t.brace,
+        "\"(\" \")\"": t.paren,
+        "\"[\" \"]\"": t.squareBracket,
+        "Type! NamedType": t.typeName,
       }),
     ],
   }),

packages/codemirror-lang-graphql/src/syntax.grammar

@@ -33,16 +33,24 @@ TypeSystemExtension {
   TypeExtension
 }
 
+SchemaKeyword {
+  @specialize<Name, "schema">
+}
+
 SchemaDefinition {
-  Description? @specialize<Name, "schema"> Directives? RootTypeDef
+  Description? SchemaKeyword Directives? RootTypeDef
 }
 
 RootTypeDef {
   "{" RootOperationTypeDefinition+ "}"
 }
 
+ExtendKeyword {
+  @specialize<Name, "extend">
+}
+
 SchemaExtension {
-  @specialize<Name, "extend"> @specialize<Name, "schema"> Directives? RootTypeDef
+  ExtendKeyword SchemaKeyword Directives? RootTypeDef
 }
 
 TypeExtension {
@@ -54,33 +62,53 @@ TypeExtension {
   InputObjectTypeExtension
 }
 
+ScalarKeyword {
+  @specialize<Name, "scalar">
+}
+
 ScalarTypeExtension {
-  @specialize<Name, "extend"> @specialize<Name, "scalar"> Name Directives
+  ExtendKeyword ScalarKeyword Name Directives
 }
 
 ObjectTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives? !typeDef FieldsDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives?
+  ExtendKeyword TypeKeyword Name ImplementsInterfaces? Directives? !typeDef FieldsDefinition |
+  ExtendKeyword TypeKeyword Name ImplementsInterfaces? Directives?
+}
+
+InterfaceKeyword {
+  @specialize<Name, "interface">
 }
 
 InterfaceTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives?
+  ExtendKeyword InterfaceKeyword Name ImplementsInterfaces? Directives? FieldsDefinition |
+  ExtendKeyword InterfaceKeyword Name ImplementsInterfaces? Directives?
+}
+
+UnionKeyword {
+  @specialize<Name, "union">
 }
 
 UnionTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives? UnionMemberTypes |
-  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives?
+  ExtendKeyword UnionKeyword Name Directives? UnionMemberTypes |
+  ExtendKeyword UnionKeyword Name Directives?
+}
+
+EnumKeyword {
+  @specialize<Name, "enum">
 }
 
 EnumTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives?
+  ExtendKeyword EnumKeyword Name Directives? !typeDef EnumValuesDefinition |
+  ExtendKeyword EnumKeyword Name Directives?
+}
+
+InputKeyword {
+  @specialize<Name, "input">
 }
 
 InputObjectTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives? InputFieldsDefinition+ |
-  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives?
+  ExtendKeyword InputKeyword Name Directives? InputFieldsDefinition+ |
+  ExtendKeyword InputKeyword Name Directives?
 }
 
 InputFieldsDefinition {
@@ -95,9 +123,13 @@ EnumValueDefinition {
   Description? EnumValue Directives?
 }
 
+ImplementsKeyword {
+  @specialize<Name, "implements">
+}
+
 ImplementsInterfaces {
   ImplementsInterfaces "&" NamedType |
-  @specialize<Name, "implements"> "&"? NamedType
+  ImplementsKeyword "&"? NamedType
 }
 
 FieldsDefinition {
@@ -144,27 +176,31 @@ TypeDefinition {
 }
 
 ScalarTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "scalar"> Name Directives?
+  Description? ScalarKeyword Name Directives?
+}
+
+TypeKeyword {
+  @specialize<Name, "type">
 }
 
 ObjectTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "type"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+  Description? TypeKeyword Name ImplementsInterfaces? Directives? FieldsDefinition?
 }
 
 InterfaceTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+  Description? InterfaceKeyword Name ImplementsInterfaces? Directives? FieldsDefinition?
 }
 
 UnionTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "union"> Name Directives? UnionMemberTypes?
+  Description? UnionKeyword Name Directives? UnionMemberTypes?
 }
 
 EnumTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition?
+  Description? EnumKeyword Name Directives? !typeDef EnumValuesDefinition?
 }
 
 InputObjectTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "input"> Name Directives? !typeDef InputFieldsDefinition?
+  Description? InputKeyword Name Directives? !typeDef InputFieldsDefinition?
 }
 
 VariableDefinitions {
@@ -237,8 +273,12 @@ FragmentSpread {
   "..." FragmentName Directives?
 }
 
+FragmentKeyword {
+  @specialize<Name, "fragment">
+}
+
 FragmentDefinition {
-  @specialize<Name, "fragment"> FragmentName TypeCondition Directives? SelectionSet
+  FragmentKeyword FragmentName TypeCondition Directives? SelectionSet
 }
 
 FragmentName {
@@ -249,20 +289,36 @@ InlineFragment {
   "..." TypeCondition? Directives? SelectionSet
 }
 
+OnKeyword {
+  @specialize<Name, "on">
+}
+
 TypeCondition {
-  @specialize<Name, "on"> NamedType
+  OnKeyword NamedType
 }
 
 Directives {
   Directive+
 }
 
+DirectiveName {
+  "@" Name
+}
+
 Directive {
-  "@" Name Arguments?
+  DirectiveName Arguments?
+}
+
+DirectiveKeyword {
+  @specialize<Name, "directive">
+}
+
+RepeatableKeyword {
+  @specialize<Name, "repeatable">
 }
 
 DirectiveDefinition /* precedence: right 1 */ {
-  Description? @specialize<Name, "directive"> "@" Name ArgumentsDefinition? @specialize<Name, "repeatable"> ? @specialize<Name, "on"> DirectiveLocations
+  Description? DirectiveKeyword "@" Name ArgumentsDefinition? RepeatableKeyword ? OnKeyword DirectiveLocations
 }
 
 DirectiveLocations {
@@ -338,17 +394,14 @@ TypeSystemDirectiveLocation {
   | @specialize<Name, "INPUT_FIELD_DEFINITION">
 }
 
-@skip { whitespace | Comment }
 
 @tokens {
   whitespace {
     std.whitespace+
   }
-
   StringValue {
     "\"\"\"" (!["] | "\\n" | "\"" "\""? !["])* "\"\"\"" | "\"" !["\\\n]* "\""
   }
-
   IntValue {
     "-"? "0"
     | "-"? std.digit+
@@ -363,14 +416,19 @@ TypeSystemDirectiveLocation {
   Name {
     $[_A-Za-z] $[_0-9A-Za-z]*
   }
-  Comment {
-    "#" ![\n]*
-  }
+
   Comma {
     ","
   }
 
-  "{" "}" "[" "]"
+  Comment {
+    "#" ![\n]*
+  }
+
+
+  "{" "}"
 }
 
+@skip { whitespace | Comment }
+
 @detectDelim

packages/hoppscotch-app/package.json

@@ -57,7 +57,7 @@
     "@codemirror/text": "^0.19.6",
     "@codemirror/tooltip": "^0.19.16",
     "@codemirror/view": "^0.19.48",
-    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
+    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.2.0",
     "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
     "@nuxtjs/axios": "^5.13.6",

pnpm-lock.yaml

@@ -75,7 +75,7 @@ importers:
       '@graphql-codegen/typescript-urql-graphcache': ^2.2.10
       '@graphql-codegen/urql-introspection': ^2.1.1
       '@graphql-typed-document-node/core': ^3.1.1
-      '@hoppscotch/codemirror-lang-graphql': workspace:^0.1.0
+      '@hoppscotch/codemirror-lang-graphql': workspace:^0.2.0
       '@hoppscotch/data': workspace:^0.4.2
       '@hoppscotch/js-sandbox': workspace:^2.0.0
       '@nuxt/types': ^2.15.8
@@ -3961,11 +3961,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21:
-    resolution: {integrity: sha512-iBU1wEwj2peSN/sS4QIuZfUQluplh7YCarvz+MCUcybdOw17kXALPQjUY6q5ISXmNsTiY/fLqHvYz3k6UjkS5w==}
+  /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084:
+    resolution: {integrity: sha512-ea+MufACOFq3tB8h5LSMMAAoNhbyxrzV6gPx3MulMtgm0Y6vQs6XLpAYQrxSLbvO5gMX1Mv5teBUykhftAclNQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -3981,7 +3981,7 @@ packages:
       scule: 0.2.1
       semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.2.1
+      unimport: 0.2.6
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -4013,8 +4013,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21:
-    resolution: {integrity: sha512-7EOInYwj96i688RLlYKy1CIOM3Lo1GQkYNPfbNcD1k74QeQorUqn0/Tr5Cyce3/SqZ77c8PcQ4bc3p7PNPu9XA==}
+  /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084:
+    resolution: {integrity: sha512-7tLoqbRT62EyK+UYx9cz94yLZ275WX6Dwc0BISy4MhqfV/56hfvYy4sNwnxoqztwwbW6mfKzRg4kTDoqrRUAaQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
@@ -4026,7 +4026,7 @@ packages:
       scule: 0.2.1
       std-env: 3.1.1
       ufo: 0.8.4
-      unimport: 0.2.1
+      unimport: 0.2.6
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -6328,6 +6328,12 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /acorn/8.7.1:
+    resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /after/0.8.2:
     resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
     dev: false
@@ -10629,7 +10635,7 @@ packages:
     dev: false
 
   /gittar/0.1.1:
-    resolution: {integrity: sha1-1pk+phYKhsi3895yKmH3O8meFLQ=}
+    resolution: {integrity: sha512-p+XuqWJpW9ahUuNTptqeFjudFq31o6Jd+maMBarkMAR5U3K9c7zJB4sQ4BV8mIqrTOV29TtqikDhnZfCD4XNfQ==}
     engines: {node: '>=4'}
     dependencies:
       mkdirp: 0.5.6
@@ -12037,7 +12043,7 @@ packages:
     resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
 
   /isarray/2.0.1:
-    resolution: {integrity: sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=}
+    resolution: {integrity: sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==}
     dev: false
 
   /isbot/3.4.5:
@@ -13436,6 +13442,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.26.2:
+    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /make-dir/1.3.0:
     resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
     engines: {node: '>=4'}
@@ -14257,7 +14270,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -17400,6 +17413,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /strip-literal/0.3.0:
+    resolution: {integrity: sha512-J+lfm3Pw5nzURj2B8acyvUSBqs3JbjM8WAfrmeH3qcn32+ew6kFwbZFV9+X8k9UOIAkQw9WPSzFZy3083c7l5Q==}
+    dependencies:
+      acorn: 8.7.1
+    dev: true
+
   /style-mod/4.0.0:
     resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
     dev: false
@@ -18567,17 +18586,18 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.2.1:
-    resolution: {integrity: sha512-6u1uY6GFIi9WslI7fPun0I0ZrIGJ0yAn92n/9rQv4MAEEnxg8zMO+Tj7q/6Z/7XxTn8qFCJIqEM/3Io81Zwmmw==}
+  /unimport/0.2.6:
+    resolution: {integrity: sha512-4cOokUIEvaXAfVCHH87vR+wdKI1KDzxQREW9oi0r6J68TPFEeGLHHc2pdyL0uNDUMd2aLxUikhWARNfoQKqC4Q==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       escape-string-regexp: 5.0.0
-      globby: 13.1.1
+      fast-glob: 3.2.11
       local-pkg: 0.4.1
-      magic-string: 0.26.1
+      magic-string: 0.26.2
       mlly: 0.5.2
       pathe: 0.3.0
       scule: 0.2.1
+      strip-literal: 0.3.0
       unplugin: 0.6.3
     transitivePeerDependencies:
       - esbuild