feat: support sourcemap, close #33

Author: antfu

examples/vue2/package.json

@@ -11,7 +11,7 @@
     "vite-plugin-vue2": "^1.4.3"
   },
   "dependencies": {
-    "vue": "3.0.11",
+    "vue": "2.6.12",
     "vue-template-compiler": "2.6.12"
   }
 }

examples/vue2/vite.config.ts

@@ -7,6 +7,9 @@ const config: UserConfig = {
     createVuePlugin(),
     ViteComponents(),
   ],
+  build: {
+    sourcemap: true,
+  },
 }
 
 export default config

examples/vue3/vite.config.ts

@@ -31,6 +31,9 @@ const config: UserConfig = {
       ],
     }),
   ],
+  build: {
+    sourcemap: true,
+  },
 }
 
 export default config

package.json

@@ -31,6 +31,7 @@
     "chokidar": "^3.5.1",
     "debug": "^4.3.2",
     "fast-glob": "^3.2.5",
+    "magic-string": "^0.25.7",
     "minimatch": "^3.0.4"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -7,7 +7,7 @@ import { Vue2Transformer } from './transforms/vue2'
 
 function VitePluginComponents(options: Options = {}): Plugin {
   let ctx: Context
-  let transformers: Transformer[]
+  let transformer: Transformer
 
   return {
     name: 'vite-plugin-components',
@@ -17,21 +17,16 @@ function VitePluginComponents(options: Options = {}): Plugin {
         options.transformer = options.transformer || 'vue2'
 
       ctx = new Context(options, config)
-      transformers = [
-        ctx.options.transformer === 'vue2'
-          ? Vue2Transformer(ctx)
-          : Vue3Transformer(ctx),
-      ]
+      transformer = ctx.options.transformer === 'vue2'
+        ? Vue2Transformer(ctx)
+        : Vue3Transformer(ctx)
     },
     configureServer(server) {
       ctx.setServer(server)
     },
     transform(code, id) {
       const { path, query } = parseId(id)
-      for (const trans of transformers)
-        code = trans(code, id, path, query)
-
-      return code
+      return transformer(code, id, path, query)
     },
   }
 }

src/index.ts

@@ -1,4 +1,5 @@
 import Debug from 'debug'
+import MagicString from 'magic-string'
 import { Transformer } from '../types'
 import { Context } from '../context'
 import { pascalCase, stringifyComponentImport } from '../utils'
@@ -8,7 +9,7 @@ const debug = Debug('vite-plugin-components:transform:vue2')
 export function Vue2Transformer(ctx: Context): Transformer {
   return (code, id, path, query) => {
     if (!(path.endsWith('.vue') || ctx.options.customLoaderMatcher(id)))
-      return code
+      return null
 
     ctx.searchGlob()
 
@@ -19,30 +20,36 @@ export function Vue2Transformer(ctx: Context): Transformer {
     let no = 0
     const componentPaths: string[] = []
 
-    let transformed = code.replace(/_c\(['"](.+?)["']([,)])/g, (str, match, append) => {
-      if (match && !match.startsWith('_')) {
-        debug(`| ${match}`)
-        const name = pascalCase(match)
+    const s = new MagicString(code)
+
+    for (const match of code.matchAll(/_c\(['"](.+?)["']([,)])/g)) {
+      const [full, matchStr, append] = match
+
+      if (match.index != null && matchStr && !matchStr.startsWith('_')) {
+        const start = match.index
+        const end = start + full.length
+        debug(`| ${matchStr}`)
+        const name = pascalCase(matchStr)
         componentPaths.push(name)
         const component = ctx.findComponent(name, [sfcPath])
         if (component) {
           const var_name = `__vite_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))
           no += 1
-          return `_c(${var_name}${append}`
+          s.overwrite(start, end, `_c(${var_name}${append}`)
         }
       }
-      return str
-    })
-
-    debug(transformed)
+    }
 
     debug(`^ (${no})`)
 
     ctx.updateUsageMap(sfcPath, componentPaths)
 
-    transformed = `${head.join('\n')}\n${transformed}`
+    s.prepend(`${head.join('\n')}\n`)
 
-    return transformed
+    return {
+      code: s.toString(),
+      map: s.generateMap(),
+    }
   }
 }

src/transforms/vue2.ts

@@ -1,4 +1,5 @@
 import Debug from 'debug'
+import MagicString from 'magic-string'
 import { Transformer } from '../types'
 import { Context } from '../context'
 import { pascalCase, stringifyComponentImport } from '../utils'
@@ -8,7 +9,7 @@ const debug = Debug('vite-plugin-components:transform:vue3')
 export function Vue3Transformer(ctx: Context): Transformer {
   return (code, id, path, query) => {
     if (!(path.endsWith('.vue') || ctx.options.customLoaderMatcher(id)))
-      return code
+      return null
 
     ctx.searchGlob()
 
@@ -19,28 +20,35 @@ export function Vue3Transformer(ctx: Context): Transformer {
     let no = 0
     const componentPaths: string[] = []
 
-    let transformed = code.replace(/_resolveComponent\("(.+?)"\)/g, (str, match) => {
-      if (match && !match.startsWith('_')) {
-        debug(`| ${match}`)
-        const name = pascalCase(match)
+    const s = new MagicString(code)
+
+    for (const match of code.matchAll(/_resolveComponent\("(.+?)"\)/g)) {
+      const matchedName = match[1]
+      if (match.index != null && matchedName && !matchedName.startsWith('_')) {
+        const start = match.index
+        const end = start + match[0].length
+        debug(`| ${matchedName}`)
+        const name = pascalCase(matchedName)
         componentPaths.push(name)
         const component = ctx.findComponent(name, [sfcPath])
         if (component) {
           const var_name = `__vite_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))
           no += 1
-          return var_name
+          s.overwrite(start, end, var_name)
         }
       }
-      return str
-    })
+    }
 
     debug(`^ (${no})`)
 
     ctx.updateUsageMap(sfcPath, componentPaths)
 
-    transformed = `${head.join('\n')}\n${transformed}`
+    s.prepend(`${head.join('\n')}\n`)
 
-    return transformed
+    return {
+      code: s.toString(),
+      map: s.generateMap(),
+    }
   }
 }

src/transforms/vue3.ts

@@ -20,7 +20,7 @@ export interface UILibraryOptions {
 
 export type Matcher = (id: string) => boolean | null | undefined
 
-export type Transformer = (code: string, id: string, path: string, query: Record<string, string>) => string
+export type Transformer = (code: string, id: string, path: string, query: Record<string, string>) => null | {code: string; map: any}
 
 /**
  * Plugin options.