From f859d863b5fa048d9ccac5ef04a9cff2536c0084 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 20 Feb 2025 01:42:33 +0100 Subject: [PATCH 1/4] feat: add VueUse core directives built-in preset --- README.md | 30 ++++++++++++++++- src/index.ts | 4 +-- src/presets/index.ts | 5 +++ src/presets/vueuse-core-directives.ts | 48 +++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 src/presets/vueuse-core-directives.ts 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..76c810db --- /dev/null +++ b/src/presets/vueuse-core-directives.ts @@ -0,0 +1,48 @@ +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 +} + +/* c8 ignore start */ +export function VueUseCoreDirectives(options: VueUseCoreDirectivesOptions = {}): InlinePreset { + let _cache: InlinePreset | undefined + 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) + // name is the component name, we need to use the directive name + .map(({ name, docs }: any) => ({ + 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 */ From 9a89cd1c5925000742bd157fac4bbd2df261cddf Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 20 Feb 2025 01:47:17 +0100 Subject: [PATCH 2/4] chore: update snapshots --- test/public-api.test.ts | 1 + 1 file changed, 1 insertion(+) 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", From b6fc47cb1424f110759278c4b1836e43f44a37b8 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 20 Feb 2025 02:04:51 +0100 Subject: [PATCH 3/4] chore: remove `use` component prefix --- src/presets/vueuse-core-directives.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/presets/vueuse-core-directives.ts b/src/presets/vueuse-core-directives.ts index 76c810db..2d3063b0 100644 --- a/src/presets/vueuse-core-directives.ts +++ b/src/presets/vueuse-core-directives.ts @@ -29,12 +29,15 @@ export function VueUseCoreDirectives(options: VueUseCoreDirectivesOptions = {}): imports: indexesJson .functions .filter((i: any) => i.directive && i.name) - // name is the component name, we need to use the directive name - .map(({ name, docs }: any) => ({ - name: `v${name[0].toUpperCase()}${name.slice(1)}`, - as: options.prefix ? `vVueuse${name[0].toUpperCase()}${name.slice(1)}` : undefined, - meta: { docsUrl: docs }, - })), + .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) { From 71f9208d290add29b3d7ff59c7ed576c8e3bfcd4 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 20 Feb 2025 02:17:07 +0100 Subject: [PATCH 4/4] chore: move `_cache` outside the function --- src/presets/vueuse-core-directives.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/presets/vueuse-core-directives.ts b/src/presets/vueuse-core-directives.ts index 2d3063b0..c6e9287c 100644 --- a/src/presets/vueuse-core-directives.ts +++ b/src/presets/vueuse-core-directives.ts @@ -13,9 +13,10 @@ export interface VueUseCoreDirectivesOptions { prefix?: true } +let _cache: InlinePreset | undefined + /* c8 ignore start */ export function VueUseCoreDirectives(options: VueUseCoreDirectivesOptions = {}): InlinePreset { - let _cache: InlinePreset | undefined if (!_cache) { try { const corePath = resolveModule('@vueuse/core') || process.cwd()