feat: new config customComponentResolvers

Author: antfu

example/src/App.vue

@@ -24,6 +24,11 @@
     <MarkdownA />
     <MarkdownB />
   </div>
+
+  <div class="block">
+    <h1>Custom Resolvers (1)</h1>
+    <MyCustom />
+  </div>
 </template>
 
 <script setup lang='ts'>

example/src/CustomResolved.vue

@@ -0,0 +1,3 @@
+<template>
+  <h3>Custom Resolved: Hi!</h3>
+</template>

example/vite.config.ts

@@ -19,6 +19,10 @@ const config: UserConfig = {
       directoryAsNamespace: true,
       globalNamespaces: ['global'],
       customLoaderMatcher: ({ path }) => path.endsWith('.md'),
+      customComponentResolvers: (name) => {
+        if (name === 'MyCustom')
+          return '/src/CustomResolved.vue'
+      },
     }),
   ],
 }

src/context.ts

@@ -1,6 +1,6 @@
 import { relative } from 'path'
 import Debug from 'debug'
-import { ComponentsInfo, ComponentsImportMap, Options } from './types'
+import { ComponentsInfo, ComponentsImportMap, Options, ComponentResolver } from './types'
 import { normalize, toArray, getNameFromFilePath, resolveAlias } from './utils'
 import { searchComponents } from './fs/glob'
 
@@ -15,12 +15,14 @@ export class Context {
   private _componentNameMap: Record<string, ComponentsInfo> = {}
   private _imports: ComponentsImportMap = {}
   private _importsResolveTasks: Record<string, [(null | Promise<string[]>), (null | ((result: string[]) => void))]> = {}
+  private _resolvers: ComponentResolver[]
 
   constructor(
     public readonly options: Options,
   ) {
-    const { extensions, dirs, deep } = options
+    const { extensions, dirs, deep, customComponentResolvers } = options
     const exts = toArray(extensions)
+    this._resolvers = toArray(customComponentResolvers)
 
     if (!exts.length)
       throw new Error('[vite-plugin-components] extensions are required to search for components')
@@ -79,20 +81,29 @@ export class Context {
           console.warn(`[vite-plugin-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
           return
         }
-        this._componentNameMap[name] = { name, path }
+        this._componentNameMap[name] = { name, path: `/${path}` }
       })
   }
 
   findComponent(name: string, excludePaths: string[] = []) {
+    // custom resolvers
+    for (const resolver of this._resolvers) {
+      const path = resolver(name)
+      if (path)
+        return { name, path }
+    }
+
+    // resolve from fs
     const info = this._componentNameMap[name]
-    if (info && !excludePaths.includes(info.path))
+    if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
       return info
+
     return undefined
   }
 
   findComponents(names: string[], excludePaths: string[] = []) {
     return names
-      .map((name) => this.findComponent(name, excludePaths))
+      .map(name => this.findComponent(name, excludePaths))
       .filter(Boolean) as ComponentsInfo[]
   }
 

src/generator/resolver.ts

@@ -33,7 +33,7 @@ export async function generateResolver(ctx: Context, reqPath: string) {
   debug('using', names, 'imported', components.map(i => i.name))
 
   return `
-    ${components.map(({ name, path }) => `import ${name} from "/${path}"`).join('\n')}
+    ${components.map(({ name, path }) => `import ${name} from "${path}"`).join('\n')}
 
     export default (components) => { 
       return Object.assign({}, { ${components.map(i => i.name).join(', ')} }, components) 

src/index.ts

@@ -20,6 +20,7 @@ const defaultOptions: Options = {
   root: process.cwd(),
 
   customLoaderMatcher: () => false,
+  customComponentResolvers: [],
 }
 
 function VitePluginComponents(options: Partial<Options> = {}): Plugin {

src/transforms/customComponent.ts

@@ -39,7 +39,7 @@ export function CustomComponentTransformer(ctx: Context): Transform {
             continue
 
           const var_name = `__vite_component_${id}`
-          lines.push(`import ${var_name} from "/${component.path}"`)
+          lines.push(`import ${var_name} from "${component.path}"`)
           id += 1
 
           injected.push(`"${name}": ${var_name}`)

src/transforms/vueScriptSetup.ts

@@ -8,7 +8,9 @@ const debug = Debug('vite-plugin-components:transform:script-setup')
 export function VueScriptSetupTransformer(ctx: Context): Transform {
   return {
     test({ path, query }) {
-      return path.endsWith('.vue') && query.type === 'script' && (Boolean(query.setup) || query.setup === '')
+      return path.endsWith('.vue')
+        && query.type === 'script'
+        && (Boolean(query.setup) || query.setup === '')
     },
     transform({ code, path, isBuild }) {
       const sfcPath = ctx.normalizePath(path)
@@ -23,7 +25,7 @@ export function VueScriptSetupTransformer(ctx: Context): Transform {
           const component = ctx.findComponent(normalize(match), [sfcPath])
           if (component) {
             const var_name = `__vite_component_${id}`
-            head.push(`import ${var_name} from "/${component.path}"`)
+            head.push(`import ${var_name} from "${component.path}"`)
             id += 1
             return var_name
           }

src/types.ts

@@ -1,5 +1,7 @@
 import { Transform } from 'vite'
 
+export type ComponentResolver = (name: string) => string | null | undefined
+
 /**
  * Plugin options.
  */
@@ -53,6 +55,11 @@ export interface Options {
    * @default ()=>false
    */
   customLoaderMatcher: Transform['test']
+
+  /**
+   * Pass a custom function to resolve the component importing path from the component name.
+   */
+  customComponentResolvers: ComponentResolver | ComponentResolver[]
 }
 
 export interface ComponentsInfo {