feat: properly map template position

Author: yyx990803

package.json

@@ -21,6 +21,7 @@
     "chalk": "^3.0.0",
     "hash-sum": "^2.0.0",
     "loader-utils": "^1.2.3",
+    "merge-source-map": "^1.1.0",
     "source-map": "^0.6.1"
   },
   "devDependencies": {

src/index.ts

@@ -70,14 +70,9 @@ const loader: webpack.loader.Loader = function(source) {
   const isProduction =
     options.productionMode || minimize || process.env.NODE_ENV === 'production'
 
-  const filename = path.basename(resourcePath)
-  const context = rootContext || process.cwd()
-  const sourceRoot = path.dirname(path.relative(context, resourcePath))
-
   const descriptor = parse(String(source), {
-    filename,
-    sourceMap,
-    sourceRoot
+    filename: resourcePath,
+    sourceMap
   })
 
   // if the query has a type field, this is a language block request
@@ -94,7 +89,7 @@ const loader: webpack.loader.Loader = function(source) {
 
   // module id for scoped CSS & hot-reload
   const rawShortFilePath = path
-    .relative(context, resourcePath)
+    .relative(rootContext || process.cwd(), resourcePath)
     .replace(/^(\.\.[\/\\])+/, '')
   const shortFilePath = rawShortFilePath.replace(/\\/g, '/') + resourceQuery
   const id = hash(isProduction ? shortFilePath + '\n' + source : shortFilePath)
@@ -180,7 +175,7 @@ const loader: webpack.loader.Loader = function(source) {
   } else if (options.exposeFilename) {
     // Libraies can opt-in to expose their components' filenames in production builds.
     // For security reasons, only expose the file's basename in production.
-    code += `\nscript.__file = ${JSON.stringify(filename)}`
+    code += `\nscript.__file = ${JSON.stringify(path.basename(resourcePath))}`
   }
 
   // finalize

src/shim.d.ts

@@ -0,0 +1,3 @@
+declare module 'merge-source-map' {
+  export default function merge(inMap: any, outMap: any): any
+}

src/templateLoader.ts

@@ -5,6 +5,7 @@ import loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
 import { SourceMapConsumer, RawSourceMap } from 'source-map'
 import { compileTemplate, generateCodeFrame } from '@vue/compiler-sfc'
+import mergeSourceMap from 'merge-source-map'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -21,12 +22,13 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
 
   // 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 query = qs.parse(loaderContext.resourceQuery.slice(1))
   const scopeId = query.scoped ? `data-v-${query.id}` : null
 
   const compiled = compileTemplate({
     source,
-    filename: this.resourcePath,
+    // avoid source content overwriting the original
+    filename: loaderContext.resourcePath,
     compiler: options.compiler,
     compilerOptions: {
       ...options.compilerOptions,
@@ -69,7 +71,12 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
     })
   }
 
-  const { code, map } = compiled
+  let { code, map } = compiled
+  if (map && inMap) {
+    // avoid overwritting original *.vue source during merge
+    map.sourcesContent = []
+    map = mergeSourceMap(inMap, map)
+  }
   loaderContext.callback(null, code, map)
 }
 

yarn.lock

@@ -2338,6 +2338,13 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-source-map@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
+  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
+  dependencies:
+    source-map "^0.6.1"
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"