Fix crash on invalid directive locations in playground

src/Errors.ts

@@ -14,6 +14,7 @@ import {
   INFO_TAG,
   DIRECTIVE_TAG,
 } from "./Extractor.js";
+import { DirectiveLocation } from "graphql";
 
 export const ISSUE_URL = "https://github.com/captbaritone/grats/issues";
 
@@ -654,6 +655,10 @@ export function directiveTagNoComment() {
   return "Expected `@gqlDirective` tag to specify at least one location.";
 }
 
+export function invalidDirectiveLocation(name: string) {
+  return `"${name}" is not a valid directive location. Valid locations are: ${Object.values(DirectiveLocation).join(", ")}.`;
+}
+
 export function directiveFunctionNotNamed() {
   return "Expected `@gqlDirective` function to be named.";
 }

src/Extractor.ts

@@ -17,7 +17,7 @@ import {
   DefinitionNode,
   version as graphqlJSVersion,
   TokenKind,
-  GraphQLError,
+  DirectiveLocation,
 } from "graphql";
 import { gte as semverGte } from "semver";
 import {
@@ -536,13 +536,21 @@ class Extractor {
       }
 
       const locations = parser
-        .delimitedMany(TokenKind.PIPE, () => parser.parseDirectiveLocation())
+        .delimitedMany(TokenKind.PIPE, () => parser.parseName())
         .map((location) => ({ ...location, loc: loc(tag) }));
       return { name, repeatable, locations };
     });
 
     if (tagData == null) return;
 
+    const validLocations = Object.values(DirectiveLocation) as string[];
+    for (const location of tagData.locations) {
+      if (!validLocations.includes(location.value)) {
+        this.report(tag, E.invalidDirectiveLocation(location.value));
+        return;
+      }
+    }
+
     let name = tagData.name;
 
     // If there wasn't a name in the directive tag, we expect the function
@@ -909,7 +917,11 @@ class Extractor {
       parser.expectToken(TokenKind.EOF);
       return result;
     } catch (err) {
-      if (err instanceof GraphQLError) {
+      if (err instanceof Error && err.name === "GraphQLError") {
+        // Note: We use a name check instead of `instanceof GraphQLError`
+        // because in bundled environments (e.g. the playground), the
+        // GraphQLError class from the parser may be a different instance
+        // than the one we imported, causing `instanceof` to fail.
         this.report(node, err.message);
       } else {
         throw err;

src/tests/fixtures/directives/defineCustomDirectiveLocationInvalid.invalid.ts.expected.md

@@ -15,7 +15,7 @@ export function customDirective() {}
 ### Error Report
 
 ```text
-src/tests/fixtures/directives/defineCustomDirectiveLocationInvalid.invalid.ts:3:4 - error: Syntax Error: Unexpected Name "WHOOPS".
+src/tests/fixtures/directives/defineCustomDirectiveLocationInvalid.invalid.ts:3:4 - error: "WHOOPS" is not a valid directive location. Valid locations are: QUERY, MUTATION, SUBSCRIPTION, FIELD, FRAGMENT_DEFINITION, FRAGMENT_SPREAD, INLINE_FRAGMENT, VARIABLE_DEFINITION, SCHEMA, SCALAR, OBJECT, FIELD_DEFINITION, ARGUMENT_DEFINITION, INTERFACE, UNION, ENUM, ENUM_VALUE, INPUT_OBJECT, INPUT_FIELD_DEFINITION.
 
 3  * @gqlDirective on WHOOPS
      ~~~~~~~~~~~~~~~~~~~~~~~

src/tests/fixtures/directives/directiveOnDirectiveDefinitionLocation.invalid.ts

@@ -0,0 +1,8 @@
+import { Int } from "../../../Types";
+/**
+ * @gqlDirective on DIRECTIVE_DEFINITION
+ * @gqlAnnotate
+ */
+export function myDirective(args: { credits: Int }) {
+  // ...
+}

src/tests/fixtures/directives/directiveOnDirectiveDefinitionLocation.invalid.ts.expected.md

@@ -0,0 +1,27 @@
+# directives/directiveOnDirectiveDefinitionLocation.invalid.ts
+
+## Input
+
+```ts title="directives/directiveOnDirectiveDefinitionLocation.invalid.ts"
+import { Int } from "../../../Types";
+/**
+ * @gqlDirective on DIRECTIVE_DEFINITION
+ * @gqlAnnotate
+ */
+export function myDirective(args: { credits: Int }) {
+  // ...
+}
+```
+
+## Output
+
+### Error Report
+
+```text
+src/tests/fixtures/directives/directiveOnDirectiveDefinitionLocation.invalid.ts:3:4 - error: "DIRECTIVE_DEFINITION" is not a valid directive location. Valid locations are: QUERY, MUTATION, SUBSCRIPTION, FIELD, FRAGMENT_DEFINITION, FRAGMENT_SPREAD, INLINE_FRAGMENT, VARIABLE_DEFINITION, SCHEMA, SCALAR, OBJECT, FIELD_DEFINITION, ARGUMENT_DEFINITION, INTERFACE, UNION, ENUM, ENUM_VALUE, INPUT_OBJECT, INPUT_FIELD_DEFINITION.
+
+3  * @gqlDirective on DIRECTIVE_DEFINITION
+     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+4  * @gqlAnnotate
+  ~~~
+```