feat: handle line offset in errors

package.json

@@ -17,8 +17,10 @@
     "@vue/compiler-sfc": "^3.0.0-alpha.0"
   },
   "dependencies": {
+    "chalk": "^3.0.0",
     "hash-sum": "^2.0.0",
-    "loader-utils": "^1.2.3"
+    "loader-utils": "^1.2.3",
+    "source-map": "^0.6.1"
   },
   "devDependencies": {
     "@types/hash-sum": "^1.0.0",

src/index.ts

@@ -8,15 +8,15 @@ import {
   TemplateCompiler,
   CompilerOptions,
   SFCBlock,
-  TemplateCompileOptions
+  SFCTemplateCompileOptions
 } from '@vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
 
 const VueLoaderPlugin = require('./plugin')
 
 export interface VueLoaderOptions {
-  transformAssetUrls?: TemplateCompileOptions['transformAssetUrls']
+  transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
   compiler?: TemplateCompiler
   compilerOptions?: CompilerOptions
   hotReload?: boolean

src/templateLoader.ts

@@ -1,45 +1,37 @@
 import * as webpack from 'webpack'
 import qs from 'querystring'
+import chalk from 'chalk'
 import loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
-import {
-  compileTemplate,
-  TemplateCompileOptions,
-  generateCodeFrame
-} from '@vue/compiler-sfc'
+import { SourceMapConsumer, RawSourceMap } from 'source-map'
+import { compileTemplate, generateCodeFrame } from '@vue/compiler-sfc'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
 // selection requests initiated from vue files.
-const TemplateLoader: webpack.loader.Loader = function(source) {
+const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
   source = String(source)
   const loaderContext = this
-  const query = qs.parse(this.resourceQuery.slice(1))
 
   // although this is not the main vue-loader, we can get access to the same
   // vue-loader options because we've set an ident in the plugin and used that
   // ident to create the request for this loader in the pitcher.
   const options = (loaderUtils.getOptions(loaderContext) ||
     {}) as VueLoaderOptions
-  const { id } = query
+
   // const isServer = loaderContext.target === 'node'
   // const isProduction = options.productionMode || loaderContext.minimize || process.env.NODE_ENV === 'production'
+  const query = qs.parse(this.resourceQuery.slice(1))
+  const scopedId = query.scoped ? `data-v-${query.id}` : null
+  scopedId // TODO this is for SSR
 
-  const compilerOptions = Object.assign({}, options.compilerOptions, {
-    // TODO line offset
-    scopeId: query.scoped ? `data-v-${id}` : null
-  })
-
-  // for vue-component-compiler
-  const finalOptions: TemplateCompileOptions = {
+  const compiled = compileTemplate({
     source,
     filename: this.resourcePath,
     compiler: options.compiler,
-    compilerOptions,
+    compilerOptions: options.compilerOptions,
     transformAssetUrls: options.transformAssetUrls || true
-  }
-
-  const compiled = compileTemplate(finalOptions)
+  })
 
   // tips
   if (compiled.tips.length) {
@@ -50,17 +42,24 @@ const TemplateLoader: webpack.loader.Loader = function(source) {
 
   // errors
   if (compiled.errors && compiled.errors.length) {
+    const lineOffset = inMap ? getLineOffset(inMap) : 0
     compiled.errors.forEach(err => {
       if (typeof err === 'string') {
         loaderContext.emitError(err)
       } else {
         if (err.loc) {
-          err.message = `\n${err.message}\n\n${
-            generateCodeFrame(
+          const filePath = chalk.blueBright(`${
+            loaderContext.resourcePath
+          }:${err.loc.start.line}:${err.loc.start.column}`)
+          err.message = `\n${filePath}\n${
+            chalk.red(err.message.replace(/\s+\(\d+:\d+\)/, ''))
+          }\n${
+            chalk.yellow(generateCodeFrame(
             source as string,
             err.loc.start.offset,
-            err.loc.end.offset
-          )}`
+            err.loc.end.offset,
+            lineOffset
+          ))}\n`
         }
         loaderContext.emitError(err)
       }
@@ -71,4 +70,13 @@ const TemplateLoader: webpack.loader.Loader = function(source) {
   loaderContext.callback(null, code, map as any)
 }
 
+function getLineOffset(map: RawSourceMap): number {
+  const consumer = new SourceMapConsumer(map)
+  let offset = 0
+  consumer.eachMapping(map => {
+    offset = map.originalLine - map.generatedLine
+  })
+  return offset
+}
+
 module.exports = TemplateLoader

yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -308,6 +313,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.0.tgz#5681f0dcf7ae5880a7841d8831c4724ed9cc0172"
+  integrity sha512-7kFQgnEaMdRtwf6uSfUnVr9gSGC7faurn+J/Mv90/W+iTtN0405/nLdopfMWwchyxhbGYl6TC4Sccn9TUkGAgg==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -668,6 +681,14 @@ [email protected]:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chokidar@^2.0.2, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -755,11 +776,23 @@ color-convert@^1.9.0:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 [email protected]:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -1617,6 +1650,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3560,6 +3598,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"