feat(error-report): add error underlining

package.json

@@ -15,24 +15,28 @@
     "lint": "tslint --project .",
     "precommit": "run-p build lint"
   },
+  "peerDependencies": {
+    "parcel-bundler": "^1.1.0",
+    "typescript": "^2.4.0"
+  },
   "dependencies": {
-    "@types/babel-code-frame": "^6.20.1",
-    "babel-code-frame": "^6.26.0",
+    "@babel/code-frame": "^7.0.0-beta.34",
     "chalk": "^2.3.0",
     "comment-json": "^1.1.3",
     "find-up": "^2.1.0",
     "normalize-path": "^2.1.1",
-    "parcel-bundler": "^1.1.0",
-    "tslib": "^1.8.1",
-    "typescript": "^2.6.2"
+    "resolve": "^1.5.0",
+    "tslib": "^1.8.1"
   },
   "devDependencies": {
     "@types/comment-json": "^1.1.0",
     "@types/find-up": "^2.1.1",
     "@types/node": "^8.0.57",
+    "@types/resolve": "^0.0.4",
     "husky": "^0.14.3",
     "npm-run-all": "^4.1.2",
     "tslint": "^5.8.0",
-    "tslint-eslint-rules": "^4.1.1"
+    "tslint-eslint-rules": "^4.1.1",
+    "typescript": "^2.6.2"
   }
 }

src/backend/format.ts

@@ -3,30 +3,44 @@
 
 import {EOL} from 'os'
 
-import codeFrame = require('babel-code-frame')
+import {codeFrameColumns, Location} from '@babel/code-frame'
 import chalk from 'chalk'
 import normalizePath = require('normalize-path')
 import {Diagnostic, flattenDiagnosticMessageText} from 'typescript'
 
 export function formatDiagnostic(diagnostics: Diagnostic[], context: string): string {
 	return diagnostics.map(diagnostic => {
 		const messageText = formatDiagnosticMessage(diagnostic, '', context)
+		const {file} = diagnostic
 		let message = messageText
 
-		if(diagnostic.file != null && diagnostic.start != null) {
-			const lineChar = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start)
-			const source = diagnostic.file.text || diagnostic.source
-			const red = chalk.red(`🚨  ${diagnostic.file.fileName}(${lineChar.line + 1},${lineChar.character + 1})`)
+		if(file != null && diagnostic.start != null) {
+			const lineChar = file.getLineAndCharacterOfPosition(diagnostic.start)
+			const source = file.text || diagnostic.source
+			const start = {
+				line: lineChar.line + 1,
+				column: lineChar.character + 1
+			}
+			const location: Location = {start}
+			const red = chalk.red(`🚨  ${file.fileName}(${start.line},${start.column})`)
 
 			const messages = [`${red}\n${chalk.redBright(messageText)}`]
 
 			if(source != null) {
-				const frame = codeFrame(
-					source,
-					lineChar.line + 1,
-					lineChar.character,
-					{linesAbove: 1, linesBelow: 1, highlightCode: true}
-				)
+				if(typeof diagnostic.length === 'number') {
+					const end = file.getLineAndCharacterOfPosition(diagnostic.start + diagnostic.length)
+
+					location.end = {
+						line: end.line + 1,
+						column: end.character + 1
+					}
+				}
+
+				const frame = codeFrameColumns(source, location, {
+					linesAbove: 1,
+					linesBelow: 1,
+					highlightCode: true
+				})
 
 				messages.push(
 					frame
@@ -35,6 +49,7 @@ export function formatDiagnostic(diagnostics: Diagnostic[], context: string): st
 						.join('\n')
 				)
 			}
+
 			message = messages.join('\n')
 		}
 		return message + EOL

src/modules.d.ts

@@ -16,3 +16,24 @@ declare module 'parcel-bundler/src/WorkerFarm'
 declare module 'parcel-bundler/src/worker'
 
 declare module 'normalize-path'
+
+declare module '@babel/code-frame' {
+	export interface LineAndColumn {
+		line: number
+		column: number
+	}
+
+	export interface Location {
+		start: LineAndColumn
+		end?: LineAndColumn
+	}
+
+	export type Options = Partial<{
+		highlightCode: boolean
+		linesAbove: number
+		linesBelow: number
+		forceColor: boolean
+	}>
+
+	export function codeFrameColumns(lines: string, location: Location, options?: Options): string
+}