Feat/source maps

package.json

@@ -56,11 +56,12 @@
     "querystring": "^0.2.0",
     "rollup": "^2.35.1",
     "slash": "^3.0.0",
+    "source-map": "^0.7.3",
     "vue-template-es2015-compiler": "^1.9.1"
   },
   "peerDependencies": {
-    "vue-template-compiler": "^2.2.0",
-    "vite": "^2.0.0-beta.23"
+    "vite": "^2.0.0-beta.23",
+    "vue-template-compiler": "^2.2.0"
   },
   "devDependencies": {
     "@types/consolidate": "^0.14.0",

playground/package.json

@@ -12,6 +12,7 @@
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "vite": "^2.0.0-beta.23"
+    "vite": "^2.0.0-beta.23",
+    "vue-template-compiler": "^2.6.12"
   }
 }

playground/vite.config.ts

@@ -8,7 +8,7 @@ const config = defineConfig({
     },
   },
   build: {
-    // sourcemap: true,
+    sourcemap: true,
     minify: false,
   },
   plugins: [

playground/yarn.lock

@@ -7,6 +7,11 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+
 esbuild@^0.9.3:
   version "0.9.7"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
@@ -29,6 +34,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 is-core-module@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
@@ -87,6 +97,14 @@ vite@^2.0.0-beta.23:
   optionalDependencies:
     fsevents "~2.3.1"
 
+vue-template-compiler@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
+  integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.1.0"
+
 vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"

src/index.ts

@@ -160,7 +160,7 @@ export function createVuePlugin(rawOptions: VueViteOptions = {}): Plugin {
         )
       }
       if (query.type === 'style') {
-        return transformStyle(
+        return await transformStyle(
           code,
           filename,
           descriptor,

src/main.ts

@@ -6,7 +6,7 @@ import { createDescriptor, setDescriptor } from './utils/descriptorCache'
 import path from 'path'
 import fs from 'fs'
 import { TransformPluginContext } from 'rollup'
-import { RawSourceMap } from '@vue/component-compiler-utils/dist/types'
+import { RawSourceMap, SourceMapGenerator } from 'source-map'
 
 export async function transformMain(
   code: string,
@@ -94,10 +94,22 @@ function injectStyles (context) {
     )
   }
 
+  let map = descriptor.script?.map
+  // if script source map is undefined, generate an emty souce map so that
+  // rollup wont complain at build time when using sourceMap option
+  if (!map) {
+    const emptyMapGen = new SourceMapGenerator({
+      file: filePath.replace(/\\/g, '/'),
+      sourceRoot: options.root.replace(/\\/g, '/'),
+    })
+    emptyMapGen.setSourceContent(filePath, code)
+    map = JSON.parse(emptyMapGen.toString())
+  }
+
   result += `\nexport default component.exports`
   return {
     code: result,
-    map: descriptor.script?.map,
+    map,
   }
 }
 

src/style.ts

@@ -15,8 +15,7 @@ export async function transformStyle(
     source: code,
     filename,
     id: `data-v-${descriptor.id}`,
-    // todo
-    // map: pluginContext.getCombinedSourcemap(),
+    map: pluginContext.getCombinedSourcemap(),
     scoped: !!block.scoped,
     trim: true,
   })

src/template.ts

@@ -12,7 +12,7 @@ export function compileSFCTemplate(
   filename: string,
   { root, isProduction, vueTemplateOptions = {}, devServer }: ResolvedOptions,
   pluginContext: TransformPluginContext
-): string {
+) {
   const { tips, errors, code } = compileTemplate({
     source,
     filename,
@@ -64,8 +64,13 @@ export function compileSFCTemplate(
       }
     })
   }
+
   // rewrite require calls to import on build
-  return transformRequireToImport(code) + `\nexport { render, staticRenderFns }`
+  return {
+    code:
+      transformRequireToImport(code) + `\nexport { render, staticRenderFns }`,
+    map: null,
+  }
 }
 
 export function transformRequireToImport(code: string): string {

src/utils/descriptorCache.ts

@@ -4,6 +4,7 @@ import hash from 'hash-sum'
 import { parse, SFCDescriptor } from '@vue/component-compiler-utils'
 import * as vueTemplateCompiler from 'vue-template-compiler'
 import { ResolvedOptions } from '../index'
+import { RawSourceMap, SourceMapGenerator } from 'source-map'
 
 const cache = new Map<string, SFCDescriptor>()
 const prevCache = new Map<string, SFCDescriptor | undefined>()
@@ -20,6 +21,25 @@ export function createDescriptor(
     sourceRoot: root,
     needMap: true,
   })
+  // v2 hasn't generate template and customBlocks map
+  if (descriptor.template && !descriptor.template.src) {
+    descriptor.template.map = generateSourceMap(
+      filename,
+      source,
+      descriptor.template.content,
+      root
+    )
+  }
+  if (descriptor.customBlocks) {
+    descriptor.customBlocks.forEach((customBlock) => {
+      customBlock.map = generateSourceMap(
+        filename,
+        source,
+        customBlock.content,
+        root
+      )
+    })
+  }
   // ensure the path is normalized in a way that is consistent inside
   // project (relative to root) and on different systems.
   const normalizedPath = slash(path.normalize(path.relative(root, filename)))
@@ -52,3 +72,37 @@ export function getDescriptor(filename: string, errorOnMissing = true) {
 export function setDescriptor(filename: string, entry: SFCDescriptor) {
   cache.set(filename, entry)
 }
+
+const splitRE = /\r?\n/g
+const emptyRE = /^(?:\/\/)?\s*$/
+
+function generateSourceMap(
+  filename: string,
+  source: string,
+  generated: string,
+  sourceRoot: string
+): RawSourceMap {
+  const map = new SourceMapGenerator({
+    file: filename.replace(/\\/g, '/'),
+    sourceRoot: sourceRoot.replace(/\\/g, '/'),
+  })
+  const offset = source.split(generated).shift()!.split(splitRE).length - 1
+
+  map.setSourceContent(filename, source)
+  generated.split(splitRE).forEach((line, index) => {
+    if (!emptyRE.test(line)) {
+      map.addMapping({
+        source: filename,
+        original: {
+          line: index + 1 + offset,
+          column: 0,
+        },
+        generated: {
+          line: index + 1,
+          column: 0,
+        },
+      })
+    }
+  })
+  return JSON.parse(map.toString())
+}