Fix crash on invalid directive locations in playground

The playground crashed with an unhandled GraphQLError when using invalid
directive locations like `DIRECTIVE_DEFINITION`. This happened because
`instanceof GraphQLError` failed in the bundled environment due to
duplicate module instances.

Fix by replacing `parser.parseDirectiveLocation()` with manual name
parsing and validation against the DirectiveLocation enum. Also use
`err.name === "GraphQLError"` instead of `instanceof` for robustness
in bundled environments.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: captbaritone

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 {
@@ -176,6 +176,9 @@ export function extract(
   return extractor.extract(sourceFile);
 }
 
+/** Sentinel error thrown when an error has already been reported with precise location. */
+class AlreadyReportedError extends Error {}
+
 class Extractor {
   // Snapshot data. See comments on fields on ExtractionSnapshot for details.
   definitions: DefinitionNode[] = [];
@@ -536,7 +539,15 @@ class Extractor {
       }
 
       const locations = parser
-        .delimitedMany(TokenKind.PIPE, () => parser.parseDirectiveLocation())
+        .delimitedMany(TokenKind.PIPE, () => {
+          const nameNode = parser.parseName();
+          const validLocations = Object.values(DirectiveLocation) as string[];
+          if (!validLocations.includes(nameNode.value)) {
+            this.report(tag, E.invalidDirectiveLocation(nameNode.value));
+            throw new AlreadyReportedError();
+          }
+          return nameNode;
+        })
         .map((location) => ({ ...location, loc: loc(tag) }));
       return { name, repeatable, locations };
     });
@@ -909,7 +920,13 @@ class Extractor {
       parser.expectToken(TokenKind.EOF);
       return result;
     } catch (err) {
-      if (err instanceof GraphQLError) {
+      if (err instanceof AlreadyReportedError) {
+        // Error was already reported with precise location info
+      } else 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
+  ~~~
+```