feat: add VueUse core directives built-in preset

README.md

@@ -11,7 +11,8 @@
 - Auto import register APIs for Vite, Webpack or esbuild powered by [unplugin](https://github.com/unjs/unplugin)
 - TypeScript declaration file generation
 - Auto import for custom APIs defined under specific directories
-- Auto import for Vue template
+- Built-in presets for common libraries: check [presets](./src/presets) folder
+- Auto import for Vue template and directives
 
 ## Install
 
@@ -423,6 +424,33 @@ Unimport.vite({
 })
 ```
 
+#### Built-in Preset for VueUse Core Directives
+
+You can use the built-in VueUse Core directives, you will need:
+- install `@vueuse/core` and `@vueuse/components`
+
+You can add the preset via the built-in preset:
+```ts
+Unimport.vite({
+  presets: ['@vueuse/core/directives'],
+  addons: {
+    vueDirectives: true
+  }
+})
+```
+
+or via preset factory to change the directives prefix:
+```ts
+import { VueUseCoreDirectives } from 'unimport'
+
+Unimport.vite({
+  presets: [VueUseCoreDirectives({ prefix: true })],
+  addons: {
+    vueDirectives: true
+  }
+})
+```
+
 ## 💻 Development
 
 - Clone this repository

src/index.ts

@@ -8,8 +8,8 @@ export {
   resolveBuiltinPresets,
   resolvePreset,
 } from './preset'
-export { builtinPresets } from './presets'
-export type { BuiltinPresetName } from './presets'
+export { builtinPresets, VueUseCoreDirectives } from './presets'
+export type { BuiltinPresetName, VueUseCoreDirectivesOptions } from './presets'
 
 export * from './regexp'
 

src/presets/index.ts

@@ -28,12 +28,14 @@ import vueMacros from './vue-macros'
 import vueRouter from './vue-router'
 import vueRouterComposables from './vue-router-composables'
 import vueuseCore from './vueuse-core'
+import { VueUseCoreDirectives } from './vueuse-core-directives'
 import vueuseHead from './vueuse-head'
 import vuex from './vuex'
 
 export const builtinPresets = {
   '@vue/composition-api': vueCompositionApi,
   '@vueuse/core': vueuseCore,
+  '@vueuse/core/directives': VueUseCoreDirectives,
   '@vueuse/head': vueuseHead,
   'pinia': pinia,
   'preact': preact,
@@ -64,4 +66,7 @@ export const builtinPresets = {
   'date-fns': dateFns,
 }
 
+export { VueUseCoreDirectives }
+
 export type BuiltinPresetName = keyof typeof builtinPresets
+export type { VueUseCoreDirectivesOptions } from './vueuse-core-directives'

src/presets/vueuse-core-directives.ts

@@ -0,0 +1,52 @@
+import type { InlinePreset } from '../types'
+import { readFileSync } from 'node:fs'
+import process from 'node:process'
+import { resolveModule } from 'local-pkg'
+import { defineUnimportPreset } from '../utils'
+
+export interface VueUseCoreDirectivesOptions {
+  /**
+   * Prefix VueUse core directives (to allow use other directives with the same name from another packages):
+   *
+   * When the prefix is enabled, the preset will configure `Vueuse` => `v-vueuse-<directive>: `v-vueuse-on-click-outside`.
+   */
+  prefix?: true
+}
+
+let _cache: InlinePreset | undefined
+
+/* c8 ignore start */
+export function VueUseCoreDirectives(options: VueUseCoreDirectivesOptions = {}): InlinePreset {
+  if (!_cache) {
+    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] })
+      const indexesJson = JSON.parse(readFileSync(path!, 'utf-8'))
+      _cache = defineUnimportPreset({
+        from: '@vueuse/components',
+        meta: { vueDirective: true },
+        imports: indexesJson
+          .functions
+          .filter((i: any) => i.directive && i.name)
+          .map(({ name, docs }: any) => {
+            // name is the component name, we need to use the directive name
+            name = name.replace(/^use/, '')
+            return ({
+              name: `v${name[0].toUpperCase()}${name.slice(1)}`,
+              as: options.prefix ? `vVueuse${name[0].toUpperCase()}${name.slice(1)}` : undefined,
+              meta: { docsUrl: docs },
+            })
+          }),
+      })
+    }
+    catch (error) {
+      console.error(error)
+      throw new Error('[auto-import] failed to load @vueuse/core, have you installed it?')
+    }
+  }
+
+  return _cache
+}
+/* c8 ignore end */

test/public-api.test.ts

@@ -6,6 +6,7 @@ it('public-api', async () => {
   expect(keys)
     .toMatchInlineSnapshot(`
       [
+        "VueUseCoreDirectives",
         "addImportToCode",
         "builtinPresets",
         "createUnimport",