feat(vueuse): support directive import (#509)

Author: azaleta

README.md

@@ -202,6 +202,7 @@ Supported Resolvers:
 - [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/view-ui.ts)
 - [Vuetify](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vuetify.ts)
 - [VueUse Components](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse.ts)
+- [VueUse Directives](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse-directive.ts)
 - [Dev UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/devui.ts)
 
 ```ts

src/core/resolvers/index.ts

@@ -12,6 +12,7 @@ export * from './veui'
 export * from './view-ui'
 export * from './vuetify'
 export * from './vueuse'
+export * from './vueuse-directive'
 export * from './quasar'
 export * from './devui'
 export * from './arco'

src/core/resolvers/vueuse-directive.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from 'fs'
+import { resolveModule } from 'local-pkg'
+import type { ComponentResolver } from '../../types'
+
+let directives: string[] | undefined
+
+/**
+ * Resolver for VueUse
+ *
+ * @link https://github.com/vueuse/vueuse
+ */
+export function VueUseDirectiveResolver(): ComponentResolver {
+  return {
+    type: 'directive',
+    resolve: (name: string) => {
+      if (!directives) {
+        let indexesJson: any
+        try {
+          const corePath = resolveModule('@vueuse/core') || process.cwd()
+          const path = resolveModule('@vueuse/core/indexes.json')
+            || resolveModule('@vueuse/metadata/index.json')
+            || resolveModule('@vueuse/metadata/index.json', { paths: [corePath] })
+          indexesJson = JSON.parse(readFileSync(path!, 'utf-8'))
+          directives = indexesJson
+            .functions
+            .filter((i: any) => i.directive && i.name)
+            .map(({ name }: any) => name[0].toUpperCase() + name.slice(1))
+        }
+        catch (error) {
+          console.error(error)
+          throw new Error('[vue-components] failed to load @vueuse/core, have you installed it?')
+        }
+      }
+
+      if (directives && directives.includes(name))
+        return { name: `v${name}`, as: name, from: '@vueuse/components' }
+    },
+  }
+}