fix: provide a way to resolve alias

Author: antfu

src/context.ts

@@ -1,6 +1,7 @@
+import { relative } from 'path'
 import Debug from 'debug'
 import { ComponentsInfo, ComponentsImportMap, Options } from './types'
-import { normalize, toArray, getNameFromFilePath } from './utils'
+import { normalize, toArray, getNameFromFilePath, resolveAlias } from './utils'
 import { searchComponents } from './fs/glob'
 
 const debug = {
@@ -89,11 +90,24 @@ export class Context {
       .filter(Boolean) as ComponentsInfo[]
   }
 
+  normalizePath(path: string) {
+    return this.relative(this.resolveAlias(path))
+  }
+
+  resolveAlias(path: string) {
+    return resolveAlias(path, this.options.alias)
+  }
+
+  relative(path: string) {
+    return relative(this.root, path)
+  }
+
   setImports(key: string, names: string[]) {
     const casedNames = names.map(name => normalize(name))
     this._imports[key] = casedNames
     if (this._importsResolveTasks[key])
       this._importsResolveTasks[key][1]?.(casedNames)
+    return key
   }
 
   /**

src/generator/resolver.ts

@@ -9,7 +9,7 @@ export function isResolverPath(reqPath: string) {
 }
 
 export async function generateResolver(ctx: Context, reqPath: string) {
-  const sfcPath = reqPath.slice(0, -RESOLVER_EXT.length)
+  const sfcPath = ctx.normalizePath(reqPath.slice(0, -RESOLVER_EXT.length))
   debug(sfcPath)
 
   const names = await ctx.getImports(sfcPath) || []

src/index.ts

@@ -10,6 +10,7 @@ const defaultOptions: Options = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
+  alias: {},
 }
 
 function VitePluginComponents(options: Partial<Options> = {}): Plugin {

src/plugins/server.ts

@@ -2,7 +2,7 @@ import type { ServerPlugin } from 'vite'
 import Debug from 'debug'
 import { isResolverPath, generateResolver } from '../generator/resolver'
 import { Context } from '../context'
-import { matchGlobs, relative } from '../utils'
+import { matchGlobs } from '../utils'
 
 const debug = {
   add: Debug('vite-plugin-components:watcher:add'),
@@ -20,7 +20,7 @@ export function createServerPlugin(ctx: Context): ServerPlugin {
     }
 
     watcher.on('add', (e) => {
-      const path = relative(e)
+      const path = ctx.normalizePath(e)
       if (matchGlobs(path, ctx.globs)) {
         debug.add(path)
         if (ctx.addComponents(path))
@@ -29,7 +29,7 @@ export function createServerPlugin(ctx: Context): ServerPlugin {
     })
 
     watcher.on('unlink', (e) => {
-      const path = relative(e)
+      const path = ctx.normalizePath(e)
       if (matchGlobs(path, ctx.globs)) {
         debug.remove(path)
         if (ctx.removeComponents(path))

src/transforms/vueScript.ts

@@ -2,7 +2,6 @@ import { Transform } from 'vite'
 import Debug from 'debug'
 import { Context } from '../context'
 import { RESOLVER_EXT } from '../constants'
-import { relative } from '../utils'
 
 const debug = Debug('vite-plugin-components:transform:script')
 
@@ -18,7 +17,7 @@ export function VueScriptTransformer(ctx: Context): Transform {
       return path.endsWith('.vue') && !query.type
     },
     transform({ code, path, isBuild }) {
-      const filepath = relative(path)
+      const filepath = ctx.relative(path)
       debug(filepath)
       const lines = code.split('\n')
 

src/transforms/vueTemplate.ts

@@ -1,7 +1,6 @@
 import Debug from 'debug'
 import type { Transform } from 'vite'
 import { Context } from '../context'
-import { relative } from '../utils'
 
 const debug = Debug('vite-plugin-components:transform:template')
 
@@ -18,9 +17,9 @@ export function VueTemplateTransformer(ctx: Context): Transform {
       return path.endsWith('.vue') && query.type === 'template'
     },
     transform({ code, path }) {
-      const filepath = relative(path)
+      const filepath = ctx.normalizePath(path)
       const imports = Array.from(code.matchAll(/_resolveComponent\("(.*)"\)/g)).map(i => i[1])
-      ctx.setImports(`/${filepath}`, imports)
+      ctx.setImports(filepath, imports)
       debug(filepath, imports)
       return code
     },

src/types.ts

@@ -17,6 +17,11 @@ export interface Options {
    * @default true
    */
   deep: boolean
+  /**
+   * Path alias, same as what you passed to vite root config
+   * @default {}
+   */
+  alias: Record<string, string>
 }
 
 export interface ComponentsInfo {

src/utils.ts

@@ -39,8 +39,11 @@ export function getNameFromFilePath(filePath: string): string {
   return parsedFilePath.name
 }
 
-const cwd = process.cwd()
-
-export function relative(filepath: string) {
-  return path.relative(cwd, filepath)
+export function resolveAlias(filepath: string, alias: Record<string, string>) {
+  let result = filepath
+  Object.entries(alias).forEach(([k, p]) => {
+    if (k.startsWith('/') && k.endsWith('/') && result.startsWith(k))
+      result = path.join(p, result.replace(k, ''))
+  })
+  return result
 }

test/fixture/vite.config.ts

@@ -1,9 +1,19 @@
+import path from 'path'
 import { UserConfig } from 'vite'
 import ViteComponents from 'vite-plugin-components'
 
+const alias = {
+  '/~/': path.resolve(__dirname, 'src'),
+}
+
 const config: UserConfig = {
+  alias: {
+    '/~/': path.resolve(__dirname, 'src'),
+  },
   plugins: [
-    ViteComponents(),
+    ViteComponents({
+      alias,
+    }),
   ],
 }