fix: shouldn't using component resolver to resolve directive

Author: hannoeru

README.md

@@ -288,6 +288,7 @@ Components({
   // auto import for directives
   // default: `true` for Vue 3, `false` for Vue 2
   // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
+  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
   directives: true,
 
   // filters for transforming targets

package.json

@@ -60,8 +60,18 @@
     "test:update": "jest --u"
   },
   "peerDependencies": {
+    "@babel/parser": "^7.15.8",
+    "@babel/traverse": "^7.15.4",
     "vue": "2 || 3"
   },
+  "peerDependenciesMeta": {
+    "@babel/parser": {
+      "optional": true
+    },
+    "@babel/traverse": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@antfu/utils": "^0.3.0",
     "@rollup/pluginutils": "^4.1.1",

src/core/context.ts

@@ -186,7 +186,10 @@ export class Context {
 
     // custom resolvers
     for (const resolver of this.options.resolvers) {
-      const result = await resolver(name, type)
+      if (resolver.type !== type)
+        continue
+
+      const result = await resolver.resolve(name)
       if (result) {
         if (typeof result === 'string') {
           info = {

src/core/helpers/libraryResolver.ts

@@ -36,27 +36,33 @@ export function LibraryResolver(options: UILibraryOptions): ComponentResolver {
   if (!entries) {
     // eslint-disable-next-line no-console
     console.warn(`[unplugin-vue-components] Failed to load Vetur tags from library "${libraryName}"`)
-    return () => {}
+    return {
+      type: 'component',
+      resolve: () => {},
+    }
   }
 
   debug(entries)
 
   const prefixKebab = kebabCase(prefix)
   const kebabEntries = entries.map(name => ({ name, kebab: kebabCase(name) }))
 
-  return (name) => {
-    const kebab = kebabCase(name)
-    let componentName = kebab
+  return {
+    type: 'component',
+    resolve: (name) => {
+      const kebab = kebabCase(name)
+      let componentName = kebab
 
-    if (prefixKebab) {
-      if (!kebab.startsWith(`${prefixKebab}-`))
-        return
-      componentName = kebab.slice(prefixKebab.length + 1)
-    }
+      if (prefixKebab) {
+        if (!kebab.startsWith(`${prefixKebab}-`))
+          return
+        componentName = kebab.slice(prefixKebab.length + 1)
+      }
 
-    for (const entry of kebabEntries) {
-      if (entry.kebab === componentName)
-        return { path: libraryName, importName: entry.name }
-    }
+      for (const entry of kebabEntries) {
+        if (entry.kebab === componentName)
+          return { path: libraryName, importName: entry.name }
+      }
+    },
   }
 }

src/core/options.ts

@@ -24,7 +24,7 @@ export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'tr
 export function resolveOptions(options: Options, root: string): ResolvedOptions {
   const resolved = Object.assign({}, defaultOptions, options) as ResolvedOptions
   resolved.libraries = toArray(resolved.libraries).map(i => typeof i === 'string' ? { name: i } : i)
-  resolved.resolvers = toArray(resolved.resolvers)
+  resolved.resolvers = toArray(resolved.resolvers).flat()
   resolved.resolvers.push(...resolved.libraries.map(lib => LibraryResolver(lib)))
   resolved.extensions = toArray(resolved.extensions)
 

src/core/resolvers/antdv.ts

@@ -228,21 +228,24 @@ function getSideEffects(compName: string, options: AntDesignVueResolverOptions):
  * @link https://antdv.com/
  */
 export function AntDesignVueResolver(options: AntDesignVueResolverOptions = {}): ComponentResolver {
-  return (name: string) => {
-    if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) {
-      return {
-        importName: name,
-        path: '@ant-design/icons-vue',
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (options.resolveIcons && name.match(/(Outlined|Filled|TwoTone)$/)) {
+        return {
+          importName: name,
+          path: '@ant-design/icons-vue',
+        }
       }
-    }
 
-    if (name.match(/^A[A-Z]/) && !options?.exclude?.includes(name)) {
-      const importName = name.slice(1)
-      return {
-        importName,
-        path: 'ant-design-vue/es',
-        sideEffects: getSideEffects(importName, options),
+      if (name.match(/^A[A-Z]/) && !options?.exclude?.includes(name)) {
+        const importName = name.slice(1)
+        return {
+          importName,
+          path: 'ant-design-vue/es',
+          sideEffects: getSideEffects(importName, options),
+        }
       }
-    }
+    },
   }
 }

src/core/resolvers/element-plus.ts

@@ -139,7 +139,7 @@ function resolveDirective(name: string, options: ElementPlusResolverOptionsResol
  */
 export function ElementPlusResolver(
   options: ElementPlusResolverOptions = {},
-): ComponentResolver {
+): ComponentResolver[] {
   const optionsResolved: ElementPlusResolverOptionsResolved = {
     ssr: false,
     version: getPkgVersion('element-plus', '1.1.0-beta.21'),
@@ -148,12 +148,18 @@ export function ElementPlusResolver(
     ...options,
   }
 
-  return (name: string, type) => {
-    switch (type) {
-      case 'component':
+  return [
+    {
+      type: 'component',
+      resolve: (name: string) => {
         return resolveComponent(name, optionsResolved)
-      case 'directive':
+      },
+    },
+    {
+      type: 'directive',
+      resolve: (name: string) => {
         return resolveDirective(name, optionsResolved)
-    }
-  }
+      },
+    },
+  ]
 }

src/core/resolvers/element-ui.ts

@@ -43,19 +43,22 @@ function getSideEffects(
  * @author @nabaonan
  */
 export function ElementUiResolver(options: ElementUiResolverOptions = {}): ComponentResolver {
-  return (name: string) => {
-    if (name.startsWith('El')) {
-      const compName = name.slice(2)
-      const partialName = kebabCase(compName)
-      if (partialName === 'collapse-transition') {
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (name.startsWith('El')) {
+        const compName = name.slice(2)
+        const partialName = kebabCase(compName)
+        if (partialName === 'collapse-transition') {
+          return {
+            path: `element-ui/lib/transitions/${partialName}`,
+          }
+        }
         return {
-          path: `element-ui/lib/transitions/${partialName}`,
+          path: `element-ui/lib/${partialName}`,
+          sideEffects: getSideEffects(partialName, options),
         }
       }
-      return {
-        path: `element-ui/lib/${partialName}`,
-        sideEffects: getSideEffects(partialName, options),
-      }
-    }
+    },
   }
 }

src/core/resolvers/headless-ui.ts

@@ -48,8 +48,11 @@ const components = [
  * @link https://github.com/tailwindlabs/headlessui
  */
 export function HeadlessUiResolver(): ComponentResolver {
-  return (name: string) => {
-    if (components.includes(name))
-      return { importName: name, path: '@headlessui/vue' }
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (components.includes(name))
+        return { importName: name, path: '@headlessui/vue' }
+    }
   }
 }

src/core/resolvers/idux.ts

@@ -30,19 +30,22 @@ export interface IduxResolverOptions {
  * @link https://idux.site
  */
 export function IduxResolver(options: IduxResolverOptions = {}): ComponentResolver {
-  return (name: string) => {
-    if (name.match(/^Ix[A-Z]/)) {
-      const { importStyle } = options
-      const compName = name.slice(2)
-      const kebabCaseName = kebabCase(compName)
-      const isCdk = cdkNames.includes(kebabCaseName)
-      const packageName = isCdk ? 'cdk' : 'components'
-      const dirname = getDirname(kebabCaseName)
-      const path = `@idux/${packageName}/${dirname}`
-      const sideEffects = isCdk || !importStyle ? undefined : `${path}/style/${importStyle === 'css' ? 'css' : 'index'}`
-
-      return { importName: name, path, sideEffects }
-    }
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      if (name.match(/^Ix[A-Z]/)) {
+        const { importStyle } = options
+        const compName = name.slice(2)
+        const kebabCaseName = kebabCase(compName)
+        const isCdk = cdkNames.includes(kebabCaseName)
+        const packageName = isCdk ? 'cdk' : 'components'
+        const dirname = getDirname(kebabCaseName)
+        const path = `@idux/${packageName}/${dirname}`
+        const sideEffects = isCdk || !importStyle ? undefined : `${path}/style/${importStyle === 'css' ? 'css' : 'index'}`
+
+        return { importName: name, path, sideEffects }
+      }
+    },
   }
 }