GraphQL language support

README.md

@@ -15,6 +15,7 @@ Colorization and configuration supports for multiple languages for the Monaco Ed
 * dockerfile
 * fsharp
 * go
+* graphql
 * handlebars
 * html
 * ini

scripts/bundle.js

@@ -70,6 +70,7 @@ bundleOne('perl/perl'),
 bundleOne('powerquery/powerquery')
 bundleOne('azcli/azcli')
 bundleOne('apex/apex');
+bundleOne('graphql/graphql');
 
 function bundleOne(moduleId, exclude) {
 	requirejs.optimize({

src/graphql/graphql.contribution.ts

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { registerLanguage } from '../_.contribution';
+
+// Allow for running under nodejs/requirejs in tests
+const _monaco: typeof monaco =
+	typeof monaco === 'undefined' ? (<any>self).monaco : monaco;
+
+registerLanguage({
+	id: 'graphql',
+	extensions: ['.graphql', '.gql'],
+	aliases: ['GraphQL', 'graphql', 'gql'],
+	mimetypes: ['application/graphql'],
+	loader: () => _monaco.Promise.wrap(import('./graphql')),
+});

src/graphql/graphql.test.ts

@@ -0,0 +1,143 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { testTokenization } from '../test/testRunner';
+
+testTokenization('graphql', [
+	// Keywords
+	[{
+		line: 'scalar Date',
+		tokens: [
+			{ startIndex: 0, type: 'keyword.gql' },
+			{ startIndex: 6, type: '' },
+			{ startIndex: 7, type: 'type.identifier.gql' },
+		]
+	}],
+
+	// Root schema definition
+	[{
+		line: 'schema { query: Query, mutation: Mutation subscription: Subscription }',
+		tokens: [
+			{ startIndex: 0, type: "keyword.gql" },
+			{ startIndex: 6, type: "" },
+			{ startIndex: 7, type: "delimiter.curly.gql" },
+			{ startIndex: 8, type: "" },
+			{ startIndex: 9, type: "keyword.gql" }, // this should be identifier
+			{ startIndex: 14, type: "operator.gql" },
+			{ startIndex: 15, type: "" },
+			{ startIndex: 16, type: "type.identifier.gql" },
+			{ startIndex: 21, type: "delimiter.gql" },
+			{ startIndex: 22, type: "" },
+			{ startIndex: 23, type: "keyword.gql" }, // this should be identifier
+			{ startIndex: 31, type: "operator.gql" },
+			{ startIndex: 32, type: "" },
+			{ startIndex: 33, type: "type.identifier.gql" },
+			{ startIndex: 41, type: "" },
+			{ startIndex: 42, type: "keyword.gql" }, // this should be identifier
+			{ startIndex: 54, type: "operator.gql" },
+			{ startIndex: 55, type: "" },
+			{ startIndex: 56, type: "type.identifier.gql" },
+			{ startIndex: 68, type: "" },
+			{ startIndex: 69, type: "delimiter.curly.gql" },
+		]
+	}],
+
+	[{
+		line: `query testQuery($intValue:Int=3){value(arg:{string:"string" int:$intValue}){field1 field2}}`,
+		tokens: [
+			{ startIndex: 0, type: "keyword.gql" },                 // 'query'
+			{ startIndex: 5, type: "" },                            // ' '
+			{ startIndex: 6, type: "identifier.gql" },              // 'testQuery'
+			{ startIndex: 15, type: "delimiter.parenthesis.gql" },  // '('
+			{ startIndex: 16, type: "identifier.gql" },             // '$intValue'
+			{ startIndex: 25, type: "operator.gql" },               // ':'
+			{ startIndex: 26, type: "keyword.gql" },                // 'Int'
+			{ startIndex: 29, type: "operator.gql" },               // '='
+			{ startIndex: 30, type: "number.gql" },                 // '3'
+			{ startIndex: 31, type: "delimiter.parenthesis.gql" },  // ')'
+			{ startIndex: 32, type: "delimiter.curly.gql" },        // '{'
+			{ startIndex: 33, type: "identifier.gql" },             // 'value'
+			{ startIndex: 38, type: "delimiter.parenthesis.gql" },  // '('
+			{ startIndex: 39, type: "identifier.gql" },             // 'arg'
+			{ startIndex: 42, type: "operator.gql" },               // ':'
+			{ startIndex: 43, type: "delimiter.curly.gql" },        // '{'
+			{ startIndex: 44, type: "identifier.gql" },             // 'string'
+			{ startIndex: 50, type: "operator.gql" },               // ':'
+			{ startIndex: 51, type: "string.quote.gql" },           // '"'
+			{ startIndex: 52, type: "string.gql" },                 // 'string'
+			{ startIndex: 58, type: "string.quote.gql" },           // '"'
+			{ startIndex: 59, type: "" },                           // ' '
+			{ startIndex: 60, type: "identifier.gql" },             // 'int'
+			{ startIndex: 63, type: "operator.gql" },               // ':'
+			{ startIndex: 64, type: "identifier.gql" },             // '$intValue'
+			{ startIndex: 73, type: "delimiter.curly.gql" },        // '}'
+			{ startIndex: 74, type: "delimiter.parenthesis.gql" },  // ')'
+			{ startIndex: 75, type: "delimiter.curly.gql" },        // '{'
+			{ startIndex: 76, type: "identifier.gql" },             // 'field1'
+			{ startIndex: 82, type: "" },                           // ' '
+			{ startIndex: 83, type: "identifier.gql" },             // 'field2'
+			{ startIndex: 89, type: "delimiter.curly.gql" },        // '}}'
+		],
+	}],
+
+	// More complex test:
+	//   """
+	//   Node interface
+	//   - allows (re)fetch arbitrary entity only by ID
+	//   """
+	//   interface Node {
+	//     id: ID!
+	//   }
+	[
+		{
+			line: '"""',
+			tokens: [
+				{ startIndex: 0, type: "string.gql" }
+			],
+		},
+		{
+			line: 'This is MarkDown',
+			tokens: [
+				{ startIndex: 0, type: "" }
+			],
+		},
+		{
+			line: '"""',
+			tokens: [
+				{ startIndex: 0, type: "string.gql" }
+			],
+		},
+		{
+			line: 'interface Node {',
+			tokens: [
+				{ startIndex: 0, type: "keyword.gql" },
+				{ startIndex: 9, type: "" },
+				{ startIndex: 10, type: "type.identifier.gql" },
+				{ startIndex: 14, type: "" },
+				{ startIndex: 15, type: "delimiter.curly.gql" },
+			],
+		},
+		{
+			line: '  id: ID!',
+			tokens: [
+				{ startIndex: 0, type: "" },
+				{ startIndex: 2, type: "identifier.gql" },
+				{ startIndex: 4, type: "operator.gql" },
+				{ startIndex: 5, type: "" },
+				{ startIndex: 6, type: "keyword.gql" },
+				{ startIndex: 8, type: "operator.gql" },
+			],
+		},
+		{
+			line: '}',
+			tokens: [
+				{ startIndex: 0, type: "delimiter.curly.gql", },
+			],
+		},
+	]
+
+]);

src/graphql/graphql.ts

@@ -0,0 +1,141 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import IRichLanguageConfiguration = monaco.languages.LanguageConfiguration;
+import ILanguage = monaco.languages.IMonarchLanguage;
+
+export const conf: IRichLanguageConfiguration = {
+	comments: {
+		lineComment: '#'
+	},
+	brackets: [
+		['{', '}'],
+		['[', ']'],
+		['(', ')']
+	],
+	autoClosingPairs: [
+		{ open: '{', close: '}' },
+		{ open: '[', close: ']' },
+		{ open: '(', close: ')' },
+		{ open: '"""', close: '"""', notIn: ['string', 'comment'] },
+		{ open: '"', close: '"', notIn: ['string', 'comment'] },
+	],
+	surroundingPairs: [
+		{ open: '{', close: '}' },
+		{ open: '[', close: ']' },
+		{ open: '(', close: ')' },
+		{ open: '"""', close: '"""' },
+		{ open: '"', close: '"' },
+	],
+	folding: {
+		offSide: true
+	}
+};
+
+export const language = <ILanguage>{
+	// Set defaultToken to invalid to see what you do not tokenize yet
+	defaultToken: 'invalid',
+	tokenPostfix: '.gql',
+
+	keywords: [
+		'null', 'true', 'false',
+		'query', 'mutation', 'subscription',
+		'extend', 'schema', 'directive',
+		'scalar', 'type', 'interface', 'union', 'enum', 'input', 'implements',
+		'fragment', 'on',
+	],
+
+	typeKeywords: ['Int', 'Float', 'String', 'Boolean', 'ID'],
+
+	directiveLocations: [
+		'SCHEMA', 'SCALAR', 'OBJECT', 'FIELD_DEFINITION', 'ARGUMENT_DEFINITION',
+		'INTERFACE', 'UNION', 'ENUM', 'ENUM_VALUE', 'INPUT_OBJECT', 'INPUT_FIELD_DEFINITION',
+		'QUERY', 'MUTATION', 'SUBSCRIPTION', 'FIELD', 'FRAGMENT_DEFINITION',
+		'FRAGMENT_SPREAD', 'INLINE_FRAGMENT', 'VARIABLE_DEFINITION',
+	],
+
+	operators: ['=', '!', '?', ':', '&', '|'],
+
+	// we include these common regular expressions
+	symbols: /[=!?:&|]+/,
+
+	// https://facebook.github.io/graphql/draft/#sec-String-Value
+	escapes: /\\(?:["\\\/bfnrt]|u[0-9A-Fa-f]{4})/,
+
+	// The main tokenizer for our languages
+	tokenizer: {
+		root: [
+			// identifiers and keywords
+			[
+				/[a-z_$][\w$]*/,
+				{
+					cases: {
+						'@keywords': 'keyword',
+						'@default': 'identifier',
+					},
+				},
+			],
+			[
+				/[A-Z][\w\$]*/,
+				{
+					cases: {
+						'@typeKeywords': 'keyword',
+						'@default': 'type.identifier',
+					},
+				},
+			], // to show class names nicely
+
+			// whitespace
+			{ include: '@whitespace' },
+
+			// delimiters and operators
+			[/[{}()\[\]]/, '@brackets'],
+			[
+				/@symbols/,
+				{ cases: { '@operators': 'operator', '@default': '' } },
+			],
+
+			// @ annotations.
+			// As an example, we emit a debugging log message on these tokens.
+			// Note: message are supressed during the first load -- change some lines to see them.
+			[
+				/@\s*[a-zA-Z_\$][\w\$]*/,
+				{ token: 'annotation', log: 'annotation token: $0' },
+			],
+
+			// numbers
+			[/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
+			[/0[xX][0-9a-fA-F]+/, 'number.hex'],
+			[/\d+/, 'number'],
+
+			// delimiter: after number because of .\d floats
+			[/[;,.]/, 'delimiter'],
+
+			[/"""/,
+				{ token: 'string', next: '@mlstring', nextEmbedded: 'markdown' }
+			],
+
+			// strings
+			[/"([^"\\]|\\.)*$/, 'string.invalid'], // non-teminated string
+			[/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
+		],
+
+		mlstring: [
+			[/[^"]+/, 'string'],
+			['"""', { token: 'string', next: '@pop', nextEmbedded: '@pop' }]
+		],
+
+		string: [
+			[/[^\\"]+/, 'string'],
+			[/@escapes/, 'string.escape'],
+			[/\\./, 'string.escape.invalid'],
+			[/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
+		],
+
+		whitespace: [[/[ \t\r\n]+/, ''], [/#.*$/, 'comment']],
+	},
+};

src/monaco.contribution.ts

@@ -53,3 +53,4 @@ import './shell/shell.contribution';
 import './perl/perl.contribution';
 import './azcli/azcli.contribution';
 import './apex/apex.contribution';
+import './graphql/graphql.contribution';

test/setup.js

@@ -38,6 +38,7 @@ define(['require'], function () {
 			'release/dev/dockerfile/dockerfile.test',
 			'release/dev/fsharp/fsharp.test',
 			'release/dev/go/go.test',
+			'release/dev/graphql/graphql.test',
 			'release/dev/handlebars/handlebars.test',
 			'release/dev/html/html.test',
 			'release/dev/java/java.test',