fix: use verbose template sourcemap for better sourcemap support

Author: znck

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "markdownlint.config": {
+    "no-trailing-punctuation": false
+  }
+}

examples/css-modules/rollup.config.js

@@ -1,13 +1,14 @@
 import vue from '../../dist/rollup-plugin-vue.esm'
 import postcss from 'rollup-plugin-postcss'
 
-export default [
+/** @type {import('rollup').RollupOptions[]} */
+const config = [
   {
     input: 'src/App.vue',
     output: {
       file: 'dist/app.js',
       format: 'esm',
-      sourcemap: true,
+      sourcemap: 'inline',
     },
     plugins: [
       vue(),
@@ -19,6 +20,10 @@ export default [
       }),
       postcss({ include: /(?<!&module=.*)\.css$/ }),
     ],
-    external: ['vue'],
+    external(id) {
+      return /(^vue$|style-inject)/.test(id)
+    },
   },
 ]
+
+export default config

examples/simple/rollup.config.js

@@ -5,7 +5,7 @@ export default [{
   output: {
     file: 'dist/app.js',
     format: 'esm',
-    sourcemap: true
+    sourcemap: 'inline',
   },
   plugins: [vue()],
   external: ['vue']

package.json

@@ -13,10 +13,12 @@
     "@vue/compiler-sfc": "^3.0.0-alpha.3",
     "debug": "^4.1.1",
     "hash-sum": "^2.0.0",
-    "rollup-pluginutils": "^2.8.2"
+    "rollup-pluginutils": "^2.8.2",
+    "sourcemap-codec": "^1.4.8"
   },
   "peerDependencies": {},
   "devDependencies": {
+    "@types/debug": "^4.1.5",
     "@types/jest": "^24.9.0",
     "husky": "^4.2.0",
     "rollup": "^1.29.1",

src/index.ts

@@ -17,14 +17,14 @@ import {
   SFCTemplateCompileOptions,
   SFCTemplateCompileResults,
 } from '@vue/compiler-sfc'
-// @ts-ignore
 import createDebugger from 'debug'
 import hash from 'hash-sum'
 import { basename, relative } from 'path'
 import qs from 'querystring'
 import { Plugin, RollupError } from 'rollup'
 import { createFilter } from 'rollup-pluginutils'
 import { genCSSModulesCode } from './cssModules'
+import { encode } from 'sourcemap-codec'
 
 const debug = createDebugger('rollup-plugin-vue')
 
@@ -73,7 +73,6 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
       return undefined
     },
     load(id) {
-      debug(`load(${id})`)
       const query = parseVuePartRequest(id)
 
       if (query.vue) {
@@ -91,27 +90,52 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
             : null
 
         if (block) {
-          return {
+          const result = {
             code: block.content,
-            map: normalizeSourceMap(block.map, 'load:' + id)
+            map: normalizeSourceMap(block.map),
+          }
+
+          if (query.type === 'template') {
+            // generate source mapping for each character.
+            result.map.mappings = encode(
+              result.code.split(/\r?\n/).map((line, index) => {
+                const segments: [number, number, number, number][] = []
+                for (let i = 0; i < line.length; ++i) {
+                  segments.push([i, 0, block.loc.start.line + index - 1, i])
+                }
+
+                return segments
+              })
+            )
           }
+
+          debug(
+            `load(${id})`,
+            '\n' +
+              result.code +
+              '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+              Buffer.from(JSON.stringify(result.map), 'utf-8').toString(
+                'base64'
+              )
+          )
+
+          return result
         }
       }
 
       return undefined
     },
     async transform(code, id) {
-      debug(`transform(${id})`)
       const query = parseVuePartRequest(id)
       if (query.vue) {
         const descriptor = getDescriptor(query.filename)
         if (query.type === 'template') {
+          debug(`transform(${id})`)
           const block = descriptor.template!
           const result = compileTemplate({
             filename: query.filename,
-            source: block.content,
+            source: code,
             preprocessLang: block.lang,
-            inMap: normalizeSourceMap(block.map!, 'transform:' + id),
             compiler: options.compiler,
             compilerOptions: options.compilerOptions,
             transformAssetUrls: options.transformAssetUrls,
@@ -139,9 +163,10 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
 
           return {
             code: result.code,
-            map: normalizeSourceMap(result.map!, id),
+            map: normalizeSourceMap(result.map!),
           }
         } else if (query.type === 'style' && query.scoped) {
+          debug(`transform(${id})`)
           const block = descriptor.styles[query.index]!
           const result = await compileStyleAsync({
             filename: query.filename,
@@ -163,11 +188,12 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
 
           return {
             code: result.code,
-            map: normalizeSourceMap(result.map!, id),
+            map: normalizeSourceMap(result.map!),
           }
         }
         return null
       } else if (filter(id)) {
+        debug(`transform(${id})`)
         const { descriptor, errors } = parseSFC(code, id, rootContext)
 
         if (errors.length) {
@@ -184,9 +210,13 @@ export default function PluginVue(userOptions: Partial<Options> = {}): Plugin {
           options
         )
 
+        debug('transient .vue file:', '\n' + output + '\n')
+
         return {
           code: output,
-          map: null,
+          map: {
+            mappings: '',
+          },
         }
       } else {
         return null
@@ -262,6 +292,7 @@ function parseSFC(
     sourceMap: true,
     filename: id,
     sourceRoot: sourceRoot,
+    pad: 'line',
   })
 
   cache.set(id, descriptor)
@@ -294,8 +325,8 @@ function transformVueSFC(
   const scriptImport = getScriptCode(descriptor, resourcePath)
   const stylesCode = getStyleCode(descriptor, resourcePath, id)
   const output = [
-    templateImport,
     scriptImport,
+    templateImport,
     stylesCode,
     `script.render = render`,
   ]
@@ -416,13 +447,9 @@ function _(any: any) {
   return JSON.stringify(any)
 }
 
-function normalizeSourceMap(map: SFCTemplateCompileResults['map'], extra?: any): any {
+function normalizeSourceMap(map: SFCTemplateCompileResults['map']): any {
   if (!map) return null as any
 
-  if (typeof map.mappings !== 'string') {
-    console.log(extra, map)
-  }
-
   return {
     version: Number(map.version),
     file: map.file,

yarn.lock

@@ -999,6 +999,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/debug@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
+  integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -5342,7 +5347,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-sourcemap-codec@^1.4.4:
+sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==