1-indexed columns and account for column in error

Author: Daniel Woelfel

src/error/syntaxError.js

@@ -23,8 +23,9 @@ export function syntaxError(
 ): GraphQLError {
   const location = getLocation(source, position);
   const line = location.line + source.locationOffset.line - 1;
+  const column = location.column + source.locationOffset.column - 1;
   const error = new GraphQLError(
-    `Syntax Error ${source.name} (${line}:${location.column}) ${description}` +
+    `Syntax Error ${source.name} (${line}:${column}) ${description}` +
       '\n\n' +
       highlightSourceAtLocation(source, location),
     undefined,
@@ -41,22 +42,28 @@ export function syntaxError(
 function highlightSourceAtLocation(source, location) {
   const line = location.line;
   const lineOffset = source.locationOffset.line - 1;
+  const columnOffset = source.locationOffset.column - 1;
   const contextLine = line + lineOffset;
   const prevLineNum = (contextLine - 1).toString();
   const lineNum = contextLine.toString();
   const nextLineNum = (contextLine + 1).toString();
   const padLen = nextLineNum.length;
   const lines = source.body.split(/\r\n|[\n\r]/g);
+  lines[0] = whitespace(columnOffset) + lines[0];
   return (
     (line >= 2 ?
       lpad(padLen, prevLineNum) + ': ' + lines[line - 2] + '\n' : '') +
     lpad(padLen, lineNum) + ': ' + lines[line - 1] + '\n' +
-    Array(2 + padLen + location.column).join(' ') + '^\n' +
+    whitespace(2 + padLen + location.column + columnOffset - 1) + '^\n' +
     (line < lines.length ?
       lpad(padLen, nextLineNum) + ': ' + lines[line] + '\n' : '')
   );
 }
 
+function whitespace(len) {
+  return Array(len + 1).join(' ');
+}
+
 function lpad(len, str) {
-  return Array(len - str.length + 1).join(' ') + str;
+  return whitespace(len - str.length) + str;
 }

src/language/__tests__/lexer-test.js

@@ -125,21 +125,34 @@ describe('Lexer', () => {
       const str = '' +
       '\n' +
       '\n' +
-      '    ?\n' +
+      '     ?\n' +
       '\n';
-      const source = new Source(str, 'foo.js', { line: 11, column: 0 });
+      const source = new Source(str, 'foo.js', { line: 11, column: 1 });
       return createLexer(source).advance();
     }).to.throw(
-        'Syntax Error foo.js (13:5) ' +
+        'Syntax Error foo.js (13:6) ' +
         'Cannot parse the unexpected character "?".\n' +
         '\n' +
         '12: \n' +
-        '13:     ?\n' +
-        '        ^\n' +
+        '13:      ?\n' +
+        '         ^\n' +
         '14: \n'
       );
   });
 
+  it('updates column numbers in error for file context', () => {
+    expect(() => {
+      const source = new Source('?', 'foo.js', { line: 1, column: 5 });
+      return createLexer(source).advance();
+    }).to.throw(
+        'Syntax Error foo.js (1:5) ' +
+        'Cannot parse the unexpected character "?".\n' +
+        '\n' +
+        '1:     ?\n' +
+        '       ^\n'
+      );
+  });
+
   it('lexes strings', () => {
 
     expect(

src/language/source.js

@@ -19,6 +19,7 @@ type Location = {
  * store GraphQL documents in source files; for example, if the GraphQL input
  * starts at line 40 in a file named Foo.graphql, it might be useful for name to
  * be "Foo.graphql" and location to be `{ line: 40, column: 0 }`.
+ * line and columns in locationOffset are 1-indexed
  */
 export class Source {
   body: string;
@@ -28,6 +29,6 @@ export class Source {
   constructor(body: string, name?: string, locationOffset?: Location): void {
     this.body = body;
     this.name = name || 'GraphQL request';
-    this.locationOffset = locationOffset || { line: 1, column: 0 };
+    this.locationOffset = locationOffset || { line: 1, column: 1 };
   }
 }