diff --git a/README.md b/README.md index b3b04b05..dc7aca86 100644 --- a/README.md +++ b/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 diff --git a/src/index.ts b/src/index.ts index c48eb9a0..a933c86c 100644 --- a/src/index.ts +++ b/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' diff --git a/src/presets/index.ts b/src/presets/index.ts index 103cf394..761583fa 100644 --- a/src/presets/index.ts +++ b/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' diff --git a/src/presets/vueuse-core-directives.ts b/src/presets/vueuse-core-directives.ts new file mode 100644 index 00000000..c6e9287c --- /dev/null +++ b/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-: `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 */ diff --git a/test/public-api.test.ts b/test/public-api.test.ts index be10989d..ba2b0fff 100644 --- a/test/public-api.test.ts +++ b/test/public-api.test.ts @@ -6,6 +6,7 @@ it('public-api', async () => { expect(keys) .toMatchInlineSnapshot(` [ + "VueUseCoreDirectives", "addImportToCode", "builtinPresets", "createUnimport",