GraphQL: Added more detailed tokens (#2939)

Co-authored-by: Michael Schmidt <mitchi5000.ms@googlemail.com>

components/prism-graphql.js

@@ -24,20 +24,188 @@ Prism.languages.graphql = {
 		alias: 'function'
 	},
 	'attr-name': {
-		pattern: /\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
+		pattern: /[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,
 		greedy: true
 	},
+	'atom-input': {
+		pattern: /[A-Z]\w*Input(?=!?.*$)/m,
+		alias: 'class-name'
+	},
+	'scalar': /\b(?:Boolean|Float|ID|Int|String)\b/,
+	'constant': /\b[A-Z][A-Z_\d]*\b/,
 	'class-name': {
-		pattern: /(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*)[a-zA-Z_]\w*/,
+		pattern: /(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,
 		lookbehind: true
 	},
 	'fragment': {
 		pattern: /(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,
 		lookbehind: true,
 		alias: 'function'
 	},
+	'definition-mutation': {
+		pattern: /(\bmutation\s+|\.{3}\s*)[a-zA-Z_]\w*/,
+		lookbehind: true,
+		alias: 'function'
+	},
+	'definition-query': {
+		pattern: /(\bquery\s+|\.{3}\s*)[a-zA-Z_]\w*/,
+		lookbehind: true,
+		alias: 'function'
+	},
 	'keyword': /\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,
 	'operator': /[!=|&]|\.{3}/,
+	'property-query': /\w+(?=\s*\()/,
+	'object': /\w+(?=\s*{)/,
 	'punctuation': /[!(){}\[\]:=,]/,
-	'constant': /\b(?!ID\b)[A-Z][A-Z_\d]*\b/
+	'property': /\w+/
 };
+
+Prism.hooks.add('after-tokenize', function afterTokenizeGraphql(env) {
+	if (env.language !== 'graphql') {
+		return;
+	}
+
+	/**
+	 * get the graphql token stream that we want to customize
+	 *
+	 * @typedef {InstanceType<import("./prism-core")["Token"]>} Token
+	 * @type {Token[]}
+	 */
+	var validTokens = env.tokens.filter(function (token) {
+		return typeof token !== 'string' && token.type !== 'comment' && token.type !== 'scalar';
+	});
+
+	var currentIndex = 0;
+
+	/**
+	 * Returns whether the token relative to the current index has the given type.
+	 *
+	 * @param {number} offset
+	 * @returns {Token | undefined}
+	 */
+	function getToken(offset) {
+		return validTokens[currentIndex + offset];
+	}
+
+	/**
+	 * Returns whether the token relative to the current index has the given type.
+	 *
+	 * @param {readonly string[]} types
+	 * @param {number} [offset=0]
+	 * @returns {boolean}
+	 */
+	function isTokenType(types, offset) {
+		offset = offset || 0;
+		for (var i = 0; i < types.length; i++) {
+			var token = getToken(i + offset);
+			if (!token || token.type !== types[i]) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	/**
+	 * Returns the index of the closing bracket to an opening bracket.
+	 *
+	 * It is assumed that `token[currentIndex - 1]` is an opening bracket.
+	 *
+	 * If no closing bracket could be found, `-1` will be returned.
+	 *
+	 * @param {RegExp} open
+	 * @param {RegExp} close
+	 * @returns {number}
+	 */
+	function findClosingBracket(open, close) {
+		var stackHeight = 1;
+
+		for (var i = currentIndex; i < validTokens.length; i++) {
+			var token = validTokens[i];
+			var content = token.content;
+
+			if (token.type === 'punctuation' && typeof content === 'string') {
+				if (open.test(content)) {
+					stackHeight++;
+				} else if (close.test(content)) {
+					stackHeight--;
+
+					if (stackHeight === 0) {
+						return i;
+					}
+				}
+			}
+		}
+
+		return -1;
+	}
+
+	/**
+	 * Adds an alias to the given token.
+	 *
+	 * @param {Token} token
+	 * @param {string} alias
+	 * @returns {void}
+	 */
+	function addAlias(token, alias) {
+		var aliases = token.alias;
+		if (!aliases) {
+			token.alias = aliases = [];
+		} else if (!Array.isArray(aliases)) {
+			token.alias = aliases = [aliases];
+		}
+		aliases.push(alias);
+	}
+
+	for (; currentIndex < validTokens.length;) {
+		var startToken = validTokens[currentIndex++];
+
+		// add special aliases for mutation tokens
+		if (startToken.type === 'keyword' && startToken.content === 'mutation') {
+			// any array of the names of all input variables (if any)
+			var inputVariables = [];
+
+			if (isTokenType(['definition-mutation', 'punctuation']) && getToken(1).content === '(') {
+				// definition
+
+				currentIndex += 2; // skip 'definition-mutation' and 'punctuation'
+
+				var definitionEnd = findClosingBracket(/^\($/, /^\)$/);
+				if (definitionEnd === -1) {
+					continue;
+				}
+
+				// find all input variables
+				for (; currentIndex < definitionEnd; currentIndex++) {
+					var t = getToken(0);
+					if (t.type === 'variable') {
+						addAlias(t, 'variable-input');
+						inputVariables.push(t.content);
+					}
+				}
+
+				currentIndex = definitionEnd + 1;
+			}
+
+			if (isTokenType(['punctuation', 'property-query']) && getToken(0).content === '{') {
+				currentIndex++; // skip opening bracket
+
+				addAlias(getToken(0), 'property-mutation');
+
+				if (inputVariables.length > 0) {
+					var mutationEnd = findClosingBracket(/^{$/, /^}$/);
+					if (mutationEnd === -1) {
+						continue;
+					}
+
+					// give references to input variables a special alias
+					for (var i = currentIndex; i < mutationEnd; i++) {
+						var varToken = validTokens[i];
+						if (varToken.type === 'variable' && inputVariables.indexOf(varToken.content) >= 0) {
+							addAlias(varToken, 'variable-input');
+						}
+					}
+				}
+			}
+		}
+	}
+});

tests/languages/graphql/attr-name_feature.test

@@ -12,33 +12,35 @@
 
 	["attr-name", "zuck"],
 	["punctuation", ":"],
-	" user",
+	["property-query", "user"],
 	["punctuation", "("],
 	["attr-name", "id"],
 	["punctuation", ":"],
 	["number", "4"],
 	["punctuation", ")"],
 	["punctuation", "{"],
-	"\r\n\t\tname\r\n\t",
+
+	["property", "name"],
+
 	["punctuation", "}"],
 
 	["attr-name", "foo"],
 	["punctuation", "("],
 	["attr-name", "bar"],
 	["punctuation", ":"],
-	" Int ",
+	["scalar", "Int"],
 	["operator", "="],
 	["number", "0"],
 	["punctuation", ","],
 	["attr-name", "baz"],
 	["punctuation", ":"],
-	" String ",
+	["scalar", "String"],
 	["operator", "="],
 	["string", "\"(\""],
 	["punctuation", ")"],
 	["punctuation", ":"],
 	["punctuation", "["],
-	"Int",
+	["scalar", "Int"],
 	["operator", "!"],
 	["punctuation", "]"],
 	["operator", "!"],
@@ -48,4 +50,4 @@
 
 ----------------------------------------------------
 
-Checks for aliases, parameter names, etc.
+Checks for aliases, parameter names, etc.

tests/languages/graphql/constant_feature.test

@@ -21,15 +21,15 @@ enum Color {
 
 	["punctuation", "{"],
 
-	"\r\n\tfoo",
+	["property-query", "foo"],
 	["punctuation", "("],
 	["attr-name", "bar"],
 	["punctuation", ":"],
 	["constant", "RED"],
 	["punctuation", ")"],
 	["punctuation", "{"],
 
-	"\r\n\t\tbaz\r\n\t",
+	["property", "baz"],
 
 	["punctuation", "}"],
 

tests/languages/graphql/fragment_feature.test

@@ -11,19 +11,22 @@ fragment frag on FooBar {
 
 [
 	["punctuation", "{"],
-	["operator", "..."],
-	["fragment", "frag"],
+	["operator", "..."], ["fragment", "frag"],
 	["punctuation", "}"],
 
 	["keyword", "fragment"],
 	["fragment", "frag"],
 	["keyword", "on"],
 	["class-name", "FooBar"],
 	["punctuation", "{"],
-	"\r\n\tfoo\r\n\tbar\r\n",
+
+	["property", "foo"],
+
+	["property", "bar"],
+
 	["punctuation", "}"]
 ]
 
 ----------------------------------------------------
 
-Checks for fragments.
+Checks for fragments.

tests/languages/javascript!+graphql+js-templates/graphql_inclusion.test

@@ -10,29 +10,31 @@ graphql.experimental`{ foo }`
 		["template-punctuation", "`"],
 		["graphql", [
 			["punctuation", "{"],
-			" foo ",
+			["property", "foo"],
 			["punctuation", "}"]
 		]],
 		["template-punctuation", "`"]
 	]],
+
 	"\r\ngraphql",
 	["template-string", [
 		["template-punctuation", "`"],
 		["graphql", [
 			["punctuation", "{"],
-			" foo ",
+			["property", "foo"],
 			["punctuation", "}"]
 		]],
 		["template-punctuation", "`"]
 	]],
+
 	"\r\ngraphql",
 	["punctuation", "."],
 	"experimental",
 	["template-string", [
 		["template-punctuation", "`"],
 		["graphql", [
 			["punctuation", "{"],
-			" foo ",
+			["property", "foo"],
 			["punctuation", "}"]
 		]],
 		["template-punctuation", "`"]