feat: async component resolver (#151)

Co-authored-by: Anthony Fu <[email protected]>

Author: userquin

package.json

@@ -60,6 +60,7 @@
     "test:update": "jest --u"
   },
   "dependencies": {
+    "@antfu/utils": "^0.3.0",
     "@rollup/pluginutils": "^4.1.1",
     "chokidar": "^3.5.2",
     "debug": "^4.3.2",
@@ -72,7 +73,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
-    "@antfu/utils": "^0.3.0",
     "@types/debug": "^4.1.7",
     "@types/jest": "^27.0.2",
     "@types/minimatch": "^3.0.5",

pnpm-lock.yaml

@@ -181,15 +181,15 @@ export class Context {
       })
   }
 
-  findComponent(name: string, excludePaths: string[] = [], rawName?: string): ComponentInfo | undefined {
+  async findComponent(name: string, excludePaths: string[] = [], rawName?: string): Promise<ComponentInfo | undefined> {
     // resolve from fs
     let info = this._componentNameMap[name]
     if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
       return info
 
     // custom resolvers
     for (const resolver of this.options.resolvers) {
-      const result = resolver(name)
+      const result = await resolver(name)
       if (result) {
         if (typeof result === 'string') {
           info = {
@@ -213,12 +213,6 @@ export class Context {
     return undefined
   }
 
-  findComponents(names: string[], excludePaths: string[] = []) {
-    return names
-      .map(name => this.findComponent(name, excludePaths))
-      .filter(Boolean) as ComponentInfo[]
-  }
-
   normalizePath(path: string) {
     // @ts-expect-error backward compatibility
     return resolveAlias(path, this.viteConfig?.resolve?.alias || this.viteConfig?.alias || [])

src/core/context.ts

@@ -9,7 +9,7 @@ import { pascalCase, stringifyComponentImport } from '../utils'
 const debug = Debug('unplugin-vue-components:transform:vue2')
 
 export function Vue2Transformer(ctx: Context): Transformer {
-  return (code, id, path, query) => {
+  return async(code, id, path, query) => {
     ctx.searchGlob()
 
     const sfcPath = ctx.normalizePath(path)
@@ -30,7 +30,7 @@ export function Vue2Transformer(ctx: Context): Transformer {
         debug(`| ${matchedName}`)
         const name = pascalCase(matchedName)
         componentPaths.push(name)
-        const component = ctx.findComponent(name, [sfcPath], matchedName)
+        const component = await ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
           const var_name = `__unplugin_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))

src/core/transforms/vue2.ts

@@ -9,7 +9,7 @@ import { pascalCase, stringifyComponentImport } from '../utils'
 const debug = Debug('unplugin-vue-components:transform:vue3')
 
 export function Vue3Transformer(ctx: Context): Transformer {
-  return (code, id, path, query) => {
+  return async(code, id, path, query) => {
     ctx.searchGlob()
 
     const sfcPath = ctx.normalizePath(path)
@@ -29,7 +29,7 @@ export function Vue3Transformer(ctx: Context): Transformer {
         debug(`| ${matchedName}`)
         const name = pascalCase(matchedName)
         componentPaths.push(name)
-        const component = ctx.findComponent(name, [sfcPath], matchedName)
+        const component = await ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
           const var_name = `__unplugin_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))

src/core/transforms/vue3.ts

@@ -1,5 +1,6 @@
 import type { FilterPattern } from '@rollup/pluginutils'
 import type { TransformResult } from 'unplugin'
+import type { Awaitable } from '@antfu/utils'
 
 export interface ImportInfo {
   name?: string
@@ -13,9 +14,9 @@ export interface ComponentInfo extends ImportInfo {
   sideEffects?: SideEffectsInfo
 }
 
-export type ComponentResolveResult = string | ComponentInfo
+export type ComponentResolveResult = Awaitable<string | ComponentInfo | null | undefined | void>
 
-export type ComponentResolver = (name: string) => ComponentResolveResult | null | undefined | void
+export type ComponentResolver = (name: string) => ComponentResolveResult
 
 export interface UILibraryOptions {
   name: string
@@ -25,7 +26,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>) => TransformResult | null | Promise<null | TransformResult>
+export type Transformer = (code: string, id: string, path: string, query: Record<string, string>) => Awaitable<TransformResult | null>
 
 /**
  * Plugin options.